refactor(textareafield): use inputlabel and re-export as subcomp (#1701)

* refactor(textareafield): use inputlabel and re-export as subcomp * feat(textareafield)!: remove top level subcomponent
chanzuckerberg · Jul 19, 2023 · e6cc9e5 · e6cc9e5
1 parent 06c8757
commit e6cc9e5
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 108 deletions.
diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css
@@ -33,6 +33,9 @@
   color: var(--eds-theme-color-text-neutral-subtle);
   font: var(--eds-theme-typography-body-sm);
 }
+.input-field__required-text--disabled {
+  color: var(--eds-theme-color-text-disabled);
+}
 
 .input-field--has-fieldNote {
   margin-bottom: var(--eds-size-half);

diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
@@ -165,6 +165,11 @@ export const InputField: InputFieldType = forwardRef(
       disabled && styles['input-field__label--disabled'],
     );
 
+    const requiredTextClassName = clsx(
+      styles['input-field__required-text'],
+      disabled && styles['input-field__required-text--disabled'],
+    );
+
     const inputBodyClassName = clsx(
       styles['input-field__body'],
       fieldNote && styles['input-field--has-fieldNote'],
@@ -188,11 +193,7 @@ export const InputField: InputFieldType = forwardRef(
               </InputLabel>
             )}
             {required && (
-              <Text
-                as="span"
-                className={styles['input-field__required-text']}
-                size="sm"
-              >
+              <Text as="span" className={requiredTextClassName} size="sm">
                 Required
               </Text>
             )}

diff --git a/src/components/InputField/__snapshots__/InputField.test.ts.snap b/src/components/InputField/__snapshots__/InputField.test.ts.snap
@@ -1339,7 +1339,7 @@ exports[`<InputField /> RequiredVariants story renders snapshot 1`] = `
           Label text
         </label>
         <span
-          class="text text--sm input-field__required-text"
+          class="text text--sm input-field__required-text input-field__required-text--disabled"
         >
           Required
         </span>
@@ -1376,7 +1376,7 @@ exports[`<InputField /> RequiredVariants story renders snapshot 1`] = `
           Label text
         </label>
         <span
-          class="text text--sm input-field__required-text"
+          class="text text--sm input-field__required-text input-field__required-text--disabled"
         >
           Required
         </span>

diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
diff --git a/src/components/TextArea/index.ts b/src/components/TextArea/index.ts
diff --git a/src/components/TextareaField/TextareaField.module.css b/src/components/TextareaField/TextareaField.module.css
@@ -4,21 +4,43 @@
     # TEXTAREA FIELD
 \*------------------------------------*/
 
+/**
+ * Default input styles 
+ */
+.textarea {
+  @mixin inputStyles;
+}
+
+.textarea--disabled:focus {
+  outline: none;
+}
+
 /**
  * Wraps the Label and the optional/required indicator.
  */
 .textarea-field__overline {
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--eds-size-half);
-  color: var(--eds-theme-color-form-label);
 }
 
 .textarea-field__overline--no-label {
   justify-content: flex-end;
 }
 
-.textarea-field__overline--disabled {
+.textarea-field__label {
+  color: var(--eds-theme-color-form-label);
+  font: var(--eds-theme-typography-form-label);
+}
+.textarea-field__label--disabled {
+  color: var(--eds-theme-color-text-disabled);
+}
+
+.textarea-field__required-text {
+  color: var(--eds-theme-color-text-neutral-subtle);
+  font: var(--eds-theme-typography-body-sm);
+}
+.textarea-field__required-text--disabled {
   color: var(--eds-theme-color-text-disabled);
 }
 

diff --git a/src/components/TextareaField/TextareaField.tsx b/src/components/TextareaField/TextareaField.tsx
@@ -7,12 +7,11 @@ import type {
   ForwardedRefComponent,
 } from '../../util/utility-types';
 import FieldNote from '../FieldNote';
-import Label from '../Label';
+import InputLabel from '../InputLabel';
 import Text from '../Text';
-import TextArea from '../TextArea';
 import styles from './TextareaField.module.css';
 
-export type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextareaFieldProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   /**
    * Text content of the field upon instantiation
    */
@@ -52,10 +51,66 @@ export type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     }
   >;
 
-type TextareaFieldType = ForwardedRefComponent<HTMLTextAreaElement, Props> & {
+type TextareaFieldType = ForwardedRefComponent<
+  HTMLTextAreaElement,
+  TextareaFieldProps
+> & {
   TextArea?: typeof TextArea;
+  Label?: typeof InputLabel;
 };
 
+type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  /**
+   * CSS class names that can be appended to the component
+   */
+  className?: string;
+  /**
+   * Text default contents of the field
+   */
+  children?: string;
+  /**
+   * Whether the disabled stat is active
+   */
+  disabled?: boolean;
+  /**
+   * Whether the error state is active
+   */
+  isError?: boolean;
+};
+
+/**
+ * Base component, applying styles to a <textarea> tag
+ */
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      className,
+      children,
+      disabled,
+      defaultValue = '',
+      isError = false,
+      ...other
+    },
+    ref,
+  ) => {
+    const componentClassName = clsx(
+      styles['textarea'],
+      isError && styles['error'],
+      disabled && styles['textarea--disabled'],
+      className,
+    );
+
+    return (
+      <textarea
+        className={componentClassName}
+        defaultValue={children || defaultValue}
+        ref={ref}
+        {...other}
+      ></textarea>
+    );
+  },
+);
+
 /**
  * `import {TextareaField} from "@chanzuckerberg/eds";`
  *
@@ -106,6 +161,15 @@ export const TextareaField: TextareaFieldType = forwardRef(
       !label && styles['textarea-field__overline--no-label'],
       disabled && styles['textarea-field__overline--disabled'],
     );
+    const labelClassName = clsx(
+      styles['textarea-field__label'],
+      disabled && styles['textarea-field__label--disabled'],
+    );
+
+    const requiredTextClassName = clsx(
+      styles['textarea-field__required-text'],
+      disabled && styles['textarea-field__required-text--disabled'],
+    );
     const fieldLengthCountClassName = clsx(
       textExceedsLength && styles['textarea-field--invalid-length'],
     );
@@ -114,9 +178,13 @@ export const TextareaField: TextareaFieldType = forwardRef(
       <div className={componentClassName}>
         {shouldRenderOverline && (
           <div className={overlineClassName}>
-            {label && <Label htmlFor={idVar} text={label} />}
+            {label && (
+              <InputLabel className={labelClassName} htmlFor={idVar}>
+                {label}
+              </InputLabel>
+            )}
             {required && (
-              <Text as="p" size="sm">
+              <Text as="p" className={requiredTextClassName} size="sm">
                 Required
               </Text>
             )}
@@ -168,3 +236,4 @@ export const TextareaField: TextareaFieldType = forwardRef(
 
 TextareaField.displayName = 'TextareaField';
 TextareaField.TextArea = TextArea;
+TextareaField.Label = InputLabel;