Card: Initial implementation #14206

khmakoto · 2020-07-25T01:12:31Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

Description of changes

This PR contains the first implementation of a Card component using our latest stack of technologies.

Notes

It's using office-ui-fabric-react components for the examples.
There are a couple of TODOs regarding some props that I still need to address.

…nd selected props.

…omponents.

codesandbox-ci · 2020-07-25T01:29:30Z

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 6a834fc:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

msft-github-bot · 2020-07-25T01:49:05Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	949	936	5000
Breadcrumb	mount	40637	40807	5000
BreadcrumbNext	mount	156905	154701	5000
ButtonNext	mount	589	583	5000
Checkbox	mount	1665	1655	5000
CheckboxBase	mount	1368	1391	5000
CheckboxNext	mount	1577	1586	5000
ChoiceGroup	mount	5115	5149	5000
ChoiceGroupNext	mount	9686	9494	5000
ComboBox	mount	978	931	1000
CommandBar	mount	7515	7630	1000
ContextualMenu	mount	12667	12737	1000
DefaultButton	mount	1140	1165	5000
DetailsRow	mount	3593	3624	5000
DetailsRowFast	mount	3660	3595	5000
DetailsRowNoStyles	mount	3440	3413	5000
Dialog	mount	1486	1520	1000
DocumentCardTitle	mount	1818	1812	1000
Dropdown	mount	2677	2961	5000
FocusZone	mount	1818	1784	5000
IconButton	mount	1794	1811	5000
Label	mount	343	351	5000
Layer	mount	1990	2015	5000
LayerNext	mount	1917	1944	5000
Link	mount	462	475	5000
LinkNext	mount	474	478	5000
MenuButton	mount	1471	1548	5000
MessageBar	mount	2114	2049	5000
MessageBarNext	mount	2047	2016	5000
Nav	mount	3307	3304	1000
OverflowSet	mount	1466	1468	5000
OverflowSetNext	mount	1064	1068	5000
Panel	mount	1486	1481	1000
Persona	mount	889	844	1000
Pivot	mount	1462	1479	1000
PivotNext	mount	1486	1422	1000
PrimaryButton	mount	1307	1343	5000
Rating	mount	8061	8105	5000
RatingNext	mount	7962	7967	5000
SearchBox	mount	1340	1351	5000
SearchBoxNext	mount	1435	1380	5000
Shimmer	mount	2686	2648	5000
ShimmerNext	mount	2591	2627	5000
Slider	mount	1531	1506	5000
SliderNext	mount	1984	1986	5000
SpinButton	mount	5069	5124	5000
SpinButtonNext	mount	5180	5399	5000
Spinner	mount	424	411	5000
SplitButton	mount	3235	3191	5000
Stack	mount	531	538	5000
StackWithIntrinsicChildren	mount	2051	2019	5000
StackWithTextChildren	mount	5285	5324	5000
SwatchColorPicker	mount	10591	10638	5000
SwatchColorPickerNext	mount	10516	10568	5000
TagPicker	mount	2824	2834	5000
TeachingBubble	mount	49716	49586	5000
TeachingBubbleNext	mount	11668	11515	5000
Text	mount	446	455	5000
TextField	mount	1412	1442	5000
ThemeProvider	mount	3116	3159	5000
ThemeProvider	virtual-rerender	606	603	5000
Toggle	mount	848	840	5000
ToggleNext	mount	825	836	5000
button	mount	106	129	5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonOverridesMissPerf.default	1756	46	38.17:1	analysis
ButtonUseCssNestingPerf.default	1142	43	26.56:1	analysis
ButtonUseCssPerf.default	871	48	18.15:1	analysis
ChatWithPopoverPerf.default	490	495	0.99:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.48	0.51	0.94:1	2000	957
🦄	Button.Fluent	0.13	0.2	0.65:1	5000	642
🔧	Checkbox.Fluent	0.66	0.37	1.78:1	1000	659
🎯	Dialog.Fluent	0.17	0.23	0.74:1	5000	852
🔧	Dropdown.Fluent	2.95	0.5	5.9:1	1000	2951
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	767
🎯	Image.Fluent	0.09	0.12	0.75:1	5000	446
🔧	Slider.Fluent	1.57	0.35	4.49:1	1000	1573
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	411
🦄	Tooltip.Fluent	0.12	15.54	0.01:1	5000	575

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	164	116	1.41:1
BoxMinimalPerf.default	414	341	1.21:1
Image.Fluent	446	368	1.21:1
ImageMinimalPerf.default	437	365	1.2:1
RefMinimalPerf.default	238	198	1.2:1
LabelMinimalPerf.default	478	402	1.19:1
RadioGroupMinimalPerf.default	494	416	1.19:1
GridMinimalPerf.default	392	331	1.18:1
LayoutMinimalPerf.default	460	391	1.18:1
SegmentMinimalPerf.default	405	344	1.18:1
SkeletonMinimalPerf.default	489	414	1.18:1
TextMinimalPerf.default	403	345	1.17:1
ReactionMinimalPerf.default	458	395	1.16:1
Text.Fluent	411	360	1.14:1
HeaderSlotsPerf.default	917	813	1.13:1
VideoMinimalPerf.default	700	622	1.13:1
DialogMinimalPerf.default	855	764	1.12:1
TextAreaMinimalPerf.default	539	480	1.12:1
Button.Fluent	642	574	1.12:1
AccordionMinimalPerf.default	174	157	1.11:1
AnimationMinimalPerf.default	440	395	1.11:1
ButtonMinimalPerf.default	194	175	1.11:1
DividerMinimalPerf.default	415	373	1.11:1
MenuMinimalPerf.default	935	846	1.11:1
TableMinimalPerf.default	463	419	1.11:1
Tooltip.Fluent	575	517	1.11:1
CardMinimalPerf.default	643	583	1.1:1
HeaderMinimalPerf.default	420	382	1.1:1
PopupMinimalPerf.default	722	655	1.1:1
StatusMinimalPerf.default	789	720	1.1:1
Dialog.Fluent	852	772	1.1:1
FormMinimalPerf.default	483	442	1.09:1
ListMinimalPerf.default	541	495	1.09:1
IconMinimalPerf.default	745	688	1.08:1
ButtonSlotsPerf.default	659	614	1.07:1
FlexMinimalPerf.default	335	312	1.07:1
ProviderMergeThemesPerf.default	1949	1825	1.07:1
ProviderMinimalPerf.default	986	920	1.07:1
AttachmentMinimalPerf.default	187	176	1.06:1
ChatMinimalPerf.default	680	643	1.06:1
CheckboxMinimalPerf.default	2998	2832	1.06:1
LoaderMinimalPerf.default	787	740	1.06:1
MenuButtonMinimalPerf.default	1666	1574	1.06:1
Avatar.Fluent	957	905	1.06:1
Checkbox.Fluent	659	620	1.06:1
Icon.Fluent	767	724	1.06:1
AvatarMinimalPerf.default	510	487	1.05:1
ToolbarMinimalPerf.default	1025	979	1.05:1
AttachmentSlotsPerf.default	1255	1206	1.04:1
CarouselMinimalPerf.default	474	456	1.04:1
EmbedMinimalPerf.default	2072	2000	1.04:1
ItemLayoutMinimalPerf.default	1367	1311	1.04:1
TooltipMinimalPerf.default	843	808	1.04:1
SplitButtonMinimalPerf.default	4020	3910	1.03:1
TreeMinimalPerf.default	958	930	1.03:1
Slider.Fluent	1573	1524	1.03:1
InputMinimalPerf.default	1316	1291	1.02:1
CustomToolbarPrototype.default	3803	3715	1.02:1
TreeWith60ListItems.default	222	217	1.02:1
DropdownManyItemsPerf.default	799	789	1.01:1
DropdownMinimalPerf.default	2951	2936	1.01:1
Dropdown.Fluent	2951	2942	1:1
AlertMinimalPerf.default	317	319	0.99:1
SliderMinimalPerf.default	1590	1608	0.99:1
TableManyItemsPerf.default	2357	2372	0.99:1
ChatDuplicateMessagesPerf.default	439	453	0.97:1
ListWith60ListItems.default	1008	1117	0.9:1
ListCommonPerf.default	721	986	0.73:1
ListNestedPerf.default	618	893	0.69:1

