Skip to content

fix: Button dark mode, decouple from Constants, add stories#6917

Draft
talissoncosta wants to merge 1 commit intochore/design-system-tokensfrom
fix/button-dark-mode-6892
Draft

fix: Button dark mode, decouple from Constants, add stories#6917
talissoncosta wants to merge 1 commit intochore/design-system-tokensfrom
fix/button-dark-mode-6892

Conversation

@talissoncosta
Copy link
Contributor

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Contributes to #6892

Button decoupled from Constants

  • Removed import Constants from 'common/constants' from Button.tsx
  • Replaced Constants.colours lookup with inline iconColours map using semantic CSS custom properties (--color-brand-default, --color-text-on-fill) with hex fallbacks
  • This removes the transitive dependency on common/project.js and common/data/base/_data.js (CJS files that break in Storybook 10's ESM environment)

Storybook stories

  • Added Button.stories.tsx with stories: All themes, All sizes, Theme x Size matrix, With icons, States, As link (href)
  • Stories render the real <Button> component (not raw HTML replicas)

Still TODO (on this branch)

  • Migrate _buttons.scss to use semantic tokens instead of raw SCSS variables
  • Fix btn-tertiary, btn-danger, btn--transparent dark mode gaps
  • Visual regression check in Storybook

How did you test this code?

  • npm run storybook — all Button stories render in both light and dark mode
  • npx eslint --fix — no lint errors
  • Existing 3 call sites (iconLeftColour='white', iconLeftColour='white', iconRightColour='primary') are type-safe and unchanged in behaviour

🤖 Generated with Claude Code

Replace Constants.colours lookup with inline iconColours map that
references semantic CSS custom properties (--color-brand-default,
--color-text-on-fill) with hex fallbacks. This removes Button's
dependency on common/constants, unblocking Storybook story rendering.

Add Button stories covering all themes, sizes, icons, states, and
link variants.

Refs #6892

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Mar 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Error Error Mar 10, 2026 6:50pm
flagsmith-frontend-staging Error Error Mar 10, 2026 6:50pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Mar 10, 2026 6:50pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api Issue related to the REST API front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant