feat(textinput, textfield): migrate components from EDSCandidates

chanzuckerberg · Aug 27, 2022 · a337a40 · a337a40
2 parents 2d854a3 + cdd62da
commit a337a40
Show file tree

Hide file tree

Showing 21 changed files with 2,294 additions and 432 deletions.
diff --git a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx b/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx
@@ -78,9 +78,8 @@ export const CoursePlannerStep1 = () => (
             How many times per week do you have class?
           </Text>
           <TextField
+            aria-label="times per week"
             className="u-margin-bottom-xl"
-            hideLabel
-            label="times per week"
             min={0}
             placeholder="times per week"
             type="number"
@@ -89,9 +88,8 @@ export const CoursePlannerStep1 = () => (
             How many minutes is each class?
           </Text>
           <TextField
+            aria-label="minutes"
             className="u-margin-bottom-xl"
-            hideLabel
-            label="minutes"
             min={0}
             placeholder="minutes"
             type="number"

diff --git a/src/components/FieldNote/FieldNote.module.css b/src/components/FieldNote/FieldNote.module.css
@@ -5,23 +5,20 @@
 \*------------------------------------*/
 
 /**
- * Field note
+ * Fieldnote
  */
 .field-note {
-  display: inline-block;
-  @mixin eds-theme-typography-body-text-xs;
-  margin-top: var(--eds-size-half);
-  color: var(--eds-theme-color-text-neutral-subtle);
+  @mixin eds-theme-typography-body-text-sm;
 }
 
 /**
-  * Fieldnote icon
-  */
+ * Fieldnote icon
+ */
 .field-note__icon {
-  height: var(--eds-size-2);
-  width: var(--eds-size-2);
+  /* Centers icon with accompanying text */
   position: relative;
   bottom: 1px;
+  margin-right: var(--eds-size-half);
 }
 
 /**
@@ -30,10 +27,11 @@
 .field-note--error {
   color: var(--eds-theme-color-text-utility-error);
 }
-.field-note--error > .field-note__icon {
-  display: inline-block;
-  position: relative;
-  margin-right: var(--eds-size-1);
+.field-note--disabled {
+  color: var(--eds-theme-color-text-disabled);
+}
+.field-note--error.field-note__icon {
+  color: var(--eds-theme-color-icon-utility-error);
 }
 
 /**

diff --git a/src/components/FieldNote/FieldNote.tsx b/src/components/FieldNote/FieldNote.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { ReactNode } from 'react';
 import styles from './FieldNote.module.css';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 
 export interface Props {
   /**
@@ -13,9 +13,9 @@ export interface Props {
    */
   className?: string;
   /**
-   * Name of the fieldnote icon
+   * Toggles disabled styling of the field note.
    */
-  iconName?: IconName;
+  disabled?: boolean;
   /**
    * HTML id for the component
    */
@@ -36,34 +36,33 @@ export interface Props {
  * ```ts
  * import {FieldNote} from "@chanzuckerberg/eds";
  * ```
+ *
+ * Fieldnote component wraps text to describe other components.
  */
 export const FieldNote = ({
   className,
+  disabled,
   id,
-  iconName,
   isError,
   inverted,
   children,
   ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['field-note'],
+    disabled && styles['field-note--disabled'],
     inverted && styles['field-note--inverted'],
     isError && styles['field-note--error'],
     className,
   );
   return (
-    <div
-      aria-live="assertive"
-      className={componentClassName}
-      id={id}
-      {...other}
-    >
+    <div className={componentClassName} id={id} {...other}>
       {isError && (
         <Icon
           className={styles['field-note__icon']}
-          name={isError ? 'cancel' : undefined}
+          name="dangerous"
           purpose="informative"
+          size="1rem"
           title="error"
         />
       )}

diff --git a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
@@ -2,7 +2,6 @@
 
 exports[`<FieldNote /> Default story renders snapshot 1`] = `
 <div
-  aria-live="assertive"
   class="field-note"
   id="field-1"
 >
@@ -12,7 +11,6 @@ exports[`<FieldNote /> Default story renders snapshot 1`] = `
 
 exports[`<FieldNote /> WithText story renders snapshot 1`] = `
 <div
-  aria-live="assertive"
   class="field-note"
   id="field-1"
 >

diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
@@ -10,11 +10,6 @@
  */
 .label {
   @mixin labelStyles;
-  margin-bottom: var(--eds-size-1);
-}
-
-.label--inverted {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
 }
 
 /**

diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
@@ -27,18 +27,3 @@ export const Optional: StoryObj<Args> = {
     required: false,
   },
 };
-
-export const Inverted: StoryObj<Args> = {
-  args: {
-    inverted: true,
-    text: 'Label',
-    required: true,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ padding: '1rem', background: '#000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -19,10 +19,6 @@ export interface Props {
    * HTML id for the component
    */
   id?: string;
-  /**
-   * Inverted variation for dark backgrounds
-   */
-  inverted?: boolean;
   /**
    * Slot for node to appear directly after field label. Typically used to include a Toolip
    */
@@ -42,7 +38,7 @@ export interface Props {
   /**
    * The label text string
    */
-  text?: string | boolean;
+  text: string;
 }
 
 /**
@@ -54,20 +50,18 @@ export interface Props {
  */
 export const Label = ({
   className,
-  id,
+  hideLabel,
   htmlFor,
-  inverted,
+  id,
   labelAfter,
   optionalLabel = '(optional)',
-  text = 'Label',
   required = true,
   requiredLabel,
-  hideLabel,
+  text,
   ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['label'],
-    inverted && styles['label--inverted'],
     hideLabel && styles['u-is-vishidden'],
     className,
   );

diff --git a/src/components/Label/__snapshots__/Label.test.ts.snap b/src/components/Label/__snapshots__/Label.test.ts.snap
@@ -9,19 +9,6 @@ exports[`<Label /> Default story renders snapshot 1`] = `
 </label>
 `;
 
-exports[`<Label /> Inverted story renders snapshot 1`] = `
-<div
-  style="padding: 1rem; background: rgb(0, 0, 0);"
->
-  <label
-    class="label label--inverted"
-  >
-    Label
-     
-  </label>
-</div>
-`;
-
 exports[`<Label /> Optional story renders snapshot 1`] = `
 <label
   class="label"

diff --git a/src/components/TextField/TextField.module.css b/src/components/TextField/TextField.module.css
@@ -3,15 +3,19 @@
 \*------------------------------------*/
 
 /**
- * Textfield label
- * 1) Consists of a label, form control, and an optional note about the field.
+ * Wraps the Label and the optional/required indicator.
  */
-.text-field {
-  position: relative;
-
-  .text-field--inverted & {
-    color: var(--eds-theme-color-text-neutral-default-inverse);
-  }
+.text-field__overline {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--eds-size-half);
+  color: var(--eds-theme-color-form-label);
+}
+.text-field__overline--no-label {
+  justify-content: flex-end;
+}
+.text-field__overline--disabled {
+  color: var(--eds-theme-color-text-disabled);
 }
 
 /**
@@ -22,15 +26,6 @@
   margin-bottom: var(--eds-size-half);
 }
 
-/**
- * Text field label after
- * 1) Slot after the label that can be used to place components like a tooltip
- */
-.text-field-after {
-  display: inherit;
-  margin-left: var(--eds-size-1);
-}
-
 /**
  * Text Field Within
  * 1) A slot to put arbitrary content that appears within