chore(react-infobutton): Adding InfoButton's package and component by sopranopillow · Pull Request #25083 · microsoft/fluentui

sopranopillow · 2022-10-05T03:05:02Z

This PR adds the initial package and component for InfoButton. Aside from what the create-component and create-package commands generate, I added the bundle size fixtures. Everything else is auto generated.

codesandbox-ci · 2022-10-05T03:17:44Z

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

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

size-auditor · 2022-10-05T03:20:27Z

Asset size changes

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

Baseline commit: 1c8b241a322ca3d2ddb5dbe78154bb7bab1271df (build)

fabricteam · 2022-10-05T03:21:32Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1326	1324	5000
Button	mount	966	945	5000
FluentProvider	mount	1578	1592	5000
FluentProviderWithTheme	mount	634	622	10
FluentProviderWithTheme	virtual-rerender	584	587	10
FluentProviderWithTheme	virtual-rerender-with-unmount	631	629	10
MakeStyles	mount	1908	1885	50000
SpinButton	mount	2539	2513	5000

fabricteam · 2022-10-05T03:26:58Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	132	123	1.07:1
PortalMinimalPerf.default	145	136	1.07:1
RefMinimalPerf.default	195	183	1.07:1
AlertMinimalPerf.default	234	220	1.06:1
ReactionMinimalPerf.default	343	327	1.05:1
TableMinimalPerf.default	375	357	1.05:1
ListMinimalPerf.default	466	450	1.04:1
CarouselMinimalPerf.default	356	347	1.03:1
ChatDuplicateMessagesPerf.default	215	209	1.03:1
DropdownMinimalPerf.default	2191	2136	1.03:1
ProviderMinimalPerf.default	322	312	1.03:1
AccordionMinimalPerf.default	126	124	1.02:1
AvatarMinimalPerf.default	165	162	1.02:1
ButtonMinimalPerf.default	134	131	1.02:1
CardMinimalPerf.default	470	461	1.02:1
LayoutMinimalPerf.default	313	308	1.02:1
RosterPerf.default	1725	1692	1.02:1
IconMinimalPerf.default	569	560	1.02:1
ToolbarMinimalPerf.default	801	789	1.02:1
AttachmentSlotsPerf.default	861	855	1.01:1
BoxMinimalPerf.default	295	293	1.01:1
ButtonSlotsPerf.default	425	421	1.01:1
ChatMinimalPerf.default	636	629	1.01:1
CheckboxMinimalPerf.default	1537	1521	1.01:1
DialogMinimalPerf.default	690	682	1.01:1
EmbedMinimalPerf.default	2637	2622	1.01:1
FormMinimalPerf.default	333	329	1.01:1
GridMinimalPerf.default	294	290	1.01:1
InputMinimalPerf.default	855	845	1.01:1
ItemLayoutMinimalPerf.default	979	965	1.01:1
ListNestedPerf.default	473	467	1.01:1
MenuMinimalPerf.default	735	726	1.01:1
RadioGroupMinimalPerf.default	392	389	1.01:1
SplitButtonMinimalPerf.default	3253	3206	1.01:1
TableManyItemsPerf.default	1584	1568	1.01:1
CustomToolbarPrototype.default	2171	2146	1.01:1
TreeWith60ListItems.default	129	128	1.01:1
AnimationMinimalPerf.default	464	465	1:1
ButtonOverridesMissPerf.default	1017	1018	1:1
DividerMinimalPerf.default	313	312	1:1
DropdownManyItemsPerf.default	539	541	1:1
HeaderSlotsPerf.default	675	678	1:1
ImageMinimalPerf.default	342	343	1:1
MenuButtonMinimalPerf.default	1331	1334	1:1
PopupMinimalPerf.default	554	553	1:1
ProviderMergeThemesPerf.default	987	983	1:1
SkeletonMinimalPerf.default	300	301	1:1
TextMinimalPerf.default	300	299	1:1
TooltipMinimalPerf.default	1884	1881	1:1
TreeMinimalPerf.default	702	701	1:1
ChatWithPopoverPerf.default	287	289	0.99:1
FlexMinimalPerf.default	241	244	0.99:1
LoaderMinimalPerf.default	515	519	0.99:1
SliderMinimalPerf.default	1230	1240	0.99:1
TextAreaMinimalPerf.default	409	414	0.99:1
DatepickerMinimalPerf.default	4532	4646	0.98:1
LabelMinimalPerf.default	339	346	0.98:1
ListCommonPerf.default	512	520	0.98:1
SegmentMinimalPerf.default	300	305	0.98:1
StatusMinimalPerf.default	593	608	0.98:1
VideoMinimalPerf.default	608	620	0.98:1
ListWith60ListItems.default	482	499	0.97:1
HeaderMinimalPerf.default	306	318	0.96:1

