fix(Select): sync label design with form fields (#1506)

- remove little used helper mixin, and apply typography to labels
- add overline container to match label structure for textarea and input fields
- update snapshots
- EDS-841

src/components/Label/Label.module.css

@@ -10,7 +10,8 @@
  * Labels can sometimes be marked up as legends for field groups (i.e. radio field).
  */
 .label {
-  @mixin labelStyles;
+  @mixin eds-theme-typography-form-label;
+  display: inline-block;
 }
 
 /**

src/components/Select/Select.module.css

@@ -24,10 +24,19 @@
 /**
  * Label on top of the select trigger button to label the select field.
  */
-.label {
-  @mixin eds-theme-typography-label-md;
-  color: var(--eds-theme-color-form-label);
+.select__label {
+  @mixin eds-theme-typography-form-label;
+  display: inline-block;
+}
+
+/**
+ * Wraps the Label and the optional/required indicator.
+ */
+.select__overline {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: var(--eds-size-half);
+  color: var(--eds-theme-color-form-label);
 }
 
 /**

src/components/Select/Select.tsx

@@ -229,9 +229,12 @@ const SelectContext = React.createContext<{
 const SelectLabel = (props: { className?: string; children: ReactNode }) => {
   const { children, className } = props;
 
-  const componentClassName = clsx(styles['label'], className);
+  const componentClassName = clsx(styles['select__label'], className);
+  const overlineClassName = clsx(styles['select__overline']);
   return (
-    <Listbox.Label className={componentClassName}>{children}</Listbox.Label>
+    <div className={overlineClassName}>
+      <Listbox.Label className={componentClassName}>{children}</Listbox.Label>
+    </div>
   );
 };
 

src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -394,13 +394,17 @@ exports[`<Select /> DefaultWithVisibleLabel story renders snapshot 1`] = `
   data-headlessui-state="open"
   data-testid="dropdown"
 >
-  <label
-    class="label"
-    data-headlessui-state="open"
-    id="headlessui-listbox-label-:r5:"
+  <div
+    class="select__overline"
   >
-    Favorite Animal
-  </label>
+    <label
+      class="select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:r5:"
+    >
+      Favorite Animal
+    </label>
+  </div>
   <button
     aria-controls="headlessui-listbox-options-:r7:"
     aria-expanded="true"
@@ -596,13 +600,17 @@ exports[`<Select /> UsingChildrenProp story renders snapshot 1`] = `
   data-headlessui-state="open"
   data-testid="dropdown"
 >
-  <label
-    class="label"
-    data-headlessui-state="open"
-    id="headlessui-listbox-label-:rq:"
+  <div
+    class="select__overline"
   >
-    Favorite Animal
-  </label>
+    <label
+      class="select__label"
+      data-headlessui-state="open"
+      id="headlessui-listbox-label-:rq:"
+    >
+      Favorite Animal
+    </label>
+  </div>
   <button
     aria-controls="headlessui-listbox-options-:rs:"
     aria-expanded="true"

src/design-tokens/mixins.css

@@ -153,11 +153,6 @@
   }
 }
 
-@define-mixin labelStyles {
-  @mixin eds-theme-typography-form-label;
-  display: inline-block;
-}
-
 @define-mixin placeholderStyles {
   color: var(--eds-theme-color-text-disabled);
 }