size-auditor · 2020-07-25T02:10:18Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-next-Styling	60.506 kB	62.583 kB	2.077 kB

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 10e2cb91839dc27dc1e336b333b9a646ced6c3e4 (build)

khmakoto · 2020-08-04T22:54:23Z

There's an open question about what to do with the react-cards package and with the old Card before we're able to ship this. Hence why I'm not exporting the Card here yet and why this is under a Card2 folder.

packages/react-cards/src/components/Card2/CardBase.tsx

packages/react-cards/src/components/Card2/useCardBehavior.ts

dzearing · 2020-09-22T20:15:19Z

packages/react-cards/src/next/Card.types.ts

+
+export type CardSlotProps = SlotProps<CardSlots, CardProps, React.HTMLAttributes<HTMLDivElement>>;
+
+export type CardTokens = ColorTokenSet & {};


in my variants PR i am renaming ColorTokenSet to just ColorTokens. Just a heads up. If you merge first here, i'll get this updated.

dzearing · 2020-09-22T20:17:07Z

packages/react-cards/package.json

    "@microsoft/load-themed-styles": "^1.10.26",
+    "@uifabric/azure-themes": "^7.5.13",


wait, this should not be a dependency.

check the others as well.

Spoke about this offline with David. A lot of this cleanup is already being done in #15132.

msft-github-bot · 2020-09-22T20:37:34Z

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.

msft-github-bot · 2020-09-24T00:47:51Z

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

Handy links:

msft-github-bot · 2020-09-24T00:48:09Z

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

Handy links:

msft-github-bot · 2020-09-24T00:48:12Z

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

