[toggle][ToggleGroup] Create Toggle and ToggleGroup#763
[toggle][ToggleGroup] Create Toggle and ToggleGroup#763mj12albert merged 46 commits intomui:masterfrom
Toggle and ToggleGroup#763Conversation
Netlify deploy preview |
6c0fe92 to
6e04229
Compare
e07b2ef to
f23c6df
Compare
9bcba83 to
3a74374
Compare
ToggleButtonToggleButton and ToggleButtonGroup
7cc24fd to
b06a97d
Compare
bcdd1cc to
7c449d8
Compare
26c97cd to
54310b3
Compare
| if (textDirectionRef?.current == null) { | ||
| textDirectionRef.current = getTextDirection(element); | ||
| } | ||
| const isRtl = textDirectionRef.current === 'rtl'; |
There was a problem hiding this comment.
Caching this in a ref to mitigate against spamming the keys raised in #831 (comment)
54310b3 to
f4c3c04
Compare
f4c3c04 to
f1e3786
Compare
|
This PR is up to date again with all the library changes since it was opened, pinging @colmtuite again for a review 🙏 |
| * | ||
| * - [ToggleButtonGroupItem API](https://base-ui.com/components/react-toggle-button-group/#api-reference-ToggleButtonGroupItem) | ||
| */ | ||
| const ToggleButtonGroupItem = React.forwardRef(function ToggleButtonGroupItem( |
There was a problem hiding this comment.
We should make the API consistent with RadioGroup and CheckboxGroup - they don't have the .Item part but use Radio.Root and Checkbox.Root
There was a problem hiding this comment.
I started off doing that but in the end it was more practical to have this Item subcomponent, let me look up what the actual problem was
@colmtuite is this an issue for you?
There was a problem hiding this comment.
The main issue was, if there wasn't the ToggleButtonGroup.Item component, the value becomes optional for ToggleButton.Root, even when it's in a toggle group
With the separate .Item, it's easier to ensure all toggle buttons in a group have a value
Unlike Accordion/Tabs, it makes less sense to not provide your own value and use the index position fallback value (it would still work 🤷 )
There was a problem hiding this comment.
We decided to align the API with RadioGroup/CheckboxGroup for consistency, as it's relatively easy for users to enforce a required value for toggle buttons inside a group themselves
2d8ec7e
| } | ||
|
|
||
| export namespace useToggleButtonRoot { | ||
| export interface Parameters { |
There was a problem hiding this comment.
Make the hook parameters mandatory (per #856). Defaults should be set on the component level.
| * The value of the ToggleButtonGroup represented by an array of values | ||
| * of the items that are pressed | ||
| */ | ||
| value: readonly string[]; |
There was a problem hiding this comment.
It might be better DX if the type of the value was an array only when toggleMultiple is set.
For parity with RadioGroup, we should allow any type of value.
There was a problem hiding this comment.
For the value, I think it might be easier to remember (or harder to do something wrong) if it was always an array, if not we'd have to do a warning or something if you get the type wrong here
What do you think @atomiks @vladmoroz ?
There was a problem hiding this comment.
It might be better DX if the type of the value was an array only when toggleMultiple is set.
Radix does this (different value type for accordion and toggle group based on whether they accept multiple items) and every single time I've created a wrapped accordion component for a design system it's been painful. You can't just pass props around without getting into some weird dance trying to please TypeScript
I said this about asChild and will maintain throughout that we should design our API without conditional types. They make sense on the surface but harm the DX more than they help you.
So yeah I really like always having an array as a value.
There was a problem hiding this comment.
We discussed this and decided to avoid conditional types in general
There was a problem hiding this comment.
For parity with RadioGroup, we should allow any type of value.
Updated ~ 98746a3
|
@colmtuite I double checked and the props are all here, also fixed the docs content (anatomy) I think there is an issue on master right now causing the props table to not generate correctly, so they appear missing from the docs in the deploy preview, I'll investigate this separately |
Closes #11
Closes #31
Docs: