refactor(PresenceBadge): Remove props and return correct presence icons by ling1726 · Pull Request #20630 · microsoft/fluentui

ling1726 · 2021-11-16T18:11:51Z

Pull request checklist

Addresses an existing issue: Fixes Refactor PresenceBadge to use presence icons #20627 Fixes Incorrect icons being used in presence badges #20191 Fixes vNext Presence badge icon line weight for Offline inconsistent with other presence badges #20180
Include a change request file using $ yarn change

Description of changes

⚠️⚠️ This is a breaking API change

The presence icons in @fluentui/react-icons are actually the presence
badge content. In order to use these icons correctly, this PR:

Restricts props to size status outOfOffice
Removes the icon slot since custom icons are not a part of the design
Does not use normal badge styles
Returns the correct sized icon

The PresenceBadge component is essentially a badge with a non-configurable icon slot and reduced props and different styling, but follows the standard Badge DOM structure and state.

Focus areas to test

(optional)

The presence icons in `@fluentui/react-icons` are actually the presence badge content. In order to use these icons correctly, this PR: * Restricts props to `size` `status` `outOfOffice` * Removes the icon slot since custom icons are not a part of the design * Does not use normal badge styles * Returns the correct sized icon

fabricteam · 2021-11-16T18:22:20Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-avatar` Avatar	`53.486 kB` `15.215 kB`	`44.893 kB` `12.824 kB`	`-8.593 kB` `-2.391 kB`
`react-badge` PresenceBadge	`29.768 kB` `8.517 kB`	`22.058 kB` `6.334 kB`	`-7.71 kB` `-2.183 kB`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-badge` Badge	`22.394 kB` `6.707 kB`
`react-badge` CounterBadge	`23.282 kB` `7.019 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.377 kB` `48.544 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.669 kB` `10.652 kB`

_{🤖 This report was generated against 5eeb89fcd561fa9ac8193260774cdab4dcf90171}

size-auditor · 2021-11-16T18:25:44Z

Asset size changes

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

Baseline commit: 5eeb89fcd561fa9ac8193260774cdab4dcf90171 (build)

codesandbox-ci · 2021-11-18T08:55:43Z

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 3c7cc20:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
jolly-solomon-xy716	Issue #20191

