Skip to content

(Performance testing): Extended Design Tokens on each component for Teams#31692

Draft
EdDaWord wants to merge 16 commits intomicrosoft:masterfrom
EdDaWord:prototype/extended-design-tokens-semantic-and-control
Draft

(Performance testing): Extended Design Tokens on each component for Teams#31692
EdDaWord wants to merge 16 commits intomicrosoft:masterfrom
EdDaWord:prototype/extended-design-tokens-semantic-and-control

Conversation

@EdDaWord
Copy link
Contributor

@EdDaWord EdDaWord commented Jun 12, 2024

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 match use${COMPONENTNAME}Styles.styles.ts for components in fluentui/packages/react-components/* to be 2 levels of css var fall backs with different names.

Example of change:

image

Related prototyping:

#31672

How

'use strict';
exports.__esModule = true;
var ts_morph_1 = require('ts-morph');
// Set up a new project
var project = new ts_morph_1.Project();

// Define the target directory and file pattern
var targetDirectory = './packages/react-components/react-button/library/src/components/Button/';
var filePattern = /^use.*styles\.ts$/;
// Counter to keep track of token replacements
var counter = 1;
// This function returns a string that can be evaluated as JavaScript
function generateReplacement(fileName, originalToken) {
  const baseTokenName = fileName
    .replace('use', '') // Remove the 'use' prefix
    .replace('Styles.styles.ts', '') // Remove the 'Styles.styles.ts' suffix
    .replace(/([A-Z])/g, ' $1') // Add space before any uppercase letter
    .trim() // Remove any leading/trailing spaces
    .split(' ') // Split by space to get words
    .join('');

  const ctrlTokenBase = `var(--ctrl-token-${baseTokenName}-${counter}`;
  const semanticTokenBase = `var(--semantic-token-${baseTokenName}-${counter + 1}`;

  // Use template literals and return a JavaScript expression
  return `\`${ctrlTokenBase}, ${semanticTokenBase}, \${${originalToken}}))\``;
}

// Load all the files from the target directory recursively
project.addSourceFilesAtPaths(targetDirectory + '**/*.ts');
var files = project.getSourceFiles().filter(function (file) {
  return filePattern.test(file.getBaseName());
});

files.forEach(function (file) {
  if (filePattern.test(file.getBaseName())) {
    // Process each file that matches the pattern
    file.forEachDescendant(function (node) {
      if (node.getKind() === ts_morph_1.SyntaxKind.PropertyAssignment) {
        // Check if the property assignment is related to styling and uses a token
        var initializer = node.getInitializer();
        var propertyName = node.getName();
        if (initializer && propertyName) {
          const text = initializer.getText();

          // More specific check for the tokens you want to replace
          const tokenMatch = text.match(/tokens\.(\w+)\b/);

          // Makes sure not to match a block (':focus': { ... token ...})
          if (tokenMatch && tokenMatch[0] === tokenMatch.input) {
            // Replace the token usage with the new format
            var newTokenUsage = generateReplacement(file.getBaseName(), text);
            initializer.replaceWithText(newTokenUsage);
            counter += 2; // Ensure counter increments properly for each replacement
          }
        }
      }
    });
    // Save the changes to the file
    file.saveSync();
  }
});

console.log('Codemod execution completed.');

