refactor(inputfield): use inputlabel and re-export as subcomp (#1699)

* refactor(inputfield): use inputlabel and re-export as subcomp * docs(inputfield): add comment spacing
chanzuckerberg · Jul 19, 2023 · 06c8757 · 06c8757
1 parent 930a369
commit 06c8757
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 66 deletions.
diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css
@@ -9,14 +9,10 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--eds-size-half);
-  color: var(--eds-theme-color-form-label);
 }
 .input-field__overline--no-label {
   justify-content: flex-end;
 }
-.input-field__overline--disabled {
-  color: var(--eds-theme-color-text-disabled);
-}
 
 /**
  * Input field body
@@ -25,8 +21,17 @@
   position: relative;
 }
 
+.input-field__label {
+  color: var(--eds-theme-color-form-label);
+  font: var(--eds-theme-typography-form-label);
+}
+.input-field__label--disabled {
+  color: var(--eds-theme-color-text-disabled);
+}
+
 .input-field__required-text {
   color: var(--eds-theme-color-text-neutral-subtle);
+  font: var(--eds-theme-typography-body-sm);
 }
 
 .input-field--has-fieldNote {

diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
@@ -8,7 +8,7 @@ import type {
 } from '../../util/utility-types';
 import FieldNote from '../FieldNote';
 import Input from '../Input';
-import Label from '../Label';
+import InputLabel from '../InputLabel';
 import Text from '../Text';
 import styles from './InputField.module.css';
 
@@ -127,6 +127,7 @@ export type Props = React.InputHTMLAttributes<HTMLInputElement> & {
 
 type InputFieldType = ForwardedRefComponent<HTMLInputElement, Props> & {
   Input?: typeof Input;
+  Label?: typeof InputLabel;
 };
 
 /**
@@ -157,7 +158,11 @@ export const InputField: InputFieldType = forwardRef(
     const overlineClassName = clsx(
       styles['input-field__overline'],
       !label && styles['input-field__overline--no-label'],
-      disabled && styles['input-field__overline--disabled'],
+    );
+
+    const labelClassName = clsx(
+      styles['input-field__label'],
+      disabled && styles['input-field__label--disabled'],
     );
 
     const inputBodyClassName = clsx(
@@ -177,7 +182,11 @@ export const InputField: InputFieldType = forwardRef(
       <div className={className}>
         {shouldRenderOverline && (
           <div className={overlineClassName}>
-            {label && <Label htmlFor={idVar} text={label} />}
+            {label && (
+              <InputLabel className={labelClassName} htmlFor={idVar}>
+                {label}
+              </InputLabel>
+            )}
             {required && (
               <Text
                 as="span"
@@ -224,3 +233,4 @@ export const InputField: InputFieldType = forwardRef(
 
 InputField.displayName = 'InputField';
 InputField.Input = Input;
+InputField.Label = InputLabel;