[6.x] Button single variant#19306
Draft
brianjhanson wants to merge 9 commits into
Draft
Conversation
Replace the two-axis (variant + appearance) button API with one `variant` property: primary, danger, solid, fill (default), outline, dashed, plain, link, none. `primary`/`danger` are the colored, stable variants; the rest use the neutral palette. Add a boolean `inherit` property (orthogonal to variant) so neutral variants adopt the ambient colorable palette in a [data-color]/callout context, while primary/danger keep their own colors. Rewrites button.styles.ts around the single axis, and updates the stories and docs (combined the variant/appearance stories, added an Inherit demo). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adapt the package to the collapsed button API: - index.ts stops re-exporting the removed ButtonAppearance. - variants.styles.ts swaps the [variant='default'] block for [variant='accent'] and [variant='neutral'] (used by callout/indicator/action-item). - The tokens "Button Matrix" story and FilterHud now use the single variant axis (e.g. ButtonVariant.Fill / ButtonVariant.Primary). Note: the broader app consumer migration (variant/appearance usages across resources/js) is still pending and tracked separately. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
constants/colors.ts and scripts/generate-colors.js each hard-coded the color palette and semantic map, and had drifted (info: blue vs sky, warning: orange vs yellow; accent: red vs blue). Introduce constants/colors.data.ts as the single source of truth. colors.ts builds its Color map + ColorValue/ColorKey from it; generate-colors.js loads it via esbuild (it can't import TS directly). Regenerate colorable.css — the token output is unchanged except accent is corrected from a stale red to blue. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
📚 Storybook previews@craftcms/ui — open Storybook Changed components:
resources/js — open Storybook No changed components detected in this Storybook. |
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.
Previously buttons has two customization axis. You could specify either a
variant(accent,neutralordanger) and anappearance(solid,outline,fill,plain) to determine what your button looked like.After revisiting (and looking at plugin kit, I feel like that's a bit overkill. This flattens
appearanceandvariantinto a singlevariantproperty which can be one of:primary,danger,danger-plain,solid,fill,outline,dashed,plain,linkornone.danger-plainis the only one that bugs me a bit, but I think that wart is better than having the ability to create buttons that may only appear once in the UI.This also refactors the
appearance=inheritproperty on buttons that will allow a button to take on the color of its colorable parent. That behavior is now created by specifying a singleinheritvalue on the button.In this mode
primaryanddangerbuttons retain their normal fill, but other buttons will try to blend in.