-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft (Prototype): Control Tokens test (component design tokens) #31330
base: master
Are you sure you want to change the base?
Conversation
📊 Bundle size reportUnchanged fixtures
|
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
FluentProviderWithTheme | virtual-rerender-with-unmount | 77 | 73 | 10 | Possible regression |
All results
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 653 | 604 | 5000 | |
Button | mount | 312 | 316 | 5000 | |
Field | mount | 1143 | 1133 | 5000 | |
FluentProvider | mount | 689 | 708 | 5000 | |
FluentProviderWithTheme | mount | 75 | 78 | 10 | |
FluentProviderWithTheme | virtual-rerender | 37 | 35 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 77 | 73 | 10 | Possible regression |
MakeStyles | mount | 850 | 868 | 50000 | |
Persona | mount | 1770 | 1707 | 5000 | |
SpinButton | mount | 1377 | 1373 | 5000 | |
SwatchPicker | mount | 1508 | 1524 | 5000 |
@@ -0,0 +1,109 @@ | |||
import { tokens } from '@fluentui/react-theme'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Combobox Converged 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Combobox Converged.With placeholder.default.chromium.png | 16 | Changed |
Combobox Converged.With placeholder.focused.chromium.png | 16 | Changed |
Combobox Converged.With placeholder.hover.chromium.png | 16 | Changed |
Dialog 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Dialog.Integration Combobox Inline.chromium.png | 52 | Changed |
Field 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Field.Combobox+horizontal.default.chromium.png | 109 | Changed |
ToggleButton Converged 6 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
ToggleButton Converged.Checked.pressed.chromium.png | 238 | Changed |
ToggleButton Converged.Transparent Checked.default.chromium.png | 67 | Changed |
ToggleButton Converged.Subtle Checked.pressed.chromium.png | 238 | Changed |
ToggleButton Converged.Subtle Checked.hover.chromium.png | 265 | Changed |
ToggleButton Converged.Transparent Checked.pressed.chromium.png | 223 | Changed |
ToggleButton Converged.Transparent Checked.hover.chromium.png | 210 | Changed |
add all button appearnce variants Fix mistake on transparent variant color Remove testing Fix error Add Selected Button Semantic Tokens Forgot to add the files Add Switch Indicator semantic tokens Add Semantic tokens for Switch Border Color Add Switch BorderColor semantic tokens Add combobox semantic tokens Finish semantic tokens for Combobox Colors
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
@@ -0,0 +1,109 @@ | |||
import { tokens } from '@fluentui/react-theme'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots
Accordion 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Accordion.Size - RTL.normal.chromium.png | 2 | Changed |
Accordion.Size - Dark Mode.normal.chromium.png | 2 | Changed |
Accordion.Size.normal.chromium.png | 2 | Changed |
Avatar 5 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Avatar.Active.normal.chromium.png | 5 | Changed |
Avatar.Active Appearance - Dark Mode.normal.chromium.png | 2 | Changed |
Avatar.Active Appearance.normal.chromium.png | 10 | Changed |
Avatar.Color - RTL.normal.chromium.png | 1 | Changed |
Avatar.Color.normal.chromium.png | 1 | Changed |
Badge 6 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Badge.Appearance.normal.chromium.png | 1 | Changed |
Badge.Appearance - Dark Mode.normal.chromium.png | 15 | Changed |
Badge.Default.normal.chromium.png | 1 | Changed |
Badge.Size.normal.chromium.png | 6 | Changed |
Badge.Shape.normal.chromium.png | 1 | Changed |
Badge.Color.normal.chromium.png | 1 | Changed |
Button 15 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Button.Large Icon Only - Dark Mode.pressed.chromium.png | 5 | Changed |
Button.Large Icon Only - Dark Mode.hover.chromium.png | 3 | Changed |
Button.Large Icon Only - Dark Mode.default.chromium.png | 4 | Changed |
Button.Large With Icon - Dark Mode.pressed.chromium.png | 5 | Changed |
Button.Large Icon Only.pressed.chromium.png | 3 | Changed |
Button.Large With Icon - Dark Mode.default.chromium.png | 4 | Changed |
Button.Large Icon Only.hover.chromium.png | 4 | Changed |
Button.Large With Icon.default.chromium.png | 5 | Changed |
Button.Large With Icon - RTL.pressed.chromium.png | 3 | Changed |
Button.Large With Icon - RTL.default.chromium.png | 5 | Changed |
Button.Large With Icon - Dark Mode.hover.chromium.png | 3 | Changed |
Button.Large Icon Only.default.chromium.png | 5 | Changed |
Button.Large With Icon.hover.chromium.png | 4 | Changed |
Button.Large With Icon.pressed.chromium.png | 3 | Changed |
Button.Large With Icon - RTL.hover.chromium.png | 4 | Changed |
Divider 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Divider.With Svg - RTL.normal.chromium.png | 3 | Changed |
Divider.With Svg.normal.chromium.png | 3 | Changed |
Divider.Vertical With Svg.normal.chromium.png | 4 | Changed |
MenuList 16 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
MenuList.Checkbox With Icons.normal.chromium.png | 4 | Changed |
MenuList.Checkbox - RTL.2nd selected.chromium.png | 1 | Changed |
MenuList.Checkbox With Icons.2nd selected.chromium.png | 5 | Changed |
MenuList.Checkbox With Icons - RTL.normal.chromium.png | 4 | Changed |
MenuList.Radio With Icons - RTL.1st selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons - RTL.2nd selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons.normal.chromium.png | 4 | Changed |
MenuList.With Icons.normal.chromium.png | 4 | Changed |
MenuList.Radio With Icons.2nd selected.chromium.png | 4 | Changed |
MenuList.Checkbox With Icons - RTL.2nd selected.chromium.png | 5 | Changed |
MenuList.Checkbox With Icons - RTL.1st selected.chromium.png | 4 | Changed |
MenuList.With Icons.hover menuitem.chromium.png | 3 | Changed |
MenuList.Checkbox With Icons.1st selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons - RTL.normal.chromium.png | 4 | Changed |
MenuList.Radio With Icons.1st selected.chromium.png | 4 | Changed |
MenuList.Checkbox.2nd selected.chromium.png | 1 | Changed |
Slider 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Slider.Size Small.normal.chromium.png | 1 | Changed |
Slider.Size Small.rightArrow.chromium.png | 1 | Changed |
Switch 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Switch.Checked - RTL.hover.chromium.png | 1 | Changed |
Switch.Checked.hover.chromium.png | 1 | Changed |
Text 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Text.Block.normal.chromium.png | 995 | Changed |
TextInput 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
TextInput.Size Large.normal.chromium.png | 2 | Changed |
Add Control Tokens with Alias & Global Fallbacks
The main idea is to complete the Design Tokens spec by introducing the Control Tokens
Doing this through the use of
var(--semanticToken, ${tokens.aliasToken}
so that if thesemanticTokens
(control tokens) are not provided then we have Alias/Global fallbacks.If they are provided, then it's starts becoming a pay-to-play system. Meaning the more semantic token one uses the more CSS Vars get introduced. They can be introduced at the root level or for better DOM Reflow they ought to be introduced at the lowest parent node. I.E for an app within another app 👀. Therefore it is our hypothesis that it would not affect DOM Reflow as much as having loads of Global/Alias tokens.
Prototypes & Staging links of concern:
https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-button-button--default#appearance
https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-button-togglebutton--default#appearance
https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-switch--default#checked
https://fluentuipr.z22.web.core.windows.net/pull/31330/public-docsite-v9/storybook/index.html?path=/docs/components-combobox--default#appearance
Address concerns:
Here's a list of questions based on the notes:
Here is the cleaned-up list of questions and answers with duplicates merged:
How can we ensure that:
var(semantic_token, alias_token)
fallbacksWhat should the prototypes demonstrate to show how FST should work?
How can we handle customized tokens added to teams without causing accessibility issues?
How do we handle "theme creep" to ensure theme shape remains consistent?
ButtonGroupForegroundColor
How can we ensure that all UI continues to work in the base theme?
How does adding FST (Fluent Semantic Tokens) impact existing customers from a theming performance standpoint?
var
fallbacks mean no extra CSS vars are addedWhat could go wrong with FST implementation, and how can users potentially misuse it?
How should we communicate to the Fluent Core team about extending the original tokens spec?
Did the team consider using
var()
as a fallback option previously?var
fallback exist throughout the code, but not clear if it was considered for creating semantic/control/component design tokensHow do we keep token creep under control?
var()
fallbacks?