diff --git a/frontend/components/PlatformSelector/PlatformSelector.tsx b/frontend/components/PlatformSelector/PlatformSelector.tsx index bb1a8ece85..4cbd7f5686 100644 --- a/frontend/components/PlatformSelector/PlatformSelector.tsx +++ b/frontend/components/PlatformSelector/PlatformSelector.tsx @@ -1,4 +1,5 @@ import React from "react"; +import classNames from "classnames"; import Checkbox from "components/forms/fields/Checkbox"; interface IPlatformSelectorProps { @@ -11,6 +12,7 @@ interface IPlatformSelectorProps { setCheckWindows: (val: boolean) => void; setCheckLinux: (val: boolean) => void; setCheckChrome: (val: boolean) => void; + disabled?: boolean; } export const PlatformSelector = ({ @@ -23,17 +25,23 @@ export const PlatformSelector = ({ setCheckWindows, setCheckLinux, setCheckChrome, + disabled = false, }: IPlatformSelectorProps): JSX.Element => { const baseClass = "platform-selector"; + const labelClasses = classNames("form-field__label", { + [`form-field__label--disabled`]: disabled, + }); + return (
- Checks on: + Checks on: setCheckDarwin(value)} wrapperClassName={`${baseClass}__platform-checkbox-wrapper`} + disabled={disabled} > macOS @@ -41,6 +49,7 @@ export const PlatformSelector = ({ value={checkWindows} onChange={(value: boolean) => setCheckWindows(value)} wrapperClassName={`${baseClass}__platform-checkbox-wrapper`} + disabled={disabled} > Windows @@ -48,6 +57,7 @@ export const PlatformSelector = ({ value={checkLinux} onChange={(value: boolean) => setCheckLinux(value)} wrapperClassName={`${baseClass}__platform-checkbox-wrapper`} + disabled={disabled} > Linux @@ -55,6 +65,7 @@ export const PlatformSelector = ({ value={checkChrome} onChange={(value: boolean) => setCheckChrome(value)} wrapperClassName={`${baseClass}__platform-checkbox-wrapper`} + disabled={disabled} > ChromeOS diff --git a/frontend/components/PlatformSelector/_styles.scss b/frontend/components/PlatformSelector/_styles.scss index c78115eccd..63fe84e7e9 100644 --- a/frontend/components/PlatformSelector/_styles.scss +++ b/frontend/components/PlatformSelector/_styles.scss @@ -7,4 +7,8 @@ align-items: center; gap: 12px; } + + .form-field__label--disabled { + color: $ui-fleet-black-50; + } } diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx index 72969c256b..f05b097599 100644 --- a/frontend/components/forms/fields/InputField/InputField.jsx +++ b/frontend/components/forms/fields/InputField/InputField.jsx @@ -120,6 +120,10 @@ class InputField extends Component { [`${baseClass}__textarea`]: type === "textarea", }); + const inputWrapperClasses = classnames(inputWrapperClass, { + [`input-field--disabled`]: disabled, + }); + const formFieldProps = pick(this.props, [ "helpText", "label", @@ -144,7 +148,7 @@ class InputField extends Component {