feat(react-infobutton): Add inline prop to InfoButton and make it inline by default by sopranopillow · Pull Request #28605 · microsoft/fluentui

sopranopillow · 2023-07-20T22:28:58Z

Previous Behavior

InfoButton used default settings for Popover surface, therefore rendering it on a portal.

New Behavior

InfoButton's Popover surface now renders inline allowing tabbing out of it and getting access to the rest of the dom.

Related Issue(s)

Fixes [Bug]: Make InfoLabel popup inline by default #28217

…to infobutton-inline

fabricteam · 2023-07-20T22:38:03Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	8	13	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	645	589	5000
Button	mount	307	315	5000
Field	mount	1132	1094	5000
FluentProvider	mount	667	687	5000
FluentProviderWithTheme	mount	81	91	10
FluentProviderWithTheme	virtual-rerender	67	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	77	73	10
InfoButton	mount	8	13	5000	Possible regression
MakeStyles	mount	852	858	50000
Persona	mount	1734	1725	5000
SpinButton	mount	1385	1382	5000

codesandbox-ci · 2023-07-20T22:41:18Z

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

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

fabricteam · 2023-07-20T22:41:47Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-infobutton` InfoButton	`125.52 kB` `39.348 kB`	`125.55 kB` `39.359 kB`	`30 B` `11 B`
`react-infobutton` InfoLabel	`129.191 kB` `40.52 kB`	`129.221 kB` `40.532 kB`	`30 B` `12 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.614 kB` `18.512 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.786 kB` `57.921 kB`
`react-components` react-components: FluentProvider & webLightTheme	`37.787 kB` `12.387 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`

_{🤖 This report was generated against fa10a47ee4ddeb9a646a986ede5a6365c9b99f55}

size-auditor · 2023-07-20T22:49:16Z

Asset size changes

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

Baseline commit: fa10a47ee4ddeb9a646a986ede5a6365c9b99f55 (build)

fabricteam · 2023-07-20T22:49:57Z

🕵 fluentuiv9 No visual regressions between this PR and main

sopranopillow · 2023-07-21T23:37:06Z

Do not merge until #28613 is merged

behowell

This change LGTM, but per @sopranopillow 's comment, we're waiting to merge it until #28613 is resolved. Going to mark it as changes requested and hold off merging for now.

sopranopillow · 2023-08-23T22:25:44Z

@behowell #28613 has been merged, so this is good to go :)

* master: (23 commits) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) applying package updates ...

* master: (24 commits) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) ...

* master: (26 commits) chore: Make triage bot add needs triage label to new issues (microsoft#28994) fix(react-tags-preview): use regular icon for dismiss (microsoft#28958) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) ...

sopranopillow added 3 commits July 18, 2023 15:12

adding inline prop

0498a46

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

425a449

…to infobutton-inline

testing example

18adee9

sopranopillow self-assigned this Jul 20, 2023

sopranopillow added 2 commits July 21, 2023 16:18

making infobutton inline

6f82b98

change file

a87738f

sopranopillow assigned behowell Jul 21, 2023

sopranopillow marked this pull request as ready for review July 21, 2023 23:32

sopranopillow requested a review from a team as a code owner July 21, 2023 23:32

behowell suggested changes Aug 3, 2023

View reviewed changes

Merge branch 'master' into infobutton-inline

bf2a8d6

sopranopillow requested a review from behowell August 23, 2023 22:25

behowell approved these changes Aug 24, 2023

View reviewed changes

sopranopillow merged commit 0e33d8e into microsoft:master Aug 24, 2023

sopranopillow deleted the infobutton-inline branch August 24, 2023 22:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(react-infobutton): Add inline prop to InfoButton and make it inline by default#28605

feat(react-infobutton): Add inline prop to InfoButton and make it inline by default#28605
sopranopillow merged 6 commits into
microsoft:masterfrom
sopranopillow:infobutton-inline

sopranopillow commented Jul 20, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jul 20, 2023 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Jul 20, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jul 20, 2023 •

edited

Loading

Uh oh!

size-auditor Bot commented Jul 20, 2023 •

edited

Loading

Uh oh!

fabricteam commented Jul 20, 2023 •

edited

Loading

Uh oh!

sopranopillow commented Jul 21, 2023

Uh oh!

behowell left a comment

Uh oh!

sopranopillow commented Aug 23, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

sopranopillow commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci Bot commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

sopranopillow commented Jul 21, 2023

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

sopranopillow commented Aug 23, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sopranopillow commented Jul 20, 2023 •

edited

Loading

fabricteam commented Jul 20, 2023 •

edited

Loading

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

codesandbox-ci Bot commented Jul 20, 2023 •

edited

Loading

fabricteam commented Jul 20, 2023 •

edited

Loading

size-auditor Bot commented Jul 20, 2023 •

edited

Loading

fabricteam commented Jul 20, 2023 •

edited

Loading