feat(textfield): matches mocks, update snaps, update dependent compon…

…ents, add stories

src/components/FieldNote/FieldNote.module.css

@@ -5,21 +5,19 @@
 \*------------------------------------*/
 
 /**
- * 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;
 }
@@ -30,10 +28,12 @@
 .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);
+  margin-right: var(--eds-size-half);
 }
 
 /**

src/components/FieldNote/FieldNote.tsx

@@ -12,6 +12,10 @@ export interface Props {
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  /**
+   * Toggles disabled styling of the field note.
+   */
+  disabled?: boolean;
   /**
    * Name of the fieldnote icon
    */
@@ -36,33 +40,31 @@ 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'],
-    className,
+    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"
           title="error"
         />

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"
 >

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);
 }
 
 /**

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>
-    ),
-  ],
-};

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
    */
@@ -54,22 +50,20 @@ export interface Props {
  */
 export const Label = ({
   className,
-  id,
+  hideLabel,
   htmlFor,
-  inverted,
+  id,
   labelAfter,
   optionalLabel = '(optional)',
-  text = 'Label',
   required = true,
   requiredLabel,
-  hideLabel,
+  text = 'Label',
   ...other
 }: Props) => {
   const componentClassName = clsx(
     styles['label'],
-    className,
-    inverted && styles['label--inverted'],
     hideLabel && styles['u-is-vishidden'],
+    className,
   );
 
   return (

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"

src/components/TextField/TextField.module.css

@@ -5,15 +5,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);
 }
 
 /**
@@ -24,15 +28,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