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.

Sign up for GitHub

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

Jump to bottom

feat: implement useScrollbarWidth utility hook #26144

Merged
merged 5 commits into from
Jan 5, 2023
Merged

feat: implement useScrollbarWidth utility hook #26144

merged 5 commits into from
Jan 5, 2023

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Jan 3, 2023

New hook that returns the width of the scrollbar in pixels of the current user agent

@ling1726
feat: implement useScrollbarWidth utility hook
763f301 
New hook that returns the width of the scrollbar in pixels of the
current user agent
@ling1726 ling1726 requested review from a team as code owners January 3, 2023 14:55
@github-actions github-actions bot added this to the October Project Cycle Q4 2022 milestone Jan 3, 2023
@size-auditor
Copy link

size-auditor bot commented Jan 3, 2023 •
edited

Asset size changes

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

Baseline commit: fef0e43191fb8ebea9275f240edb0504d93d9385 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 3, 2023 •
edited

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

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 3, 2023 •
edited

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1317 1330 5000
Button mount 942 942 5000
FluentProvider mount 1611 1582 5000
FluentProviderWithTheme mount 633 625 10
FluentProviderWithTheme virtual-rerender 598 597 10
FluentProviderWithTheme virtual-rerender-with-unmount 626 631 10
MakeStyles mount 1928 1936 50000
Persona mount 3030 2973 5000
SpinButton mount 2500 2551 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 3, 2023 •
edited

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 533 B
341 B
global-context
createContextSelector		 554 B
348 B
react-accordion
Accordion (including children components)		 80.097 kB
24.712 kB
react-alert
Alert		 84.612 kB
21.445 kB
react-avatar
Avatar		 51.515 kB
14.449 kB
react-avatar
AvatarGroup		 15.42 kB
6.167 kB
react-avatar
AvatarGroupItem		 67.733 kB
18.746 kB
react-badge
Badge		 23.78 kB
7.542 kB
react-badge
CounterBadge		 24.67 kB
7.825 kB
react-badge
PresenceBadge		 24.437 kB
7.189 kB
react-button
Button		 33.354 kB
8.779 kB
react-button
CompoundButton		 40.384 kB
10.127 kB
react-button
MenuButton		 38.043 kB
10.096 kB
react-button
SplitButton		 45.488 kB
11.501 kB
react-button
ToggleButton		 49.184 kB
10.875 kB
react-card
Card - All		 77.975 kB
22.496 kB
react-card
Card		 72.92 kB
21.108 kB
react-card
CardFooter		 9.04 kB
3.807 kB
react-card
CardHeader		 10.805 kB
4.443 kB
react-card
CardPreview		 9.847 kB
4.159 kB
react-checkbox
Checkbox		 29.081 kB
9.258 kB
react-checkbox
CheckboxField		 35.51 kB
11.026 kB
react-combobox
Combobox (including child components)		 79.944 kB
25.571 kB
react-combobox
ComboboxField		 77.14 kB
25.536 kB
react-combobox
Dropdown (including child components)		 79.184 kB
25.502 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 59.888 kB
16.652 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 188.928 kB
53.088 kB
react-components
react-components: FluentProvider & webLightTheme		 34.379 kB
11.322 kB
react-dialog
Dialog (including children components)		 83.459 kB
24.913 kB
react-divider
Divider		 16.938 kB
6.103 kB
react-image
Image		 11.259 kB
4.473 kB
react-infobutton
InfoButton		 119.696 kB
35.914 kB
react-input
Input		 24.617 kB
8.059 kB
react-input
InputField		 33.839 kB
10.73 kB
react-label
Label		 9.817 kB
4.067 kB
react-link
Link		 12.285 kB
5.063 kB
react-menu
Menu (including children components)		 119.484 kB
36.932 kB
react-menu
Menu (including selectable components)		 122.553 kB
37.452 kB
react-overflow
hooks only		 11.004 kB
4.188 kB
react-persona
Persona		 57.552 kB
16.102 kB
react-popover
Popover		 105.432 kB
32.464 kB
react-portal
Portal		 11.12 kB
4.096 kB
react-portal-compat
PortalCompatProvider		 6.069 kB
2.053 kB
react-positioning
usePositioning		 20.856 kB
7.766 kB
react-progress
ProgressBar		 13.578 kB
5.235 kB
react-progress
ProgressField		 22.892 kB
8.057 kB
react-provider
FluentProvider		 16.446 kB
6.127 kB
react-radio
Radio		 32.247 kB
10.468 kB
react-radio
RadioGroup		 14.718 kB
5.886 kB
react-radio
RadioGroupField		 24.024 kB
8.796 kB
react-select
Select		 23.902 kB
8.187 kB
react-select
SelectField		 32.162 kB
10.406 kB
react-slider
Slider		 32.52 kB
10.357 kB
react-slider
SliderField		 41.544 kB
13.046 kB
react-spinbutton
SpinButton		 44.933 kB
12.97 kB
react-spinbutton
SpinButtonField		 53.229 kB
15.232 kB
react-spinner
Spinner		 20.445 kB
6.621 kB
react-switch
Switch		 33.865 kB
10.735 kB
react-switch
SwitchField		 40.176 kB
12.514 kB
react-text
Text - Default		 12.261 kB
4.819 kB
react-text
Text - Wrappers		 15.571 kB
5.23 kB
react-textarea
Textarea		 26.156 kB
8.508 kB
react-textarea
TextareaField		 35.38 kB
11.157 kB
react-tooltip
Tooltip		 43.387 kB
15.18 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against fef0e43191fb8ebea9275f240edb0504d93d9385

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 3, 2023 •
edited

🕵 fluentuiv9 No visual regressions between this PR and main

@ling1726 ling1726 merged commit 3c3291c into microsoft:master Jan 5, 2023
@ling1726 ling1726 mentioned this pull request Jan 10, 2023
Merged
q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023
@ling1726 @q1b
feat: implement useScrollbarWidth utility hook (microsoft#26144)
9754065 
* feat: implement `useScrollbarWidth` utility hook

New hook that returns the width of the scrollbar in pixels of the
current user agent

* changefile

* implement cache

* use target document

* update md
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
@ling1726 @Hotell
feat: implement useScrollbarWidth utility hook (microsoft#26144)
fc29d74 
* feat: implement `useScrollbarWidth` utility hook

New hook that returns the width of the scrollbar in pixels of the
current user agent

* changefile

* implement cache

* use target document

* update md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

Assignees

@smhigley smhigley

Labels
None yet
Projects
None yet
Milestone
January Project Cycle Q1 2023
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@ling1726 @fabricteam @layershifter @smhigley