Skip to content

makeStyles: do not use shorthand expansion#20539

Merged
layershifter merged 10 commits intomasterfrom
proto/mk-macros
Jan 4, 2022
Merged

makeStyles: do not use shorthand expansion#20539
layershifter merged 10 commits intomasterfrom
proto/mk-macros

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Nov 8, 2021

Pull request checklist

🚨 BREAKING CHANGES

Before

⚠️ is not possible anymore to CSS shorthands.

makeStyles({
  root: {
    padding: "5px",
    margin: "5px",
    border: "5px"
  }
});

After

It's only possible to use CSS longhands.

makeStyles({
  root: {
    paddingLeft: "5px",
    marginLeft: "5px",
    borderLeftWidth: "5px"
  }
});

To simplify usage/adoption "shorthand" functions are available, check #20628 for details.

import { makeStyles, shorthands } from "@fluentui/react-components";

makeStyles({
  root: {
    ...shorthands.padding("5px"),
    ...shorthands.margin("5px"),
    ...shorthands.border("5px", "solid", "red")
  }
});

Description of changes

This PR implements #20573 and blocks usage of CSS shorthands in makeStyles CSS-in-JS. All functionality related to expanding CSS shorthands is removed.

Typings were updated to throw when CSS shorthands are used, see #20539 (comment) for details.

Follow ups

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 8, 2021

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
55.684 kB
17.641 kB
54.446 kB
17.354 kB
-1.238 kB
-287 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.094 kB
47.663 kB
166.618 kB
47.172 kB
-2.476 kB
-491 B
react-make-styles
makeStyles + mergeClasses (runtime)
22.006 kB
8.311 kB
19.352 kB
7.364 kB
-2.654 kB
-947 B
react-menu
Menu (including children components)
103.639 kB
31.853 kB
102.401 kB
31.564 kB
-1.238 kB
-289 B
react-menu
Menu (including selectable components)
105.896 kB
32.203 kB
104.658 kB
31.911 kB
-1.238 kB
-292 B
react-slider
RangedSlider
41.101 kB
11.737 kB
39.789 kB
11.461 kB
-1.312 kB
-276 B
react-slider
Slider
34.529 kB
10.573 kB
33.217 kB
10.293 kB
-1.312 kB
-280 B
react-switch
Switch
27.042 kB
8.561 kB
25.334 kB
8.188 kB
-1.708 kB
-373 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar
46.459 kB
13.39 kB
react-badge
Badge
23.702 kB
7.008 kB
react-badge
CounterBadge
24.57 kB
7.308 kB
react-badge
PresenceBadge
22.209 kB
6.524 kB
react-button
Button
28.16 kB
8.088 kB
react-button
CompoundButton
33.495 kB
9.06 kB
react-button
MenuButton
30.243 kB
8.801 kB
react-button
SplitButton
36.39 kB
9.873 kB
react-button
ToggleButton
37.397 kB
8.682 kB
react-card
Card - All
48.473 kB
14.375 kB
react-card
Card
43.871 kB
13.166 kB
react-card
CardFooter
7.587 kB
3.227 kB
react-card
CardHeader
8.895 kB
3.675 kB
react-card
CardPreview
7.778 kB
3.355 kB
react-components
react-components: FluentProvider & webLightTheme
32.184 kB
10.58 kB
react-divider
Divider
14.924 kB
5.39 kB
react-image
Image
10.035 kB
3.941 kB
react-input
Input
20.837 kB
6.921 kB
react-label
Label
8.294 kB
3.472 kB
react-link
Link
11.028 kB
4.487 kB
react-make-styles
makeStaticStyles (runtime)
7.602 kB
3.325 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.689 kB
1.23 kB
react-popover
Popover
95.785 kB
29.137 kB
react-portal
Portal
6.249 kB
2.163 kB
react-positioning
usePopper
22.808 kB
7.935 kB
react-provider
FluentProvider
13.687 kB
5.174 kB
react-text
Text - Default
10.716 kB
4.213 kB
react-text
Text - Wrappers
14.018 kB
4.555 kB
react-tooltip
Tooltip
44.566 kB
15.426 kB
🤖 This report was generated against 9942542e5304a9642476811f4a58d0b7122b540e

@size-auditor
Copy link

