feat(react-button): [CAP] Introduce new Button appearance prop ("tint")#35844
Draft
GianoglioEnrico wants to merge 6 commits intomicrosoft:masterfrom
Draft
feat(react-button): [CAP] Introduce new Button appearance prop ("tint")#35844GianoglioEnrico wants to merge 6 commits intomicrosoft:masterfrom
GianoglioEnrico wants to merge 6 commits intomicrosoft:masterfrom
Conversation
|
Pull request demo site: URL |
📊 Bundle size report
Unchanged fixtures
|
GianoglioEnrico
force-pushed
the
feat/cap-visual-refresh-button
branch
from
6b10c1d to
fbfe3eb
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -1,9 +1,10 @@ | |||
| import * as rootPreview from '../../../.storybook/preview'; | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png | 3 | Changed |
vr-tests-react-components/Charts-DonutChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 7530 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png | 5581 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Portal 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Portal.Apply Class Names.should have green border.chromium.png | 15 | Changed |
vr-tests-react-components/Positioning 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 975 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
GianoglioEnrico
changed the title
added 5 commits
March 31, 2026 16:23
… and ToggleButton
GianoglioEnrico
force-pushed
the
feat/cap-visual-refresh-button
branch
from
fbfe3eb to
98f40e4
Compare
GianoglioEnrico
changed the title
GianoglioEnrico
changed the title
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.
Overview
The goal of this PR is to kickoff a discussion with the Fluent team on the right approach to introduce these new appearance variants needed for CAP visual refresh.
The styles used in this PR are not yet finalized and are still in progress.
Context
The CAP visual refresh requires an additional Button appearance beyond what Fluent currently offers:
tint— A button with a tinted background using brand colorsAs discussed previously, the plan is to introduce as many CAP styles as possible through
customStyleHooks_unstable. However, some components will require API changes.What this PR does
Adds a new appearance (
tint) to the Button type definitions and style hooks (useButtonStyles.styles.ts, etc.). This appearance has no Fluent-specific styles — it currently falls back to the secondary appearance. CAP applies its own styles through custom hooks.Open question:
We are looking for guidance on how this appearance should be handled on the Fluent side — specifically, whether Fluent should define its own base styles for tint.
cc: @jurokapsiar @layershifter @tudorpopams @dmytrokirpa