react-native-paper
react-native-paper copied to clipboard
callstack
New component: SegmentedButton
This PR introduces new component named: SegmentedButton.
Summary
General overview of the component: https://m3.material.io/components/segmented-buttons/overview
Highlights:
- single or multi-selection
- segmented buttons can have 2-5 segments, segments cannot wrap into a new line
- icons can be used in place of labels
- icon next to the label is optional
Screenshots
Version 3
| ios | android |
|---|---|
 |
 |
Version 2
| ios | android |
|---|---|
 |
 |
Test plan
Write tests for this component.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @okwasniewski, thank you for your pull request 🤗. The documentation from this branch can be viewed here.
@satya164 Thanks for your feedback 👍 I have a few questions about what to do next with this component.
I'm not sure about the API of
SegementedButtonandSegmentedButton.Groupgiven thatSegementedButtoncannot be used on its own similar to other components which have individual components as well as a group component.It's more similar to the
FAB.Groupcomponent. Probably it's better to have a single component that takes an array of items instead of having a group and children.
You are right, this component is not consistent with others (like ToggleButton and ToggleButton.Group) and it would be misleading. There are two options: allow it to be used without SegmentedButton.Group or refactor the API to pass array of items.
First option is pretty straight forward just remove the context check. This approach maybe useful for people who want to customize and implement their own logic for handling the checked state.
Second approach would make the component easier to use, however less customizable - I'm not sure which one is better.
Regarding the second approach implementation:
Should I just change the Children.map inside SegmentedButton.Group to map an array of passed items? Then rename the SegmentedButton.Group to a SegmentedButton and remove the current SegmentedButton export (to use it only internally) or how you would go about it?
cc: @lukewalczak @Drakeoon - What do you guys think?
I can agree with @satya164, that we can change the API since SegmentedButton isn't an individual component.
Imo I would prefer the approach of removing the context check rather than passing an array with items.
After internal discussion we decided to refactor the component API to pass the items array. Using the SegmentedButton component without group doesn't make sense. Current SegmentedButton export will be removed and used only internally and SegmentedButton.Group will be renamed to SegmentedButtons.