Skip to content

Conversation

@Mitch-At-Work
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work commented Feb 27, 2023

Previous Behavior

Currently Virtualizer requires users to implement their own scroll containers, or provide their own logic for resize of windows and ensuring optimal VirtualizerLength parameters.

New Behavior

Users can now use the hooks to measure the body bounds, or provide a scrollview ref to measure the perfect Virtualizer parameters for window size.
Users can now also implement the Virtualizer as a default scrollView with uniform column/row sizes, removing complexity for simple use cases.

Related Issue(s)

  • N/A

ToDo (Future PR):

  • Dynamic hook sizes
  • Dynamic size scrollView
  • Accessibility hooks (Go to first/last/index)

@size-auditor
Copy link

size-auditor bot commented Feb 27, 2023

Asset size changes

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

Baseline commit: 77bb9ec1eeedef91315dee3750bd06b15168c693 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 27, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
67.372 kB
18.188 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.778 kB
57.319 kB
react-components
react-components: FluentProvider & webLightTheme
38.201 kB
12.128 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.185 kB
🤖 This report was generated against 77bb9ec1eeedef91315dee3750bd06b15168c693

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 27, 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 3a81dc1:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 27, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1067 1120 5000
Button mount 684 680 5000
Field mount 1966 2009 5000
FluentProvider mount 1389 1388 5000
FluentProviderWithTheme mount 352 373 10
FluentProviderWithTheme virtual-rerender 288 289 10
FluentProviderWithTheme virtual-rerender-with-unmount 345 346 10
InfoButton mount 246 241 5000
MakeStyles mount 1542 1635 50000
Persona mount 2705 2597 5000
SpinButton mount 2313 2328 5000

@Mitch-At-Work Mitch-At-Work force-pushed the user/mifraser/virtualizer-scroll-hooks branch 3 times, most recently from 7f3a9ed to 4f31318 Compare March 1, 2023 01:14
@Mitch-At-Work Mitch-At-Work marked this pull request as ready for review March 1, 2023 02:12
@Mitch-At-Work Mitch-At-Work requested review from a team as code owners March 1, 2023 02:12
@Hotell Hotell removed their assignment Mar 1, 2023
@Mitch-At-Work Mitch-At-Work force-pushed the user/mifraser/virtualizer-scroll-hooks branch 2 times, most recently from b4d012a to 47a9a46 Compare March 15, 2023 19:04
@Mitch-At-Work Mitch-At-Work requested a review from ling1726 March 15, 2023 20:36
@Mitch-At-Work Mitch-At-Work force-pushed the user/mifraser/virtualizer-scroll-hooks branch from 5df23bf to 65ec330 Compare March 22, 2023 16:59
@Mitch-At-Work Mitch-At-Work merged commit 19801e7 into microsoft:master Mar 22, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 27, 2023
* master: (47 commits)
  fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked (microsoft#27324)
  applying package updates
  Fix: Revert microsoft#26931 change due to new bug it introduced (microsoft#27323)
  chore(react-infobutton): Renaming content slot to info (microsoft#27316)
  applying package updates
  Fix bad release mismatch of react-select (microsoft#27321)
  applying package updates
  Fix react-combobox mismatch after bad release (microsoft#27319)
  docs: add section about media query sorting (microsoft#27307)
  applying package updates
  fix: sync packages and changefiles after bad release (microsoft#27317)
  applying package updates
  chore(react-datepicker-compat): Cleanup types, unused code, and restore utils tests (microsoft#27297)
  [Fluent 2 Theme] Fixing link color in dark theme (microsoft#27203)
  Tree documentation and stories (microsoft#27270)
  feat: Render theme CSS variables in SSR style element (microsoft#27277)
  chore (scripts): update create-package plop templates to use swc/helpers in deps (microsoft#27286)
  fix(DialogContent): adds padding to allow focus visibility (microsoft#27248)
  Adding Card component style hooks to shared context (microsoft#27295)
  Virtualizer: Static scroll hooks and embedded scrollview (microsoft#26985)
  ...
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.

5 participants