Skip to content

Conversation

@marcosmoura
Copy link
Contributor

@marcosmoura marcosmoura commented May 23, 2023

This PR adds basic support for CSS Variables being passed to the createFocusOutlineStyle.
For more context, please refer to this bug: #27954

Fixes: #27954

@marcosmoura marcosmoura requested a review from a team as a code owner May 23, 2023 15:31
@marcosmoura marcosmoura self-assigned this May 23, 2023
@marcosmoura marcosmoura requested a review from a team as a code owner May 23, 2023 15:31
@fabricteam
Copy link
Collaborator

fabricteam commented May 23, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 569 593 5000
Button mount 293 294 5000
Field mount 1002 1047 5000
FluentProvider mount 661 655 5000
FluentProviderWithTheme mount 71 73 10
FluentProviderWithTheme virtual-rerender 65 67 10
FluentProviderWithTheme virtual-rerender-with-unmount 92 74 10
InfoButton mount 13 13 5000
MakeStyles mount 851 869 50000
Persona mount 1661 1599 5000
SpinButton mount 1231 1266 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 23, 2023

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 433b3b0:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented May 23, 2023

Asset size changes

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

Baseline commit: b26559befc42d4a6367cc1c7079b0afb16005b30 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented May 23, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
88.473 kB
26.754 kB
88.508 kB
26.765 kB
35 B
11 B
react-card
Card - All
88.428 kB
25.004 kB
88.696 kB
25.052 kB
268 B
48 B
react-card
Card
83.363 kB
23.556 kB
83.631 kB
23.604 kB
268 B
48 B
react-checkbox
Checkbox
34.413 kB
10.827 kB
34.487 kB
10.838 kB
74 B
11 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.09 kB
57.742 kB
206.16 kB
57.769 kB
70 B
27 B
react-dialog
Dialog (including children components)
92.035 kB
27.441 kB
92.07 kB
27.447 kB
35 B
6 B
react-infobutton
InfoButton
129.836 kB
39.619 kB
129.871 kB
39.63 kB
35 B
11 B
react-infobutton
InfoLabel
133.305 kB
40.691 kB
133.34 kB
40.703 kB
35 B
12 B
react-menu
Menu (including children components)
130.537 kB
39.824 kB
130.572 kB
39.839 kB
35 B
15 B
react-menu
Menu (including selectable components)
133.521 kB
40.345 kB
133.556 kB
40.364 kB
35 B
19 B
react-radio
Radio
27.282 kB
8.661 kB
27.362 kB
8.666 kB
80 B
5 B
react-slider
Slider
34.308 kB
11.063 kB
34.308 kB
11.066 kB

3 B
react-switch
Switch
29.806 kB
9.274 kB
29.88 kB
9.286 kB
74 B
12 B
react-table
DataGrid
149.871 kB
41.174 kB
150.025 kB
41.185 kB
154 B
11 B
react-table
Table as DataGrid
132.427 kB
33.748 kB
132.581 kB
33.791 kB
154 B
43 B
react-table
Table (Selection only)
78.201 kB
19.143 kB
78.355 kB
19.172 kB
154 B
29 B
react-table
Table (Sort only)
77.531 kB
18.953 kB
77.685 kB
18.981 kB
154 B
28 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert
93.534 kB
22.497 kB
react-avatar
Avatar
57.754 kB
15.041 kB
react-avatar
AvatarGroup
15.632 kB
6.258 kB
react-avatar
AvatarGroupItem
73.968 kB
19.552 kB
react-button
Button
36.724 kB
9.458 kB
react-button
CompoundButton
43.873 kB
10.939 kB
react-button
MenuButton
41.411 kB
10.791 kB
react-button
SplitButton
49.635 kB
12.364 kB
react-button
ToggleButton
55.01 kB
11.4 kB
react-card
CardFooter
9.158 kB
3.844 kB
react-card
CardHeader
11.048 kB
4.538 kB
react-card
CardPreview
9.963 kB
4.192 kB
react-combobox
Combobox (including child components)
87.396 kB
28.137 kB
react-combobox
Dropdown (including child components)
85.78 kB
27.744 kB
react-components
react-components: Button, FluentProvider & webLightTheme
64.855 kB
17.852 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-datepicker-compat
DatePicker Compat
221.604 kB
58.902 kB
react-link
Link
12.304 kB
5.061 kB
react-persona
Persona
64.675 kB
16.968 kB
react-popover
Popover
116.812 kB
36.006 kB
react-portal
Portal
11.649 kB
4.262 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
react-provider
FluentProvider
18.033 kB
6.666 kB
react-radio
RadioGroup
11.312 kB
4.71 kB
react-table
Table (Primitives only)
44.348 kB
12.347 kB
react-tags
Tag
21.99 kB
7.887 kB
react-tooltip
Tooltip
46.853 kB
16.408 kB
🤖 This report was generated against b26559befc42d4a6367cc1c7079b0afb16005b30

@fabricteam
Copy link
Collaborator

fabricteam commented May 23, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Copy link
Contributor

@ling1726 ling1726 left a comment

Choose a reason for hiding this comment

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

Feel free to throw a bug on us to support css variables

@marcosmoura marcosmoura merged commit d6b67f3 into microsoft:master May 30, 2023
@marcosmoura marcosmoura deleted the fix/outline-styles-cannot-use-variables branch May 30, 2023 12:10
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 31, 2023
* master:
  Added truncation and tooltips to the Breadcrumb (microsoft#27859)
  applying package updates
  applying package updates
  Export selection types from combobox (microsoft#28054)
  fix(react-datepicker-compat): Remove focus function from the deps to avoid constant move of focus (microsoft#28053)
  Updated poster for new stable components (microsoft#28051)
  Griffel/bump to 1.5.7 (microsoft#27925)
  feat(scripts): replace use of SWC CLI with SWC transform api (microsoft#27380)
  chore: Add positioning test for scroll jumps (microsoft#28043)
  chore: migrate to TS 4.5 (microsoft#27936)
  Fix toolbar divider styles (microsoft#28044)
  fix: createFocusOutlineStyle don't work with CSS variables (microsoft#27966)
  feat(react-tags): use simple button for TagButton content instead of aria button (microsoft#28033)
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.

[Bug]: useCardStyles contains invalid CSS

5 participants