Draft (Prototype): Control Tokens test (component design tokens) #31330
Conversation
This file contains 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
EdDaWord
requested review from
a team,
behowell,
khmakoto and
smhigley
as code owners
|
You can convert this to a draft PR to signal to folks that it's not ready for review yet 🙂 |
📊 Bundle size report
Unchanged 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 |
fabricteam
reviewed
May 9, 2024
| @@ -0,0 +1,109 @@ | |||
| import { tokens } from '@fluentui/react-theme'; | |||
There was a problem hiding this comment.
🕵 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. |
fabricteam
reviewed
May 14, 2024
| @@ -0,0 +1,109 @@ | |||
| import { tokens } from '@fluentui/react-theme'; | |||
There was a problem hiding this comment.
🕵 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 |
EdDaWord
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
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?
ButtonGroupForegroundColorHow 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?
varfallbacks 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?varfallback 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?