@EdDaWord EdDaWord added the Draft label Jun 12, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 12, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 12, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
99.097 kB
30.197 kB
101.343 kB
30.494 kB
2.246 kB
297 B
react-avatar
Avatar
49.301 kB
15.838 kB
58.741 kB
16.921 kB
9.44 kB
1.083 kB
react-avatar
AvatarGroup
20.107 kB
7.973 kB
20.181 kB
8.006 kB
74 B
33 B
react-avatar
AvatarGroupItem
63.445 kB
20.061 kB
74.287 kB
21.313 kB
10.842 kB
1.252 kB
react-badge
Badge
25.952 kB
8.614 kB
30.411 kB
9.239 kB
4.459 kB
625 B
react-badge
CounterBadge
26.731 kB
8.887 kB
31.19 kB
9.514 kB
4.459 kB
627 B
react-badge
PresenceBadge
25.719 kB
9.485 kB
26.866 kB
9.646 kB
1.147 kB
161 B
react-breadcrumb
@fluentui/react-breadcrumb - package
113.657 kB
31.532 kB
120.433 kB
32.509 kB
6.776 kB
977 B
react-button
Button
37.105 kB
10.785 kB
42.627 kB
11.539 kB
5.522 kB
754 B
react-button
CompoundButton
43.516 kB
12.076 kB
52.16 kB
13.213 kB
8.644 kB
1.137 kB
react-button
MenuButton
41.886 kB
12.133 kB
48.822 kB
13.191 kB
6.936 kB
1.058 kB
react-button
SplitButton
49.898 kB
13.725 kB
59.246 kB
14.96 kB
9.348 kB
1.235 kB
react-button
ToggleButton
53.032 kB
12.545 kB
62.046 kB
13.952 kB
9.014 kB
1.407 kB
react-calendar-compat
Calendar Compat
149.583 kB
39.839 kB
158.246 kB
41.554 kB
8.663 kB
1.715 kB
react-card
Card - All
100.845 kB
28.873 kB
103.897 kB
29.283 kB
3.052 kB
410 B
react-card
Card
93.629 kB
27.077 kB
96.681 kB
27.457 kB
3.052 kB
380 B
react-checkbox
Checkbox
35.105 kB
12.112 kB
38.331 kB
12.561 kB
3.226 kB
449 B
react-combobox
Combobox (including child components)
101.39 kB
33.324 kB
107.415 kB
34.329 kB
6.025 kB
1.005 kB
react-combobox
Dropdown (including child components)
102.028 kB
33.263 kB
107.642 kB
34.204 kB
5.614 kB
941 B
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
74.829 kB
21.05 kB
5.688 kB
893 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
211.741 kB
60.957 kB
223.811 kB
62.87 kB
12.07 kB
1.913 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
44.608 kB
14.644 kB
166 B
37 B
react-components
react-components: entire library
1.094 MB
270.58 kB
1.242 MB
293.364 kB
147.55 kB
22.784 kB
react-datepicker-compat
DatePicker Compat
223.007 kB
63.137 kB
236.38 kB
65.509 kB
13.373 kB
2.372 kB
react-dialog
Dialog (including children components)
98.908 kB
29.807 kB
98.988 kB
29.835 kB
80 B
28 B
react-divider
Divider
21.328 kB
7.965 kB
22.292 kB
8.094 kB
964 B
129 B
react-field
Field
23.384 kB
8.903 kB
25.485 kB
9.21 kB
2.101 kB
307 B
react-image
Image
15.362 kB
6.248 kB
15.618 kB
6.307 kB
256 B
59 B
react-input
Input
27.987 kB
9.446 kB
32.329 kB
9.955 kB
4.342 kB
509 B
react-label
Label
14.672 kB
6.002 kB
15.627 kB
6.151 kB
955 B
149 B
react-link
Link
17.193 kB
6.993 kB
18.249 kB
7.159 kB
1.056 kB
166 B
react-menu
Menu (including children components)
151.246 kB
45.708 kB
154.464 kB
46.029 kB
3.218 kB
321 B
react-menu
Menu (including selectable components)
153.932 kB
46.201 kB
157.15 kB
46.583 kB
3.218 kB
382 B
react-message-bar
MessageBar (all components)
24.413 kB
9.117 kB
26.209 kB
9.306 kB
1.796 kB
189 B
react-persona
Persona
56.192 kB
17.728 kB
66.396 kB
19.034 kB
10.204 kB
1.306 kB
react-popover
Popover
127.198 kB
39.776 kB
127.86 kB
39.87 kB
662 B
94 B
react-progress
ProgressBar
17.086 kB
6.906 kB
17.614 kB
6.992 kB
528 B
86 B
react-provider
FluentProvider
24.618 kB
8.906 kB
24.784 kB
8.947 kB
166 B
41 B
react-radio
Radio
32.673 kB
10.351 kB
36.047 kB
10.705 kB
3.374 kB
354 B
react-select
Select
27.723 kB
10.131 kB
29.686 kB
10.425 kB
1.963 kB
294 B
react-slider
Slider
37.17 kB
12.547 kB
38.104 kB
12.695 kB
934 B
148 B
react-spinbutton
SpinButton
36.049 kB
11.835 kB
44.57 kB
12.791 kB
8.521 kB
956 B
react-spinner
Spinner
25.246 kB
8.554 kB
27.682 kB
8.954 kB
2.436 kB
400 B
react-swatch-picker
@fluentui/react-swatch-picker - package
103.495 kB
30.046 kB
105.013 kB
30.382 kB
1.518 kB
336 B
react-switch
Switch
35.301 kB
11.348 kB
39.612 kB
11.797 kB
4.311 kB
449 B
react-table
DataGrid
160.297 kB
45.656 kB
168.004 kB
46.797 kB
7.707 kB
1.141 kB
react-table
Table (Primitives only)
42.482 kB
13.868 kB
44.624 kB
14.248 kB
2.142 kB
380 B
react-table
Table as DataGrid
131.102 kB
36.346 kB
138.977 kB
37.517 kB
7.875 kB
1.171 kB
react-table
Table (Selection only)
70.336 kB
20.028 kB
78.213 kB
21.238 kB
7.877 kB
1.21 kB
react-table
Table (Sort only)
68.979 kB
19.633 kB
76.854 kB
20.848 kB
7.875 kB
1.215 kB
react-tag-picker
@fluentui/react-tag-picker - package
181.135 kB
54.462 kB
189.902 kB
55.82 kB
8.767 kB
1.358 kB
react-tags
InteractionTag
15.167 kB
6.135 kB
15.333 kB
6.176 kB
166 B
41 B
react-tags
Tag
28.996 kB
9.52 kB
33.508 kB
10.127 kB
4.512 kB
607 B
react-tags
TagGroup
82.084 kB
24.34 kB
82.296 kB
24.39 kB
212 B
50 B
react-text
Text - Default
17.063 kB
6.733 kB
18.749 kB
6.987 kB
1.686 kB
254 B
react-text
Text - Wrappers
20.235 kB
7.064 kB
21.921 kB
7.454 kB
1.686 kB
390 B
react-textarea
Textarea
26.521 kB
9.741 kB
29.167 kB
10.086 kB
2.646 kB
345 B
react-timepicker-compat
TimePicker
104.384 kB
34.782 kB
109.873 kB
35.74 kB
5.489 kB
958 B
react-toast
Toast (including Toaster)
97.525 kB
29.326 kB
98.124 kB
29.444 kB
599 B
118 B
react-tooltip
Tooltip
54.558 kB
19.23 kB
55.104 kB
19.323 kB
546 B
93 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
CardFooter
14.356 kB
5.798 kB
react-card
CardHeader
16.879 kB
6.664 kB
react-card
CardPreview
14.42 kB
5.934 kB
react-overflow
hooks only
12.821 kB
4.813 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-radio
RadioGroup
15.76 kB
6.433 kB
🤖 This report was generated against 630a943a99fb45cd00f1c6accc3b8ae7195dde2d

@@ -35,23 +35,23 @@ const useRootBaseClassName = makeResetStyles({
margin: 0,
Copy link
Collaborator

@fabricteam fabricteam Jun 12, 2024

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

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

@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control branch from 2df07a2 to 3e236a8 Compare June 17, 2024 23:14
@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control branch from 7ced321 to 95a9236 Compare June 17, 2024 23:29
@EdDaWord EdDaWord changed the title Prototype for Teams Testing: Extended Design Tokens Semantic and Control (Performance testing): Extended Design Tokens on each component for Teams Jul 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants