Repository navigation
Conversation
With className="w-full" and a long hint, the flex row squeezed the ToggleBase track (sm 36px became about 25px). Add shrink-0 to the track, the same way Checkbox and Radio bases already do, and add a "Toggles full width" story that shows long and short hints side by side.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
ToggleBasehad noshrink-0, so in a full-widthToggle(className="w-full") with a long hint the flex row squeezed the track: the sm track went from 36px to about 25px and the md track from 44px to about 26px. This addsshrink-0to the track, like the Checkbox and Radio bases already have, and a "Toggles full width" story with long and short hints side by side.Related issues
Closes #226
Type of change
Testing
Measured the track widths in the new story in headless Chromium: before, 24.7px and 26.3px for the long-hint toggles against 36px and 44px for the short-hint ones; after, all four tracks are 36px (sm) and 44px (md). The existing toggle stories are unchanged, since
w-maxnever squeezed the track.bun run test(tsc, eslint, prettier) passes.Testing checklist
Manual testing steps
bun run storybookand open Base components / Toggles / Toggles full width.Screenshots/Videos
Before
After
The video shows the new story in this branch, with the long-hint and short-hint tracks at the same width.
untitledui-react.mp4
Code quality checklist
@/components/...)📚 Documentation
Breaking changes
None.
Additional context
#218 also edits the first class string of
ToggleBase, so whichever lands second needs a one-word rebase.Fix written with Claude Code; video is an automated browser run of this branch recorded by User Stories Bot.