fabricteam · 2022-10-05T03:28:13Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-infobutton` InfoButton	`0 B` `0 B`	`7.696 kB` `3.241 kB`	🆕 New entry

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`79.037 kB` `24.059 kB`
`react-alert` Alert	`84.117 kB` `21.07 kB`
`react-avatar` Avatar	`48.828 kB` `13.842 kB`
`react-avatar` AvatarGroup	`14.95 kB` `5.989 kB`
`react-avatar` AvatarGroupItem	`68.796 kB` `19.182 kB`
`react-badge` Badge	`22.6 kB` `7.205 kB`
`react-badge` CounterBadge	`23.49 kB` `7.489 kB`
`react-badge` PresenceBadge	`24.05 kB` `7.067 kB`
`react-button` Button	`36.278 kB` `9.636 kB`
`react-button` CompoundButton	`43.303 kB` `10.852 kB`
`react-button` MenuButton	`38.972 kB` `10.536 kB`
`react-button` SplitButton	`46.418 kB` `11.916 kB`
`react-button` ToggleButton	`52.145 kB` `11.108 kB`
`react-card` Card - All	`67.17 kB` `19.281 kB`
`react-card` Card	`62.852 kB` `18.198 kB`
`react-card` CardFooter	`8.561 kB` `3.601 kB`
`react-card` CardHeader	`9.604 kB` `3.94 kB`
`react-card` CardPreview	`8.662 kB` `3.656 kB`
`react-combobox` Combobox (including child components)	`74.642 kB` `24.19 kB`
`react-combobox` Dropdown (including child components)	`74.242 kB` `24.089 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.815 kB` `52.287 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.4 kB` `11.008 kB`
`react-dialog` Dialog (including children components)	`82.465 kB` `24.447 kB`
`react-divider` Divider	`16.459 kB` `5.902 kB`
`react-image` Image	`10.78 kB` `4.264 kB`
`react-input` Input	`23.762 kB` `7.706 kB`
`react-label` Label	`9.338 kB` `3.86 kB`
`react-link` Link	`11.806 kB` `4.868 kB`
`react-menu` Menu (including children components)	`116.558 kB` `35.725 kB`
`react-menu` Menu (including selectable components)	`119.627 kB` `36.246 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-persona` Persona	`53.946 kB` `15.225 kB`
`react-popover` Popover	`102.756 kB` `31.5 kB`
`react-portal` Portal	`10.582 kB` `3.875 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-progress` Progress	`13.44 kB` `5.247 kB`
`react-provider` FluentProvider	`15.761 kB` `5.885 kB`
`react-radio` Radio	`36.39 kB` `12.103 kB`
`react-radio` RadioGroup	`14.248 kB` `5.7 kB`
`react-select` Select	`20.846 kB` `7.346 kB`
`react-slider` Slider	`31.759 kB` `10.064 kB`
`react-spinbutton` SpinButton	`44.102 kB` `12.425 kB`
`react-spinner` Spinner	`19.977 kB` `6.438 kB`
`react-switch` Switch	`33.342 kB` `10.557 kB`
`react-text` Text - Default	`11.782 kB` `4.605 kB`
`react-text` Text - Wrappers	`15.092 kB` `5.044 kB`
`react-textarea` Textarea	`25.018 kB` `8.133 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-tooltip` Tooltip	`41.566 kB` `14.644 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 1c8b241a322ca3d2ddb5dbe78154bb7bab1271df}

