[WEB-8162] feat(pill): outline/soft emphasis, loading spinner placement, truncate title#231
Open
codingwolf-at wants to merge 5 commits into
Open
[WEB-8162] feat(pill): outline/soft emphasis, loading spinner placement, truncate title#231codingwolf-at wants to merge 5 commits into
codingwolf-at wants to merge 5 commits into
Conversation
- Introduced a new `TruncatedLabel` story demonstrating the behavior of labels exceeding the 120px cap, which now truncate with an ellipsis. - Updated `PillLabel` to automatically set a native `title` attribute for string children, allowing full text recovery on hover. - Enhanced documentation to clarify the new functionality and ensure consistent user experience across pill components.
|
📚 Storybook preview: https://pr-231-propel-storybook.vamsi-906.workers.dev |
- Introduced temporary debug stories for `PillSwitch`, `PillButton`, and `IconPill` to facilitate visual QA, showcasing various states (Default, Hover, Active, Disabled, Loading) across different magnitudes. - Added a `plusIcon` helper function for consistent icon rendering in the debug stories. - Updated the `TruncatedLabel` story to reflect a simplified label for better clarity. - Marked debug stories with tags to exclude them from autodocs and manifest generation, ensuring they remain for testing purposes only.
- Added `emphasis` prop to `PillButton`, allowing for `outline` and `soft` styles, enhancing visual differentiation. - Updated `PillButton` stories to demonstrate both emphasis treatments across various states, ensuring comprehensive visual QA. - Modified existing stories to include emphasis in their configurations, improving consistency and clarity in the component's usage. - Adjusted documentation to reflect the new emphasis feature and its implications for styling and behavior.
…nality - Updated `PillButton`, `PillSwitch`, and `IconPill` components to enhance their descriptions and ensure consistency in usage. - Reorganized stories to demonstrate new emphasis styles (`outline` and `soft`) and various states (Default, Hover, Active, Disabled, Loading) for better visual QA. - Improved accessibility features by ensuring `aria-busy` and `aria-disabled` attributes are correctly applied during loading states. - Enhanced documentation to reflect changes and clarify component behavior, ensuring a consistent user experience across the Pill components.
codingwolf-at
changed the title
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
anmolsinghbhatia
requested changes
Jul 15, 2026
There was a problem hiding this comment.
Figma caps PillButton at 150px, while PillSwitch is capped at 120px. Sharing max-w-[120px] constrains PillButton too early—could we keep 120px for PillSwitch and give PillButton its specified 150px cap?
…ion handling - Clarified documentation for label truncation behavior in `TruncatedLabel` stories, specifying width caps for `PillButton` (150px) and `PillSwitch` (120px). - Adjusted `labelPillBase` to remove width cap definitions, ensuring they are set directly in the respective container variants. - Enhanced `pillButtonVariants` and `pillSwitchVariants` to include maximum width settings, aligning with design specifications for better visual consistency.
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
emphasisonPillButton(outline≈ secondary,soft≈ tertiary); components default tooutlinetitleonPillLabelfor string children so truncated labels recover on hoverType of Change
Screenshots and Media (if applicable)
Test Scenarios
titlearia-busy+ focusable, clicks blockedvp checkon pill packages; Pill story tests passFigma URL