Overflow divider fix by ValentinaKozlova · Pull Request #28011 · microsoft/fluentui

ValentinaKozlova · 2023-05-26T09:38:45Z

Previous Behavior

If there are custom margins/paddings it, also, breaks overflow logic

New Behavior

packages/react-components/priority-overflow/src/overflowManager.ts

fabricteam · 2023-05-26T09:48:03Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	590	595	5000
Button	mount	301	298	5000
Field	mount	1062	1049	5000
FluentProvider	mount	631	658	5000
FluentProviderWithTheme	mount	85	89	10
FluentProviderWithTheme	virtual-rerender	77	85	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	74	10
InfoButton	mount	17	11	5000
MakeStyles	mount	851	865	50000
Persona	mount	1612	1626	5000
SpinButton	mount	1351	1342	5000

size-auditor · 2023-05-26T09:49:30Z

Asset size changes

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

Baseline commit: cf6b94ba6559236150bc1f1814b023607edaeb20 (build)

codesandbox-ci · 2023-05-26T09:50:47Z

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

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

fabricteam · 2023-05-26T09:52:25Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`	`4.204 kB` `1.656 kB`	`1.01 kB` `341 B`
`react-overflow` hooks only	`11.206 kB` `4.266 kB`	`12.461 kB` `4.609 kB`	`1.255 kB` `343 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.162 kB` `17.952 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.103 kB` `58.624 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.395 kB` `11.996 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`

_{🤖 This report was generated against cf6b94ba6559236150bc1f1814b023607edaeb20}

packages/react-components/react-overflow/src/useOverflowContainer.ts

packages/react-components/priority-overflow/src/overflowManager.ts

packages/react-components/react-overflow/src/components/Overflow.tsx

...ages/react-components/react-overflow/src/components/OverflowDivider/OverflowDivider.types.ts

…ow.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

…owDivider/OverflowDivider.types.ts Co-authored-by: ling1726 <lingfangao@hotmail.com>

packages/react-components/priority-overflow/src/overflowManager.ts

packages/react-components/react-overflow/stories/Overflow/LargerDividers.stories.tsx

…erDividers.stories.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

…r.ts Co-authored-by: ling1726 <lingfangao@hotmail.com>

* master: (32 commits) applying package updates feat(react-tags): add styles for size (microsoft#28229) docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176) bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258) applying package updates fix: TableHeaderCell should not render button when not sortable (microsoft#28097) fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112) Fix overlapping axis labels on smaller viewports (microsoft#28239) useArrowNavigationGroup grid-linear axis (microsoft#28253) applying package updates fix: Alert example missing aria-label for icon (microsoft#28234) Overflow divider fix (microsoft#28011) feat(tools): implement `cypress-component-configuration` generator (microsoft#28115) chore: migrate to TS 4.7 (microsoft#28067) fix(scripts-tasks): make generate-api work in deterministic way (microsoft#28215) feat(react-tags): add overflow story (microsoft#28012) Structure and slots for SearchBox, using Input as a slot (microsoft#28090) feat(tokens): Add/update theme tokens (microsoft#27791) feat(react-tags): add a11y role and best practices guide (microsoft#28075) fix: Toast intent should always be present in the context (microsoft#28226) ...

msft-fluent-ui-bot · 2023-06-21T07:35:33Z

🎉@fluentui/priority-overflow@v9.1.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-06-21T07:39:27Z

🎉@fluentui/react-overflow@v9.0.20 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-06-21T07:44:51Z

🎉@fluentui/react-components@v9.22.0 has been released which incorporates this pull request.:tada:

Handy links:

* master: (95 commits) docs(react-drawer): improve drawer stories examples (microsoft#28283) bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout (microsoft#28272) Doc: Tree Infinite Scrolling (microsoft#28197) fix(react-card): infer a11y id from immediate header element (microsoft#28266) Fixed bugs and added more stories to the Breadcrumb (microsoft#28267) refactor: Keep vanillajs code only where needed (microsoft#28278) fix: correcting focus behavior of react-search (microsoft#28241) Tooltip : updated tooltip styles (microsoft#28264) applying package updates feat(react-tags): add styles for size (microsoft#28229) docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176) bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258) applying package updates fix: TableHeaderCell should not render button when not sortable (microsoft#28097) fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112) Fix overlapping axis labels on smaller viewports (microsoft#28239) useArrowNavigationGroup grid-linear axis (microsoft#28253) applying package updates fix: Alert example missing aria-label for icon (microsoft#28234) Overflow divider fix (microsoft#28011) ...

ValentinaKozlova added the Status: Fix Proposed Issue has been investigated and a proposed fix exists label May 26, 2023

ValentinaKozlova requested a review from ling1726 May 26, 2023 09:38

ValentinaKozlova self-assigned this May 26, 2023

ValentinaKozlova commented May 26, 2023

View reviewed changes

packages/react-components/priority-overflow/src/overflowManager.ts Outdated Show resolved Hide resolved

ValentinaKozlova force-pushed the fix/overflow-divider branch 3 times, most recently from c38e528 to 70b30b3 Compare June 7, 2023 22:28

ValentinaKozlova mentioned this pull request Jun 8, 2023

Breadcrumb #26480

Closed

28 tasks

ling1726 reviewed Jun 8, 2023

View reviewed changes

packages/react-components/react-overflow/src/useOverflowContainer.ts Outdated Show resolved Hide resolved

ValentinaKozlova requested a review from ling1726 June 9, 2023 09:45

ValentinaKozlova force-pushed the fix/overflow-divider branch 2 times, most recently from ed177c8 to ba25a29 Compare June 13, 2023 09:30

ValentinaKozlova marked this pull request as ready for review June 13, 2023 09:56

ValentinaKozlova requested review from a team as code owners June 13, 2023 09:56

tudorpopams requested a review from marcosmoura June 13, 2023 12:10

ValentinaKozlova requested a review from layershifter June 13, 2023 12:16

ValentinaKozlova force-pushed the fix/overflow-divider branch from ba25a29 to b078f0c Compare June 13, 2023 14:07

ValentinaKozlova added 2 commits June 13, 2023 16:31

Divider fix for overflow

2e6aa3e

Change files

e182d0f

ValentinaKozlova force-pushed the fix/overflow-divider branch from b078f0c to e182d0f Compare June 13, 2023 14:33

fix for overflow in Breadcrumb and api regenerated

b65b8ce

ValentinaKozlova requested a review from a team as a code owner June 13, 2023 15:41

ValentinaKozlova added 2 commits June 14, 2023 11:50

fixed test and api generation

0f26cfa

build fail fix

179cbfb

ValentinaKozlova removed the request for review from layershifter June 14, 2023 15:42

PR fix

894c4b6

ValentinaKozlova requested a review from ling1726 June 15, 2023 15:46

ling1726 reviewed Jun 15, 2023

View reviewed changes

packages/react-components/priority-overflow/src/overflowManager.ts Outdated Show resolved Hide resolved

ling1726 reviewed Jun 15, 2023

View reviewed changes

packages/react-components/react-overflow/src/components/Overflow.tsx Outdated Show resolved Hide resolved

ling1726 reviewed Jun 15, 2023

View reviewed changes

...ages/react-components/react-overflow/src/components/OverflowDivider/OverflowDivider.types.ts Outdated Show resolved Hide resolved

ValentinaKozlova and others added 4 commits June 15, 2023 23:17

PR fix microsoft#2

09869c8

Update packages/react-components/react-overflow/src/components/Overfl…

77039fd

…ow.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

Update packages/react-components/react-overflow/src/components/Overfl…

ac06836

…owDivider/OverflowDivider.types.ts Co-authored-by: ling1726 <lingfangao@hotmail.com>

regenerated api

27cf866

ValentinaKozlova requested a review from ling1726 June 16, 2023 10:34

ling1726 approved these changes Jun 16, 2023

View reviewed changes

ling1726 reviewed Jun 16, 2023

View reviewed changes

packages/react-components/priority-overflow/src/overflowManager.ts Outdated Show resolved Hide resolved

ling1726 reviewed Jun 16, 2023

View reviewed changes

packages/react-components/react-overflow/stories/Overflow/LargerDividers.stories.tsx Outdated Show resolved Hide resolved

ling1726 reviewed Jun 16, 2023

View reviewed changes

packages/react-components/react-overflow/stories/Overflow/LargerDividers.stories.tsx Outdated Show resolved Hide resolved

ling1726 reviewed Jun 16, 2023

View reviewed changes

packages/react-components/react-overflow/stories/Overflow/LargerDividers.stories.tsx Outdated Show resolved Hide resolved

ValentinaKozlova mentioned this pull request Jun 16, 2023

Refactoring for Overflow component #28236

Closed

ValentinaKozlova and others added 6 commits June 16, 2023 13:51

Update packages/react-components/react-overflow/stories/Overflow/Larg…

465c4b9

…erDividers.stories.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

Update packages/react-components/react-overflow/stories/Overflow/Larg…

1b4a2eb

…erDividers.stories.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

Update packages/react-components/react-overflow/stories/Overflow/Larg…

38d6dcc

…erDividers.stories.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com>

Update packages/react-components/priority-overflow/src/overflowManage…

9dff18a

…r.ts Co-authored-by: ling1726 <lingfangao@hotmail.com>

pr fix#3

1ae6d1f

fix

cbf1d8a

marcosmoura approved these changes Jun 16, 2023

View reviewed changes

ValentinaKozlova merged commit 4dedf40 into microsoft:master Jun 16, 2023

ValentinaKozlova deleted the fix/overflow-divider branch June 16, 2023 14:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overflow divider fix#28011

Overflow divider fix#28011
ValentinaKozlova merged 20 commits intomicrosoft:masterfrom
ValentinaKozlova:fix/overflow-divider

ValentinaKozlova commented May 26, 2023 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented May 26, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented May 26, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented May 26, 2023 •

edited

Loading

Uh oh!

fabricteam commented May 26, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ValentinaKozlova commented May 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor bot commented May 26, 2023 • 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 May 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

msft-fluent-ui-bot commented Jun 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ValentinaKozlova commented May 26, 2023 •

edited

Loading

fabricteam commented May 26, 2023 •

edited

Loading

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

size-auditor bot commented May 26, 2023 •

edited

Loading

codesandbox-ci bot commented May 26, 2023 •

edited

Loading

fabricteam commented May 26, 2023 •

edited

Loading