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(Overflow): Support margin and gaps to space overflow items #33929

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Feb 28, 2025

Leverages caching of window.getComputedStyle to pull computed CSS margins and gaps so that users no longer have to use a wrapper with padding to add regular spacing to overflow items. Even items that are affected by both a gap and a margin should be supported

Since we're not too sure yet of the impact of window.getComputedStyle for perf and for the functionality - this feature is an opt-in under the following props to the OverflowComponent:

  • measureGap
  • boxModel - use the value inline-margin

Fixes #23066

@ling1726 ling1726 marked this pull request as ready for review February 28, 2025 18:32
@ling1726 ling1726 requested review from a team as code owners February 28, 2025 18:32
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
priority-overflow
createOverflowManager
4.481 kB
1.864 kB
5.422 kB
2.122 kB
941 B
258 B
react-components
react-components: entire library
1.174 MB
293.991 kB
1.175 MB
294.328 kB
1.121 kB
337 B
react-overflow
hooks only
12.832 kB
4.828 kB
13.833 kB
5.1 kB
1.001 kB
272 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-breadcrumb
@fluentui/react-breadcrumb - package
114.719 kB
31.752 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.638 kB
20.24 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.271 kB
65.211 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
🤖 This report was generated against c28f7314c8a967a0f6f7bd6e4a7df9a5ab7703fc

Copy link

Pull request demo site: URL

@@ -9,6 +9,8 @@ export function createOverflowManager(): OverflowManager;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full - High Contrast.chromium.png 2231 Changed

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.

priority-overflow should be able to handle gaps and regular margins
2 participants