Handy links:

msft-github-bot · 2020-09-24T00:48:18Z

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

Handy links:

khmakoto added 4 commits July 24, 2020 13:10

Initial Card implementation that accounts for size, fluid, disabled a…

2471b9d

…nd selected props.

Adding support for compact prop and adding body, header and preview c…

19c94a3

…omponents.

Adding footer component and examples inspired from northstar docs.

deeda9a

Change files

05ae61d

khmakoto added the Component: Card label Jul 25, 2020

khmakoto requested review from dzearing, xugao, layershifter and joschect July 25, 2020 01:12

msft-github-bot assigned xugao Jul 25, 2020

Fixing merge conflict.

6c16f84

Fixing some lint errors.

0a97df8

layershifter reviewed Aug 5, 2020

View reviewed changes

packages/react-cards/src/components/Card2/CardBase.tsx Outdated Show resolved Hide resolved

layershifter reviewed Aug 5, 2020

View reviewed changes

packages/react-cards/src/components/Card2/useCardBehavior.ts Outdated Show resolved Hide resolved

layershifter reviewed Aug 5, 2020

View reviewed changes

packages/react-cards/src/components/Card2/useCardBehavior.ts Outdated Show resolved Hide resolved

layershifter reviewed Aug 5, 2020

View reviewed changes

packages/react-cards/src/components/Card2/useCardBehavior.ts Outdated Show resolved Hide resolved

khmakoto added 4 commits September 11, 2020 16:36

Fixing merge conflict.

2dbd0df

Moving Card from compose to new hooks approach.

f25e872

Finishing the move from old compose approach to new hooks approach.

00450e3

Merging refs.

d7453c9

khmakoto marked this pull request as ready for review September 14, 2020 23:35

khmakoto requested a review from ecraig12345 as a code owner September 14, 2020 23:35

khmakoto added 4 commits September 14, 2020 17:02

Fixing merge conflict.

63da9b4

Updating change files.

ffc9e0f

Updating snapshots.

78f9c85

Updating change files.

e662810

khmakoto added 7 commits September 14, 2020 17:54

Updating change files.

0421525

Fixing wrong import.

fafbe9d

Moving new Cards to next folder

3ec127f

Fixing merge conflicts.

e5dc12e

Fixing mismatched versions.

7e80be7

Using makeMergeProps.

2a80d63

Fixing merge conflict.

712e181

msft-github-bot added the PR: Possible Perf Regression 🐌 label Sep 22, 2020

dzearing reviewed Sep 22, 2020

View reviewed changes

dzearing approved these changes Sep 22, 2020

View reviewed changes

dzearing reviewed Sep 22, 2020

View reviewed changes

Fixing merge conflict.

6a834fc

khmakoto added the AutoMerge label Sep 22, 2020

msft-github-bot merged commit ed85155 into microsoft:master Sep 22, 2020

khmakoto deleted the card branch September 22, 2020 21:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Card: Initial implementation #14206

Card: Initial implementation #14206

khmakoto commented Jul 25, 2020 •

edited

Loading

codesandbox-ci bot commented Jul 25, 2020 •

edited

Loading

msft-github-bot commented Jul 25, 2020 •

edited

Loading

size-auditor bot commented Jul 25, 2020 •

edited

Loading

khmakoto commented Aug 4, 2020

dzearing Sep 22, 2020

dzearing Sep 22, 2020

dzearing Sep 22, 2020

khmakoto Sep 22, 2020

msft-github-bot commented Sep 22, 2020

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020


		export type CardSlotProps = SlotProps<CardSlots, CardProps, React.HTMLAttributes<HTMLDivElement>>;

		export type CardTokens = ColorTokenSet & {};

		"@microsoft/load-themed-styles": "^1.10.26",
		"@uifabric/azure-themes": "^7.5.13",

Card: Initial implementation #14206

Card: Initial implementation #14206

Conversation

khmakoto commented Jul 25, 2020 • edited Loading

Pull request checklist

Description of changes

Notes

codesandbox-ci bot commented Jul 25, 2020 • edited Loading

msft-github-bot commented Jul 25, 2020 • edited Loading

Perf Analysis

Perf Analysis (Fluent)

Potential regressions comparing to master

size-auditor bot commented Jul 25, 2020 • edited Loading

Asset size changes

khmakoto commented Aug 4, 2020

dzearing Sep 22, 2020

Choose a reason for hiding this comment

dzearing Sep 22, 2020

Choose a reason for hiding this comment

dzearing Sep 22, 2020

Choose a reason for hiding this comment

khmakoto Sep 22, 2020

Choose a reason for hiding this comment

msft-github-bot commented Sep 22, 2020

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020

msft-github-bot commented Sep 24, 2020

khmakoto commented Jul 25, 2020 •

edited

Loading

codesandbox-ci bot commented Jul 25, 2020 •

edited

Loading

msft-github-bot commented Jul 25, 2020 •

edited

Loading

size-auditor bot commented Jul 25, 2020 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.