Skip to content

Conversation

@bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented May 12, 2023

Previous Behavior

Currently provided column size on tree item grid auto min-content doesn't allow proper overflowing of the layout content

image image

New Behavior

  1. grid column size redefined to minmax(0px, 100%) minmax(0px, min-content) that allows proper overflowing of the content
image

Related Issue(s)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 703 704 5000
Button mount 402 391 5000
Field mount 1224 1237 5000
FluentProvider mount 765 765 5000
FluentProviderWithTheme mount 104 107 10
FluentProviderWithTheme virtual-rerender 90 92 10
FluentProviderWithTheme virtual-rerender-with-unmount 105 100 10
InfoButton mount 13 21 5000
MakeStyles mount 1198 1203 50000
Persona mount 1946 1892 5000
SpinButton mount 1453 1458 5000

@size-auditor
Copy link

size-auditor bot commented May 12, 2023

Asset size changes

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

Baseline commit: e741b289a0cda2711146d171d3b08deb8bb7a156 (build)

@codesandbox-ci
Copy link

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 9dd4510:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
Fluent UI v9 Tree horizontal overflow Issue #27714

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
64.855 kB
17.852 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.937 kB
57.086 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
🤖 This report was generated against e741b289a0cda2711146d171d3b08deb8bb7a156

@bsunderhus bsunderhus marked this pull request as ready for review May 12, 2023 12:19
@bsunderhus bsunderhus requested a review from a team as a code owner May 12, 2023 12:19
@bsunderhus bsunderhus merged commit be291a2 into microsoft:master May 12, 2023
@bsunderhus bsunderhus deleted the react-tree/bugfix--fix-horizontal-overflow-problem-on-tree branch May 12, 2023 13:46
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 12, 2023
* feat/drawer-header:
  feat: Update existing toasts (microsoft#27827)
  bugfix: fix horizontal overflow on tree (microsoft#27825)
  feat: Allow toast options to be configured from the toaster (microsoft#27820)
  feat: creates TreeItemAside component (microsoft#27701)
  fix: generate API
  fix: use composition to build DrawerHeaderTitle
  Virtualizer: Dynamic scroll view and optimizations (microsoft#27298)
  bugfix(react-dialog): change DialogTitle default action icon size (microsoft#27815)
  feat: Implement Toast pause (microsoft#27811)
  fix: ToolbarToggleButton should not follow Toolbar size (microsoft#27797)
  feat: defers useControllableState state to initializer method (microsoft#27717)
  feat: Implement toast dismiss (microsoft#27810)
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: The horizontal overflow behavior of <Tree> is not well-defined

4 participants