Skip to content

Semantic Tokens: Progress Bar - #34403

Merged
Mitch-At-Work merged 4 commits into
microsoft:extended-tokensfrom
etudie:xuehua/progress-bar
May 14, 2025
Merged

Semantic Tokens: Progress Bar#34403
Mitch-At-Work merged 4 commits into
microsoft:extended-tokensfrom
etudie:xuehua/progress-bar

Conversation

@etudie

Copy link
Copy Markdown

No visual regression

This pull request introduces a new feature for a Progress Bar component in @fluentui/react-progress and refactors the styling system to use semantic tokens for improved consistency and maintainability. The most important changes include the addition of the Progress Bar feature, updates to the styling definitions to replace hardcoded values with semantic tokens, and the extension of the semantic tokens library to support these changes.

New Feature:

  • Added a new Progress Bar feature, including metadata for versioning and release notes in @fluentui/react-progress.

Styling Refactor:

  • Updated useProgressBarStyles.styles.ts to replace hardcoded token values with semantic tokens for properties like backgroundColor and borderRadius, ensuring consistency across themes. [1] [2] [3] [4]
  • Imported semantic tokens into useProgressBarStyles.styles.ts to align with the new design token strategy.

Semantic Tokens Enhancements:

  • Extended fluentOverrides.ts with new semantic tokens such as ctrlProgressBackgroundEmpty, ctrlProgressBackgroundFilled, and statusSuccessBackground, mapping them to existing design tokens.
  • Updated tokens.ts and control/tokens.ts to provide fallback values for new semantic tokens, ensuring compatibility with legacy tokens. [1] [2] [3]
  • Added new design tokens like colorNeutralBackground6, colorCompoundBrandBackground, and borderRadiusMedium to legacy/tokens.ts for broader usage.

@etudie
Xue (etudie) requested review from a team as code owners May 8, 2025 19:31
@github-actions

github-actions Bot commented May 8, 2025

Copy link
Copy Markdown

Pull request demo site: URL

@Mitch-At-Work Mitch-At-Work left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Let's make sure we capture the height tokens also (i.e. ctrlProgressHeightEmpty/Filled and their size variants) with rawValue fallbacks

@Mitch-At-Work
Mitch-At-Work force-pushed the xuehua/progress-bar branch from fbe46f7 to 153fec4 Compare May 14, 2025 18:08

@Mitch-At-Work Mitch-At-Work left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be rebased on latest base branch changes and good to go!

@Mitch-At-Work
Mitch-At-Work enabled auto-merge (squash) May 14, 2025 18:29
@Mitch-At-Work
Mitch-At-Work merged commit 75e3bc1 into microsoft:extended-tokens May 14, 2025
Mitch-At-Work added a commit that referenced this pull request Aug 6, 2025
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
Mitch-At-Work added a commit that referenced this pull request Aug 20, 2025
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants