wip: S2 SelectBox Implementation #8541

DPandyan · 2025-07-14T18:16:13Z

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

yihuiliao · 2025-07-14T19:07:39Z

seems like there's a couple of lint errors, mind running yarn lint and fixing those so we can get a build on the pr? or actually...you might be on a fork but i think we should be able to get you access so that you can directly contribute and we can get builds from you. you might need to ask danni about adding you as a collaborator

jluyau · 2025-07-15T06:12:29Z

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

+    },
+    orientation: {
+      horizontal: {
+        size: {


since the value is auto for all the sizes, you can just do:

orientation: { horizontal: 'auto' }

jluyau · 2025-07-15T06:12:51Z

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

+    },
+    orientation: {
+      horizontal: {
+        size: {


jluyau · 2025-07-15T06:20:58Z

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

+  },
+  position: 'relative',
+  borderWidth: 2,
+  borderStyle: {


Suggested change

borderStyle: {

borderStyle: 'solid'

jluyau · 2025-07-15T06:21:36Z

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

+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isFocusVisible: 'transparent'


i think this needs to go above isSelected since selection should have precedence

jluyau · 2025-07-15T06:22:27Z

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

+    allowMultiSelect = false,
+    size = 'M',
+    orientation = 'vertical'
+  } = groupContext;


can combine this with line 167 since groupContext isnt used anywhere else

jluyau · 2025-07-15T06:25:30Z

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

+   * The size of the SelectBoxGroup.
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL',


do we need to support XS since it's defined in the style macro above

jluyau · 2025-07-15T06:26:55Z

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

+  allowMultiSelect: boolean,
+  children: ReactNode,
+  style?: React.CSSProperties,
+  className?: string,


style and className might need the UNSAFE_ prefix. and you might want to add the styles prop

jluyau · 2025-07-15T06:29:40Z

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

+
+  useEffect(() => {
+    if (value !== undefined) {
+      onSelectionChange(value);


rather than call this in a useEffect, create a callback which set on onChange, and in that callback, set the value as well as calling onSelectionChange

jluyau · 2025-07-15T06:30:04Z

packages/@react-spectrum/s2/src/index.ts

@@ -69,6 +69,8 @@ export {Provider} from './Provider';
 export {Radio} from './Radio';
 export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
+export {SelectBox} from './SelectBox';


alphabetize

jluyau · 2025-07-15T06:30:20Z

packages/@react-spectrum/s2/src/index.ts

@@ -146,6 +148,8 @@ export type {ProgressCircleProps} from './ProgressCircle';
 export type {ProviderProps} from './Provider';
 export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
+export type {SelectBoxProps} from './SelectBox';


alphabetize

snowystinger · 2025-07-15T07:01:01Z

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

+  label?: ReactNode
+}
+
+const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({


please move this component below the other one so that the file reads as
Top level followed by children/nested

yihuiliao · 2025-07-16T00:27:00Z

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

+
+// Simple basic styling with proper dark mode support
+const selectBoxStyles = style({
+  ...focusRing(),


im not sure where the designs for focus rings in select box are currently but i pulled up an older version before they redid all the figma designs to what they are now and the focus ring appears to be like a blue border rather than a outline offset by 2px. you might want to ask design about this

yihuiliao · 2025-07-16T00:31:57Z

packages/@react-spectrum/s2/stories/SelectBox.stories.tsx

+
+const StarIcon = createIcon(StarSVG);
+
+const meta: Meta<typeof SelectBoxGroup> = {


Can we rename this file to SelectBoxGroup.stories

yihuiliao · 2025-07-16T00:38:20Z

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

+  justifyContent: 'center',
+  flexShrink: 0,
+  alignItems: 'center',
+  fontFamily: 'sans',


since font is already a shorthand for a bunch of other font properties, you don't need to set fontFamily since font already handles it

yihuiliao · 2025-07-16T00:47:14Z

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

+   * The size of the SelectBoxGroup.
+   * @default 'M'
+   */
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',


should we support XS? checkbox doesn't even have an XS size. i think the checkbox looks too close to the icon(?) when the select box is XS, especially compared to the other sizes.

this also might be good to clarify with design because in the S1 design docs, under Size, the image shows XS but then in the text they say they support four sizes: small, medium, large, and extra-large

yihuiliao · 2025-07-16T01:15:03Z

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

+          <>
+            {(renderProps.isSelected || renderProps.isHovered || renderProps.isFocusVisible) && (
+              <div className={checkboxContainer({...renderProps, size}, props.styles)}>
+                <Checkbox 


one thing i noticed is that if i have selectionMode='single', hover over a SelectBox, and click on the checkbox, nothing happens. however, i would expect that the checkbox be marked as selected.

does this need to be a CheckBox component or can we just style something to look like a checkbox? i don't think having nested label elements is valid. it might cause issues with forms. but also right now, i can keyboard navigate to both the select box and the checkbox inside of it. i'm not sure if that's expected or not

yihuiliao · 2025-07-16T01:18:46Z

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

+    ref
+  };
+
+  return allowMultiSelect ? (


part of me wonders if this should be built using Checkbox/Radios. i say that because the keyboard experience is kinda interesting? for example, it's layout is sorta grid-like, so i would expect that if i arrow down, i would go to the item below but sometimes i go the item to the right due to the nature of how Checkbox/Radio's work

EDIT: that said, not sure what you would use since collections seems a little overkill for something like this

yihuiliao · 2025-07-16T23:47:11Z

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

+  color: {
+    isDisabled: 'disabled'
+  }
+}, getAllowedOverrides());


i don't think you need getAllowedOverrides here since these aren't styles that can be overridden or changed by the user. the same can be said for textContainer, descriptionText, and contentContainer

yihuiliao · 2025-07-16T23:47:53Z

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

+        return (
+          <>
+            {(renderProps.isSelected || renderProps.isHovered || renderProps.isFocusVisible) && (
+              <div className={checkboxContainer({...renderProps, size}, props.styles)}>


should checkboxContainer take props.styles?

yihuiliao · 2025-07-16T23:48:56Z

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

+  /**
+   * Whether the SelectBoxGroup should be displayed with an emphasized style.
+   */
+  isEmphasized?: boolean,


i can't seem to find the designs for an isEmphasized style...

S2 SelectBox initial implementation

e4d4c17

yihuiliao changed the title ~~S2 SelectBox Implementation (WIP)~~ wip: S2 SelectBox Implementation Jul 14, 2025

DPandyan added 2 commits July 14, 2025 15:23

Added tests and fixed linting

a431ce0

updated tests to remove styles

7c6a91b

jluyau reviewed Jul 15, 2025

View reviewed changes

snowystinger reviewed Jul 15, 2025

View reviewed changes

DPandyan added 2 commits July 15, 2025 13:23

selectbox refactor and tests refactor

b0a9b78

stories changes and various edits

151e4f6

yihuiliao reviewed Jul 16, 2025

View reviewed changes


		const StarIcon = createIcon(StarSVG);

		const meta: Meta<typeof SelectBoxGroup> = {

wip: S2 SelectBox Implementation #8541

Are you sure you want to change the base?

wip: S2 SelectBox Implementation #8541

Conversation

DPandyan commented Jul 14, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

yihuiliao commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yihuiliao Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yihuiliao Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yihuiliao commented Jul 14, 2025 •

edited

Loading

yihuiliao Jul 16, 2025 •

edited

Loading

yihuiliao Jul 16, 2025 •

edited

Loading