fabricteam · 2022-10-05T03:42:37Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Pivot	mount	1491	1496	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1193	1192	5000
Breadcrumb	mount	2780	2785	1000
Checkbox	mount	2613	2639	5000
CheckboxBase	mount	2395	2371	5000
ChoiceGroup	mount	4247	4246	5000
ComboBox	mount	1173	1166	1000
CommandBar	mount	9245	9242	1000
ContextualMenu	mount	10097	9998	1000
DefaultButton	mount	1356	1350	5000
DetailsRow	mount	3370	3348	5000
DetailsRowFast	mount	3367	3352	5000
DetailsRowNoStyles	mount	3199	3227	5000
Dialog	mount	2960	2943	1000
DocumentCardTitle	mount	582	579	1000
Dropdown	mount	3145	3160	5000
FocusTrapZone	mount	1938	1937	5000
FocusZone	mount	1918	1940	5000
GroupedList	mount	48110	54164	2
GroupedList	virtual-rerender	22998	23112	2
GroupedList	virtual-rerender-with-unmount	81610	82755	2
GroupedListV2	mount	564	554	2
GroupedListV2	virtual-rerender	534	516	2
GroupedListV2	virtual-rerender-with-unmount	549	554	2
IconButton	mount	1807	1811	5000
Label	mount	746	739	5000
Layer	mount	4154	4156	5000
Link	mount	849	839	5000
MenuButton	mount	1627	1594	5000
MessageBar	mount	2418	2287	5000
Nav	mount	3053	3068	1000
OverflowSet	mount	1408	1387	5000
Panel	mount	2541	2475	1000
Persona	mount	1246	1224	1000
Pivot	mount	1491	1496	1000	Possible regression
PrimaryButton	mount	1484	1486	5000
Rating	mount	7004	6920	5000
SearchBox	mount	1529	1506	5000
Shimmer	mount	2898	2938	5000
Slider	mount	2108	2156	5000
SpinButton	mount	4281	4280	5000
Spinner	mount	804	822	5000
SplitButton	mount	2877	2835	5000
Stack	mount	904	892	5000
StackWithIntrinsicChildren	mount	2241	2247	5000
StackWithTextChildren	mount	4935	4917	5000
SwatchColorPicker	mount	9459	9492	5000
TagPicker	mount	2399	2349	5000
TeachingBubble	mount	75155	74421	5000
Text	mount	824	812	5000
TextField	mount	1543	1567	5000
ThemeProvider	mount	1440	1422	5000
ThemeProvider	virtual-rerender	1134	1129	5000
ThemeProvider	virtual-rerender-with-unmount	1986	1994	5000
Toggle	mount	1141	1135	5000
buttonNative	mount	526	531	5000

…icrosoft#25083) * chore: Adding package and component for InfoButton. * updating codeowners

chore: Adding package and component for InfoButton.

52cf229

sopranopillow added Fluent UI react-components (v9) Component: InfoButton labels Oct 5, 2022

sopranopillow added this to the October Project Cycle Q4 2022 milestone Oct 5, 2022

sopranopillow self-assigned this Oct 5, 2022

sopranopillow requested review from a team, JustSlone and jurokapsiar as code owners October 5, 2022 03:05

updating codeowners

b80b08b

tudorpopams approved these changes Oct 5, 2022

View reviewed changes

sopranopillow merged commit 4ad13c3 into microsoft:master Oct 5, 2022

sopranopillow deleted the info-button/scaffold branch October 5, 2022 19:44

sopranopillow mentioned this pull request Nov 8, 2022

InfoLabel #25062

Closed

30 tasks

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

chore(react-infobutton): Adding InfoButton's package and component (m…

4ed9ef2

…icrosoft#25083) * chore: Adding package and component for InfoButton. * updating codeowners

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-infobutton): Adding InfoButton's package and component#25083

chore(react-infobutton): Adding InfoButton's package and component#25083
sopranopillow merged 2 commits intomicrosoft:masterfrom
sopranopillow:info-button/scaffold

sopranopillow commented Oct 5, 2022

Uh oh!

codesandbox-ci bot commented Oct 5, 2022

Uh oh!

size-auditor bot commented Oct 5, 2022

Uh oh!

fabricteam commented Oct 5, 2022

Uh oh!

fabricteam commented Oct 5, 2022

Uh oh!

fabricteam commented Oct 5, 2022

Uh oh!

fabricteam commented Oct 5, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sopranopillow commented Oct 5, 2022

Uh oh!

codesandbox-ci bot commented Oct 5, 2022

Uh oh!

size-auditor bot commented Oct 5, 2022

Asset size changes

Uh oh!

fabricteam commented Oct 5, 2022

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Oct 5, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Oct 5, 2022

📊 Bundle size report

Uh oh!

fabricteam commented Oct 5, 2022

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

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

Perf Analysis (`@fluentui/react`)