(Performance testing): Extended Design Tokens on each component for Teams#31692
Draft
EdDaWord wants to merge 16 commits intomicrosoft:masterfrom
Draft
(Performance testing): Extended Design Tokens on each component for Teams#31692EdDaWord wants to merge 16 commits intomicrosoft:masterfrom
EdDaWord wants to merge 16 commits intomicrosoft:masterfrom
Conversation
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 579 | 624 | 5000 | |
| Button | mount | 304 | 308 | 5000 | |
| Field | mount | 1148 | 1122 | 5000 | |
| FluentProvider | mount | 728 | 709 | 5000 | |
| FluentProviderWithTheme | mount | 85 | 101 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 32 | 37 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 94 | 84 | 10 | |
| MakeStyles | mount | 841 | 889 | 50000 | |
| Persona | mount | 1791 | 1762 | 5000 | |
| SpinButton | mount | 1390 | 1396 | 5000 | |
| SwatchPicker | mount | 1643 | 1639 | 5000 |
Collaborator
📊 Bundle size reportUnchanged fixtures
|
fabricteam
reviewed
Jun 12, 2024
| @@ -35,23 +35,23 @@ const useRootBaseClassName = makeResetStyles({ | |||
| margin: 0, | |||
Collaborator
There was a problem hiding this comment.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Avatar Converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Avatar Converged.badgeMask.normal.chromium.png | 5 | Changed |
| Avatar Converged.badgeMask - RTL.normal.chromium.png | 4 | Changed |
| Avatar Converged.customSize+image.normal.chromium.png | 0 | Added |
Card Converged - Interactive 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.click.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.hover.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.normal.chromium.png | 0 | Added |
Card Converged - Selectable 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Card Converged - Selectable.appearance selectable - Outline - RTL.click.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Outline - RTL.hover.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Outline - RTL.normal.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Outline - RTL.selected.chromium.png | 0 | Removed |
Image Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Image Converged.Image Variations Fallback.normal.chromium.png | 0 | Added |
SwatchPicker Converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| SwatchPicker Converged.spacing.default.chromium.png | 0 | Added |
| SwatchPicker Converged.default - RTL.default.chromium.png | 0 | Removed |
2df07a2 to
3e236a8
Compare
7ced321 to
95a9236
Compare
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
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.

Why
We're thinking of extending the Design Tokens to include Semantics and Control Tokens. The reason to do this is to allow for customization. You can read more in the RFC.
To test if adding CSS var fallbacks with unique names will cause any slowdown. Especially when no CSS vars are provided, the UX/UI should be exactly like before. The impact should be minimal, nothing beyond a few extra bytes in character length.
What
Update all instances of
tokens.${sometoken}in files that matchuse${COMPONENTNAME}Styles.styles.tsfor components influentui/packages/react-components/*to be 2 levels of css var fall backs with different names.Example of change:
Related prototyping:
#31672
How