rfc(react-theme): Remove global color tokens#19752
Merged
miroslavstastny merged 2 commits intoDec 1, 2021
Merged
Conversation
|
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. Latest deployment of this branch, based on commit bc239d7:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: c16df7de655b31ec8650731d9733f39a5a03e96c (build) |
Collaborator
📊 Bundle size reportUnchanged fixtures
|
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 961 | 946 | 5000 | |
| BaseButton | mount | 1008 | 1000 | 5000 | |
| Breadcrumb | mount | 2727 | 2668 | 1000 | |
| ButtonNext | mount | 502 | 496 | 5000 | |
| Checkbox | mount | 1639 | 1655 | 5000 | |
| CheckboxBase | mount | 1451 | 1429 | 5000 | |
| ChoiceGroup | mount | 5178 | 5135 | 5000 | |
| ComboBox | mount | 1026 | 1068 | 1000 | |
| CommandBar | mount | 10657 | 11040 | 1000 | |
| ContextualMenu | mount | 6846 | 6832 | 1000 | |
| DefaultButton | mount | 1270 | 1201 | 5000 | |
| DetailsRow | mount | 3957 | 4067 | 5000 | |
| DetailsRowFast | mount | 4063 | 3937 | 5000 | |
| DetailsRowNoStyles | mount | 3826 | 3757 | 5000 | |
| Dialog | mount | 2536 | 2568 | 1000 | |
| DocumentCardTitle | mount | 169 | 161 | 1000 | |
| Dropdown | mount | 3474 | 3478 | 5000 | |
| FluentProviderNext | mount | 7222 | 7365 | 5000 | |
| FluentProviderWithTheme | mount | 345 | 361 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 92 | 96 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 496 | 469 | 10 | |
| FocusTrapZone | mount | 1927 | 1993 | 5000 | |
| FocusZone | mount | 1976 | 1914 | 5000 | |
| IconButton | mount | 1895 | 1951 | 5000 | |
| Label | mount | 351 | 364 | 5000 | |
| Layer | mount | 3221 | 3199 | 5000 | |
| Link | mount | 484 | 491 | 5000 | |
| MakeStyles | mount | 1843 | 1866 | 50000 | |
| MenuButton | mount | 1574 | 1586 | 5000 | |
| MessageBar | mount | 2171 | 2080 | 5000 | |
| Nav | mount | 3519 | 3464 | 1000 | |
| OverflowSet | mount | 1174 | 1180 | 5000 | |
| Panel | mount | 1437 | 2489 | 1000 | |
| Persona | mount | 889 | 902 | 1000 | |
| Pivot | mount | 1513 | 1540 | 1000 | |
| PrimaryButton | mount | 1370 | 1385 | 5000 | |
| Rating | mount | 8493 | 8446 | 5000 | |
| SearchBox | mount | 1454 | 1433 | 5000 | |
| Shimmer | mount | 2797 | 2830 | 5000 | |
| Slider | mount | 2096 | 2090 | 5000 | |
| SpinButton | mount | 5410 | 5336 | 5000 | |
| Spinner | mount | 428 | 450 | 5000 | |
| SplitButton | mount | 3427 | 3417 | 5000 | |
| Stack | mount | 524 | 550 | 5000 | |
| StackWithIntrinsicChildren | mount | 1711 | 1740 | 5000 | |
| StackWithTextChildren | mount | 5156 | 5109 | 5000 | |
| SwatchColorPicker | mount | 10984 | 10946 | 5000 | |
| Tabs | mount | 1493 | 1500 | 1000 | |
| TagPicker | mount | 2868 | 2817 | 5000 | |
| TeachingBubble | mount | 13844 | 13787 | 5000 | |
| Text | mount | 500 | 483 | 5000 | |
| TextField | mount | 1483 | 1491 | 5000 | |
| ThemeProvider | mount | 1214 | 1268 | 5000 | |
| ThemeProvider | virtual-rerender | 632 | 617 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 2084 | 2033 | 5000 | |
| Toggle | mount | 864 | 845 | 5000 | |
| buttonNative | mount | 114 | 126 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AccordionMinimalPerf.default | 202 | 171 | 1.18:1 |
| BoxMinimalPerf.default | 401 | 373 | 1.08:1 |
| ButtonMinimalPerf.default | 198 | 184 | 1.08:1 |
| PortalMinimalPerf.default | 192 | 178 | 1.08:1 |
| ReactionMinimalPerf.default | 424 | 393 | 1.08:1 |
| LabelMinimalPerf.default | 437 | 412 | 1.06:1 |
| RefMinimalPerf.default | 252 | 238 | 1.06:1 |
| SegmentMinimalPerf.default | 401 | 377 | 1.06:1 |
| StatusMinimalPerf.default | 800 | 758 | 1.06:1 |
| TreeMinimalPerf.default | 904 | 856 | 1.06:1 |
| AttachmentMinimalPerf.default | 176 | 168 | 1.05:1 |
| DividerMinimalPerf.default | 405 | 390 | 1.04:1 |
| ListMinimalPerf.default | 577 | 555 | 1.04:1 |
| ListWith60ListItems.default | 721 | 690 | 1.04:1 |
| ProviderMinimalPerf.default | 1126 | 1084 | 1.04:1 |
| AttachmentSlotsPerf.default | 1210 | 1179 | 1.03:1 |
| FormMinimalPerf.default | 463 | 451 | 1.03:1 |
| HeaderSlotsPerf.default | 844 | 823 | 1.03:1 |
| ImageMinimalPerf.default | 426 | 414 | 1.03:1 |
| LoaderMinimalPerf.default | 744 | 721 | 1.03:1 |
| AnimationMinimalPerf.default | 443 | 433 | 1.02:1 |
| ChatDuplicateMessagesPerf.default | 328 | 323 | 1.02:1 |
| ChatMinimalPerf.default | 718 | 702 | 1.02:1 |
| GridMinimalPerf.default | 361 | 353 | 1.02:1 |
| ListNestedPerf.default | 634 | 624 | 1.02:1 |
| PopupMinimalPerf.default | 635 | 623 | 1.02:1 |
| SliderMinimalPerf.default | 1651 | 1621 | 1.02:1 |
| SplitButtonMinimalPerf.default | 4579 | 4505 | 1.02:1 |
| TableMinimalPerf.default | 460 | 450 | 1.02:1 |
| TextMinimalPerf.default | 389 | 380 | 1.02:1 |
| TreeWith60ListItems.default | 198 | 195 | 1.02:1 |
| DatepickerMinimalPerf.default | 5837 | 5773 | 1.01:1 |
| DropdownManyItemsPerf.default | 760 | 750 | 1.01:1 |
| DropdownMinimalPerf.default | 3250 | 3208 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 1352 | 1337 | 1.01:1 |
| ProviderMergeThemesPerf.default | 1766 | 1757 | 1.01:1 |
| RadioGroupMinimalPerf.default | 496 | 489 | 1.01:1 |
| SkeletonMinimalPerf.default | 393 | 391 | 1.01:1 |
| TableManyItemsPerf.default | 2134 | 2115 | 1.01:1 |
| VideoMinimalPerf.default | 704 | 699 | 1.01:1 |
| CarouselMinimalPerf.default | 495 | 494 | 1:1 |
| ChatWithPopoverPerf.default | 392 | 393 | 1:1 |
| DialogMinimalPerf.default | 807 | 805 | 1:1 |
| HeaderMinimalPerf.default | 408 | 408 | 1:1 |
| LayoutMinimalPerf.default | 407 | 409 | 1:1 |
| MenuButtonMinimalPerf.default | 1819 | 1811 | 1:1 |
| CustomToolbarPrototype.default | 4087 | 4098 | 1:1 |
| ToolbarMinimalPerf.default | 1018 | 1021 | 1:1 |
| AvatarMinimalPerf.default | 212 | 214 | 0.99:1 |
| ButtonOverridesMissPerf.default | 1830 | 1845 | 0.99:1 |
| ButtonSlotsPerf.default | 587 | 591 | 0.99:1 |
| CardMinimalPerf.default | 605 | 613 | 0.99:1 |
| EmbedMinimalPerf.default | 4360 | 4403 | 0.99:1 |
| FlexMinimalPerf.default | 313 | 315 | 0.99:1 |
| InputMinimalPerf.default | 1325 | 1345 | 0.99:1 |
| MenuMinimalPerf.default | 932 | 937 | 0.99:1 |
| RosterPerf.default | 1298 | 1317 | 0.99:1 |
| IconMinimalPerf.default | 685 | 694 | 0.99:1 |
| CheckboxMinimalPerf.default | 2900 | 2945 | 0.98:1 |
| TextAreaMinimalPerf.default | 570 | 582 | 0.98:1 |
| ListCommonPerf.default | 725 | 749 | 0.97:1 |
| TooltipMinimalPerf.default | 1127 | 1164 | 0.97:1 |
| AlertMinimalPerf.default | 304 | 326 | 0.93:1 |
|
|
||
| The current theme consists of ~1200 tokens which are injected into DOM as CSS variables. It impacts not only Javascript performance but also browser performance in styles computation phase. | ||
|
|
||
| To see the performance impact we render 20 `FluentProvider` components side by side (**each** injecting a class with 1200 CSS variables) - mount and unmount 10 times and measure the performance in Chrome profiler with 6x CPU slowdown. After each mount, a CSS attribute is accessed to force reflow in order to be able to measure the rendering performance. |
Member
There was a problem hiding this comment.
How aligned with the common case of using Fluent this is:
- Won't there usually be a single ThemeProvider at the root for an application and maybe 1 or 2 sub ThemeProviders in more advanced scenarios?
- Won't the css variables be set on the theme root and cascade down to the components?
- If the first two answers are yes, then would the common case be that we are only updating a single point in the DOM with the 1200 variable value changes?
Member
Author
There was a problem hiding this comment.
Totally correct - just one (2 in an edge case) ThemeProvider.
But even just that one provider makes 20ms difference between the Master and Inline values to alias tokens in a real partner application and these 20ms is a no-go for them.
This test is an attempt to have an isolated perf example which we can run on the library side (including the CI) before testing it on partner side.
(That being said, only the Master vs Inline values to alias tokens experiment has been tested in the partner application so far as we do not have a real implementation for the other steps).
|
|
||
| - 1200 CSS variables in a theme = ~650 global tokens + ~550 alias tokens | ||
| - alias token implemented as a "reference" to a global token: `--alias-token: var(--global-token)`. | ||
| - **Each reflow takes ~150ms (1500 ms total for the 10 mounts)** |
Member
There was a problem hiding this comment.
How often are users changing themes? While noticable, 1.5 seconds doesn't seem like a long time to fully change themes.
How good a job do browsers do with replacing CSS variables? Is the entire UI frozen or is it more progressive?
Member
Author
There was a problem hiding this comment.
Agree with the theme switching, I think we should not optimize for that as it is a rare operation.
But the problem is the reflows also happen during regular application lifetime, including initial application launch. It is application developers' responsibility to minimize the reflows, but we still should optimize the perf.
How good a job do browsers do with replacing CSS variables?
That's something we still need to investigate.
Also another missing investigation - is only the reflow performance affected by the number (and structure - inline vs referencing globals) of CSS variables or does it impact any style computations anywhere inside the DOM subtree?
| 4. [Flatten the tokens object](#flatten-tokens) | ||
| 5. [Hash variable names](#hash-variables) | ||
| 6. [Be cautious when adding new tokens to the theme](#be-cautious) | ||
| 7. [Get rid of all CSS variables](#no-css-vars) |
Member
There was a problem hiding this comment.
Would getting rid of all CSS variables be a problem if a dev has a static stylesheet for globals in their app and would like to use some of the theme variables?
Member
Author
There was a problem hiding this comment.
CSS variables representing the design tokens should never be used directly. That would make the CSS variable names part of the API surface, we want to keep them encapsulated.
The way how we plan to support SASS/LESS is the following:
- We currently use a token pipeline to transform design tokens to a Typescript object which is used inside the library and injected as CSS variables to DOM by a
FluentProvider- these names are currently predictable, we might change that to use hashed variable names to enforce the encapsulation (after beta). - The same pipeline will be used to generate a list of SASS variables which will map to
FluentProviderCSS variables:
$neutralbackground2-fill-color-hover: var(--neutralbackground2-fill-color-hover)- The SASS styles will reference that SASS variables.
- There are two possible ways how the CSS variables will be injected into the DOM:
- either you are inside the DOM subtree managed by the
FluentProviderwhich is then responsible for the variables - or you use a static CSS generated by the pipeline and it will be you responsibility to inject it + swap it to switch themes
- either you are inside the DOM subtree managed by the
Without CSS variables, the process would be pretty much the same, with the following differences:
- in step 2, instead of pointing to the CSS variable, the SASS variable would point to the direct value
- in step 4, you would also need to swap the stylesheet with your static styles to match the required theme.
But good catch, even though we do not plan to get rid of the CSS variables with now, I will add the static stylesheets problem to the list of possible complications.
|
|
||
| ### <a name="merge-global-alias"></a>Merge global and alias tokens to a single object | ||
|
|
||
| Having the tokens split to global and alias tokens is definitely a valid concept for design. But does not mean anything to engineers. |
Member
Author
There was a problem hiding this comment.
Could you please elaborate more on the kind of possible problems which would be easier to debug with the split.
Member
There was a problem hiding this comment.
I mean debugging the inlining process might be difficult if there isn't traceability to the original value. Let's say something is red that shouldn't be. I go to look at the CSS and I see var(--alias-error). I follow to the variable and I see a value of #f00. I don't know that the reason this is red is because it was inlined from --global-error.
| ```css | ||
| /* After */ | ||
| --global-red: #f00; /* no change here */ | ||
| --alias-error: #f00; /* inlined value from --global-red */ |
Member
There was a problem hiding this comment.
Are these recursively inlined? (i.e. can aliases point as aliases?)
Member
Author
There was a problem hiding this comment.
yes (no) :-)
We currently do not have any alias tokens referencing another tokens.
| theme.aliasColorsRedNeutral; | ||
| ``` | ||
|
|
||
| This should simplify theme merging, improve tokens discoverability. The potential drawback is we are creating a gigantic dictionary of unrelated values. |
Member
There was a problem hiding this comment.
Probably a previously discarded idea, but: Rather than declare all the values in a structure, could we have a function to pass a key and then provide all the keys in a structure for discoverability? A JS function could allow fallback and inline just in time. theme.color(theme.colorKeys.redNeutral)
|
|
||
| ### <a name="no-css-vars"></a>Get rid of all CSS variables | ||
|
|
||
| We have learnt that CSS variables are expensive. Can we get rid of them completely? If we decided to do so, we would need to think about the following problems: |
Member
There was a problem hiding this comment.
Can we quantify what expensive means and what too expensive is? Devs integrating other controls may be familiar with and prefer CSS vars.
Member
Author
There was a problem hiding this comment.
This is the best I have for now: https://github.com/microsoft/fluentui/blob/bc239d778215e46814b78b656a97345fef8d5a29/rfcs/theme-shape.md#results-summary
It shows that by having more CSS variables, the performance of the synthetic perf example degrades. I have to admit it is too vague, especially with the y axis missing any units.
It would be great to do deeper investigation as described here: #19752 (comment)
Member
There was a problem hiding this comment.
I think your answer about the 20ms being a no-go for partners is a good quantification. It seems like using CSS vars is becoming more popular. I wonder if the next version of browsers will improve performance we we then find ourselves wanting to backtrack to using them again.
| const useStyles = makeStyles({ | ||
| root: theme => ({ | ||
| color: theme.alias.color.neutral.neutralStroke1, // color: var(--alias-color-neutral-neutralStroke1) | ||
| background: globalColorTokens.palette.grey[50], // background: '#ddd' 👈 value inlined/bound during babel-plugin/build |
Contributor
There was a problem hiding this comment.
If importing globalColorTokens is possible because the value never changes (which is correct), then look also at the alias tokens on theme. Their value is also static between all them changes since they simply convert a dot annotation to a css variable string. The var() never changes between theme switches.
Thus, we can actually get rid of the theme => ({}) functions altogether and have only a single imported theme object. This would allow tree shaking theme aliases in addition to globals. We would also reduce the API surface as makeStyles would only need to support objects. We would then also save all the function calls.
The caveat is that it forces us to rely on css variables as values in makeStyles. We could not fallback to static values (#000 vs var(--foreground1)) because the value would need to update on theme switch but it could not because it is imported.
hoorncj
reviewed
Sep 16, 2021
| 2. [Do not inject global color tokens as CSS variables](#no-global-tokens) | ||
| 3. [Merge global and alias tokens to a single object](#merge-global-alias) | ||
| 4. [Flatten the tokens object](#flatten-tokens) | ||
| 5. [Hash variable names](#hash-variables) |
Contributor
There was a problem hiding this comment.
As a consumer of the alpha FluentProvider, we currently generate our own set of sass mixins that reference css variables. Do you plan to complete the SASS generation (reference in below comment) and export it from Fluent packages before css variables are removed or hashed?
hoorncj
reviewed
Sep 16, 2021
|
|
||
| The main reason why CSS variables are used is to be able to switch themes just by changing the CSS variables values. | ||
|
|
||
| But, by design, global tokens never change their values when switching theme, so there is no point to have them as CSS variables. |
Contributor
There was a problem hiding this comment.
Isn't the brand palette considered a global? For my team (office.com) this IS what changes when the user changes themes, in addition to the dark/light/hc token assignments. Are we making some illegal assumptions about how theme changes are supposed to work? Right now when user changes selected theme we call createLightTheme() or createDarkTheme() (based on current theme mode) and pass in the selected user theme as brand palette. https://office.visualstudio.com/OC/_git/office-start?path=/packages/services/theming-service/src/createFluentTheme.ts&version=GBmain&line=15&lineEnd=36&lineStartColumn=1&lineEndColumn=2&lineStyle=plain&_a=contents
Contributor
There was a problem hiding this comment.
I should mention we have a big release slated for Ignite and we are relying heavily on this theme switching mechanic. Preventing changing brand colors at runtime will be disruptive. If this has to happen, we'll need time to discuss a new theming strategy and I don't think we'll have time before Nov.
Collaborator
There was a problem hiding this comment.
It is true that today brand palette is considered global and changes on theme switching. I think this is confusing and complicates the mental model of tokens. It seems like brand colors should move out of global tokens, as far as I know from talking to daisy and @levithomason their existence as global tokens is more historical than for a specific purpose.
In my opinion, it would be a far simpler model (both mental and actual) if all that changed on theme switch was alias tokens and global tokens were both global and effectively static at runtime. Perhaps global tokens should even be a design-time concept and stamped out as part of the token pipeline.
Clearly that is a significant change, we'd need to manage it so that we don't break folks (or help folks move over if it's easy) especially if we have Ignite timelines. 🙂
Is there a particular reason for why it's desirable to have brand colors part of global tokens? Want to make sure I'm not missing something.
Member
Author
There was a problem hiding this comment.
It is true that today brand palette is considered global and changes on theme switching.
I would not completely agree. Brand palette (theme.global.palette.brand) is expected to be global and never change when switching themes.
The intended usecase for create*Theme functions was you call them with your custom brand ramp but use the same ramp for all light, dark and HC.
Then it is a responsibility of alias tokens to do appropriate mapping in different themes:
Member
Author
There was a problem hiding this comment.
I will check the code you linked, but what is your motivation for using a different brand ramp in light vs dark?
Is it that the mapping in aliases does not match you design or do you use global color tokens directly?
We do not expect anybody to use the global color tokens and plan to remove them completely from the theme.
Let's have a meeting and discuss the impact this would have on your scenario.
Contributor
There was a problem hiding this comment.
We don’t change the ramp between light and dark, but our app allows users and tenants to customize brand colors. You can try the theme switcher yourself if you visit www.office.com, open the settings tab in the header, and modify the selected theme. I’d love to have a chat if this usage is unexpected. I don’t believe we’re the only ones that adhere to shared header themes.
JustSlone
reviewed
Sep 17, 2021
|
|
||
|  | ||
|
|
||
| ### Remove even more tokens |
Collaborator
There was a problem hiding this comment.
It seems like it will be far easier to add more tokens in the future, rather than remove them. As long as this is true, given the perf impact, I'd recommend we reduce our # of tokens now and add tokens based on need later
JustSlone
reviewed
Sep 17, 2021
|
|
||
| ### Hash CSS variables | ||
|
|
||
| In inline aliases scenario, there are 1200 CSS variables with names like `--alias-color-neutral-neutralStrokeAccessibleHover`. The total string length of CSS variable names (including the leading `--`) is 39,252 characters - is that affecting the perf as well? We used 7-char hashes for variable names to check for any difference - this reduced the string length to 10,354 characters. There is no difference in the performance. |
Collaborator
There was a problem hiding this comment.
What is the size after gzip? given the repeated text present in CSS variables gzip will likely do a good job reducing the size to a value close to the hashed size.
Perhaps we still hash due to runtime size and memory impact, but keeping bundle size low is very important
This was referenced Sep 29, 2021
layershifter
approved these changes
Dec 1, 2021
msft-fluent-ui-bot
pushed a commit
that referenced
this pull request
Jan 5, 2022
This RFC targets to solve extensibility of theme of customers and simplify `makeStyles()` itself. This was already briefly discussed sometime ago, #19752 (comment). --- [RFC Preview](https://github.com/microsoft/fluentui/blob/rfc/mk-drop-fn/rfcs/convergence/make-styles-no-functions.md)
mlp73
pushed a commit
to mlp73/fluentui
that referenced
this pull request
Jan 17, 2022
* rfc(react-theme): Remove global color tokens * Add perf analysis
mlp73
pushed a commit
to mlp73/fluentui
that referenced
this pull request
Jan 17, 2022
This RFC targets to solve extensibility of theme of customers and simplify `makeStyles()` itself. This was already briefly discussed sometime ago, microsoft#19752 (comment). --- [RFC Preview](https://github.com/microsoft/fluentui/blob/rfc/mk-drop-fn/rfcs/convergence/make-styles-no-functions.md)
spmonahan
added a commit
that referenced
this pull request
Jan 21, 2022
* applying package updates * fix(react-tooltip): update styles to not use CSS shorthands (#20795) * fix(react-button): update styles to not use CSS shorthands (#20815) * fix(react-divider): update styles to not use CSS shorthands (#20817) * fix(react-checkbox): update styles to not use CSS shorthands (#20816) * fix(react-checkbox): update styles to not use CSS shorthands * use shorthand * fix: restore missing exports in v8 (#20824) * fix: restore missing exports in v8 * Change files * Update change/@fluentui-react-e62b6d7b-78cd-4608-875d-64734092f5fb.json Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> * fix(react-image): update styles to not use CSS shorthands (#20818) * react-theme: remove `themeToCSSVariables` function (#20828) * Removes `themeToCSSVariables` from `react-theme` * Change files * Updates useThemeStyleTag test * Update change/@fluentui-react-components-74056fd1-c660-4696-8c6d-4e88c982db5b.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-react-provider-e4a6f9f7-0251-4c29-a6fc-40271100354f.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-react-theme-963b299a-18df-4452-82a8-3f4f55dbbf3b.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * fix(react-avatar): update styles to not use CSS shorthands (#20801) * fix(react-avatar): update stories to not use CSS shorthands in styles * Update change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json * fix(react-link): update styles to not use CSS shorthands (#20819) * fix(react-link): update styles to not use CSS shorthands * Apply suggestions from code review * fix: Label component to properly pass down ref to root slot (#20813) * fix: Label component to properly pass down ref to root slot * add changelog * fix(codemods): Remove v9 make-styles dependency (#20836) Refactors the current test to not require an import from v9. The import itself is actually not important to the test. * fix: Loader component to properly pass ref to root slot (#20814) * fix: Loader component to properly pass ref to root slot * add changelog * fix: Loader * fix: Form component to properly pass ref to root slot (#20809) * fix: Form component to properly pass ref to root slot * add changelog * fix: Grid component to properly pass ref to root slot (#20810) * fix: Grid component to properly pass ref to root slot * add changelog * fix(react-positioning,react-tabster): update styles to not use CSS shorthands (#20842) * fix(react-text): update styles to not use CSS shorthands (#20841) * Add missing permissions (#20840) * fix: Header components to properly pass ref to root slots (#20811) * fix: Header components to properly pass ref to root slots * add changelog * fix: image component to properly pass ref to root slot (#20812) * fix: image component to properly pass ref to root slot * add changelog * fix: MenuButton to properly pass ref to root slot (#20837) * fix: MenuButton to properly pass ref to root sloot * add changelog * fix(Popup): remove unsupported styling props (#20853) * fix(Popup): remove unsupported styling props * Update packages/fluentui/CHANGELOG.md * fix(react-northstar): use native ARIA props (#20848) * fix(react-northstar): use native ARIA props * add changelog entry * Update packages/fluentui/CHANGELOG.md * fix tests * chore: run migration for @fluentui/react-slider (#20856) * Input: add interaction styling and vr-tests (#20648) * fix: Pill components to properly pass down ref to root slot (#20838) * fix: Pill components to properly pass down ref to root slot * add changelog * fix pill icon * Add teams-prg and cxe-red as codeowners of `react-badge` (#20715) * Add teams-prg and cxe-red as codeowners of `react-badge` * Update .github/CODEOWNERS * applying package updates * fix: video component to properly pass ref to root slot (#20878) * fix: video component to properly pass ref to root slot * add changelog * fix: tree components to proper pass ref to root slots (#20877) * fix: tree components to proper pass ref to root slots * add changelog * Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * rfc(react-theme): Remove global color tokens (#19752) * rfc(react-theme): Remove global color tokens * Add perf analysis * fix: text area component to properly pass ref to root slot (#20875) * fix: text area component to properly pass ref to root slot * add changelog * Update packages/fluentui/CHANGELOG.md Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * fix: TooltipContent Ref to proper pass ref to root slot (#20876) * fix: TooltipContent Ref to proper pass ref to root slot * add changelog * fix: Text component to properly pass down ref (#20874) * fix: Text component to properly pass down ref * add changelog Co-authored-by: Oleksandr Fediashov <[email protected]> * fix: RadioGroup components to properly pass ref to root slots (#20867) * fix: RadioGroup components to properly pass ref to root slots * changelog * fix: Reaction components to properly pass ref to root slots (#20868) * fix: Reaction components to properly pass ref to root slots * add changelog * fix: slider component to pass ref to root slot (#20870) * fix: slider component to pass ref to root slot * add changelog * fix: vertical tabs from jumping (#20641) * fix: tabpanel shifting in vertical layout * Change files * react-avatar: migrate converged packages to TS Solution style config (#20843) * Migration to new dx * Change files * chore: run migration for @fluentui/react-tooltip (#20858) * chore: run migration for @fluentui/react-label (#20851) * Migration to new tsconfig solution (#20880) * chore: run migration for @fluentui/react-switch (#20857) * chore: run migration for @fluentui/react-link (#20855) * react-button: migrate converged packages to TS Solution style config (#20846) * Migration to new tsconfig * Change files * fix: segment component to pass down ref to root slot (#20869) * fix: segment component to pass down ref to root slot * add changelog * feat(make-styles): Add `unstable_filterCSSRule` option to default `createDOMRenderer` (#20827) * feat(make-styles): Add `filterCssRule` option to default `createDOMRenderer` Adds a new `CreateDOMRendererOptions` type and options configurations to `createDOMRenderer`. Initially adds `filterCssRule` option for the renderer, so that styles can be systematically filtered at the renderer level which avoids additional logic in both the runtime and babel plugin code paths. * Change files * pr issues * update md * fix export * use serializer * Update change/@fluentui-make-styles-e6ce655b-209a-44e5-be74-f6b79e841121.json * use unstable_ prefix * update changefile * update md * remove fake documents * applying package updates * fix: Popover, Tooltip: RTL arrow positioning broken (#20845) * Adds @noflip annotation to data-popper-placement styles * Change files * docs(storybook): hide editors in ArgsTable (#20695) * docs(storybook): hide editors in ArgsTable * Change files * move style overrides from a component to global styles * docs(storybook): fix TOC anchor links with colons (#20676) * docs(storybook): fix anchor links with colons * Change files * bundle-size: Adds missing dependencies (#20885) * Adds missing dependencies to bundle-size * Change files * Dedupe ci-info * fix: SplitButton component to pass ref to root slot (#20871) * fix: SplitButton component to pass ref to root slot * add changelo * fix: status component to properly pass ref to root (#20872) * fix: status component to properly pass ref to root * add changelog * fix status default props * Migration to new tsconfig solution (#20854) * Migration to new tsconfig solution (#20849) * fix: Table components to properly pass ref to root slots (#20873) * fix: Table components to properly pass ref to root slots * add changelog * Bugfix/choice group focus trap zone (#20859) * update ChoiceGroup focus handling This commit overrides focus handling for ChoiceGroup when focus comes from outside the DOM tree of the ChoiceGroup (e.g., from a sibling of ChoiceGroup). This addresses a bug raised in #20173 where a ChoiceGroup wrapped in a FocusTrapZone would not correctly focus the selected option in ChoiceGroup. The issue arises when ChoiceGroup is the first child of FocusTrapZone and the focus is wrapped from the end of the focus trap back to the begining. In this case FocusTrapZone walks its DOM children looking for the first tabbable child, calling `focus()` on it. In the case of ChoiceGroup this is always the first option in the group. The fix is to listen for focus events on ChoiceGroups `radiogroup` child and override focus behavior when the focus event comes from outside of the ChoiceGroup, like when FocusTrapZone wraps the focus. This provides the correct behavior for ChoiceGroup without adding new focus logic to FocusTrapZone. See: https://github.com/microsoft/fluentui/issues/20173 * Change files * Refactor ChoiceGroup focus handling code. Extracts code into a new function so it's more easily reusable in the future and more self-documenting. * Update ChoiceGroup snapshots * test(date-time-utils): make test pass for every contributor (#20887) * applying package updates * fix(react-switch): update styles to not use CSS shorthands (#20844) * Delete unused .storybook/babel.plugin.js (#20126) * Update lage to prevent truncation of error summary logs (#20903) * Remove converged useControllableValue hook (#20865) * docs(colors): Adds system colors to the `Colors` guide in the docsite (#20723) * docs(colors): Adds system colors to the `Colors` guide in the docsite Adds a new section that explains systems colors in the context of windows high contrast mode. The section contains color boxes for all the available system colors. Modifies `ColorBox` component not to crash on sytem colours because the `color` package does not support them * remove try catch * react-card: Spec (#19410) Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Tringa Krasniqi <[email protected]> * chore: disable custom Storybook addon in react-components (#20895) * disable storybook addon * Change files * Update packages/react-components/.storybook/main.js * fix: getPointerStyles in RTL mode (#20915) * fix: getPointerStyles in RTL mode * chore: add pointing prop to tooltip * add position to rtl example * revert changes for top and bottom * fix compatibility * add changelog * De-couple v8 and converged vr-tests and storybooks (#20907) * Docs/getslots comment (#20919) * Update getSlots() docs. Clarfies that prop filtering is only done by the type system and not by runtime code. * Change files * Update API docs. * Positioning: Allow swapping anchor edge when on boundary and won't cause visual differences (#20769) * applying package updates * feat(react-theme): Extend brand ramp from 13 to 16 tokens (#20884) * feat(react-theme): Extend brand ramp from 13 to 16 tokens * Change files * (fix): Update react-icons dependency to latest version (#20943) * (fix): Update react-icons dependency to latest version * Change files * Change files * fix(slider|input|radio): use CSS shorthands in styles (#20926) * fix(Popup): handle events on trigger that is wrapped in `Ref` (#20911) * fix event handler * chglog * merge ref * Update fix * chglog * cleanup * revert toolbarItem change * new fix * cleanup * e2e * no trigger fix * chglog * Improve error messages for ts-minbar tests (#20941) * fix(Menu): Call `useCheckmarkStyles` in `useMenuItemStyles` (#20956) * fix(Menu): Call `useCheckmarkStyles` in `useMenuItemStyles` * Change files * Fix react-input's storybook build command so it deploys * SearchBox: disable pointer events when is focused (#20951) * SearchBox: disable pointer events when is focused * Change files * fix hover behavior * Cherry-pick from #20860: Azure-theme tooltip dark theme fix (#20861) * Dark theme tooltip fix * Change files * RFC: Repo folder organization (#20831) * applying package updates * fix(Badge): use updated tokens for ghost and outline variants (#20893) * fix(Badge): use updated tokens for ghost and outline variants * Change files * update badge styles * update badge styles * update badge styles * update vr test background * don't render informative on brand background * fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly (#20957) * fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly * Change files * use aria-haspopup menu * update md * update e2e selectors * chore: Bump tabster and keyborg versions (#20889) * chore: Bump tabster and keyborg versions * Change files * update type import * bump tp 1.1.0-alpha.2 * revert type hack * revert * bump to alpha.3 * update yarnlock * bump to alpha.4 * feat(react-theme) Add border1 color token for shared colors (#20963) * feat(react-theme) Add border1 color token for shared colors * Change files * fix: PopupContent to properly pass ref (#20866) * fix: PopupContent to properly pass ref * add changelog * fix ref placement * fix: ref placement * handle inner ref for foxus components * apply review * fix proptype * fix popup ref * fix(Menu): Focus on first menu item on click (#20955) * fix(Menu): Focus on first menu item on click * Change files * use single effect * fix conditions * Set borderRadius on ToolbarItem and icon-only MenuItem (#20422) * Set borderRadius on toolbars * Add changelog entry * fix(makeStyles): correctly handle computed keys (#20969) * fix(makeStyles): correctly handle computed keys * Change files * Update change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json * add fixtures for function * feat(Accordion): Do not render inactive content (#20783) * feat(Accordion): Do not render inactive content * changelog * ut Co-authored-by: Juraj Kapsiar <[email protected]> * Support ability to set a context menu item's event target to the Menu root (#20161) * applying package updates * fix(Badge): Add uniform padding and modify gaps (#20974) * fix(Badge): Add uniform padding and modify gaps Adds uniform padding around the badge to achieve the desired effect for circular icon and one character badges. The wider variants still look OK. I'm not sure if they are pixel perfect, but it's the only way I could find that would achieve the desired effect for icon only badges 🤷 * Change files * revert bagde stories * update counter badge styles * update counter badge styles * Add scaffold project for Converged SpinButton (#20940) * Add scaffold project for Converged SpinButton Just the basic setup for the SpinButton component. * update SpinButton tsconfig Updates the excludes in SpinButton's tsconfig.lib.json file to match other converged components (e.g., react-button). * add storybook config for SpinButton The lint command was failing without the Storybook tsconfig. * update default SpinButton tests. Adds snapshots and adds some information to pass conformance tests. * update API file. * Update packages/react-spinbutton/README.md Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> * Upgrade to typescript 4.3 (#20909) * fix: z-index in accordion header renders above content (#20587) * Change files * Fixes z-index in headers above content region * Shared style for position. * applying package updates * fix(bundle-size): incorrect promise test (#20982) `buildFixture` was trying to test that the function would throw asynchronously. However, the `expect` call was never awaited to the test always passed and the jest was left with an unresolved promise error * docs(Accessibility) Add more explanation links to V9 accessibility stories (#20975) * docs(Accessibility): Add more explanation links to Accessibility storybook * Change files Co-authored-by: Juraj Kapsiar <[email protected]> * applying package updates * fix(makeStyles): improve return types for shorthand functions (#21001) * fix(makeStyles): improve return types for shorthand functions * Change files * remove "s" suffix, fix type name * react-tabs mvp (#20939) * Create react-tabs packages and components * Basic tab with selection * Updated to use css after for indicator * Added support for vertical * Add support for verticalTabContent * Add appearance and basic subtle style * Supported icon slot * Added content slot for layout * Added badge tab * Supported size for tablist and tab * Added size stories * Improved story descriptions * Support small size defaults * Support focus with arrow keys * Improved props documentation * Undo column update on overlap * Added some initial tests * Added initial vr-tests for tabs * Reduced type complexity in TabList * Merge fixes * Removed unready features * Simplified styling * Support small style * Migrated to TS solution * Updated to latest padding figma changes * Updates * Updated vr-test stories * Updated documentation and tests * PR updates * Revert to master yarn.lock * Fixing synpack issue * added tabs dependency * Moving to make-styles shorthands. * Refactor Checkbox to use `label` as a slot instead of the root (#20904) Refactor/clean up the `Checkbox` component. * Update label to be a slot instead of the root element. This changes the API from `<Checkbox>Example</Checkbox>` to `<Checkbox label="Example" />` * Rework the structure of the control to not require wrapper div inside * Rework the styling, and fix some small inconsistencies in the styling from the figma * Refactor tests * Update and clean up storybook stories * Also fix a minor bug in the consistent-callback-args conformance test, where it wasn't properly handling string literal types. * applying package updates * Add support for Dialog to be zoomed up to 400% (#20722) * update dialog styles to be responsive * update dialog styles to be responsive * update examples styles overrides * update changelog * update examples and styles * update imports paths * update flex styles * remove context condition for rtl * update best practices, fix exmaple with double scrollbars * move examples to public section Co-authored-by: Anna Kellerstein <[email protected]> * fix: Animation to properly pass ref to root slot (#20972) * fix: animation ref * add changelog * chore: remove findDomNode from FocusZone (#20946) * chore: remove find dom node * fix is conformant tests * disbale tests * fix: is conformant config * disable as-renders-fc * enable ref tests * fix: label ref * disabled specific tests * disable test for animation * Update packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * fix: formatting Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(Chat): Child behaviors for item and message (#20998) * feat(Chat): Child behaviors for item and message Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: ling1726 <[email protected]> * Fix #20043 - Checkbox checkmark should have opacity 0 in indeterminate state (#21005) * Made checkmark opacity 0 for indeterminate * Change files * Updated snapshot * Upgrade to node 14 (i.e. revert "Revert to node 12") (#21021) * Revert "fix: Revert to node 12 (#20781)" This reverts commit 1fb5698fb5b996402373339e5f7698595f6a76d4. * Change files * Update change/@fluentui-eslint-plugin-85794a53-50f5-4b78-b297-dfc48bad0916.json Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> * chore: Add `exclude` argument for version bump generator (#21019) * chore: Add `exclude` argument for version bump generator * Update tools/generators/version-bump/README.md Co-authored-by: Elizabeth Craig <[email protected]> * Update tools/generators/version-bump/schema.json Co-authored-by: Elizabeth Craig <[email protected]> * Update tools/generators/version-bump/schema.ts Co-authored-by: Elizabeth Craig <[email protected]> * use assertion for versions Co-authored-by: Elizabeth Craig <[email protected]> * fix: prevent disabled flipper from emitting event (#21003) * fix: prevent disabled flipper from emitting event * Change files * babel-make-styles: Correctly handling sequence expressions (#21010) * babel-make-styles: Correctly handling sequence expressions. * Change files * Update packages/babel-make-styles/src/plugin.ts Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * Add aria-multiselectable to multiselect Combobox (#21024) * Fixed typo (#21030) * eslint-plugin: classify stories as examples not tests (#20681) * chore: migrate to jest v25, v26 (#20716) * applying package updates * chore: prepare release react-northstar 0.60.0 (#21017) * chore: prepare release react-northstar 0.60.0 * @fluentui/react-northstar_v0.60.0 * update npm registry url * Revert "@fluentui/react-northstar_v0.60.0" This reverts commit 87a64d543beef20c9b47bf7cdae90e478e048419. * pin cra version * diable cra tests * Revert "pin cra version" This reverts commit ca90ce12c984b905c9eabcf4a5566dfdbb7423bb. * @fluentui/react-northstar_v0.60.0 * Update packages/fluentui/projects-test/src/index.ts Co-authored-by: ling1726 <[email protected]> * Update packages/fluentui/projects-test/src/index.ts Co-authored-by: ling1726 <[email protected]> * Update packages/cra-template/package.json Co-authored-by: ling1726 <[email protected]> Co-authored-by: Anna Kellerstein <[email protected]> Co-authored-by: Fluent UI Build <[email protected]> Co-authored-by: ling1726 <[email protected]> * chore: Remove enzyme from react-utilities tests (#21060) * chore: Remove enzyme from react-utilities tests * remove enzyme * Change files * Update just-scripts and remove some workarounds for customizing build tasks (#21023) * Combobox: Provide a callback to listen to raw text input (#21069) * Use a custom cache directory for each test that runs yarn (#20902) * Fix test issues discovered while trying to test React 17 (take 2) (#21032) * Input: implement primary slot (#20863) * Add screener tests for react-checkbox (#21011) * Add screener tests for react-checkbox * Use icons from react-icons for the indicator * Fix up some styling for Checkbox * applying package updates * Added missing descriptions to divider stories (#21067) * Added missing descriptions to divider stories * Change files * breaking: MenuTrigger must be the first child of the `Menu` (#21096) * breaking: MenuTrigger must be the first child of the `Menu` In order to support different types of menu trigger such as split items and have more flexibility with the component, the `Menu` component no longer does a runtime check to find a `MenuTrigger`component. Now the usage of the `Menu` must have `MenuTrigger` as the first child. This is already implicitly the case in all the documentation examples. Added a documentation snippet to state this explicitly in the `Menu` docs. Added a test to make sure that the usage of `Menu` without a `MenuTrigger` is still possible and does not regress. * Change files * add docstring * Update packages/react-menu/src/components/Menu/useMenu.tsx * add splitbutton labels to commandbar example (#20683) * Fixing React.Fragment wrapping StackItems inside a Stack. (#21090) Co-authored-by: Angel Duran <[email protected]> * applying package updates * Restructure RFC Folder (#21022) * restructure rfc folder * move files around, move assets folder back as subfolder of rfc * update asset file imports * rename theme shape png files * move theme shape pngs to assets folder * update file imports for theme shape RFC * move a11y and testing files to react-components folder * Add new css properties into `IRawStyleBase` (#18915) * feat: Add new css properties into `IRawStyleBase` - justify-items - place-content - place-items - place-self * Change files * docs: Change merge-styles.api.md * fix(SwatchColorPicker): use radio roles on single-row swatches (#20829) * feat: MenuSplitItem component (#21095) * feat: MenuSplitItem implementation * Change files * fix type * add consistent styling * 3 prototypes * unstable menu split group * add role presentation * Change files * add e2e tests * fix tests * handle single child * add test for custom target * remove unstable * update changefiles * use targetDocument * update spec * update stories * add vr test * don't call hook conditionally * fix lint and add aria label * pr suggestions * use role="group" * chore: update package name in readme (#21122) * Input: add stories and restrict type prop (#21072) * Fix disabled Input styles (#21139) * feat: generated react-dialog package (#20954) * feat: generated react-dialog package * chore: run package migration * fix: radio-dialog conformance * docs: update react-dialog api docs * applying package updates * makeStyles: do not use shorthand expansion (#20539) * fix: update types to disable shorthands * address PR review comments * fix useTabStyles.ts * fix stories * fix styles for checkbox * do not use padding in tests * Change files * react-tabs small improvements (#21093) * Improvements based on previous PR feedback * Removed old imported type * RFC: Standardize onChange handlers for input components (#20966) * react-components: Stop generating a folder with a file inside and instead flatten to a single file for 'Migrating from @fluentui/react v8' storybook story (#21158) * react-components: Stop generating a folder with a file inside and instead flatten to a single file for 'Migrating from @fluentui/react v8' storybook story. * Change files * Updating change file. * Update Avatar to use resizable icons (#21160) Update Avatar to use a resizable icon for its default Person icon. * Publish react-input and add to react-components under unstable (#21142) * Change radio team owner (#20950) * Remove outdated boilerplate from vnext components (#21150) * Slider refactor (#20657) * init refactor of slider * start bringing marks back in * story cleanup * cleanup * update spec * Change files * update api * Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: ling1726 <[email protected]> * move stateful styles into css variables * add slider to react-components main export * cleanup and add ticks * change var name * cleanup snaps * remove ranged fixture * fix package version * fix prettier * add primary slot * api update * react components api * revert react components to remove slider * merge conflicts * update api md * Delete @fluentui-react-components-2b36a74e-2147-4df0-a4f2-ab6c12c56033.json * cleanup testing * slider types * simplify onChange prop * update api * move back to onChange with data * remove unused stuff * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Elizabeth Craig <[email protected]> * refactor css variables * api update fix build * fix RTL issues * remove utils, cleanup tests, update ids * remove unnecessary code * new snaps * fixed thumb alignment, moved input to bottom of DOM stack * Update packages/react-slider/src/components/Slider/Slider.test.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Makoto Morimoto <[email protected]> * updated stories with descriptions, fixed stateful bug * updated tests * fixed pretty * api * remove old snaps * snaps * update snaps * test clean up * remove unused methods * change private to true * add outline for HC * cleanup linting * snaps Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * RFC: no functions in makeStyles() (#20651) This RFC targets to solve extensibility of theme of customers and simplify `makeStyles()` itself. This was already briefly discussed sometime ago, https://github.com/microsoft/fluentui/pull/19752#discussion_r709513133. --- [RFC Preview](https://github.com/microsoft/fluentui/blob/rfc/mk-drop-fn/rfcs/convergence/make-styles-no-functions.md) * react-theme: Exporting token to css variable mapping (#21026) * react-theme: Exporting token to css variable mapping. * Change files * Update change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Moving tokens.ts into src/ and out of src/global. Co-authored-by: Oleksandr Fediashov <[email protected]> * react-badge: Replacing use of functions in makeStyles with direct use of tokens (#21038) * react-theme: Exporting token to css variable mapping. * Change files * react-badge: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Fixing build error. * react-avatar: Replacing use of functions in makeStyles with direct use of tokens (#21037) * react-theme: Exporting token to css variable mapping. * Change files * react-avatar: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * vr-tests: Replacing use of functions in makeStyles with direct use of tokens (#21028) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `vr-tests` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-components: Replacing use of functions in makeStyles with direct use of tokens (#21042) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-components` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-label: Replacing use of functions in makeStyles with direct use of tokens (#21046) * react-theme: Exporting token to css variable mapping. * Change files * react-label: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Fixing build error. * docs: react-radio spec (#20555) * docs: react-radio spec * Added images for radio variants * Updated spec: added info and restructured the doc * Updated dom structure Co-authored-by: tringakrasniqi <[email protected]> * RFC: Rename and move out `makeStyles` to a separate repo (#20882) * RFC: Rename and move out `makeStyles` to a separate repo * Apply suggestions from code review Co-authored-by: ling1726 <[email protected]> * Update rfcs/convergence/move-out-n-rename-makestyles.md Co-authored-by: ling1726 <[email protected]> Co-authored-by: ling1726 <[email protected]> * chore: bump react-transition-group from 4.3.0 to 4.4.1 (#21187) * update react-transition-groupt from 4.3.0 to 4.4.1 * chglog * feat(react-conformance): add tsconfigDir config + change tsconfig default dir to componentPath (#21113) * add tsconfigDir + change tsconfig default path * Change files * update comment * update comment * fix(ChatMessage): use chat context as default value when user prop is explicitly undefined (#21189) * fix input prop sequence * chglog * react-card: Replacing use of functions in makeStyles with direct use of tokens (#21040) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-card` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-divider: Replacing use of functions in makeStyles with direct use of tokens (#21043) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-divider` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-image: Replacing use of functions in makeStyles with direct use of tokens (#21044) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-image` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-link: Replacing use of functions in makeStyles with direct use of tokens (#21047) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-link` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * Ignore stories and tests when requiring change files (#21073) * react-spinbutton: Replacing use of functions in makeStyles with direct use of tokens (#21055) * react-theme: Exporting token to css variable mapping. * Change files * react-spinbutton: Replacing use of functions in makeStyles with direct use of tokens. * Moving tokens.ts into src/ and out of src/global. * react-input: Replacing use of functions in makeStyles with direct use of tokens (#21045) * react-theme: Exporting token to css variable mapping. * Change files * react-input: Replacing use of functions in makeStyles with direct use of tokens. * Extra changes. * Extra changes. * Change files * remove old Input stories * Updating change file Co-authored-by: Elizabeth Craig <[email protected]> * react-popover: Replacing use of functions in makeStyles with direct use of tokens (#21049) * react-theme: Exporting token to css variable mapping. * Change files * react-popover: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Update change/@fluentui-react-popover-06bae6cd-27f5-4e6b-90fa-9f12830ea985.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * react-portal: Replacing use of functions in makeStyles with direct use of tokens (#21050) * react-theme: Exporting token to css variable mapping. * Change files * react-portal: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * react-positioning: Replacing use of functions in makeStyles with direct use of tokens (#21051) * react-theme: Exporting token to css variable mapping. * Change files * react-positioning: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Update @fluentui-react-positioning-269c73ba-d092-4c18-8b6a-dd47c0e3daab.json * react-provider: Replacing use of functions in makeStyles with direct use of tokens (#21052) * react-theme: Exporting token to css variable mapping. * Change files * react-provider: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Fixing build error. * Update change/@fluentui-react-provider-a155c5ae-911a-4b9c-b794-48e8f037db66.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * Delete outdated Input stories again...? * Restore proper Input stories file * Tooltip: Add screener tests and fix high contrast border (#21086) * Add screener stories for Tooltip * Add a border to Tooltip using `colorTransparentStroke`, which is transparent in all themes except high contrast * Fix `createArrowStyles`: * Use `width` _and_ `height` to set the arrow's size instead of `aspectRatio`, which wasn't working as expected, and was producing a zero-size tooltip. * Accept border styling parameters, and apply them to the arrow's border. * feat: add `search` web component (#21177) * feat: add search web component * react-tabster: Replacing use of functions in makeStyles with direct use of tokens (#21035) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Renaming rule parameter to style in createCustomFocusIndicatorStyle so that it better adheres to type name. * react-tooltip: Replacing use of functions in makeStyles with direct use of tokens (#21058) * react-theme: Exporting token to css variable mapping. * Change files * react-tooltip: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Update @fluentui-react-tooltip-3983a8eb-9223-4f77-8e3f-30c0082715c6.json * react-radio: Replacing use of functions in makeStyles with direct use of tokens (#21053) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * react-radio: Replacing use of functions in makeStyles with direct use of tokens. * Moving tokens.ts into src/ and out of src/global. * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Fixing build error. * react-slider: Replacing use of functions in makeStyles with direct use of tokens (#21054) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * react-slider: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Change files * Moving tokens.ts into src/ and out of src/global. * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Fixing build error. * react-button: Replacing use of functions in makeStyles with direct use of tokens (#21039) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026 and #21035._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-button` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-switch: Replacing use of functions in makeStyles with direct use of tokens (#21056) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * react-switch: Replacing use of functions in makeStyles with direct use of tokens. * Moving tokens.ts into src/ and out of src/global. * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Updating API. * Change files * codemods: Removing makeStyles related codemods as they are not relevant anymore (#21201) * Removing makeStyles related codemods as they are not relevant anymore. * Change files * applying package updates * docs(.github): update PR template (#21175) * docs(.github): update PR template * fixup! docs(.github): update PR template * react-accordion: Replacing use of functions in makeStyles with direct use of tokens (#21036) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026 and #21035._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-accordion` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-menu: Replacing use of functions in makeStyles with direct use of tokens (#21048) #### Pull request checklist - [x] Addresses an existing issue: Implements part of #20651 - [x] Include a change request file using `$ yarn change` #### Description of changes _This PR is part of a series of PRs that split #20918 into smaller PRs._ _This PR follows #21026 and #21035._ This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-accordion` package with direct use of the `tokens` exported from `@fluentui/react-theme`. * react-components: Cleaning up change file to indicate change as type none since the change was affecting just stories and not published code. (#21203) * chore(deps): bump copy-props from 2.0.4 to 2.0.5 (#21202) Bumps [copy-props](https://github.com/gulpjs/copy-props) from 2.0.4 to 2.0.5. - [Release notes](https://github.com/gulpjs/copy-props/releases) - [Changelog](https://github.com/gulpjs/copy-props/blob/master/CHANGELOG.md) - [Commits](https://github.com/gulpjs/copy-props/compare/2.0.4...2.0.5) --- updated-dependencies: - dependency-name: copy-props dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * GroupedList: removes aria-label attribute when rowgroup is empty. (#21176) * remove aria-label when role is removed * Change files * update snapshot * Update react-icons usage to resizable icons (#21074) * Update react-icons usage to resizable icons * Change files * Update Avatar snapshot * Update Menu snapshots * Revert Menu snapshots and icon * revert avatar changes * Tooltip: Move arrowHeight and tooltipBorderRadius into a common constants.ts file (#21204) Move the arrowHeight and tooltipBorderRadius constants into ./private/constants.ts. They aren't exported from the package, but are exported for use within the component code. * Remove outdated RFC: Improved type checking for component props (#21198) Removing RFC: Improved type checking for component props #17232, as it was superseded by RFC: Simplify prop merging with slots #18642 * Add orient to slider input type (#21209) * Add orient to slider input type * update api * removed slider change files now that slider is private * address feedback * snaps * react-checkbox: Replacing use of functions in makeStyles with direct use of tokens (#21041) * react-theme: Exporting token to css variable mapping. * Change files * Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. * Change files * react-checkbox: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Removing change files for private packages. * Readding unintended deleted file. * Fixing build error. * Change files * Update @fluentui-react-checkbox-98de0bef-6373-4cbf-aa25-a2f8c808a0ac.json * Removing makeStyles changes, replacing wrong values with shorthands in useCheckboxStyles. * applying package updates * chore: bump node-sass to v6 (#21112) * chore: bump node-sass to v6 * use Webpack 5, bump sass-loader * chore: update caniuse-lite (#21224) * test changelog * browserslist update * Revert "test changelog" This reverts commit f55fcb9702beeb16dbb758c975943c527392b1a5. * fix prj test * Revert "fix prj test" This reverts commit 7028353a1e8443f4839c19b0c654cd92567384b4. * fix(Animation): use `useMergedRefs` for Transition nodeRef (#21173) * use merged refs * chglog * type+ref update * fix test and add another ref * fix changelog * fix changelog * fix changelog * User/nojittip/fix focus bug (#20640) * fix last point focus bug and draw ordering of points * update snapshots * Change files * Pickers Suggestions: add searchForMoreText button to the suggestions listbox. (#21199) * Stop exporting Commons types from react-components (#21195) * react-text: Replacing use of functions in makeStyles with direct use of tokens (#21057) * react-theme: Exporting token to css variable mapping. * Change files * react-text: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Fixing build error. * Update @fluentui-react-text-9e64c144-eefa-4b74-a9ae-1fe283204ee7.json * Input: fix issues from a11y review (#21205) * applying package updates * Combobox(v8): adds check so it cannot be opened if disabled #17955 (#20973) * Added check for disabled prop * Change files * Removing unnecessary check Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * fix: MenuItemWrapper should not pass-through 'on' prop (#21170) * fix: MenuItemWrapper should not pass-through 'on' prop * Update packages/fluentui/CHANGELOG.md * Add workaround for Cypress issue on Windows (non-WSL) (#21143) * make-styles: Removing functions from makeStyles (#21239) * make-styles: Removing functions from makeStyles. * Change files * Updating based on removal of functions from makeStyles. * Change files * Updating output with missed blank lines. * Update change/@fluentui-jest-serializer-make-styles-85827bea-cbfa-43f7-960b-64286976e066.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-make-styles-578dffd4-f983-4e4b-b011-13b6e32d232b.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-make-styles-webpack-loader-7e71576a-78fa-49a0-97ea-49226e6b7fea.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update change/@fluentui-react-make-styles-fabf9f28-9def-489f-8068-06701c956ecf.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * (web-components) Update tab panel to base type size (#21180) Update tab panel to base type size * tokens: Removing need to cast fontWeight token as React.CSSProperties['fontWeight'] when using it inside of a makeStyles call (#21217) * tokens: Removing need to cast fontWeight token as React.CSSProperties['fontWeight'] when using it inside of a makeStyles call. * Change files * Updating API. * Making it so that fontWeight can handle string as a type in makeStyles calls. * Change files * Removing unnecessary changes in tokens.ts. * Removing other casts as fontWeight that came in after the PR was originally published. * react-button: remove fixed-size icons (#21221) Remove the fixed-sized icons from react-button's stories. The Button's styles already apply a default size for the icons. * react-menu: remove fixed-size icons (#21222) Add fontSize styling to MenuItem's icon and submenuIndicator slots. This provides a default size for icons provided by the user. * Remove fixed-size icons from TabList stories (#21223) Replace fixed size icons in react-tabs with resizable icons * react-badge: Apply fontSize styling to icon slot (#21219) Add fontSize styling to Badge's icon slot. This provides a default size for user-defined icons. * applying package updates * Remove slotNames param from getSlots, and delete {component}ShorthandProps arrays (#21134) Remove slotNames param from getSlots, and delete {component}ShorthandProps arrays #### Issue Currently, `getSlots` requires a second `slotNames` parameter, which is redundant with the keys of the `state.components` object. Not only is this unnecessary repetition of the same information, it's also not possible to use TypeScript to catch mistakes of accidentally leaving out one or more slot names from the array. This can lead to unexpected and hard to debug bugs. #### Description of changes * compose/getSlots.ts: `getSlots` uses the keys of `state.components` to get the list of slots, rather than a second `slotNames` param. * compose/types.ts: The `components` property is now required on the ComponentState object. This is enforced to be an exhaustive list of every slot and its type (so it's not possible to accidentally miss a slot, or forget to include `components` at all). * This required adding the components array to a few components that had previously omitted it because they only had a single `root` slot that's a `<div>`. IMO it's better to be explicit even for the simple case. * Delete all of the now unnecessary `{component}ShorthandProps` arrays. * Replace AccordionHeaderExpandIcon with ChevronRightRegular from react-icons (#21218) Remove AccordionHeaderExpandIcon, and use the resizable ChevronRightRegular icon from react-icons instead. And add fontSize styling to AccordionHeader's icon slots, so custom resizable icons can be used. * breaking: stop exporting useTheme() hook (#21257) * breaking: stop exporting useTheme hook * Change files * update API * Overhaul v8 icon doc text and add search for SVG icons (#21211) * SearchBox: fix event handling regressions in v8 (#21268) * Add eslint rule capability to ban exports of Commons types from react-components (#21196) * applying package updates * chore(react-theme) Add theme tokens bundle size fixture (#21186) * chore(react-theme) Add theme tokens bundle size fixture * Change files * chore(deps): bump follow-redirects from 1.7.0 to 1.14.7 (#21273) * docs(react-card): Add Alpha notice to docs (#21259) * chore: re-enable react-storybook-addon and babel-make-styles for react-components (#21247) * fix(react-storybook-addon): make devloop and package usage within storybook work * chore(react-components): make sb start work with babel-make-styles and react-sb-addon * Change files * breaking: remove "unstable_cssPriority" from makeStyles() (#21263) * breaking: remove "unstable_cssPriority" from makeStyles() * Change files * update API * adopt API changes from makeStyles * Change files * remove wrapping functions * update changelog entry * refactor(babel-make-styles): simplify evaluation (#21144) * refactor(babel-make-styles): simplify evaluation * Update packages/babel-make-styles/src/plugin.ts * Change files * fix fixtures Co-authored-by: KHMakoto <[email protected]> * feat: add storybook runner wrapper for vNext packages consumption (#21265) * feat(scripts): add vNext start-storybook wrapper runner * feat(tools): update migrate-converged-pkg generator with modified storybook command * fixup! feat(scripts): add vNext start-storybook wrapper runner * fixup! fixup! feat(scripts): add vNext start-storybook wrapper runner * Custom style for AreaLine, Point and Point Line in Area Chart (#21249) * Custom Line data style implementation for Area chart * circleData and crossLineData prop added for custom style to area chart selected circle and its line * test snapshot file * Change files * Prop name changed and example updated in area chart styled example * Area Chart styled example updated Co-authored-by: Sagar Charde <[email protected]> * Remove fixed-size icons from vr-tests (#21272) Replace the fixed sized icons with resizable versions in vr-tests * fix an issue with ChoiceGroup and focus rectangles (#21215) * fix an issue with ChoiceGroup and focus rectangles When ChoiceGroup was the descendant of another element that had focus it would incorrectly display a focus rect around the previously selected option when using the mouse to select options. This happened because a fix from #20859 that tested for sibling elements of ChoiceGroup only tested if FocusEvent.relatedTargets were descendants of the ChoiceGroup but did not test if the relatedTarget was an ancestor of the ChoiceGroup. This change updates the sibling test to ensure that the relatedTarget is both not a descendant of the ChoiceGroup and not an ancestor. * Change files * Update custom ChoiceGroup example This commit changes the custom ChoiceGroup example to use an Icon rather than a Dropdown in the ChoiceGroup option as embedding a control like a Dropdown (or something more complex) is not a pattern we want to encourage. * Update FocusTrapZone focus handling in ChoiceGroup ChoiceGroup needs to implement special focus handling when used in a FocusTrapZone to reimplement native browser behavior as detailed in 20859. However, the change in 20859 introduced other issues when focusing ChoiceGroups. Ultimately the issue with the ChoiceGroup behavior was that it was inferring when FocusTrapZone was giving it focus and this inference was not always correct. This change makes the focus from FocusTrapZone explicit while testing for it opt in so this change will not affect FocusTrapZone generally. A data attribute is added to each of the bumpers in FocusTrapZone so ChoiceGroup can easily test if it is receiving focus from FocusTrapZone. * Update snapshots * Update component snapshots * Update packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx Co-authored-by: Ben Howell <[email protected]> * Update styling in ChoiceGroup custom example. * Update ChoiceGroup snapshot * Run Prettier on ChoiceGroup. Co-authored-by: Ben Howell <[email protected]> * applying package updates * feat: remove mergeThemes API (#21278) * feat(react-theme): remove mergeThemes API * feat(react-components): remove mergeThemes from public API * refactor(react-provider): replace mergeThemes functionality from react-theme * Change files * Update change/@fluentui-react-theme-4896497c-3947-4f7c-b2af-97b5cbf1c335.json * Update change/@fluentui-react-provider-d474a580-e643-4191-96db-4d4abf014352.json * Update change/@fluentui-react-components-f34f712d-15c2-4cc9-be35-95c55efad70b.json Co-authored-by: Oleksandr Fediashov <[email protected]> * feat: redo FluentProvider theme api (#21286) * fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation * fix(react-shared-contexts): make the ThemeContext TS API reflect runtime and remove redundant ThemeContextValue * Change files * fixup! fix(react-shared-contexts): make the ThemeContext TS API reflect runtime and remove redundant ThemeContextValue * fixup! fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation * fixup! fixup! fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation * fix(MenuItemWrapper): selected items to have active styles (#21287) * fix(MenuItemWrapper): selected items to have active styles * add changelog * use random port provided by express (#21283) * non-repeated link names on Fluent home page (#21293) * Properly pass menu target to submenu items (#21162) * Properly pass menu target to submenu items * Change files * [web-components]: Remove unused declared variables in combobox (#21294) * remove unused vars causing merge issues * Change files * Added aria-orientation to divider (#21292) * Added aria-orientation to divider * Change files * Fixed vertical tests to be vertical * fix(Accordion): removes children as slot from AccordionHeader (#21285) * Removes children as a slot from AccordionHeader * Change files * Updates API * Updates snapshot * temp fix: resolve mini-css-extractor-plugin to an older version for cra-template & projects-test (#21295) * temp fix: resolve mini-css-extractor-plugin to older version * Change files * add temp fix to northstar projects test * remove console log * refactor: remove unused theme-proxy functionality in makeStyles() (#21274) * remove proxies * Change files * applying package updates Co-authored-by: Fluent UI Build <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Bernardo Sunderhus <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: chassunc <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: André Dias (he/him) <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: Jeff Smith <[email protected]> Co-authored-by: Tringa Krasniqi <[email protected]> Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Martin Hochel <[email protected]> Co-authored-by: Peter Dräxler <[email protected]> Co-authored-by: André Dias (he/him) <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Owen Campbell <[email protected]> Co-authored-by: tomi-msft <[email protected]> Co-authored-by: Amber <[email protected]> Co-authored-by: Jacqueline Gaherity <[email protected]> Co-authored-by: Justin Slone <[email protected]> Co-authored-by: Jan Pilzer <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Thomas Michon <[email protected]> Co-authored-by: Rob Barber <[email protected]> Co-authored-by: Geoff Cox (Microsoft) <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Anna Kellerstein <[email protected]> Co-authored-by: Anna Kellerstein <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Sarah Higley <[email protected]> Co-authored-by: Romans Pokrovskis <[email protected]> Co-authored-by: dennis-pg <[email protected]> Co-authored-by: Angel Duran <[email protected]> Co-authored-by: Angel Duran <[email protected]> Co-authored-by: Tristan <[email protected]> Co-authored-by: yifanwww <[email protected]> Co-authored-by: Peter Varholak <[email protected]> Co-authored-by: Micah Godbolt <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Norawit Jittipairoj <[email protected]> Co-authored-by: Tobias Smolka <[email protected]> Co-authored-by: Brian Heston <[email protected]> Co-authored-by: Sagar Charde <[email protected]> Co-authored-by: Sagar Charde <[email protected]> Co-authored-by: Martin Hochel <[email protected]> Co-authored-by: Marion Le Pontois <[email protected]>
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
8 participants
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.
Pull request checklist
$ yarn changeDescription of changes
RFC Preview
This RFC documents theme shape related performance findings and proposes changes to the theme in order to improve rendering performance.