fabricteam · 2021-11-18T10:03:36Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	742	801	5000
BaseButton	mount	792	771	5000
Breadcrumb	mount	2308	2278	1000
ButtonNext	mount	448	441	5000
Checkbox	mount	1282	1299	5000
CheckboxBase	mount	1113	1106	5000
ChoiceGroup	mount	4054	3948	5000
ComboBox	mount	1122	841	1000
CommandBar	mount	8672	8533	1000
ContextualMenu	mount	7152	7202	1000
DefaultButton	mount	984	976	5000
DetailsRow	mount	3079	3217	5000
DetailsRowFast	mount	3254	3120	5000
DetailsRowNoStyles	mount	3100	3148	5000
Dialog	mount	2151	2185	1000
DocumentCardTitle	mount	143	147	1000
Dropdown	mount	2719	2757	5000
FluentProviderNext	mount	3559	3410	5000
FluentProviderWithTheme	mount	186	220	10
FluentProviderWithTheme	virtual-rerender	89	87	10
FluentProviderWithTheme	virtual-rerender-with-unmount	217	233	10
FocusTrapZone	mount	1409	1393	5000
FocusZone	mount	1545	1553	5000
IconButton	mount	1509	1501	5000
Label	mount	306	265	5000
Layer	mount	2487	2433	5000
Link	mount	411	431	5000
MakeStyles	mount	1523	1614	50000
MenuButton	mount	1194	1228	5000
MessageBar	mount	1566	1718	5000
Nav	mount	2892	2814	1000
OverflowSet	mount	957	977	5000
Panel	mount	2148	2065	1000
Persona	mount	660	725	1000
Pivot	mount	1215	1238	1000
PrimaryButton	mount	1093	1067	5000
Rating	mount	6464	6295	5000
SearchBox	mount	1119	1147	5000
Shimmer	mount	1998	2141	5000
Slider	mount	1541	1689	5000
SpinButton	mount	4072	4151	5000
Spinner	mount	340	341	5000
SplitButton	mount	2699	2620	5000
Stack	mount	452	450	5000
StackWithIntrinsicChildren	mount	1455	1451	5000
StackWithTextChildren	mount	3875	3782	5000
SwatchColorPicker	mount	8805	8820	5000
TagPicker	mount	2239	2219	5000
TeachingBubble	mount	10986	10977	5000
Text	mount	379	384	5000
TextField	mount	1218	1205	5000
ThemeProvider	mount	975	1020	5000
ThemeProvider	virtual-rerender	533	529	5000
ThemeProvider	virtual-rerender-with-unmount	1453	1457	5000
Toggle	mount	700	695	5000
buttonNative	mount	116	108	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
InputMinimalPerf.default	2642	1032	2.56:1
ButtonMinimalPerf.default	154	128	1.2:1
PortalMinimalPerf.default	154	135	1.14:1
AccordionMinimalPerf.default	122	108	1.13:1
ButtonSlotsPerf.default	478	423	1.13:1
FlexMinimalPerf.default	248	220	1.13:1
CustomToolbarPrototype.default	3869	3494	1.11:1
SliderMinimalPerf.default	1472	1334	1.1:1
CardMinimalPerf.default	482	442	1.09:1
ChatMinimalPerf.default	565	516	1.09:1
TextAreaMinimalPerf.default	417	381	1.09:1
CheckboxMinimalPerf.default	2248	2081	1.08:1
TextMinimalPerf.default	311	289	1.08:1
AnimationMinimalPerf.default	364	341	1.07:1
ChatWithPopoverPerf.default	331	310	1.07:1
DropdownMinimalPerf.default	2468	2298	1.07:1
SkeletonMinimalPerf.default	305	287	1.06:1
BoxMinimalPerf.default	307	291	1.05:1
ListWith60ListItems.default	577	551	1.05:1
AttachmentMinimalPerf.default	140	134	1.04:1
AttachmentSlotsPerf.default	920	888	1.04:1
HeaderMinimalPerf.default	315	303	1.04:1
ListNestedPerf.default	477	459	1.04:1
SegmentMinimalPerf.default	263	254	1.04:1
TreeWith60ListItems.default	161	155	1.04:1
AvatarMinimalPerf.default	172	167	1.03:1
TableManyItemsPerf.default	1578	1529	1.03:1
FormMinimalPerf.default	316	309	1.02:1
ItemLayoutMinimalPerf.default	993	970	1.02:1
IconMinimalPerf.default	513	504	1.02:1
ToolbarMinimalPerf.default	728	716	1.02:1
ButtonOverridesMissPerf.default	1444	1429	1.01:1
ChatDuplicateMessagesPerf.default	262	259	1.01:1
LoaderMinimalPerf.default	590	582	1.01:1
PopupMinimalPerf.default	518	515	1.01:1
TooltipMinimalPerf.default	883	874	1.01:1
GridMinimalPerf.default	263	262	1:1
ProviderMinimalPerf.default	914	918	1:1
ReactionMinimalPerf.default	321	322	1:1
TableMinimalPerf.default	348	347	1:1
VideoMinimalPerf.default	533	534	1:1
DatepickerMinimalPerf.default	4719	4760	0.99:1
DividerMinimalPerf.default	287	291	0.99:1
EmbedMinimalPerf.default	3391	3436	0.99:1
HeaderSlotsPerf.default	614	618	0.99:1
RadioGroupMinimalPerf.default	377	379	0.99:1
SplitButtonMinimalPerf.default	3551	3584	0.99:1
MenuMinimalPerf.default	669	685	0.98:1
RosterPerf.default	991	1014	0.98:1
DialogMinimalPerf.default	610	632	0.97:1
MenuButtonMinimalPerf.default	1273	1310	0.97:1
ImageMinimalPerf.default	310	323	0.96:1
ListCommonPerf.default	511	536	0.95:1
ProviderMergeThemesPerf.default	1395	1470	0.95:1
TreeMinimalPerf.default	648	684	0.95:1
LabelMinimalPerf.default	305	326	0.94:1
LayoutMinimalPerf.default	291	309	0.94:1
CarouselMinimalPerf.default	395	430	0.92:1
ListMinimalPerf.default	398	435	0.91:1
RefMinimalPerf.default	184	202	0.91:1
DropdownManyItemsPerf.default	522	580	0.9:1
StatusMinimalPerf.default	507	567	0.89:1

packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts

behowell

I approved the Avatar screener changes, but had some questions about others:

The new RTL badge tests appear to be clipped; is it a bug in the test?
Why is there a change in "Button (compat): Root - RTL: hover" ?

tomi-msft · 2021-11-18T23:20:59Z

