From 675ad5fa45f4127bedf38722273f3e7bb83c8a53 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Thu, 23 May 2024 18:59:45 -0500
Subject: [PATCH] feat(Select): support horizontal labels (#1962)

- update and add snapshots and stories for this
- also add story descriptions and updated code blocks
- update display of graphical stories
---
 src/components/Select/Select-v2.module.css    |  12 +
 src/components/Select/Select-v2.stories.tsx   | 142 ++++++----
 src/components/Select/Select-v2.tsx           |   8 +
 .../__snapshots__/Select-v2.test.tsx.snap     | 243 ++++++++++--------
 4 files changed, 235 insertions(+), 170 deletions(-)

diff --git a/src/components/Select/Select-v2.module.css b/src/components/Select/Select-v2.module.css
index 09954c10c..cf9f88a5d 100644
--- a/src/components/Select/Select-v2.module.css
+++ b/src/components/Select/Select-v2.module.css
@@ -35,6 +35,18 @@
   z-index: 100;
 }
 
+.select--label-layout-vertical {
+  flex-direction: column;
+}
+
+.select--label-layout-horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+
+  gap: 0.5rem;
+}
+
 /**
  * The button to trigger the display of the select field.
  */
diff --git a/src/components/Select/Select-v2.stories.tsx b/src/components/Select/Select-v2.stories.tsx
index c634017fe..35fbd8d63 100644
--- a/src/components/Select/Select-v2.stories.tsx
+++ b/src/components/Select/Select-v2.stories.tsx
@@ -3,7 +3,6 @@ import { expect } from '@storybook/test';
 import { userEvent, within } from '@storybook/testing-library';
 import React from 'react';
 import { Select } from './Select-v2';
