chore(react-accordion): update styles to not use CSS shorthands by layershifter · Pull Request #20800 · microsoft/fluentui

layershifter · 2021-11-26T11:31:20Z

Pull request checklist

Addresses an existing issue: extracted from makeStyles: do not use shorthand expansion #20539, related to RFC: Do not allow CSS shorthands in makeStyles() calls #20573
Include a change request file using $ yarn change

Description of changes

This PR:

updates styles to not use CSS shorthands
fixes imports in stories

fabricteam · 2021-11-26T11:38:06Z

📊 Bundle size report

_{🤖 This report was generated against bd3e92b5193176665879abd667db4350ffcc35ea}

size-auditor · 2021-11-26T11:43:05Z

Asset size changes

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

Baseline commit: 3ca42a594827a2ce3d5d18fcd4a399c92fda3bd7 (build)

ling1726 · 2021-11-26T11:45:17Z

  }),
  rootDisabled: theme => ({
-    backgroundColor: 'none',
+    backgroundImage: 'none',


was this necessary ?

Suggested change

backgroundImage: 'none',

backgroundColor: 'none',

Not really 😉

⬇️⬇️⬇️

"none" is not a valid value for background-color:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

https://developer.mozilla.org/en-US/docs/Web/CSS/background#formal_syntax

Or it's either backgroundImage: 'none' or backgroundColor: 'initial'

As VR tests are passing, I am leaving it as it is. We can fix it if it will cause any problems.

fabricteam · 2021-11-26T12:01:07Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1073	1065	5000
BaseButton	mount	1178	1161	5000
Breadcrumb	mount	2850	2843	1000
ButtonNext	mount	682	681	5000
Checkbox	mount	1734	1739	5000
CheckboxBase	mount	1603	1561	5000
ChoiceGroup	mount	5209	5082	5000
ComboBox	mount	1156	1200	1000
CommandBar	mount	10357	10252	1000
ContextualMenu	mount	8477	8517	1000
DefaultButton	mount	1318	1374	5000
DetailsRow	mount	3987	3983	5000
DetailsRowFast	mount	4282	4147	5000
DetailsRowNoStyles	mount	4049	4129	5000
Dialog	mount	2854	2812	1000
DocumentCardTitle	mount	337	321	1000
Dropdown	mount	3643	3743	5000
FluentProviderNext	mount	4319	4284	5000
FluentProviderWithTheme	mount	426	388	10
FluentProviderWithTheme	virtual-rerender	252	276	10
FluentProviderWithTheme	virtual-rerender-with-unmount	446	477	10
FocusTrapZone	mount	2069	2104	5000
FocusZone	mount	2181	2071	5000
IconButton	mount	2144	2108	5000
Label	mount	524	527	5000
Layer	mount	3529	3346	5000
Link	mount	701	663	5000
MakeStyles	mount	2104	2126	50000
MenuButton	mount	1862	1813	5000
MessageBar	mount	2290	2273	5000
Nav	mount	3786	3751	1000
OverflowSet	mount	1386	1347	5000
Panel	mount	2776	2754	1000
Persona	mount	1077	1091	1000
Pivot	mount	1740	1749	1000
PrimaryButton	mount	1616	1623	5000
Rating	mount	8869	8792	5000
SearchBox	mount	1648	1662	5000
Shimmer	mount	2990	2929	5000
Slider	mount	2287	2259	5000
SpinButton	mount	5640	5611	5000
Spinner	mount	623	625	5000
SplitButton	mount	3638	3634	5000
Stack	mount	748	745	5000
StackWithIntrinsicChildren	mount	2076	2093	5000
StackWithTextChildren	mount	5400	5444	5000
SwatchColorPicker	mount	11634	11596	5000
TagPicker	mount	3015	3028	5000
TeachingBubble	mount	14229	14115	5000
Text	mount	644	628	5000
TextField	mount	1679	1711	5000
ThemeProvider	mount	1458	1494	5000
ThemeProvider	virtual-rerender	780	796	5000
ThemeProvider	virtual-rerender-with-unmount	2216	2186	5000
Toggle	mount	1069	1031	5000
buttonNative	mount	303	290	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	353	311	1.14:1
RefMinimalPerf.default	249	224	1.11:1
SkeletonMinimalPerf.default	406	373	1.09:1
AvatarMinimalPerf.default	230	212	1.08:1
AttachmentMinimalPerf.default	186	175	1.06:1
GridMinimalPerf.default	378	358	1.06:1
RadioGroupMinimalPerf.default	503	473	1.06:1
SliderMinimalPerf.default	1720	1623	1.06:1
ChatWithPopoverPerf.default	418	397	1.05:1
TreeWith60ListItems.default	202	193	1.05:1
AccordionMinimalPerf.default	182	175	1.04:1
CardMinimalPerf.default	626	600	1.04:1
ChatMinimalPerf.default	754	722	1.04:1
DividerMinimalPerf.default	421	404	1.04:1
LayoutMinimalPerf.default	394	378	1.04:1
LoaderMinimalPerf.default	713	686	1.04:1
AttachmentSlotsPerf.default	1168	1130	1.03:1
FlexMinimalPerf.default	318	310	1.03:1
ListWith60ListItems.default	673	652	1.03:1
SegmentMinimalPerf.default	397	386	1.03:1
VideoMinimalPerf.default	703	685	1.03:1
AlertMinimalPerf.default	305	298	1.02:1
BoxMinimalPerf.default	385	376	1.02:1
MenuButtonMinimalPerf.default	1795	1752	1.02:1
TableManyItemsPerf.default	2093	2044	1.02:1
TableMinimalPerf.default	432	423	1.02:1
TextMinimalPerf.default	371	365	1.02:1
ButtonOverridesMissPerf.default	1768	1750	1.01:1
EmbedMinimalPerf.default	4347	4302	1.01:1
HeaderSlotsPerf.default	836	830	1.01:1
RosterPerf.default	1335	1321	1.01:1
ProviderMinimalPerf.default	1200	1188	1.01:1
CustomToolbarPrototype.default	4064	4031	1.01:1
TooltipMinimalPerf.default	1094	1088	1.01:1
TreeMinimalPerf.default	867	855	1.01:1
AnimationMinimalPerf.default	458	459	1:1
DialogMinimalPerf.default	813	811	1:1
DropdownManyItemsPerf.default	766	767	1:1
FormMinimalPerf.default	460	462	1:1
HeaderMinimalPerf.default	400	400	1:1
InputMinimalPerf.default	1343	1341	1:1
ItemLayoutMinimalPerf.default	1255	1249	1:1
LabelMinimalPerf.default	419	419	1:1
ListMinimalPerf.default	544	546	1:1
ListNestedPerf.default	582	584	1:1
PopupMinimalPerf.default	593	595	1:1
SplitButtonMinimalPerf.default	4501	4515	1:1
ButtonMinimalPerf.default	190	192	0.99:1
ButtonSlotsPerf.default	594	600	0.99:1
CarouselMinimalPerf.default	515	522	0.99:1
DatepickerMinimalPerf.default	5743	5824	0.99:1
DropdownMinimalPerf.default	3067	3090	0.99:1
TextAreaMinimalPerf.default	543	548	0.99:1
ImageMinimalPerf.default	409	416	0.98:1
PortalMinimalPerf.default	184	187	0.98:1
StatusMinimalPerf.default	704	716	0.98:1
ToolbarMinimalPerf.default	981	1002	0.98:1
CheckboxMinimalPerf.default	2775	2852	0.97:1
MenuMinimalPerf.default	891	921	0.97:1
IconMinimalPerf.default	656	674	0.97:1
ProviderMergeThemesPerf.default	1639	1702	0.96:1
ReactionMinimalPerf.default	396	412	0.96:1
ListCommonPerf.default	677	732	0.92:1

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

layershifter · 2021-11-26T12:06:05Z

~~🛑 Requires changes from #20786.~~

codesandbox-ci · 2021-11-26T12:20:35Z

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 c18ca92:

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

…osoft#20800) * chore(react-accordion): update styles to not use CSS shorthands * fix stories * Apply suggestions from code review Co-authored-by: ling1726 <lingfan.gao@microsoft.com> * fix spread Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

layershifter added 2 commits November 26, 2021 12:27

chore(react-accordion): update styles to not use CSS shorthands

58eaa81

fix stories

f42410d

layershifter added Component: Accordion Fluent UI react-components (v9) labels Nov 26, 2021

layershifter requested a review from a team as a code owner November 26, 2021 11:31

msft-fluent-ui-bot added the Component: AccordionHeader label Nov 26, 2021

msft-fluent-ui-bot assigned khmakoto Nov 26, 2021

ling1726 reviewed Nov 26, 2021

View reviewed changes

Comment thread packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts Outdated

ling1726 reviewed Nov 26, 2021

View reviewed changes

Comment thread packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts Outdated

ling1726 approved these changes Nov 26, 2021

View reviewed changes

Apply suggestions from code review

c3fbf81

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

layershifter added the Status: Blocked Resolution blocked by another issue label Nov 26, 2021

layershifter removed the Status: Blocked Resolution blocked by another issue label Nov 26, 2021

fix spread

c18ca92

layershifter merged commit b8537fb into master Nov 26, 2021

layershifter deleted the fix/shorthands-accordion branch November 26, 2021 17:18

layershifter mentioned this pull request Feb 7, 2022

docs: notes on migration to @fluentui/react-components@9.0.0-rc.1 #21629

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(react-accordion): update styles to not use CSS shorthands#20800

chore(react-accordion): update styles to not use CSS shorthands#20800
layershifter merged 4 commits into
masterfrom
fix/shorthands-accordion

layershifter commented Nov 26, 2021

Uh oh!

fabricteam commented Nov 26, 2021 •

edited

Loading

Uh oh!

size-auditor Bot commented Nov 26, 2021 •

edited

Loading

Uh oh!

Uh oh!

ling1726 Nov 26, 2021

Uh oh!

layershifter Nov 26, 2021

Uh oh!

layershifter Nov 26, 2021

Uh oh!

Uh oh!

fabricteam commented Nov 26, 2021 •

edited

Loading

Uh oh!

layershifter commented Nov 26, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Nov 26, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

layershifter commented Nov 26, 2021

Pull request checklist

Description of changes

Uh oh!

fabricteam commented Nov 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor Bot commented Nov 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

Uh oh!

ling1726 Nov 26, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 26, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 26, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

fabricteam commented Nov 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

layershifter commented Nov 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci Bot commented Nov 26, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fabricteam commented Nov 26, 2021 •

edited

Loading

size-auditor Bot commented Nov 26, 2021 •

edited

Loading

fabricteam commented Nov 26, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)

layershifter commented Nov 26, 2021 •

edited

Loading