microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.87k stars 2.66k forks source link

bugfix(react-dialog): fix scroll locking issues introduced by a regression #31377

Closed bsunderhus closed 2 weeks ago

bsunderhus commented 2 weeks ago

Previous Behavior

  1. In chromium browsers the dialog seem to jump on entering animation
  2. in firefox and safari the body lock mechanism is not working (there's a condition check if the scroll bar is present, that condition is returning false negatives) https://github.com/microsoft/fluentui/blob/3855dcb9c010e463ab2e0f2524da4f36a02eccbe/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts#L20-L23

New Behavior

  1. moves scroll body locking mechanism from useDialog to useDialogSurface to optain access to the animation transitionStatus (solves issue 1.)
  2. adds overflow-y: hidden to body (seems like in html element is not enough
  3. modifies the condition check if the scroll bar is present https://github.com/microsoft/fluentui/pull/31377/files#diff-8f2d1997fb63aa1fca8391cd2ab72b3f776d4d80b89cf2b331321bd11fa60de6R22-R26

Related Issue(s)

codesandbox-ci[bot] commented 2 weeks ago

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.

fabricteam commented 2 weeks ago

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.139 MB
275.369 kB
1.139 MB
275.438 kB
167 B
69 B
react-dialog
Dialog (including children components)
100.769 kB
30.092 kB
100.192 kB
29.884 kB
-577 B
-208 B
Unchanged fixtures | Package & Exports | Size (minified/GZIP) | | ----------------- | -------------------: | | react-components
react-components: Button, FluentProvider & webLightTheme | `71.55 kB`
`20.584 kB` | | react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover | `221.825 kB`
`62.568 kB` | | react-components
react-components: FluentProvider & webLightTheme | `44.037 kB`
`14.418 kB` | | react-portal-compat
PortalCompatProvider | `8.39 kB`
`2.64 kB` |

🤖 This report was generated against 01a93ee63be8c6120706a227e3e8290766619cce

fabricteam commented 2 weeks ago

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 634 604 5000
Button mount 305 282 5000
Field mount 1153 1122 5000
FluentProvider mount 710 708 5000
FluentProviderWithTheme mount 85 87 10
FluentProviderWithTheme virtual-rerender 32 40 10
FluentProviderWithTheme virtual-rerender-with-unmount 72 74 10
MakeStyles mount 850 858 50000
Persona mount 1761 1701 5000
SpinButton mount 1393 1355 5000
SwatchPicker mount 1499 1526 5000