[WEB-8152] Add ButtonGroup & SplitButton, true up button-family states to Figma#228
Open
codingwolf-at wants to merge 10 commits into
Open
[WEB-8152] Add ButtonGroup & SplitButton, true up button-family states to Figma#228codingwolf-at wants to merge 10 commits into
codingwolf-at wants to merge 10 commits into
Conversation
- Introduced `ButtonGroup` and `ButtonGroupButton` components to create a connected button group with shared magnitude via context. - Implemented `SplitButton` component, combining a main action button with a menu-triggering icon button, maintaining consistent styling and behavior. - Added stories for both components to demonstrate various states, including interaction tests and size variations, ensuring comprehensive coverage for UI configurations. - Established context for managing button magnitudes within the `ButtonGroup`, enhancing flexibility and usability across button segments.
|
📚 Storybook preview: https://pr-228-propel-storybook.vamsi-906.workers.dev |
…yling - Adjusted `MenuContent` alignment to "end" in multiple SplitButton stories for consistent presentation. - Enhanced interaction tests to ensure proper focus handling and visual consistency of the SplitButton trigger. - Updated comments in the variants file to clarify styling behavior related to disabled states and border handling. - Refined variant classes to ensure proper border and divider behavior for primary and secondary segments.
…havior - Added detailed comments regarding the selection of the `LoaderCircle` glyph over the radial spinner from Figma, emphasizing adherence to using lucide icons. - Enhanced documentation on the spinner's animation behavior, specifying the purpose of the `--animate-spinner-reveal` and perpetual `spin` animations for improved clarity.
…te handling - Updated loading state behavior in `Button` and `AnchorButton` components to display a trailing spinner instead of replacing the label icon. - Enhanced documentation to clarify the loading state effects on the button and anchor button labels. - Adjusted styles in `preview.css` to ensure consistent background and text colors in light and dark modes. - Improved story examples for both components to reflect the new loading state behavior and ensure clarity in usage.
- Deleted the `AllVariantsDebug` story and associated debug functions to clean up the button stories. - Removed unused constants and comments related to the debug sheet, streamlining the code for better maintainability. - Ensured that the button stories focus on relevant examples and usage without the clutter of temporary debugging elements.
…ndling - Introduced a `controlChromePair` utility to standardize the application of prominence and tone across button and icon-button components. - Updated button and icon-button stories to reflect the new control chrome structure, ensuring consistent styling and behavior. - Enhanced loading state handling in button components, maintaining focus and accessibility during async operations. - Improved documentation and comments for clarity on component behavior and usage.
…roved prominence handling - Added `argTypes` for `magnitude` and `prominence` in SplitButton and ButtonGroup stories to standardize control options. - Updated SplitButton component to remove the tone prop, enforcing a neutral tone for consistency. - Refined story examples to better demonstrate the visual differences between primary and secondary prominence styles. - Improved documentation and comments for clarity on component behavior and usage.
codingwolf-at
changed the title
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
…ing loading states - Updated button and icon-button stories to replace `userEvent.click` with `fireEvent.click` for better compatibility with loading states. - Enhanced comments to clarify the rationale behind direct event dispatching when buttons are in a loading state. - Ensured consistent behavior and accessibility during async operations across button components.
- Added a decorator to center align buttons in multi-button showcases, ensuring a uniform presentation. - Updated individual button story renders to use fragments instead of divs for cleaner structure. - Improved overall story organization and visual consistency across IconButton examples.
codingwolf-at
force-pushed
the
WEB-8152/button-design-docs
branch
from
8920169 to
e313281
Compare
anmolsinghbhatia
requested changes
Jul 15, 2026
| // (not `layer-transparent-hover` — 4%/6% black alpha reads as “no fill” on white). | ||
| "bg-layer-transparent text-secondary", | ||
| "hover:bg-layer-transparent-hover active:bg-layer-transparent-active", | ||
| "hover:bg-layer-3 active:bg-layer-3-hover", |
There was a problem hiding this comment.
Figma’s ghost hover/active states use transparent-hover / transparent-active overlays for both Button and IconButton, rather than the opaque layer-3 ramp. Could we keep hover:bg-layer-transparent-hover active:bg-layer-transparent-active here?
| "disabled:border-disabled disabled:bg-layer-disabled disabled:text-disabled disabled:shadow-none", | ||
| // Figma: outlined pill stays. Use `border-subtle` (not `border-disabled`) — disabled | ||
| // token is the same as `--bg-canvas`, so the stroke vanishes on the Storybook/page canvas. | ||
| "disabled:border-subtle disabled:bg-layer-2 disabled:text-disabled disabled:shadow-none", |
There was a problem hiding this comment.
The disabled secondary spec keeps a transparent fill, but this applies bg-layer-2. On non-canvas surfaces that will show as a filled chip—could disabled, aria-disabled, and busy states remain transparent?
…d state visibility - Modified styles for disabled button variants to ensure the background is transparent while maintaining the border color, improving visual clarity. - Adjusted hover and active states to utilize transparent overlays, ensuring consistent appearance across different surfaces. - Enhanced comments for better understanding of design decisions based on Figma specifications.
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
2 participants
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
Adds two new button-family components and trues up the existing button system against the Figma "Global components" sheets.
New components
elements + components): a connected action row per Figma "Button Group" — the container owns the raised surface, outer border, dividers, and clipped corners;ButtonGroupButtonsegments are transparent/borderless with their own tighter geometry (sm/md/lg, no xl) and an inset focus ring. The ready-made addsrole="group"and sharesmagnitudewith every segment via context (segment prop still wins).elements+components): a main-actionButtonplus a chevronIconButtongrafted as the surroundingMenu's trigger. Primary lays the segments out as two discrete pills (1px gap, facing corners soft-squared to 2px); secondary connects them into one outline, collapsing the doubled border so the leading segment's end border is the divider. Neutral-only, primary/secondary only (Figma ships no tertiary/ghost/danger split). Frame child selectors deliberately avoid:last-child— Base UI appends focus-guard spans inside the frame while the menu is open (regression-tested). Docs/stories anchor the menu withMenuContent align="end"so it drops below the control flush with its end edge.Button-family true-up (Figma)
control-chrome: per-prominence disabled/loading palettes (primary/danger fill → solidlayer-disabledpill; secondary keeps its outline withborder-subtleso it doesn't vanish on the canvas; tertiary/ghost drop their fill), ghost hover now uses the solidlayer-3ramp, secondary-danger rests transparent. All disabled keys are mirrored onaria-disabled/aria-busyso soft-disabled loading styles correctly.ControlChromePairclosed type + helper: danger exists only on primary/secondary, so invalidprominence × tonecombos are now unrepresentable inButton/IconButtonprops.Button/AnchorButton(matches Figma); the label no longer opacity-dims — muting comes from the chrome. Documented the deliberateLoaderCircle-instead-of-Figma-radial spinner decision.AnchorButton: underline moved onto the label only (flanking icons stay un-underlined); disabled keeps the underline and only mutes color; loading supported.bg-canvas→bg-layer-2solayer-3-keyed fills (tertiary rest) are visible; AGENTS.md updated for the icon node-prop convention.Type of Change
Test Scenarios
States: verify new disabled/loading fills per prominence (secondary keeps its outline, tertiary/ghost go transparent) and ghost hover shows the solid grey fill.loading: spinner appears at the trailing edge, control stays focusable but non-activatable; AnchorButton underline covers text only.vp checkand full Storybook suite green (817 tests).Snapshots
Figma URL