Skip to content

chore: SelectBox audit #8766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 22, 2025
Merged

chore: SelectBox audit #8766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f42a09d
chore: SelectBox audit
devongovett Aug 22, 2025
1ed8ad5
fix chromatic lint
devongovett Aug 22, 2025
5077a39
fix tests and lint
LFDanLu Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
67 changes: 41 additions & 26 deletions packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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'
Expand All @@ -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,
/**
Expand All @@ -76,6 +83,7 @@ const selectBoxStyles = style({
gridAutoRows: '1fr',
position: 'relative',
font: 'ui',
cursor: 'default',
boxSizing: 'border-box',
overflow: 'hidden',
width: {
Expand Down Expand Up @@ -176,7 +184,7 @@ const selectBoxStyles = style({
},
backgroundColor: {
default: 'layer-2',
isDisabled: 'layer-1'
isDisabled: 'disabled'
},
color: {
isDisabled: 'disabled'
Expand All @@ -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'
}
}
});

Expand All @@ -222,8 +230,7 @@ const descriptionText = style({
}
},
color: {
default: 'neutral',
isHovered: 'gray-900',
default: baseColor('neutral'),
isDisabled: 'disabled'
}
});
Expand Down Expand Up @@ -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());
Expand All @@ -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',
Expand All @@ -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({
Expand Down Expand Up @@ -364,6 +378,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
isDisabled = false,
UNSAFE_className,
UNSAFE_style,
styles,
...otherProps
} = props;

Expand All @@ -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}>
Expand Down
Loading