feat: Add ToggleButtonGroup component to RAC and S2 #7264

devongovett · 2024-10-25T21:09:11Z

This adds a new ToggleButtonGroup component to React Aria Components, along with corresponding hooks and S2 components. Similar to CheckboxGroup and RadioGroup, this component coordinates the selection state between multiple ToggleButton children, supporting both single and multiple selection. It also implements arrow key navigation in both horizontal and vertical orientations.

ActionGroup in S2 is split into two components: ActionButtonGroup (which takes ActionButtons as children), and ToggleButtonGroup (which takes ToggleButtons as children). This also swaps SegmentedControl to using ToggleButtonGroup instead of RadioGroup, which enables tooltips to work properly and makes keyboard navigation not affect selection until the user presses Enter.

Some API questions are noted inline.

rspbot · 2024-10-25T21:18:41Z

Build successful! 🎉

devongovett · 2024-10-25T21:10:04Z

packages/@react-aria/button/package.json

@@ -24,6 +24,7 @@
  "dependencies": {
    "@react-aria/focus": "^3.18.4",
    "@react-aria/interactions": "^3.22.4",
+    "@react-aria/toolbar": "3.0.0-beta.10",


Not super ideal that the button package now depends on toolbar but I didn't want to make a whole new package for this...

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

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

devongovett · 2024-10-25T21:15:42Z

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

-  borderRadius: 'lg',
-  width: 'full'
+  borderRadius: 'default',
+  width: 'fit'


SegmentedControl now fits its contents by default rather than filling its parent

Did spectrum say anything about this in the meeting?

They were ok with the change to fit the content width by default. I added an isJustified prop to SementedControl to allow the previous behavior as an option, which also matches the same option in ActionButtonGroup and ToggleButtonGroup.

devongovett · 2024-10-25T21:17:11Z

packages/@react-stately/toggle/src/useToggleGroupState.ts

+ * Manages state for a group of toggles.
+ * It supports both single and multiple selected items.
+ */
+export function useToggleGroupState(props: ToggleGroupProps): ToggleGroupState {


This is called useToggleGroupState rather than useToggleButtonGroupState to make it non-button specific. Not sure what else we'd use it for yet though. Does this make sense?

makes sense to me

packages/@react-types/button/src/index.d.ts

rspbot · 2024-10-25T21:31:03Z

Build successful! 🎉

rspbot · 2024-10-26T00:03:03Z

Build successful! 🎉

rspbot · 2024-10-28T16:46:06Z

Build successful! 🎉

snowystinger

Given the number of API hesitations we have, should we start with UNSTABLE prefixes?

I'll keep reviewing tomorrow

packages/@react-aria/button/src/useToggleButtonGroup.ts

rspbot · 2024-10-28T22:53:40Z

Build successful! 🎉

…tton-group

…tton-group # Conflicts: # packages/@react-spectrum/s2/src/ActionButton.tsx

rspbot · 2024-11-01T19:00:38Z

Build successful! 🎉

rspbot · 2024-11-01T19:23:40Z

Build successful! 🎉

LFDanLu

Approving for testing, just some small questions and comments but otherwise the behavior looks good to me

packages/@react-aria/button/src/useToggleButtonGroup.ts

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

packages/@react-stately/toggle/src/useToggleGroupState.ts

LFDanLu · 2024-11-01T20:50:20Z

packages/@react-stately/toggle/src/useToggleGroupState.ts

+ * Manages state for a group of toggles.
+ * It supports both single and multiple selected items.
+ */
+export function useToggleGroupState(props: ToggleGroupProps): ToggleGroupState {


makes sense to me

packages/react-aria-components/src/ToggleButton.tsx

…tton-group

rspbot · 2024-11-06T17:24:23Z

Build successful! 🎉

rspbot · 2024-11-06T17:24:24Z

## API Changes

react-aria-components

/react-aria-components:ToggleButton

 ToggleButton {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ToggleButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToggleButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
-  id?: string
+  id?: Key
   isDisabled?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ToggleButtonRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/react-aria-components:ToggleButtonProps

 ToggleButtonProps {
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode | ((ToggleButtonRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ToggleButtonRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
-  id?: string
+  id?: Key
   isDisabled?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   slot?: string | null
   style?: CSSProperties | ((ToggleButtonRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/react-aria-components:ToggleButtonGroup

+ToggleButtonGroup {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | ((ToggleButtonGroupRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((ToggleButtonGroupRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultSelectedKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: Orientation = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+  slot?: string | null
+  style?: CSSProperties | ((ToggleButtonGroupRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:ToggleButtonGroupContext

+ToggleButtonGroupContext {
+  UNTYPED
+}

/react-aria-components:ToggleGroupStateContext

+ToggleGroupStateContext {
+  UNTYPED
+}

/react-aria-components:ToggleButtonGroupProps

+ToggleButtonGroupProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | ((ToggleButtonGroupRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((ToggleButtonGroupRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultSelectedKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: Orientation = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+  slot?: string | null
+  style?: CSSProperties | ((ToggleButtonGroupRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:ToggleButtonGroupRenderProps

+ToggleButtonGroupRenderProps {
+  isDisabled: boolean
+  state: ToggleGroupState
+}

@react-aria/button

/@react-aria/button:useToggleButtonGroup

+useToggleButtonGroup {
+  props: AriaToggleButtonGroupProps
+  state: ToggleGroupState
+  ref: RefObject<HTMLElement | null>
+  returnVal: undefined
+}

/@react-aria/button:useToggleButtonGroupItem

+useToggleButtonGroupItem {
+  props: AriaToggleButtonGroupItemOptions<ElementType>
+  state: ToggleGroupState
+  ref: RefObject<any>
+  returnVal: undefined
+}

/@react-aria/button:AriaToggleButtonGroupProps

+AriaToggleButtonGroupProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  defaultSelectedKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: Orientation = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+}

/@react-aria/button:ToggleButtonGroupAria

+ToggleButtonGroupAria {
+  groupProps: DOMAttributes
+}

/@react-aria/button:AriaToggleButtonGroupItemProps

+AriaToggleButtonGroupItemProps <E extends ElementType = 'button'> {
+  aria-controls?: string
+  aria-describedby?: string
+  aria-details?: string
+  aria-expanded?: boolean | 'true' | 'false'
+  aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
+  aria-label?: string
+  aria-labelledby?: string
+  aria-pressed?: boolean | 'true' | 'false' | 'mixed'
+  autoFocus?: boolean
+  children?: ReactNode
+  elementType?: ElementType | JSXElementConstructor<any> = 'button'
+  excludeFromTabOrder?: boolean
+  id: Key
+  isDisabled?: boolean
+  onBlur?: (FocusEvent<Target>) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  preventFocusOnPress?: boolean
+  type?: 'button' | 'submit' | 'reset' = 'button'
+}

@react-aria/toolbar

/@react-aria/toolbar:useToolbar

 useToolbar {
   props: AriaToolbarProps
-  ref: RefObject<HTMLDivElement | null>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-spectrum/s2

/@react-spectrum/s2:SegmentedControl

 SegmentedControl {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
-  defaultSelectedKey?: string
+  defaultSelectedKey?: Key
   isDisabled?: boolean
-  onSelectionChange?: (string) => void
-  selectedKey?: string | null
+  isJustified?: boolean
+  onSelectionChange?: (Key) => void
+  selectedKey?: Key | null
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:SegmentedControlItem

 SegmentedControlItem {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
-  id: string
+  id: Key
   isDisabled?: boolean
   styles?: StylesProp
 }

/@react-spectrum/s2:ToggleButton

 ToggleButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
-  id?: string
+  id?: Key
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isSelected?: boolean
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/@react-spectrum/s2:SegmentedControlProps

 SegmentedControlProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
-  defaultSelectedKey?: string
+  defaultSelectedKey?: Key
   isDisabled?: boolean
-  onSelectionChange?: (string) => void
-  selectedKey?: string | null
+  isJustified?: boolean
+  onSelectionChange?: (Key) => void
+  selectedKey?: Key | null
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:SegmentedControlItemProps

 SegmentedControlItemProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
-  id: string
+  id: Key
   isDisabled?: boolean
   styles?: StylesProp
 }

/@react-spectrum/s2:ToggleButtonProps

 ToggleButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
-  id?: string
+  id?: Key
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isSelected?: boolean
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/@react-spectrum/s2:ActionButtonGroup

+ActionButtonGroup {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  density?: 'compact' | 'regular' = "regular"
+  isDisabled?: boolean
+  isJustified?: boolean
+  isQuiet?: boolean
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  staticColor?: 'white' | 'black'
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ActionButtonGroupContext

+ActionButtonGroupContext {
+  UNTYPED
+}

/@react-spectrum/s2:ToggleButtonGroup

+ToggleButtonGroup {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  defaultSelectedKeys?: Iterable<Key>
+  density?: 'compact' | 'regular' = "regular"
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  isEmphasized?: boolean
+  isJustified?: boolean
+  isQuiet?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  staticColor?: 'white' | 'black'
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ToggleButtonGroupContext

+ToggleButtonGroupContext {
+  UNTYPED
+}

/@react-spectrum/s2:ActionButtonGroupProps

+ActionButtonGroupProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  density?: 'compact' | 'regular' = "regular"
+  isDisabled?: boolean
+  isJustified?: boolean
+  isQuiet?: boolean
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  staticColor?: 'white' | 'black'
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ToggleButtonGroupProps

+ToggleButtonGroupProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  defaultSelectedKeys?: Iterable<Key>
+  density?: 'compact' | 'regular' = "regular"
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  isEmphasized?: boolean
+  isJustified?: boolean
+  isQuiet?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  staticColor?: 'white' | 'black'
+  styles?: StylesPropWithHeight
+}

@react-stately/toggle

/@react-stately/toggle:useToggleGroupState

+useToggleGroupState {
+  props: ToggleGroupProps
+  returnVal: undefined
+}

/@react-stately/toggle:ToggleGroupProps

+ToggleGroupProps {
+  defaultSelectedKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isDisabled?: boolean
+  onSelectionChange?: (Set<Key>) => void
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'single' | 'multiple'
+}

/@react-stately/toggle:ToggleGroupState

+ToggleGroupState {
+  isDisabled: boolean
+  selectedKeys: Set<Key>
+  selectionMode: 'single' | 'multiple'
+  setSelected: (Key, boolean) => void
+  setSelectedKeys: (Set<Key>) => void
+  toggleKey: (Key) => void
+}

reidbarber

LGTM

devongovett added 2 commits October 25, 2024 14:01

feat: Add ToggleButtonGroup component to RAC and S2

4c35d46

Update SegmentedControl

898c8b1

cleanup

ad19428

devongovett commented Oct 25, 2024

View reviewed changes

Fix text

700552c

Missing aria-labels in stories

b36385e

snowystinger reviewed Oct 28, 2024

View reviewed changes

packages/@react-aria/button/src/useToggleButtonGroup.ts Outdated Show resolved Hide resolved

packages/@react-aria/button/src/useToggleButtonGroup.ts Show resolved Hide resolved

Fix SegmentedControl font and disabled styles

a6d69ec

devongovett added 3 commits October 29, 2024 20:31

Merge branch 'main' of github.com:adobe/react-spectrum into toggle-bu…

e4e02b7

…tton-group

Merge branch 'main' of github.com:adobe/react-spectrum into toggle-bu…

0da78cb

…tton-group # Conflicts: # packages/@react-spectrum/s2/src/ActionButton.tsx

Use id prop instead of value

5b4b95c

Add isJustified prop to SegmentedControl

4df55e4

LFDanLu previously approved these changes Nov 1, 2024

View reviewed changes

snowystinger previously approved these changes Nov 5, 2024

View reviewed changes

devongovett added 5 commits November 6, 2024 09:02

Merge branch 'main' of github.com:adobe/react-spectrum into toggle-bu…

b852872

…tton-group

Fix disabled state

a29b9a0

Move aria labeling props into useToolbar

787c3d4

Fix copy paste

515b83d

Omit selection props from AriaToggleButtonGroupItemProps

e70f360

devongovett dismissed stale reviews from snowystinger and LFDanLu via e70f360 November 6, 2024 17:14

LFDanLu approved these changes Nov 6, 2024

View reviewed changes

reidbarber approved these changes Nov 6, 2024

View reviewed changes

devongovett added this pull request to the merge queue Nov 6, 2024

Merged via the queue into main with commit c703323 Nov 6, 2024
30 checks passed

devongovett deleted the toggle-button-group branch November 6, 2024 18:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add ToggleButtonGroup component to RAC and S2 #7264

feat: Add ToggleButtonGroup component to RAC and S2 #7264

devongovett commented Oct 25, 2024

rspbot commented Oct 25, 2024

devongovett Oct 25, 2024

devongovett Oct 25, 2024

yihuiliao Oct 29, 2024

devongovett Nov 1, 2024

devongovett Oct 25, 2024

LFDanLu Nov 1, 2024

rspbot commented Oct 25, 2024

rspbot commented Oct 26, 2024

rspbot commented Oct 28, 2024

snowystinger left a comment •

edited

Loading

rspbot commented Oct 28, 2024

rspbot commented Nov 1, 2024

rspbot commented Nov 1, 2024

LFDanLu left a comment

LFDanLu Nov 1, 2024

rspbot commented Nov 6, 2024

rspbot commented Nov 6, 2024

reidbarber left a comment

feat: Add ToggleButtonGroup component to RAC and S2 #7264

feat: Add ToggleButtonGroup component to RAC and S2 #7264

Conversation

devongovett commented Oct 25, 2024

rspbot commented Oct 25, 2024

devongovett Oct 25, 2024

Choose a reason for hiding this comment

devongovett Oct 25, 2024

Choose a reason for hiding this comment

yihuiliao Oct 29, 2024

Choose a reason for hiding this comment

devongovett Nov 1, 2024

Choose a reason for hiding this comment

devongovett Oct 25, 2024

Choose a reason for hiding this comment

LFDanLu Nov 1, 2024

Choose a reason for hiding this comment

rspbot commented Oct 25, 2024

rspbot commented Oct 26, 2024

rspbot commented Oct 28, 2024

snowystinger left a comment • edited Loading

Choose a reason for hiding this comment

rspbot commented Oct 28, 2024

rspbot commented Nov 1, 2024

rspbot commented Nov 1, 2024

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Nov 1, 2024

Choose a reason for hiding this comment

rspbot commented Nov 6, 2024

rspbot commented Nov 6, 2024

react-aria-components

/react-aria-components:ToggleButton

/react-aria-components:ToggleButtonProps

/react-aria-components:ToggleButtonGroup

/react-aria-components:ToggleButtonGroupContext

/react-aria-components:ToggleGroupStateContext

/react-aria-components:ToggleButtonGroupProps

/react-aria-components:ToggleButtonGroupRenderProps

@react-aria/button

/@react-aria/button:useToggleButtonGroup

/@react-aria/button:useToggleButtonGroupItem

/@react-aria/button:AriaToggleButtonGroupProps

/@react-aria/button:ToggleButtonGroupAria

/@react-aria/button:AriaToggleButtonGroupItemProps

@react-aria/toolbar

/@react-aria/toolbar:useToolbar

@react-spectrum/s2

/@react-spectrum/s2:SegmentedControl

/@react-spectrum/s2:SegmentedControlItem

/@react-spectrum/s2:ToggleButton

/@react-spectrum/s2:SegmentedControlProps

/@react-spectrum/s2:SegmentedControlItemProps

/@react-spectrum/s2:ToggleButtonProps

/@react-spectrum/s2:ActionButtonGroup

/@react-spectrum/s2:ActionButtonGroupContext

/@react-spectrum/s2:ToggleButtonGroup

/@react-spectrum/s2:ToggleButtonGroupContext

/@react-spectrum/s2:ActionButtonGroupProps

/@react-spectrum/s2:ToggleButtonGroupProps

@react-stately/toggle

/@react-stately/toggle:useToggleGroupState

/@react-stately/toggle:ToggleGroupProps

/@react-stately/toggle:ToggleGroupState

reidbarber left a comment

Choose a reason for hiding this comment

snowystinger left a comment •

edited

Loading