feat: add hug layout for SegmentedControl#588
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a new tabLayout option to SegmentedControl (React + React Native) to support content-hugging tabs (instead of always using equal-width tabs), and updates the pill sizing/positioning logic accordingly.
Changes:
- Introduce
tabLayout?: 'hug' | 'fixed'prop (defaulting to'hug') in bothui-reactandui-rnative. - Update pill measurement/animation logic to support per-tab widths/positions in “hug” mode.
- Update Storybook stories/sandbox examples to showcase both layouts and improve label truncation behavior.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/ui-rnative/src/lib/Components/SegmentedControl/usePillLayout.ts | Adds per-button layout registration + hug/fixed pill sizing logic |
| libs/ui-rnative/src/lib/Components/SegmentedControl/types.ts | Adds tabLayout prop typing/docs |
| libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx | Extends context with tabLayout + registerButtonLayout |
| libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControl.tsx | Wires tabLayout through, updates styles, registers button layouts, truncates labels |
| libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx | Adds controls + “TabLayoutShowcase” story and updates examples |
| libs/ui-react/src/lib/Components/SegmentedControl/usePillElementLayoutEffect.ts | Switches pill layout computation to use actual button dimensions + adds “ready” gate for transitions |
| libs/ui-react/src/lib/Components/SegmentedControl/types.ts | Adds tabLayout prop typing/docs |
| libs/ui-react/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx | Extends context with tabLayout |
| libs/ui-react/src/lib/Components/SegmentedControl/SegmentedControl.tsx | Adds tabLayout styling and pill transition gating |
| libs/ui-react/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx | Adds controls + “TabLayoutShowcase” story and updates examples |
| libs/ui-react/.storybook/components/CustomTabs.tsx | Removes forced width so tabs can hug by default |
| apps/app-sandbox-rnative/src/app/blocks/SegmentedControls.tsx | Adds examples for hug/fixed and icons |
| .nx/version-plans/version-plan-1774370344465-rnative.md | Patch version plan for rnative |
| .nx/version-plans/version-plan-1774370344465-react.md | Patch version plan for react |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControl.tsx
Show resolved
Hide resolved
libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControl.tsx
Show resolved
Hide resolved
libs/ui-react/src/lib/Components/SegmentedControl/usePillElementLayoutEffect.ts
Show resolved
Hide resolved
| className, | ||
| disabled: disabledProp, | ||
| appearance = 'background', | ||
| tabLayout = 'hug', |
There was a problem hiding this comment.
Defaulting tabLayout to 'hug' changes the SegmentedControl's default sizing behavior (previously full-width equal segments). If this is meant to be non-breaking, consider keeping the existing default ('fixed') and letting consumers opt into 'hug'.
| tabLayout = 'hug', | |
| tabLayout = 'fixed', |
There was a problem hiding this comment.
@aammami-ledger @gamegee @zel-kass This is nicely raised by Copilot, do we want to default to "fixed" as it was before to not introduce a breaking change?
There was a problem hiding this comment.
hmm good point, I believe hug makes more sense as a default
From what I see in the ledger-live codebase, the component seems to not be used yet
There was a problem hiding this comment.
I would say no as we saw the "normal" behaviour of segmented controls in other DS it's hug
But maybe validated that with Laurine as well
There was a problem hiding this comment.
Ty, both. I'll then ask Laurine and tag as breaking change or not according to the answer.
| * - "fixed": all tabs share equal width, filling the container | ||
| * @default 'hug' | ||
| */ | ||
| tabLayout?: 'hug' | 'fixed'; |
There was a problem hiding this comment.
i have a similar question to Simon about the usage of hug in his PR would love to know your take on this #587 (comment)
I personally think we should go with fit and streamline this in Dialog to use fit as well.
But also would be happy to leave hug if you guys are in favour of that
There was a problem hiding this comment.
I prefer the "fit" keyword as well, I think it's more widely used. Perhaps I can update here and then we'd open a breaking change ticket for updating dialog as well?
There was a problem hiding this comment.
I did used the hug as well, I would suggest to move all hug to fit in a single release wdyt ?
There was a problem hiding this comment.
I vote for this as well, curious to know what Sim thinks
There was a problem hiding this comment.
Okay, will keep hug and create ticket to migrate to fit.
There was a problem hiding this comment.
It doesn’t really make sense to release two components and then introduce a breaking change right afterward—I don’t think that’s necessary, IMHO
libs/ui-react/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx
Outdated
Show resolved
Hide resolved
libs/ui-rnative/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx
Outdated
Show resolved
Hide resolved
libs/ui-react/src/lib/Components/SegmentedControl/SegmentedControl.tsx
Outdated
Show resolved
Hide resolved
gamegee
left a comment
gamegee
left a comment
There was a problem hiding this comment.
Minor:
I would expect the control to update the width of the Segmented control in the stories when fixed
Maybe need to set larger width to the story layout
Closes DLS-626.