fix: form control disabled states (#317)

ocean-ds · Oct 1, 2020 · 9fd0bf0 · 9fd0bf0
1 parent c98b844
commit 9fd0bf0
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 11 deletions.
diff --git a/packages/ocean-components/src/FormControl/FormControl.tsx b/packages/ocean-components/src/FormControl/FormControl.tsx
@@ -30,6 +30,11 @@ export type FormControlProps = {
    * @default false
    */
   blocked?: boolean;
+  /**
+   * If true, should be displayed in a disabled state.
+   * @default false
+   */
+  disabled?: boolean;
 };
 
 const FormControl: React.FC<FormControlProps> = ({
@@ -39,10 +44,17 @@ const FormControl: React.FC<FormControlProps> = ({
   helperText,
   error,
   blocked,
+  disabled,
 }) => (
   <div className="ods-form-control__root">
     {label && (
-      <label className="ods-form-control__label" htmlFor={htmlFor}>
+      <label
+        className={classNames(
+          'ods-form-control__label',
+          disabled && 'ods-form-control__label--disabled'
+        )}
+        htmlFor={htmlFor}
+      >
         {label}
       </label>
     )}
@@ -58,7 +70,8 @@ const FormControl: React.FC<FormControlProps> = ({
       <p
         className={classNames(
           'ods-form-control__helper-text',
-          error && 'ods-form-control__helper-text--error'
+          error && 'ods-form-control__helper-text--error',
+          disabled && 'ods-form-control__helper-text--disabled'
         )}
       >
         {helperText}

diff --git a/packages/ocean-components/src/FormControl/__tests__/FormControl.test.tsx b/packages/ocean-components/src/FormControl/__tests__/FormControl.test.tsx
@@ -57,3 +57,18 @@ test('renders a error state', () => {
     'ods-form-control__helper-text ods-form-control__helper-text--error'
   );
 });
+
+test('renders a disabled state', () => {
+  const { getByText } = setup({
+    disabled: true,
+    label: 'Label Test',
+    helperText: 'Error message.',
+  });
+
+  expect(getByText('Label Test').className).toBe(
+    'ods-form-control__label ods-form-control__label--disabled'
+  );
+  expect(getByText('Error message.').className).toBe(
+    'ods-form-control__helper-text ods-form-control__helper-text--disabled'
+  );
+});
diff --git a/packages/ocean-components/src/FormControl/stories/FormControl.stories.mdx b/packages/ocean-components/src/FormControl/stories/FormControl.stories.mdx
@@ -13,12 +13,14 @@ The API documentation of the FormControl React component. Learn more about the p
 
 ## CSS
 
-| Global class                            | Description                                               |
-| --------------------------------------- | --------------------------------------------------------- |
-| .ods-form-control\_\_root               | Styles applied to the div element.                        |
-| .ods-form-control\_\_label              | Styles applied to the label element.                      |
-| .ods-form-control\_\_element--blocked   | Styles applied to the children element if blocked={true}. |
-| .ods-form-control\_\_helper-text        | Styles applied to the p element.                          |
-| .ods-form-control\_\_helper-text--error | Styles applied to the p element if error={true}.          |
+| Global class                               | Description                                               |
+| ------------------------------------------ | --------------------------------------------------------- |
+| .ods-form-control\_\_root                  | Styles applied to the div element.                        |
+| .ods-form-control\_\_label                 | Styles applied to the label element.                      |
+| .ods-form-control\_\_label--disabled       | Styles applied to the label element if disabled={true}.   |
+| .ods-form-control\_\_element--blocked      | Styles applied to the children element if blocked={true}. |
+| .ods-form-control\_\_helper-text           | Styles applied to the p element.                          |
+| .ods-form-control\_\_helper-text--error    | Styles applied to the p element if error={true}.          |
+| .ods-form-control\_\_helper-text--disabled | Styles applied to the p element if disabled={true}.       |
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/Pagnet/ocean-ds-web/blob/master/src/FormControl/FormControl.tsx) for more detail.
diff --git a/packages/ocean-components/src/FormControl/styles/form-control.scss b/packages/ocean-components/src/FormControl/styles/form-control.scss
@@ -14,6 +14,10 @@
     line-height: $line-height-medium;
     color: $color-interface-dark-down;
     margin-bottom: $spacing-stack-xxs;
+
+    &--disabled {
+      color: $color-interface-dark-up;
+    }
   }
 
   &__element {
@@ -32,5 +36,9 @@
     &--error {
       color: $color-status-negative-pure;
     }
+
+    &--disabled {
+      color: $color-interface-dark-up;
+    }
   }
 }
diff --git a/packages/ocean-components/src/Input/Input.tsx b/packages/ocean-components/src/Input/Input.tsx
@@ -14,7 +14,7 @@ type InputProps = {
   React.ComponentPropsWithoutRef<'input'>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type, className, label, helperText, blocked, error, id, ...rest },
+  { type, className, label, helperText, blocked, error, id, disabled, ...rest },
   ref
 ) {
   return (
@@ -24,6 +24,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
       helperText={helperText}
       error={error}
       blocked={blocked}
+      disabled={disabled}
     >
       <input
         ref={ref}
@@ -34,6 +35,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
           error && 'ods-input--error',
           className
         )}
+        disabled={disabled}
         {...rest}
       />
     </FormControl>

diff --git a/packages/ocean-components/src/TextArea/TextArea.tsx b/packages/ocean-components/src/TextArea/TextArea.tsx
@@ -9,7 +9,7 @@ type TextAreaProps = Omit<FormControlProps, 'children'> &
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(
-    { className, label, helperText, blocked, error, id, ...rest },
+    { className, label, helperText, blocked, error, id, disabled, ...rest },
     ref
   ) {
     return (
@@ -19,6 +19,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         helperText={helperText}
         error={error}
         blocked={blocked}
+        disabled={disabled}
       >
         <textarea
           ref={ref}
@@ -28,6 +29,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             error && 'ods-textarea--error',
             className
           )}
+          disabled={disabled}
           {...rest}
         />
       </FormControl>