chore: SelectBox audit (#8766)

* chore: SelectBox audit

* fix chromatic lint

* fix tests and lint

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: devongovett

packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx

@@ -31,17 +31,18 @@ type Story = StoryObj<typeof SelectBoxGroup>;
 export const VerticalOrientation: Story = {
   render: () => (
     <div style={{width: 600}}>
-      <SelectBoxGroup 
+      <SelectBoxGroup
+        aria-label="Vertical"
         orientation="vertical" 
         onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="text-only">
+        <SelectBox id="text-only" textValue="V: Text Only">
           <Text slot="label">V: Text Only</Text>
         </SelectBox>
-        <SelectBox value="illustration-text">
+        <SelectBox id="illustration-text" textValue="V: Illustration + Text">
           <Server />
           <Text slot="label">V: Illustration + Text</Text>
         </SelectBox>
-        <SelectBox value="illustration-desc">
+        <SelectBox id="illustration-desc" textValue="Send">
           <PaperAirplane />
         </SelectBox>
       </SelectBoxGroup>
@@ -52,21 +53,22 @@ export const VerticalOrientation: Story = {
 export const HorizontalOrientation: Story = {
   render: () => (
     <div style={{width: 800}}>
-      <SelectBoxGroup 
+      <SelectBoxGroup
+        aria-label="Horizontal"
         orientation="horizontal" 
         onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="text-only">
+        <SelectBox id="text-only" textValue="Title Only">
           <Text slot="label">Title Only</Text>
         </SelectBox>
-        <SelectBox value="illustration-text">
+        <SelectBox id="illustration-text" textValue="Illustration + Title">
           <Server />
           <Text slot="label">Illustration + Title</Text>
         </SelectBox>
-        <SelectBox value="text-desc">
+        <SelectBox id="text-desc" textValue="Title + Description">
           <Text slot="label">Title + Description</Text>
           <Text slot="description">Additional description</Text>
         </SelectBox>
-        <SelectBox value="h-all">
+        <SelectBox id="h-all" textValue="Illustration + Title + Description">
           <Server />
           <Text slot="label">Illustration + Title + Description</Text>
           <Text slot="description">Full horizontal layout with all elements</Text>

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -9,6 +9,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import Checkmark from '../ui-icons/Checkmark';
 import {
@@ -19,20 +20,24 @@ import {
   ListBoxProps,
   Provider
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, Orientation} from '@react-types/shared';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
 import {TextContext} from './Content';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'style' | 'className'> {
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'shouldFocusWrap' | 'style' | 'className'> {
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
   children: ReactNode,
+  /**
+   * The layout direction of the content in each SelectBox.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
   /**
    * The selection mode for the SelectBoxGroup.
    * @default 'single'
@@ -45,12 +50,14 @@ export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>
 }
 
 export interface SelectBoxProps extends StyleProps {
+  /** The unique id of the SelectBox. */
+  id?: Key,
+  /** A string representation of the SelectBox's contents, used for features like typeahead. */
+  textValue?: string,
+  /** An accessibility label for this item. */
+  'aria-label'?: string,
   /**
-   * The value of the SelectBox.
-   */
-  value: string,
-  /**
-   * The label for the element.
+   * The contents of the SelectBox.
    */
   children: ReactNode,
   /**
@@ -76,6 +83,7 @@ const selectBoxStyles = style({
   gridAutoRows: '1fr',
   position: 'relative',
   font: 'ui',
+  cursor: 'default',
   boxSizing: 'border-box',
   overflow: 'hidden',
   width: {
@@ -176,7 +184,7 @@ const selectBoxStyles = style({
   },
   backgroundColor: {
     default: 'layer-2',
-    isDisabled: 'layer-1'
+    isDisabled: 'disabled'
   },
   color: {
     isDisabled: 'disabled'
@@ -196,12 +204,12 @@ const illustrationContainer = style({
   alignSelf: 'center',
   justifySelf: 'center',
   minSize: 48,
-  color: {
-    isDisabled: 'disabled',
-    isHovered: 'gray-900'
-  },
-  opacity: {
-    isDisabled: 0.4
+  '--iconPrimary': {
+    type: 'color',
+    value: {
+      default: baseColor('neutral'),
+      isDisabled: 'disabled'
+    }
   }
 });
 
@@ -222,8 +230,7 @@ const descriptionText = style({
     }
   },
   color: {
-    default: 'neutral',
-    isHovered: 'gray-900',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   }
 });
@@ -254,20 +261,29 @@ const labelText = style({
     }
   },
   color: {
-    default: 'neutral',
-    isHovered: 'gray-900',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   }
 });
 
 const gridStyles = style<{orientation?: Orientation}>({
   display: 'grid',
   gridAutoRows: '1fr',
-  gap: 16,
+  gap: 24,
+  justifyContent: 'center',
+  '--size': {
+    type: 'width',
+    value: {
+      orientation: {
+        horizontal: 368,
+        vertical: 170
+      }
+    }
+  },
   gridTemplateColumns: {
     orientation: {
-      horizontal: 'repeat(auto-fit, minmax(368px, 1fr))',
-      vertical: 'repeat(auto-fit, minmax(170px, 1fr))'
+      horizontal: 'repeat(auto-fit, var(--size))',
+      vertical: 'repeat(auto-fit, var(--size))'
     }
   }
 }, getAllowedOverrides());
@@ -276,7 +292,7 @@ const gridStyles = style<{orientation?: Orientation}>({
  * SelectBox is a single selectable item in a SelectBoxGroup.
  */
 export function SelectBox(props: SelectBoxProps): ReactNode {
-  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
+  let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
 
   let {
     orientation = 'vertical',
@@ -288,8 +304,6 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 
   return (
     <ListBoxItem
-      id={value}
-      textValue={value}
       isDisabled={isDisabled}
       ref={ref}
       className={renderProps => (UNSAFE_className || '') + selectBoxStyles({
@@ -364,6 +378,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     isDisabled = false,
     UNSAFE_className,
     UNSAFE_style,
+    styles,
     ...otherProps
   } = props;
 
@@ -382,7 +397,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     <ListBox
       selectionMode={selectionMode}
       layout="grid"
-      className={(UNSAFE_className || '') + gridStyles({orientation})}
+      className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
       style={UNSAFE_style}
       {...otherProps}>
       <SelectBoxContext.Provider value={selectBoxContextValue}>