Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-positioning): simplify maxSize options #28649

Merged
merged 14 commits into from
Jul 27, 2023

Conversation

YuanboXue-Amber
Copy link
Contributor

@YuanboXue-Amber YuanboXue-Amber commented Jul 26, 2023

Fix item 2 in #28623

Previous Behavior

AutoSize has several options:

export type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;

export interface PositioningOptions {
  autoSize?: AutoSize;
}

'height' - apply max-height only when floating element overflows boundary.
'height-always' - apply max-height regardless of overflow.
The same goes with true/'always' and 'width'/'width-always'.

There are two examples in issue 28623 2. Consolidate 'height'/'height-always' option, explaining why we need both set of options.

New Behavior

Options 'always'/'height-always'/'width-always' are now obsolete, and equivalent to true/'height'/'width'.

This is achieved by always applying max-height/max-width, but remove them when updatePosition is called.
The size of the content affects the max-height/max-width style we're applying, because the availableWidth/availableHeight from floating ui size middleware is calculated as below:
Screenshot 2023-07-26 at 12 25 12

Test cases are added for both case A and case B mentioned in the above issue.

Additionally, this PR fixes 1.b in #28623 by applying overflow style only when overflow styles aren't present. Therefore user can use inline overflow style to override overflow-x/overflow-y added by maxSize.

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 26, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 80 75 10 Possible regression
InfoButton mount 14 19 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 632 614 5000
Button mount 290 300 5000
Field mount 1051 1071 5000
FluentProvider mount 651 646 5000
FluentProviderWithTheme mount 80 75 10 Possible regression
FluentProviderWithTheme virtual-rerender 71 62 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 82 10
InfoButton mount 14 19 5000 Possible regression
MakeStyles mount 843 840 50000
Persona mount 1632 1589 5000
SpinButton mount 1275 1346 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 26, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)
87.395 kB
28.184 kB
87.985 kB
28.356 kB
590 B
172 B
react-combobox
Dropdown (including child components)
85.798 kB
27.804 kB
86.388 kB
27.965 kB
590 B
161 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.472 kB
57.814 kB
208.062 kB
57.968 kB
590 B
154 B
react-datepicker-compat
DatePicker Compat
217.582 kB
58.025 kB
218.172 kB
58.2 kB
590 B
175 B
react-infobutton
InfoButton
126.163 kB
39.164 kB
126.753 kB
39.348 kB
590 B
184 B
react-infobutton
InfoLabel
129.763 kB
40.304 kB
130.353 kB
40.479 kB
590 B
175 B
react-menu
Menu (including children components)
135.5 kB
41.325 kB
136.111 kB
41.485 kB
611 B
160 B
react-menu
Menu (including selectable components)
138.264 kB
41.828 kB
138.875 kB
41.988 kB
611 B
160 B
react-popover
Popover
114.722 kB
35.751 kB
115.312 kB
35.916 kB
590 B
165 B
react-positioning
usePositioning
24.468 kB
8.915 kB
25.062 kB
9.087 kB
594 B
172 B
react-tooltip
Tooltip
47.659 kB
16.697 kB
48.261 kB
16.86 kB
602 B
163 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert
84.992 kB
22.03 kB
react-avatar
Avatar
47.739 kB
14.521 kB
react-avatar
AvatarGroup
15.695 kB
6.314 kB
react-avatar
AvatarGroupItem
63.915 kB
19.001 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.576 kB
18.225 kB
react-components
react-components: FluentProvider & webLightTheme
36.409 kB
12.003 kB
react-persona
Persona
55.293 kB
16.535 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-table
DataGrid
158.464 kB
42.465 kB
react-table
Table (Primitives only)
43.95 kB
12.263 kB
react-table
Table as DataGrid
132.268 kB
33.902 kB
react-table
Table (Selection only)
77.643 kB
19.195 kB
react-table
Table (Sort only)
76.262 kB
18.798 kB
react-tags-preview
InteractionTag
34.171 kB
9.199 kB
react-tags-preview
Tag
25.962 kB
8.49 kB
react-tags-preview
TagGroup
69.398 kB
20.364 kB
🤖 This report was generated against 0e9c438b78e58f346f61b15224c7b0020e4fe73e

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 26, 2023

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

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

@size-auditor
Copy link

size-auditor bot commented Jul 26, 2023

Asset size changes

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

Baseline commit: 0e9c438b78e58f346f61b15224c7b0020e4fe73e (build)

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review July 26, 2023 11:15
@YuanboXue-Amber YuanboXue-Amber requested review from a team as code owners July 26, 2023 11:15
@YuanboXue-Amber YuanboXue-Amber changed the title simplify maxSize options feat(react-positioning): simplify maxSize options Jul 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants