fix: respect options props in tests

src/components/Select/Select.stories.tsx

@@ -1,7 +1,6 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import { within } from '@storybook/testing-library';
-import isChromatic from 'chromatic';
 import clsx from 'clsx';
 import React from 'react';
 import type { OptionsAlignType, VariantType } from './Select';
@@ -42,7 +41,7 @@ const exampleOptions = [
 ];
 
 function InteractiveExampleUsingChildren(props: Props) {
-  const { variant } = props;
+  const { variant, optionsAlign, optionsClassName } = props;
   const compact = variant === 'compact';
 
   const [selectedOption, setSelectedOption] =
@@ -55,6 +54,8 @@ function InteractiveExampleUsingChildren(props: Props) {
         className={clsx(!compact && styles['select--non-compact'])}
         data-testid="dropdown"
         onChange={setSelectedOption}
+        optionsAlign={optionsAlign}
+        optionsClassName={optionsClassName}
         value={selectedOption}
         variant={variant}
       >
@@ -202,14 +203,12 @@ export const OpenByDefault: StoryObj = {
     const canvas = within(canvasElement);
 
     // Open the dropdown.
-    if (isChromatic()) {
-      const dropdownButton = await canvas.findByRole('button');
-      dropdownButton.click();
-      // Select the best option.
-      const bestOption = await canvas.findByText('Cats');
-      bestOption.click();
-      // Reopen the dropdown; selecting an option closed it.
-      dropdownButton.click();
-    }
+    const dropdownButton = await canvas.findByRole('button');
+    dropdownButton.click();
+    // Select the best option.
+    const bestOption = await canvas.findByText('Cats');
+    bestOption.click();
+    // Reopen the dropdown; selecting an option closed it.
+    dropdownButton.click();
   },
 };

src/components/Select/Select.tsx

@@ -249,14 +249,14 @@ const SelectOptions = function (props: PropsWithRenderProp<{ open: boolean }>) {
   const { className, ...other } = props;
   const { compact, optionsAlign, optionsClassName } = useContext(SelectContext);
 
-  // TODO-AH: fix how the width works
   const componentClassName = clsx(
     styles['select__options'],
     className,
     optionsAlign === 'right' && styles['select__options--align-right'],
     optionsClassName || (!compact && styles['select__options--full-width']),
     compact && styles['select__options--compact'],
   );
+
   return (
     <Listbox.Options
       as={PopoverContainer}

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

@@ -183,7 +183,7 @@ exports[`<Select /> CompactWithOptionsRightAligned story renders snapshot 1`] =
   <div
     aria-labelledby="headlessui-listbox-button-17"
     aria-orientation="vertical"
-    class="popover-container select__options select__options--compact"
+    class="popover-container select__options select__options--align-right select__options--compact"
     id="headlessui-listbox-options-18"
     role="listbox"
     tabindex="0"
@@ -415,7 +415,7 @@ exports[`<Select /> SeparateButtonAndMenuWidth story renders snapshot 1`] = `
   <div
     aria-labelledby="headlessui-listbox-button-22"
     aria-orientation="vertical"
-    class="popover-container select__options select__options--full-width"
+    class="popover-container select__options separate-button-and-menu-width"
     id="headlessui-listbox-options-23"
     role="listbox"
     tabindex="0"