size-auditor bot commented Nov 8, 2021

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9942542e5304a9642476811f4a58d0b7122b540e (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 8, 2021

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 1010d91:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
elastic-bush-ot5rp Issue #19402
divine-framework-ttw8u Issue #19402

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 8, 2021

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
ContextualMenu mount 14516 7174 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 775 787 5000
BaseButton mount 801 804 5000
Breadcrumb mount 2242 2291 1000
ButtonNext mount 461 466 5000
Checkbox mount 1324 1343 5000
CheckboxBase mount 1123 1114 5000
ChoiceGroup mount 4085 4109 5000
ComboBox mount 852 874 1000
CommandBar mount 8765 8821 1000
ContextualMenu mount 14516 7174 1000 Possible regression
DefaultButton mount 1003 1004 5000
DetailsRow mount 3224 3290 5000
DetailsRowFast mount 3306 3283 5000
DetailsRowNoStyles mount 3088 3115 5000
Dialog mount 2189 2198 1000
DocumentCardTitle mount 141 150 1000
Dropdown mount 2739 2755 5000
FluentProviderNext mount 1626 1612 5000
FluentProviderWithTheme mount 153 141 10
FluentProviderWithTheme virtual-rerender 97 101 10
FluentProviderWithTheme virtual-rerender-with-unmount 174 182 10
FocusTrapZone mount 1550 1540 5000
FocusZone mount 1539 1554 5000
IconButton mount 1664 1502 5000
Label mount 318 309 5000
Layer mount 2510 2537 5000
Link mount 421 424 5000
MakeStyles mount 1582 1590 50000
MenuButton mount 1276 1268 5000
MessageBar mount 1716 1732 5000
Nav mount 2812 2847 1000
OverflowSet mount 977 971 5000
Panel mount 2113 2154 1000
Persona mount 742 721 1000
Pivot mount 1240 1239 1000
PrimaryButton mount 1133 1134 5000
Rating mount 6555 6581 5000
SearchBox mount 1133 1160 5000
Shimmer mount 2205 2214 5000
Slider mount 1684 1694 5000
SpinButton mount 4264 4304 5000
Spinner mount 407 382 5000
SplitButton mount 2706 2731 5000
Stack mount 467 466 5000
StackWithIntrinsicChildren mount 2005 1987 5000
StackWithTextChildren mount 4427 4419 5000
SwatchColorPicker mount 9818 9779 5000
TagPicker mount 2294 2242 5000
TeachingBubble mount 11195 11146 5000
Text mount 385 399 5000
TextField mount 1229 1232 5000
ThemeProvider mount 1041 1032 5000
ThemeProvider virtual-rerender 553 536 5000
ThemeProvider virtual-rerender-with-unmount 1592 1613 5000
Toggle mount 732 717 5000
buttonNative mount 124 133 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 167 153 1.09:1
ReactionMinimalPerf.default 347 327 1.06:1
TableMinimalPerf.default 362 343 1.06:1
AttachmentMinimalPerf.default 146 139 1.05:1
ButtonMinimalPerf.default 155 147 1.05:1
ChatWithPopoverPerf.default 343 328 1.05:1
DividerMinimalPerf.default 319 304 1.05:1
AnimationMinimalPerf.default 383 368 1.04:1
AvatarMinimalPerf.default 172 166 1.04:1
ChatMinimalPerf.default 646 620 1.04:1
ListCommonPerf.default 546 525 1.04:1
RefMinimalPerf.default 206 199 1.04:1
ChatDuplicateMessagesPerf.default 269 262 1.03:1
LayoutMinimalPerf.default 314 306 1.03:1
ListNestedPerf.default 480 466 1.03:1
RadioGroupMinimalPerf.default 390 377 1.03:1
IconMinimalPerf.default 526 510 1.03:1
TextMinimalPerf.default 304 295 1.03:1
TreeWith60ListItems.default 151 147 1.03:1
VideoMinimalPerf.default 535 521 1.03:1
CardMinimalPerf.default 481 470 1.02:1
CarouselMinimalPerf.default 409 402 1.02:1
DialogMinimalPerf.default 659 646 1.02:1
MenuButtonMinimalPerf.default 1407 1385 1.02:1
SegmentMinimalPerf.default 306 301 1.02:1
ButtonSlotsPerf.default 475 469 1.01:1
CheckboxMinimalPerf.default 2304 2278 1.01:1
DatepickerMinimalPerf.default 4936 4878 1.01:1
DropdownManyItemsPerf.default 579 576 1.01:1
DropdownMinimalPerf.default 2569 2547 1.01:1
EmbedMinimalPerf.default 3488 3470 1.01:1
FormMinimalPerf.default 347 343 1.01:1
GridMinimalPerf.default 293 291 1.01:1
HeaderMinimalPerf.default 314 311 1.01:1
HeaderSlotsPerf.default 646 640 1.01:1
ImageMinimalPerf.default 323 321 1.01:1
ListWith60ListItems.default 567 561 1.01:1
LoaderMinimalPerf.default 578 573 1.01:1
MenuMinimalPerf.default 728 720 1.01:1
PopupMinimalPerf.default 522 517 1.01:1
SliderMinimalPerf.default 1418 1406 1.01:1
StatusMinimalPerf.default 582 577 1.01:1
TextAreaMinimalPerf.default 428 424 1.01:1
ToolbarMinimalPerf.default 801 797 1.01:1
TreeMinimalPerf.default 680 674 1.01:1
AttachmentSlotsPerf.default 933 930 1:1
ButtonOverridesMissPerf.default 1441 1441 1:1
FlexMinimalPerf.default 244 245 1:1
InputMinimalPerf.default 1094 1099 1:1
ItemLayoutMinimalPerf.default 1014 1011 1:1
ListMinimalPerf.default 435 436 1:1
ProviderMergeThemesPerf.default 1471 1473 1:1
ProviderMinimalPerf.default 967 963 1:1
SkeletonMinimalPerf.default 302 303 1:1
SplitButtonMinimalPerf.default 3648 3637 1:1
TableManyItemsPerf.default 1625 1621 1:1
CustomToolbarPrototype.default 3490 3490 1:1
LabelMinimalPerf.default 332 334 0.99:1
TooltipMinimalPerf.default 879 884 0.99:1
AlertMinimalPerf.default 228 232 0.98:1
BoxMinimalPerf.default 289 294 0.98:1
AccordionMinimalPerf.default 137 143 0.96:1
RosterPerf.default 975 1019 0.96:1

@layershifter layershifter force-pushed the proto/mk-macros branch 2 times, most recently from 81cfb09 to 169aca1 Compare November 25, 2021 12:23
@layershifter layershifter force-pushed the proto/mk-macros branch 2 times, most recently from 19b5557 to 66ad5a7 Compare November 26, 2021 09:49
@layershifter layershifter force-pushed the proto/mk-macros branch 4 times, most recently from 0a36293 to 710237f Compare November 26, 2021 17:22
@layershifter layershifter added Fluent UI react-components (v9) and removed Status: Blocked Resolution blocked by another issue labels Dec 10, 2021
@layershifter layershifter marked this pull request as ready for review December 13, 2021 14:16
@layershifter layershifter requested a review from a team as a code owner December 13, 2021 14:16
'animationName'
>;
> &
MakeStylesUnsupportedCSSProperties;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't these go inside of the Omit type?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TLDR; No.


As we don't have enough strict typings due selectors we allow to use eighter MakeStylesCSSValue (0 or string) or MakeStylesStyle to handle following:

{ '--var(foo)': '5px' } // is not know property, template literals as keys are supported from TS 4.4 😿

{ '.foo': { color: 'red' } } // we cannot type this selector

Once we will use Omit we will remove definitions:

// currently
{ padding: '5px' } // throws as `padding` is `never`

// with Omit
{ padding: '5px' } // passes as assignable to `MakeStylesCSSValue`

I have stricter typings for TS 4.4, once we will ship separate typings for different TS versions I will try to make this better.

@layershifter layershifter requested a review from a team as a code owner December 14, 2021 13:48
transform: proxy.to.string,
},
const expanded = resolveProxyValues({
padding: proxy.to.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should padding be used here ? I thought the goal is to ban shorthand usage.

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a big fan of the types tests but I don't think that's big enough to block this PR and I don't know of a good way to make them better right now. I would prefer for this to go in and for us to log an issue to improve those tests.

@layershifter layershifter merged commit 39bddb7 into master Jan 4, 2022
@layershifter layershifter deleted the proto/mk-macros branch January 4, 2022 14:31
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* 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
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 <ecraig12345@gmail.com>

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* 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 <alexander.mcgarret@gmail.com>

* Update change/@fluentui-react-provider-e4a6f9f7-0251-4c29-a6fc-40271100354f.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update change/@fluentui-react-theme-963b299a-18df-4452-82a8-3f4f55dbbf3b.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <olfedias@microsoft.com>

* 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 <Humberto.Morimoto@microsoft.com>
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

* 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 <jukapsia@microsoft.com>

* 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 <ecraig12345@gmail.com>

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* 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 <jukapsia@microsoft.com>

* 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 <annkelle@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>

* fix: formatting

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Chat): Child behaviors for item and message (#20998)

* feat(Chat): Child behaviors for item and message

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>

* 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 <elcraig@microsoft.com>

Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>

* 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 <ecraig12345@gmail.com>

* Update tools/generators/version-bump/schema.json

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* Update tools/generators/version-bump/schema.ts

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* use assertion for versions

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* 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 <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <lingfan.gao@microsoft.com>

* Update packages/fluentui/projects-test/src/index.ts

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

* Update packages/cra-template/package.json

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

* 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 <aduran@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>

* 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 <48106640+behowell@users.noreply.github.com>

* Update packages/react-slider/src/components/Slider/Slider.types.ts

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* 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 <Humberto.Morimoto@microsoft.com>

* Update packages/react-slider/src/components/Slider/Slider.types.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>

* Moving tokens.ts into src/ and out of src/global.

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <tkrasniqi@microsoft.com>

* 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 <lingfangao@hotmail.com>

* Update rfcs/convergence/move-out-n-rename-makestyles.md

Co-authored-by: ling1726 <lingfangao@hotmail.com>

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* 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 <elcraig@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <alexander.mcgarret@gmail.com>

* Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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 <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* 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] <support@github.com>

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 <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* 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 <alexander.mcgarret@gmail.com>

* Update change/@fluentui-make-styles-578dffd4-f983-4e4b-b011-13b6e32d232b.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update change/@fluentui-make-styles-webpack-loader-7e71576a-78fa-49a0-97ea-49226e6b7fea.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update change/@fluentui-react-make-styles-fabf9f28-9def-489f-8068-06701c956ecf.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* (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 <Humberto.Morimoto@microsoft.com>

* 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 <v-scharde@microsoft.com>

* 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 <48106640+behowell@users.noreply.github.com>

* Update styling in ChoiceGroup custom example.

* Update ChoiceGroup snapshot

* Run Prettier on ChoiceGroup.

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

* 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 <alexander.mcgarret@gmail.com>

* 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 <fluentui-internal@service.microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: chassunc <86579954+chpalac@users.noreply.github.com>
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
Co-authored-by: André Dias (he/him) <andredias@microsoft.com>
Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Co-authored-by: Sean Monahan <93940821+spmonahan@users.noreply.github.com>
Co-authored-by: Martin Hochel <martinhochel@microsoft.com>
Co-authored-by: Peter Dräxler <peter@draxler.ml>
Co-authored-by: André Dias (he/him) <39736248+andrefcdias@users.noreply.github.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Owen Campbell <owcampbe@microsoft.com>
Co-authored-by: tomi-msft <66456876+tomi-msft@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>
Co-authored-by: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Co-authored-by: Justin Slone <40304143+JustSlone@users.noreply.github.com>
Co-authored-by: Jan Pilzer <Hirse@users.noreply.github.com>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Thomas Michon <tmichon@microsoft.com>
Co-authored-by: Rob Barber <69695238+robarbms@users.noreply.github.com>
Co-authored-by: Geoff Cox (Microsoft) <gcox@microsoft.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Anna Kellerstein <anna.kellerstein@microsoft.com>
Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Co-authored-by: Romans Pokrovskis <motivated.it@gmail.com>
Co-authored-by: dennis-pg <dennisgeorge.mec@gmail.com>
Co-authored-by: Angel Duran <angeldm03@hotmail.com>
Co-authored-by: Angel Duran <aduran@microsoft.com>
Co-authored-by: Tristan <tristan.watanabe@gmail.com>
Co-authored-by: yifanwww <yifanw1101@gmail.com>
Co-authored-by: Peter Varholak <peter.varholak@gmail.com>
Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Norawit Jittipairoj <nojittip@microsoft.com>
Co-authored-by: Tobias Smolka <37370256+tosmolka@users.noreply.github.com>
Co-authored-by: Brian Heston <47367562+bheston@users.noreply.github.com>
Co-authored-by: Sagar Charde <scharde20293@gmail.com>
Co-authored-by: Sagar Charde <v-scharde@microsoft.com>
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Co-authored-by: Marion Le Pontois <marion.lepontois@skatteetaten.no>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

makeStyles: expansion of shorthands does not work sometimes

6 participants