Skip to content

[toggle][ToggleGroup] Create Toggle and ToggleGroup#763

Merged
mj12albert merged 46 commits intomui:masterfrom
mj12albert:feat/toggle-button
Dec 3, 2024
Merged

[toggle][ToggleGroup] Create Toggle and ToggleGroup#763
mj12albert merged 46 commits intomui:masterfrom
mj12albert:feat/toggle-button

Conversation

@mj12albert
Copy link
Member

@mj12albert mj12albert commented Oct 28, 2024

@mj12albert mj12albert added type: new feature Expand the scope of the product to solve a new problem. component: toggle Changes related to the toggle component. labels Oct 28, 2024
@mui-bot
Copy link

mui-bot commented Oct 28, 2024

Netlify deploy preview

https://deploy-preview-763--base-ui.netlify.app/

Generated by 🚫 dangerJS against 5a051ba

@mj12albert mj12albert force-pushed the feat/toggle-button branch 4 times, most recently from 6c0fe92 to 6e04229 Compare October 28, 2024 17:06
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2024
@mj12albert mj12albert force-pushed the feat/toggle-button branch 5 times, most recently from 9bcba83 to 3a74374 Compare October 31, 2024 14:07
@mj12albert mj12albert changed the title [ToggleButton] Create ToggleButton [ToggleButton][ToggleButtonGroup] Create ToggleButton and ToggleButtonGroup Oct 31, 2024
@mj12albert mj12albert force-pushed the feat/toggle-button branch 2 times, most recently from 7cc24fd to b06a97d Compare October 31, 2024 15:17
@mj12albert mj12albert force-pushed the feat/toggle-button branch 10 times, most recently from bcdd1cc to 7c449d8 Compare November 1, 2024 07:52
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 27, 2024
Comment on lines +108 to +111
if (textDirectionRef?.current == null) {
textDirectionRef.current = getTextDirection(element);
}
const isRtl = textDirectionRef.current === 'rtl';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caching this in a ref to mitigate against spamming the keys raised in #831 (comment)

@mj12albert
Copy link
Member Author

mj12albert commented Nov 28, 2024

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(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make the API consistent with RadioGroup and CheckboxGroup - they don't have the .Item part but use Radio.Root and Checkbox.Root

Copy link
Member Author

@mj12albert mj12albert Nov 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 🤷 )

Copy link
Member Author

@mj12albert mj12albert Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make the hook parameters mandatory (per #856). Defaults should be set on the component level.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated ~ f715087

* The value of the ToggleButtonGroup represented by an array of values
* of the items that are pressed
*/
value: readonly string[];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ?

Copy link
Collaborator

@vladmoroz vladmoroz Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discussed this and decided to avoid conditional types in general

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For parity with RadioGroup, we should allow any type of value.

Updated ~ 98746a3

@colmtuite
Copy link
Contributor

  • Docs don't mention the disabled prop on ToggleGroup.
  • Missing orientation?
  • Missing loop?
  • ToggleGroup docs content not updated with recent changes (Anatomy etc.).

@mj12albert
Copy link
Member Author

  • Docs don't mention the disabled prop on ToggleGroup.
  • Missing orientation?
  • Missing loop?
  • ToggleGroup docs content not updated with recent changes (Anatomy etc.).

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: toggle group Changes related to the toggle group component. component: toggle Changes related to the toggle component. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[toggle][ToggleGroup] Implement ToggleGroup [toggle][ToggleGroup] Implement ToggleButton

7 participants