-import Icon from '../Icon';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/V2/Select',
@@ -115,6 +114,7 @@ export const Default: StoryObj = {
     'data-testid': 'dropdown',
     defaultValue: exampleOptions[0],
     name: 'select',
+    className: 'w-60',
     children: (
       <>
         <Select.Button>
@@ -161,6 +161,18 @@ export const Default: StoryObj = {
   },
 };
 
+export const HorizontalLabel: StoryObj = {
+  args: {
+    ...Default.args,
+    className: 'w-60',
+    labelLayout: 'horizontal',
+    label: 'Animal?',
+  },
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
 /**
  * Instead of a render prop for `Select.Button`, you can forego the render prop for the button and use static text instead.
  * This mode is also useful if you want to use a controlled component and manage state yourself.
@@ -374,6 +386,9 @@ export const WithFieldNote: StoryObj = {
       </>
     ),
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
 /**
@@ -391,7 +406,15 @@ export const UncontrolledHeadless: StoryObj = {
       <>
         <Select.Button>
           {({ value, open, disabled }) => (
-            <button className="fpo">{value.label}</button>
+            <button className="fpo">
+              {
+                {
+                  Birds: '🐦🦆🦜',
+                  Dogs: '🐶🐕🐩',
+                  Cats: '🐈🐱🐈‍⬛',
+                }[value.label as string]
+              }
+            </button>
           )}
         </Select.Button>
         <Select.Options>
@@ -411,7 +434,15 @@ export const UncontrolledHeadless: StoryObj = {
 <Select onChange={...}>
   <Select.Button>
     {({ value, open, disabled }) => (
-      <button className="fpo">{value.label}</button>
+      <button className="fpo">
+      {
+        {
+          Birds: '🐦🦆🦜',
+          Dogs: '🐶🐕🐩',
+          Cats: '🐈🐱🐈‍⬛',
+        }[value.label as string]
+      }
+      </button>
     )}
   </Select.Button>
   <Select.Options>
@@ -703,6 +734,9 @@ export const SeparateButtonAndMenuWidth: StoryObj = {
       diffIncludeAntiAliasing: false,
       diffThreshold: 0.72,
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
@@ -720,9 +754,15 @@ export const Disabled: StoryObj = {
     axe: {
       disabledRules: ['color-contrast'],
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
 };
 
+/**
+ * Select fields can be marked as required by using the `required` prop.
+ */
 export const Required: StoryObj = {
   args: {
     ...Default.args,
@@ -730,8 +770,14 @@ export const Required: StoryObj = {
     showHint: true,
     className: 'w-96',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * Fields can be marked as optional by using `required` as false, but `showHint` as true.
+ */
 export const Optional: StoryObj = {
   args: {
     ...Default.args,
@@ -739,22 +785,37 @@ export const Optional: StoryObj = {
     showHint: true,
     className: 'w-96',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * You can supply a warning field note by specifing the status of "error".
+ */
 export const Error: StoryObj = {
   args: {
     ...Required.args,
     isError: true,
     fieldNote: 'Some text describing error',
   },
+  parameters: {
+    ...Required.parameters,
+  },
 };
 
+/**
+ * You can supply a warning field note by specifing the status of "warning".
+ */
 export const Warning: StoryObj = {
   args: {
     ...Optional.args,
     isWarning: true,
     fieldNote: 'Some text describing warning',
   },
+  parameters: {
+    ...Optional.parameters,
+  },
 };
 
 /**
@@ -766,8 +827,14 @@ export const NoVisibleLabel: StoryObj = {
     label: undefined,
     'aria-label': 'hidden label',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * No visible label is required. In such cases, you must use an equivalent label for accessibility, like `aria-label`.
+ */
 export const NoVisibleLabelButRequired: StoryObj = {
   args: {
     ...Default.args,
@@ -776,8 +843,14 @@ export const NoVisibleLabelButRequired: StoryObj = {
     required: true,
     className: 'w-96',
   },
+  parameters: {
+    ...Default.parameters,
+  },
 };
 
+/**
+ * `Select` can be both disabled and required.
+ */
 export const DisabledRequired: StoryObj = {
   args: {
     ...Default.args,
@@ -790,6 +863,9 @@ export const DisabledRequired: StoryObj = {
     axe: {
       disabledRules: ['color-contrast'],
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
 };
 
@@ -804,6 +880,9 @@ export const OptionsRightAligned: StoryObj = {
     chromatic: {
       delay: 300,
     },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   args: {
     ...Default.args,
@@ -815,60 +894,6 @@ export const OptionsRightAligned: StoryObj = {
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 };
 
-/**
- * As an alternative rendering method, you can use several types of render props for fine-grained control of the button rendering, and
- * the rendering of the list itself. Here, we use a render prop to control the contents of `Select`
- *
- * For more information on `Select` render props, review: https://headlessui.com/react/listbox#using-render-props
- */
-export const UsingFunctionProps: StoryObj = {
-  render: () => {
-    const [selectedOption, setSelectedOption] =
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useState<(typeof exampleOptions)[0]>();
-
-    return (
-      <Select
-        aria-label="Favorite Animal"
-        as="div"
-        data-testid="dropdown"
-        name="interactive-with-children"
-        onChange={setSelectedOption}
-        value={selectedOption}
-      >
-        {({ open }) => (
-          <>
-            <Select.Button
-              // Because we're using a render prop to completely control the styling and icon of the
-              // button, we need to configure this component to render as a Fragment. Otherwise we'd
-              // render two, nested buttons.
-              as={React.Fragment}
-            >
-              {() => (
-                <button aria-expanded={open} className="fpo">
-                  {selectedOption?.label || 'Select'}
-                  <Icon
-                    className="ml-4"
-                    name="filter-list"
-                    purpose="decorative"
-                  />
-                </button>
-              )}
-            </Select.Button>
-            <Select.Options>
-              {exampleOptions.map((option) => (
-                <Select.Option key={option.key} value={option}>
-                  {option.label}
-                </Select.Option>
-              ))}
-            </Select.Options>
-          </>
-        )}
-      </Select>
-    );
-  },
-};
-
 /**
  * This shows the contents of `Select` upon render. Mostly to demonstrate it is possible, to capture a snapshot of the appearance.
  */
@@ -878,6 +903,9 @@ export const OpenByDefault: StoryObj = {
     badges: ['intro-1.2', 'current-2.0'],
     layout: 'centered',
     chromatic: { delay: 300, disableSnapshot: true },
+    docs: {
+      ...Default.parameters?.docs,
+    },
   },
   play: selectCat,
 };
diff --git a/src/components/Select/Select-v2.tsx b/src/components/Select/Select-v2.tsx
index c3fd49ab3..d13369222 100644
--- a/src/components/Select/Select-v2.tsx
+++ b/src/components/Select/Select-v2.tsx
@@ -78,6 +78,12 @@ type SelectProps = ExtractProps<typeof Listbox> &
      * Visible text label for the component.
      */
     label?: string;
+    /**
+     * Whether the label is adjacent to the field (horizontal) or above the field (vertical)
+     *
+     * **Default is `"vertical"`**.
+     */
+    labelLayout?: 'vertical' | 'horizontal';
     /**
      * Whether it should show the field hint or not
      *
@@ -196,6 +202,7 @@ export function Select({
   isError,
   isWarning,
   label,
+  labelLayout = 'vertical',
   modifiers = defaultPopoverModifiers,
   name,
   onFirstUpdate,
@@ -243,6 +250,7 @@ export function Select({
   const componentClassName = clsx(
     styles['select'],
     fieldNote && styles['select--has-fieldNote'],
+    labelLayout && styles[`select--label-layout-${labelLayout}`],
     className,
   );
   const sharedProps = {
diff --git a/src/components/Select/__snapshots__/Select-v2.test.tsx.snap b/src/components/Select/__snapshots__/Select-v2.test.tsx.snap
index 614c2f8e6..70c13b468 100644
--- a/src/components/Select/__snapshots__/Select-v2.test.tsx.snap
+++ b/src/components/Select/__snapshots__/Select-v2.test.tsx.snap
@@ -2,29 +2,29 @@
 
 exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`] = `
 <div
-  class="select w-60"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r1m:"
+  id=":r1t:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r1m:"
+      for=":r1t:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r1p:"
+    aria-controls="headlessui-listbox-options-:r20:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1n: headlessui-listbox-button-:r1o:"
+    aria-labelledby="headlessui-listbox-label-:r1u: headlessui-listbox-button-:r1v:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1o:"
+    id="headlessui-listbox-button-:r1v:"
     type="button"
   >
     <span
@@ -52,7 +52,7 @@ exports[`<Select /> Generated Snapshots AdjustedWidth story renders snapshot 1`]
 
 exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
   id=":r0:"
@@ -102,17 +102,17 @@ exports[`<Select /> Generated Snapshots Default story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots Error story renders snapshot 1`] = `
 <div
-  class="select select--has-fieldNote w-96"
+  class="select select--has-fieldNote select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r2b:"
+  id=":r2i:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r2b:"
+      for=":r2i:"
     >
       Favorite Animal
     </label>
@@ -123,13 +123,63 @@ exports[`<Select /> Generated Snapshots Error story renders snapshot 1`] = `
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r2e:"
+    aria-controls="headlessui-listbox-options-:r2l:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r2c: headlessui-listbox-button-:r2d:"
+    aria-labelledby="headlessui-listbox-label-:r2j: headlessui-listbox-button-:r2k:"
     class="select-button select-button--error"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2d:"
+    id="headlessui-listbox-button-:r2k:"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dogs
+    </span>
+    <svg
+      aria-hidden="true"
+      class="icon select-button__icon select-button__icon--reversed"
+      fill="currentColor"
+      height="1.5rem"
+      style="--icon-size: 1.5rem;"
+      viewBox="0 0 24 24"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<Select /> Generated Snapshots HorizontalLabel story renders snapshot 1`] = `
+<div
+  class="select select--label-layout-horizontal w-60"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+  id=":r7:"
+>
+  <div
+    class="select__overline"
+  >
+    <label
+      class="label label--lg select__label"
+      for=":r7:"
+    >
+      Animal?
+    </label>
+  </div>
+  <button
+    aria-controls="headlessui-listbox-options-:ra:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-labelledby="headlessui-listbox-label-:r8: headlessui-listbox-button-:r9:"
+    class="select-button"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:r9:"
     type="button"
   >
     <span
@@ -157,29 +207,29 @@ exports[`<Select /> Generated Snapshots Error story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders snapshot 1`] = `
 <div
-  class="select w-60"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r1f:"
+  id=":r1m:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r1f:"
+      for=":r1m:"
     >
       Favorite Animal(s)
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r1i:"
+    aria-controls="headlessui-listbox-options-:r1p:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1g: headlessui-listbox-button-:r1h:"
+    aria-labelledby="headlessui-listbox-label-:r1n: headlessui-listbox-button-:r1o:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1h:"
+    id="headlessui-listbox-button-:r1o:"
     type="button"
   >
     <span
@@ -208,18 +258,18 @@ exports[`<Select /> Generated Snapshots MultipleWithTruncation story renders sna
 
 exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r2p:"
+  id=":r30:"
 >
   <button
-    aria-controls="headlessui-listbox-options-:r2r:"
+    aria-controls="headlessui-listbox-options-:r32:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2q:"
+    id="headlessui-listbox-button-:r31:"
     type="button"
   >
     <span
@@ -247,27 +297,27 @@ exports[`<Select /> Generated Snapshots NoVisibleLabel story renders snapshot 1`
 
 exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders snapshot 1`] = `
 <div
-  class="select w-96"
+  class="select select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r2v:"
+  id=":r36:"
 >
   <div
     class="select__overline select__overline--no-label"
   >
     <label
       class="label label--lg select__label"
-      for=":r2v:"
+      for=":r36:"
     />
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r32:"
+    aria-controls="headlessui-listbox-options-:r39:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r30: headlessui-listbox-button-:r31:"
+    aria-labelledby="headlessui-listbox-label-:r37: headlessui-listbox-button-:r38:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r31:"
+    id="headlessui-listbox-button-:r38:"
     type="button"
   >
     <span
@@ -295,17 +345,17 @@ exports[`<Select /> Generated Snapshots NoVisibleLabelButRequired story renders
 
 exports[`<Select /> Generated Snapshots Optional story renders snapshot 1`] = `
 <div
-  class="select w-96"
+  class="select select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r24:"
+  id=":r2b:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r24:"
+      for=":r2b:"
     >
       Favorite Animal
     </label>
@@ -316,13 +366,13 @@ exports[`<Select /> Generated Snapshots Optional story renders snapshot 1`] = `
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r27:"
+    aria-controls="headlessui-listbox-options-:r2e:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r25: headlessui-listbox-button-:r26:"
+    aria-labelledby="headlessui-listbox-label-:r2c: headlessui-listbox-button-:r2d:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r26:"
+    id="headlessui-listbox-button-:r2d:"
     type="button"
   >
     <span
@@ -350,17 +400,17 @@ exports[`<Select /> Generated Snapshots Optional story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
 <div
-  class="select w-96"
+  class="select select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r1t:"
+  id=":r24:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r1t:"
+      for=":r24:"
     >
       Favorite Animal
     </label>
@@ -371,13 +421,13 @@ exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r20:"
+    aria-controls="headlessui-listbox-options-:r27:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r1u: headlessui-listbox-button-:r1v:"
+    aria-labelledby="headlessui-listbox-label-:r25: headlessui-listbox-button-:r26:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1v:"
+    id="headlessui-listbox-button-:r26:"
     type="button"
   >
     <span
@@ -405,18 +455,18 @@ exports[`<Select /> Generated Snapshots Required story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r19:"
+  id=":r1g:"
 >
   <button
-    aria-controls="headlessui-listbox-options-:r1b:"
+    aria-controls="headlessui-listbox-options-:r1i:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r1a:"
+    id="headlessui-listbox-button-:r1h:"
     type="button"
   >
     <span
@@ -444,71 +494,38 @@ exports[`<Select /> Generated Snapshots StyledUncontrolled story renders snapsho
 
 exports[`<Select /> Generated Snapshots UncontrolledHeadless story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r13:"
+  id=":r1a:"
 >
   <button
-    aria-controls="headlessui-listbox-options-:r15:"
+    aria-controls="headlessui-listbox-options-:r1c:"
     aria-expanded="true"
     aria-haspopup="listbox"
     class="fpo"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r14:"
+    id="headlessui-listbox-button-:r1b:"
     type="button"
   >
-    Dogs
-  </button>
-</div>
-`;
-
-exports[`<Select /> Generated Snapshots UsingFunctionProps story renders snapshot 1`] = `
-<div
-  aria-label="Favorite Animal"
-  class="select"
-  data-headlessui-state="open"
-  data-testid="dropdown"
-  id=":r36:"
->
-  <button
-    aria-controls="headlessui-listbox-options-:r38:"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    class="fpo"
-    data-headlessui-state="open"
-    id="headlessui-listbox-button-:r37:"
-    type="button"
-  >
-    Select
-    <svg
-      aria-hidden="true"
-      class="icon ml-4"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1z"
-      />
-    </svg>
+    🐶🐕🐩
   </button>
 </div>
 `;
 
 exports[`<Select /> Generated Snapshots Warning story renders snapshot 1`] = `
 <div
-  class="select select--has-fieldNote w-96"
+  class="select select--has-fieldNote select--label-layout-vertical w-96"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r2i:"
+  id=":r2p:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r2i:"
+      for=":r2p:"
     >
       Favorite Animal
     </label>
@@ -519,13 +536,13 @@ exports[`<Select /> Generated Snapshots Warning story renders snapshot 1`] = `
     </span>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:r2l:"
+    aria-controls="headlessui-listbox-options-:r2s:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r2j: headlessui-listbox-button-:r2k:"
+    aria-labelledby="headlessui-listbox-label-:r2q: headlessui-listbox-button-:r2r:"
     class="select-button select-button--warning"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r2k:"
+    id="headlessui-listbox-button-:r2r:"
     type="button"
   >
     <span
@@ -553,29 +570,29 @@ exports[`<Select /> Generated Snapshots Warning story renders snapshot 1`] = `
 
 exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":rl:"
+  id=":rs:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":rl:"
+      for=":rs:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:ro:"
+    aria-controls="headlessui-listbox-options-:rv:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:rm: headlessui-listbox-button-:rn:"
+    aria-labelledby="headlessui-listbox-label-:rt: headlessui-listbox-button-:ru:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:rn:"
+    id="headlessui-listbox-button-:ru:"
     type="button"
   >
     <span
@@ -603,29 +620,29 @@ exports[`<Select /> Generated Snapshots WithFieldName story renders snapshot 1`]
 
 exports[`<Select /> Generated Snapshots WithFieldNote story renders snapshot 1`] = `
 <div
-  class="select select--has-fieldNote"
+  class="select select--has-fieldNote select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":rs:"
+  id=":r13:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":rs:"
+      for=":r13:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:rv:"
+    aria-controls="headlessui-listbox-options-:r16:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:rt: headlessui-listbox-button-:ru:"
+    aria-labelledby="headlessui-listbox-label-:r14: headlessui-listbox-button-:r15:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:ru:"
+    id="headlessui-listbox-button-:r15:"
     type="button"
   >
     <span
@@ -653,29 +670,29 @@ exports[`<Select /> Generated Snapshots WithFieldNote story renders snapshot 1`]
 
 exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical w-60"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":re:"
+  id=":rl:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":re:"
+      for=":rl:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:rh:"
+    aria-controls="headlessui-listbox-options-:ro:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:rf: headlessui-listbox-button-:rg:"
+    aria-labelledby="headlessui-listbox-label-:rm: headlessui-listbox-button-:rn:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:rg:"
+    id="headlessui-listbox-button-:rn:"
     type="button"
   >
     <span
@@ -703,29 +720,29 @@ exports[`<Select /> Generated Snapshots WithSelectedOption story renders snapsho
 
 exports[`<Select /> Generated Snapshots WithStandardButton story renders snapshot 1`] = `
 <div
-  class="select"
+  class="select select--label-layout-vertical"
   data-headlessui-state="open"
   data-testid="dropdown"
-  id=":r7:"
+  id=":re:"
 >
   <div
     class="select__overline"
   >
     <label
       class="label label--lg select__label"
-      for=":r7:"
+      for=":re:"
     >
       Favorite Animal
     </label>
   </div>
   <button
-    aria-controls="headlessui-listbox-options-:ra:"
+    aria-controls="headlessui-listbox-options-:rh:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="headlessui-listbox-label-:r8: headlessui-listbox-button-:r9:"
+    aria-labelledby="headlessui-listbox-label-:rf: headlessui-listbox-button-:rg:"
     class="select-button"
     data-headlessui-state="open"
-    id="headlessui-listbox-button-:r9:"
+    id="headlessui-listbox-button-:rg:"
     type="button"
   >
     <span