packages/react-badge/package.json

    "react-test-renderer": "^16.3.0"
  },
  "dependencies": {
+    "@fluentui/react-icons": "^1.1.140",


I would recommend using version 2.0.151-beta.2. This has the resizable icons and fixes some minor visual regressions

So either you would need to get your PR to bump to v2-beta for react-icons first or add the changes from this PR to yours

either works

ling1726 · 2021-11-22T07:18:53Z

/azp run

azure-pipelines · 2021-11-22T07:19:36Z

Azure Pipelines successfully started running 3 pipeline(s).

ling1726 · 2021-11-22T08:31:50Z

/azp run

azure-pipelines · 2021-11-22T08:32:15Z

Azure Pipelines successfully started running 3 pipeline(s).

…ns (microsoft#20630) * refactor(PresenceBadge): Remove props and return correct presence icons The presence icons in `@fluentui/react-icons` are actually the presence badge content. In order to use these icons correctly, this PR: * Restricts props to `size` `status` `outOfOffice` * Removes the icon slot since custom icons are not a part of the design * Does not use normal badge styles * Returns the correct sized icon * Change files * reuse badge internals where possible * tests * fix lint * Update avatar snapshots * Change files * update styles * add thinBorder style, removed by mistake * style fixes

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

msft-fluent-ui-bot added Area: Icons Component: Badge Component: PresenceBadge labels Nov 16, 2021

Change files

8c45070

reuse badge internals where possible

1dace21

ling1726 added 2 commits November 18, 2021 10:02

tests

02a6107

fix lint

21a6c97

ling1726 added 5 commits November 18, 2021 11:19

Update avatar snapshots

24ca7d5

Change files

4f2cf22

update styles

4f62efd

add thinBorder style, removed by mistake

df54d47

style fixes

3c7cc20

ling1726 marked this pull request as ready for review November 18, 2021 16:06

ling1726 requested review from a team, behowell, khmakoto and layershifter as code owners November 18, 2021 16:06

behowell reviewed Nov 18, 2021

View reviewed changes

packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts Show resolved Hide resolved

behowell approved these changes Nov 18, 2021

View reviewed changes

tomi-msft mentioned this pull request Nov 18, 2021

PresenceBadge: Missing presence icon sizes #20650

Closed

tomi-msft reviewed Nov 18, 2021

View reviewed changes

ling1726 mentioned this pull request Nov 22, 2021

Update react-icons dependency #20563

Merged

2 tasks

ling1726 merged commit 48e52fc into microsoft:master Nov 22, 2021

layershifter mentioned this pull request Nov 29, 2021

PresenseBadge should use @fluentui/react-icons #20382

Closed

ling1726 mentioned this pull request Dec 1, 2021

'Offline' icon line weight different from other Presence Badges (converged) #19388

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(PresenceBadge): Remove props and return correct presence icons#20630

refactor(PresenceBadge): Remove props and return correct presence icons#20630
ling1726 merged 10 commits intomicrosoft:masterfrom
ling1726:refactor/presence-badge-icons

ling1726 commented Nov 16, 2021 •

edited

Loading

Uh oh!

fabricteam commented Nov 16, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Nov 16, 2021 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Nov 18, 2021 •

edited

Loading

Uh oh!

fabricteam commented Nov 18, 2021 •

edited

Loading

Uh oh!

Uh oh!

behowell left a comment

Uh oh!

tomi-msft Nov 18, 2021

Uh oh!

ling1726 Nov 19, 2021

Uh oh!

ling1726 commented Nov 22, 2021

Uh oh!

azure-pipelines bot commented Nov 22, 2021

Uh oh!

ling1726 commented Nov 22, 2021

Uh oh!

azure-pipelines bot commented Nov 22, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

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

Uh oh!

Pull request checklist

Description of changes

Focus areas to test

Uh oh!

fabricteam commented Nov 16, 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 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci bot commented Nov 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Nov 18, 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!

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

tomi-msft Nov 18, 2021

Choose a reason for hiding this comment

Uh oh!

ling1726 Nov 19, 2021

Choose a reason for hiding this comment

Uh oh!

ling1726 commented Nov 22, 2021

Uh oh!

azure-pipelines bot commented Nov 22, 2021

Uh oh!

ling1726 commented Nov 22, 2021

Uh oh!

azure-pipelines bot commented Nov 22, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ling1726 commented Nov 16, 2021 •

edited

Loading

fabricteam commented Nov 16, 2021 •

edited

Loading

size-auditor bot commented Nov 16, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 18, 2021 •

edited

Loading

fabricteam commented Nov 18, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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