feat(action)!: update to 5.0 design #13252
Open
+255
−84
Conversation
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
…o the new API changes
…lharper/10759-action-design-4.0
…w conditionally rendered based on the presence of actual text and when textEnabled is on
…lharper/10759-action-design-4.0
…lharper/10759-action-design-4.0
…ve state to achieve the desired inset look. Need to adjust the gap between the buttons next, and accomodate dividing borders.
…lharper/10759-action-design-4.0
…ll need to be handled by the bar css instead of the action's inline padding
…a bar will need to be handled by the bar css instead of the action's inline padding" This reverts commit 5bb8872.
… a bar will need to be handled by the bar css instead of the action's inline padding" This reverts commit 10ca9c1.
eriklharper
changed the title
…tyle blocks and adding min-block-size to each scale to accommodate text-only mode
…e horizontal dividing line
…al dividing border by using a linear-gradient border image
…on-group layouts. Adding an internal css custom property that calculates the proper "margin" to add to the dividing border based on the action's corner-radius token value. Also updates the units to use a calculation based on 100% of the container size so that we don't have to set the border-image separately for each scale
…lharper/10759-action-design-4.0
eriklharper
requested review from
jcfranco and
macandcheese
and removed request for
jcfranco and
macandcheese
macandcheese
approved these changes
Dec 3, 2025
Contributor
macandcheese
left a comment
macandcheese
left a comment
There was a problem hiding this comment.
Looks great! e2e failure seems unrelated.
jcfranco
requested changes
Dec 3, 2025
Member
jcfranco
left a comment
jcfranco
left a comment
There was a problem hiding this comment.
This is looking great, @eriklharper! I'll help out with the disabled test failure you're encountering.
eriklharper
changed the title
…ding the action group border for both layouts as well.
eriklharper
added
pr ready for visual snapshots
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.
Related Issue: #10759
Summary
calcite-action:gapfor shorter Actions at each scale: s = 24px, m = 32px, l = 44pxappearance="solid"in favor of"transparent"BREAKING CHANGE:
appearance="transparent"as new defaultcalcite-action-group:calcite-action-bar:actions-endslotcalcite-action-pad:Testing Notes
This PR updates some explicit sizing set in e2e tests for horizontal overflow because the dimensions for each scale have changed.