IconButton: add hasTriangleDownIcon prop for dropdown affordance#8067
Draft
dylanatsmith wants to merge 1 commit into
Draft
IconButton: add hasTriangleDownIcon prop for dropdown affordance#8067dylanatsmith wants to merge 1 commit into
hasTriangleDownIcon prop for dropdown affordance#8067dylanatsmith wants to merge 1 commit into
Conversation
Adds a working `hasTriangleDownIcon` boolean prop to IconButton that renders a TriangleDownIcon after the icon to indicate the button opens a dropdown or menu. The control switches from a fixed square to an auto-width layout with token-based gap and padding per size. The only available trailing glyph is TriangleDownIcon. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 956e893 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
github-actions
Bot
added
the
integration-tests: recommended
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
1 participant
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.
Closes #
Adds a first-class prop to
IconButtonso an icon-only button can show aTriangleDownIconcaret indicating it opens a dropdown/menu. TodayIconButtonrenders a single, square icon —ButtonBaseshort-circuits to render only theiconand ignorestrailingAction/children — so there was no sanctioned way to add a caret. This introduces one deliberately rather than composing two glyphs into a customicon.Note
hasTriangleDownIconis a working prop name to be discussed with Primer design before stabilising. By design, the only available trailing glyph isTriangleDownIcon. This PR is a draft to support that conversation.Changelog
New
IconButtonnow acceptshasTriangleDownIcon?: boolean. Whentrue, aTriangleDownIconis rendered after the icon.Changed
hasTriangleDownIconis set, theIconButtonswitches from a fixed square to an auto-width layout (token-basedgapandpadding-inlineper size). Adata-has-triangle-down-iconattribute on the button drives the styling; the caret carriesdata-component="triangleDownIcon".Removed
Rollout strategy
Testing & Reviewing
hasTriangleDownIconis set and thatdata-has-triangle-down-iconis applied accordingly.IconButton/Devstory WithTriangleDownIcon demonstrates the three sizes and theprimary/invisiblevariants.aria-haspopup/aria-expandedautomatically, or leave that to the consumer (asActionMenudoes today).Merge checklist