feat(react-card): add `appearance` prop implementation #21264

andrefcdias · 2022-01-12T17:01:39Z

New Behavior

Added the appearance property to allow for the multiple appearances described in the design specs.

Related Issue(s)

Fixes partially #19336

codesandbox-ci · 2022-01-12T17:10:56Z

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

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

fabricteam · 2022-01-12T17:13:29Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-card` Card - All	`47.867 kB` `14.195 kB`	`53.159 kB` `15.254 kB`	`5.292 kB` `1.059 kB`
`react-card` Card	`43.56 kB` `13.004 kB`	`48.852 kB` `14.072 kB`	`5.292 kB` `1.068 kB`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` CardFooter	`7.615 kB` `3.23 kB`
`react-card` CardHeader	`8.893 kB` `3.675 kB`
`react-card` CardPreview	`7.588 kB` `3.255 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`171.167 kB` `47.915 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.479 kB` `10.625 kB`

_{🤖 This report was generated against d579bbbbb8bd1457e14b03eda2bc638d89f92d56}

size-auditor · 2022-01-12T17:17:51Z

Asset size changes

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

Baseline commit: d579bbbbb8bd1457e14b03eda2bc638d89f92d56 (build)

fabricteam · 2022-01-12T17:36:14Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1000	1007	5000
BaseButton	mount	1058	1053	5000
Breadcrumb	mount	2842	2842	1000
ButtonNext	mount	534	551	5000
Checkbox	mount	1761	1772	5000
CheckboxBase	mount	1524	1532	5000
ChoiceGroup	mount	5437	5486	5000
ComboBox	mount	1078	1077	1000
CommandBar	mount	11100	11329	1000
ContextualMenu	mount	9001	9127	1000
DefaultButton	mount	1271	1284	5000
DetailsRow	mount	4162	4088	5000
DetailsRowFast	mount	4143	4160	5000
DetailsRowNoStyles	mount	3950	4001	5000
Dialog	mount	2484	2507	1000
DocumentCardTitle	mount	209	213	1000
Dropdown	mount	3686	3680	5000
FluentProviderNext	mount	2024	1958	5000
FluentProviderWithTheme	mount	200	174	10
FluentProviderWithTheme	virtual-rerender	131	117	10
FluentProviderWithTheme	virtual-rerender-with-unmount	213	222	10
FocusTrapZone	mount	2059	1995	5000
FocusZone	mount	1935	1949	5000
IconButton	mount	2020	2002	5000
Label	mount	418	414	5000
Layer	mount	3267	3334	5000
Link	mount	552	555	5000
MakeStyles	mount	1759	1793	50000
MenuButton	mount	1678	1599	5000
MessageBar	mount	2232	2125	5000
Nav	mount	3743	3784	1000
OverflowSet	mount	1230	1296	5000
Panel	mount	2403	2461	1000
Persona	mount	994	976	1000
Pivot	mount	1592	1618	1000
PrimaryButton	mount	1487	1458	5000
Rating	mount	8870	8812	5000
SearchBox	mount	1573	1563	5000
Shimmer	mount	2968	2893	5000
Slider	mount	2212	2182	5000
SpinButton	mount	5536	5525	5000
Spinner	mount	501	498	5000
SplitButton	mount	3631	3596	5000
Stack	mount	647	636	5000
StackWithIntrinsicChildren	mount	2855	2750	5000
StackWithTextChildren	mount	6154	6268	5000
SwatchColorPicker	mount	12915	12778	5000
TagPicker	mount	2905	2938	5000
TeachingBubble	mount	14031	13985	5000
Text	mount	496	531	5000
TextField	mount	1558	1593	5000
ThemeProvider	mount	1324	1298	5000
ThemeProvider	virtual-rerender	701	657	5000
ThemeProvider	virtual-rerender-with-unmount	2121	2151	5000
Toggle	mount	938	950	5000
buttonNative	mount	156	168	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	474	418	1.13:1
AttachmentMinimalPerf.default	201	183	1.1:1
FlexMinimalPerf.default	342	315	1.09:1
AlertMinimalPerf.default	326	305	1.07:1
ToolbarMinimalPerf.default	1112	1044	1.07:1
ButtonSlotsPerf.default	624	590	1.06:1
LayoutMinimalPerf.default	416	392	1.06:1
PopupMinimalPerf.default	691	651	1.06:1
SegmentMinimalPerf.default	402	379	1.06:1
TextAreaMinimalPerf.default	619	584	1.06:1
TreeWith60ListItems.default	215	203	1.06:1
AccordionMinimalPerf.default	180	171	1.05:1
DividerMinimalPerf.default	425	406	1.05:1
AvatarMinimalPerf.default	232	224	1.04:1
ButtonMinimalPerf.default	201	193	1.04:1
DialogMinimalPerf.default	865	833	1.04:1
HeaderSlotsPerf.default	879	845	1.04:1
LabelMinimalPerf.default	450	431	1.04:1
RadioGroupMinimalPerf.default	540	520	1.04:1
ReactionMinimalPerf.default	453	437	1.04:1
SkeletonMinimalPerf.default	423	407	1.04:1
IconMinimalPerf.default	720	695	1.04:1
TextMinimalPerf.default	403	387	1.04:1
CarouselMinimalPerf.default	543	525	1.03:1
DropdownManyItemsPerf.default	810	786	1.03:1
MenuMinimalPerf.default	985	955	1.03:1
TableMinimalPerf.default	474	458	1.03:1
TreeMinimalPerf.default	908	879	1.03:1
VideoMinimalPerf.default	721	699	1.03:1
AnimationMinimalPerf.default	618	604	1.02:1
BoxMinimalPerf.default	393	386	1.02:1
ButtonOverridesMissPerf.default	1881	1846	1.02:1
ChatMinimalPerf.default	832	816	1.02:1
DropdownMinimalPerf.default	3248	3189	1.02:1
ListNestedPerf.default	639	626	1.02:1
LoaderMinimalPerf.default	777	763	1.02:1
RefMinimalPerf.default	257	251	1.02:1
SplitButtonMinimalPerf.default	4823	4728	1.02:1
TableManyItemsPerf.default	2165	2120	1.02:1
CustomToolbarPrototype.default	4423	4357	1.02:1
AttachmentSlotsPerf.default	1194	1186	1.01:1
ChatWithPopoverPerf.default	448	443	1.01:1
DatepickerMinimalPerf.default	6061	6003	1.01:1
ItemLayoutMinimalPerf.default	1354	1341	1.01:1
MenuButtonMinimalPerf.default	1874	1856	1.01:1
PortalMinimalPerf.default	192	191	1.01:1
SliderMinimalPerf.default	1834	1809	1.01:1
ListMinimalPerf.default	579	578	1:1
RosterPerf.default	1366	1362	1:1
ProviderMergeThemesPerf.default	1836	1829	1:1
ProviderMinimalPerf.default	1242	1242	1:1
CardMinimalPerf.default	641	645	0.99:1
CheckboxMinimalPerf.default	2944	2971	0.99:1
EmbedMinimalPerf.default	4534	4562	0.99:1
ListWith60ListItems.default	704	714	0.99:1
TooltipMinimalPerf.default	1148	1154	0.99:1
FormMinimalPerf.default	479	488	0.98:1
GridMinimalPerf.default	389	398	0.98:1
HeaderMinimalPerf.default	413	424	0.97:1
StatusMinimalPerf.default	751	771	0.97:1
InputMinimalPerf.default	1380	1435	0.96:1
ChatDuplicateMessagesPerf.default	322	343	0.94:1
ListCommonPerf.default	694	737	0.94:1

tringakrasniqi

LGTM 😊

It would be good to ensure that the focus states are styled correctly before closing Card convergence, other than that everything seems good.

andrefcdias · 2022-01-17T16:40:23Z

Will double check that 👌🏻

andrefcdias · 2022-01-17T16:41:42Z

/azp run

azure-pipelines · 2022-01-17T16:42:11Z

Azure Pipelines successfully started running 3 pipeline(s).

ling1726 · 2022-01-28T08:40:24Z

/azp run

azure-pipelines · 2022-01-28T08:40:54Z

Azure Pipelines successfully started running 3 pipeline(s).

packages/react-card/src/stories/CardAppearance.stories.tsx

andrefcdias added Type: Feature Component: Card Fluent UI react-components (v9) labels Jan 12, 2022

andrefcdias added this to the January Project Cycle Q1 2022 milestone Jan 12, 2022

andrefcdias mentioned this pull request Jan 12, 2022

Card Convergence #19336

Closed

37 tasks

andrefcdias marked this pull request as ready for review January 14, 2022 16:50

andrefcdias requested a review from a team as a code owner January 14, 2022 16:50

tringakrasniqi approved these changes Jan 17, 2022

View reviewed changes

andrefcdias closed this Jan 17, 2022

andrefcdias reopened this Jan 17, 2022

andrefcdias added the Status: Blocked Resolution blocked by another issue label Jan 18, 2022

andrefcdias closed this Jan 25, 2022

andrefcdias reopened this Jan 25, 2022

andrefcdias requested a review from JustSlone January 27, 2022 19:06

ling1726 reviewed Jan 28, 2022

View reviewed changes

packages/react-card/src/stories/CardAppearance.stories.tsx Show resolved Hide resolved

JustSlone approved these changes Jan 31, 2022

View reviewed changes

andrefcdias modified the milestones: January Project Cycle Q1 2022, February Project Cycle Q1 2022 Feb 2, 2022

andrefcdias requested a review from JustSlone February 10, 2022 13:55

andrefcdias added 8 commits February 10, 2022 20:26

Add appearance implementation

c0c5e3c

Change files

59b377a

Update API

a81dd00

Fix linting errors

a9ddd49

Add VR tests

c1f8e15

Change VR click target selector

f858783

Refactor stories to properly have hover/click tests

185f3c2

chore: simplify vr-tests to hopefully fix screener bug

5d90ccc

JustSlone approved these changes Feb 10, 2022

View reviewed changes

andrefcdias requested a review from JustSlone February 15, 2022 15:47

JustSlone approved these changes Feb 15, 2022

View reviewed changes

andrefcdias requested a review from JustSlone February 15, 2022 15:52

JustSlone approved these changes Feb 15, 2022

View reviewed changes

ling1726 added 3 commits February 16, 2022 09:43

Merge branch 'master' into card-appearance

6f87593

move card vr tests to new project

85f624e

rename file

205c169

ling1726 closed this Feb 17, 2022

ling1726 reopened this Feb 17, 2022

fix: migrate stories to griffel

e64058b

andrefcdias merged commit 6f39f6a into microsoft:master Feb 17, 2022

andrefcdias deleted the card-appearance branch February 17, 2022 15:23

andrefcdias changed the title ~~feat(react-card): Add appearance prop implementation~~ feat(react-card): add appearance prop implementation May 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-card): add `appearance` prop implementation #21264

feat(react-card): add `appearance` prop implementation #21264

andrefcdias commented Jan 12, 2022

codesandbox-ci bot commented Jan 12, 2022 •

edited

Loading

fabricteam commented Jan 12, 2022 •

edited

Loading

size-auditor bot commented Jan 12, 2022 •

edited

Loading

fabricteam commented Jan 12, 2022 •

edited

Loading

tringakrasniqi left a comment

andrefcdias commented Jan 17, 2022

andrefcdias commented Jan 17, 2022

azure-pipelines bot commented Jan 17, 2022

ling1726 commented Jan 28, 2022

azure-pipelines bot commented Jan 28, 2022

feat(react-card): add appearance prop implementation #21264

feat(react-card): add appearance prop implementation #21264

Conversation

andrefcdias commented Jan 12, 2022

New Behavior

Related Issue(s)

codesandbox-ci bot commented Jan 12, 2022 • edited Loading

fabricteam commented Jan 12, 2022 • edited Loading

📊 Bundle size report

size-auditor bot commented Jan 12, 2022 • edited Loading

Asset size changes

fabricteam commented Jan 12, 2022 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

tringakrasniqi left a comment

Choose a reason for hiding this comment

andrefcdias commented Jan 17, 2022

andrefcdias commented Jan 17, 2022

azure-pipelines bot commented Jan 17, 2022

ling1726 commented Jan 28, 2022

azure-pipelines bot commented Jan 28, 2022

feat(react-card): add `appearance` prop implementation #21264

feat(react-card): add `appearance` prop implementation #21264

codesandbox-ci bot commented Jan 12, 2022 •

edited

Loading

fabricteam commented Jan 12, 2022 •

edited

Loading

size-auditor bot commented Jan 12, 2022 •

edited

Loading

fabricteam commented Jan 12, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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