[FIR-288] Add color axis and dropdown menu to ff-button#53
Merged
Conversation
Separate the visual style (solid/outline/ghost) from the semantic color palette on ff-button, mirroring the ff-badge precedent, while keeping the legacy variant="primary"/"secondary" values working (soft-deprecated, mapped internally to the new axes).
Compose ff-button and ff-icon into a keyboard- and screen-reader- accessible menu button: a CDK connected overlay anchored to the trigger (falls back above it when there is no room below), full Arrow/Home/End/Enter/Escape keyboard support, aria-haspopup/ aria-expanded on the trigger and role="menu"/"menuitem" on the panel.
Reflect the ff-button color axis in ButtonContract and add MenuButtonContract (pattern tier, composes ff-button + ff-icon). Bumps the aggregated inventory to 23 primitives + 4 patterns.
Demo the style x color grid and legacy-variant compatibility on the button catalog page, add a chevron-down icon for the trigger affordance, and wire a new catalog/menu-button page and lazy route for ff-menu-button.
Update the Hub UI to Firefly migration matrix row for hub-button and add the explicit variant/color mapping table plus the ff-button legacy-variant compatibility note.
Contributor
Author
|
✅ Verdict: APPROVED (reviewer: mgarcia). All four acceptance criteria met: dual-axis variant×color with legacy compatibility covered by explicit specs, accessible ff-menu-button on CDK Overlay (ARIA + full keyboard, verified in-browser), contract inventory at 23 primitives + 4 patterns, and the hub→ff variant/color map documented in §12. Doctrine review found no blockers; the follow-ups are tracked as FIR-314 (public ARIA/focus API on ff-button) and FIR-315 (CDK overlay CSS as a DS-level asset). CI green on the final head. Merging to develop. |
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.
What
Splits
ff-buttoninto two independent axes —variant(style: solid/outline/ghost) andcolor(7 semantic values) — following the ff-badge dual-axis precedent, with full backward compatibility for the legacyvariant="primary"/"secondary"values (soft-deprecated, mapped internally, covered by explicit compat specs). Adds the newff-menu-buttonpattern (composesff-button+ff-icon): an accessible dropdown/menu button on CDK Overlay witharia-haspopup/expandedon the real focusable element,role=menu/menuitem, roving focus skipping disabled items, Home/End, Escape and outside-click close.Why
FF-CAT-02 — P0 migration blocker: 205 hub-button usages in Flydocs treat
variant+coloras independent axes; without this mapping, migration wave 3 has no 1:1 target. Jira: FIR-288Key decisions
variantdefault changes from'primary'to'solid'(identical rendering; semver-minor release note).menu-button.contract.tsadded; inventory is now 23 primitives + 4 patterns.ff-menu-buttonsets ARIA imperatively on ff-button's native button; the missing public ARIA/focus passthrough onff-buttonis tracked as debt (backlog candidate).danger→error).How to verify
pnpm nx run-many -t build lint test -p design-system design-system-contract playground— design-system 495 ✓ · contract 13 ✓ (inventory 27) · lint 0 err./catalog/button(21 variant×color combinations + legacy compat section) and/catalog/menu-button(open/keyboard/select/close flows). Visual smoke audited: console/network clean, aria-expanded toggling verified.