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

[Bug]: Tree - TreeItem leaf and branch are not aligned #28320

Merged
merged 1 commit into from
Jun 28, 2023
Merged

[Bug]: Tree - TreeItem leaf and branch are not aligned #28320

merged 1 commit into from
Jun 28, 2023

Conversation

petdud
Copy link
Contributor

@petdud petdud commented Jun 26, 2023 •
edited
Loading

This PR introduces following changes:

  • Add content slot for children in tree item layout
  • Fixes issue with alignment of tree items by removing column gap and add padding before/after icons and in the content slot
  • Rename main slot in the TreeItemPersonaLayout to content to align with TreeItemLayout component
  • Adds missing layout wrapper in the icon before story example
  • Adds a leaf item in the default tree view

Previous Behavior

before

New Behavior

after

Related Issue(s)

  • Fixes #

@petdud petdud marked this pull request as ready for review June 26, 2023 13:00
@petdud petdud requested a review from a team as a code owner June 26, 2023 13:00
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 26, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 595 597 5000
Button mount 293 299 5000
Field mount 1021 1059 5000
FluentProvider mount 647 650 5000
FluentProviderWithTheme mount 76 83 10
FluentProviderWithTheme virtual-rerender 65 66 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 76 10
InfoButton mount 14 14 5000
MakeStyles mount 865 836 50000
Persona mount 1669 1652 5000
SpinButton mount 1288 1302 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 26, 2023 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme		 65.162 kB
17.952 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 210.395 kB
58.717 kB
react-components
react-components: FluentProvider & webLightTheme		 36.395 kB
11.996 kB
react-portal-compat
PortalCompatProvider		 6.473 kB
2.196 kB
🤖 This report was generated against 55b25f7aabb9db09beb11c61ee334c04c89ada74

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 26, 2023 •
edited
Loading

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

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

@size-auditor
Copy link

size-auditor bot commented Jun 26, 2023 •
edited
Loading

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 353f6d9

Possible causes

  • The baseline build 353f6d9 is broken
  • The Size Auditor run for the baseline build 353f6d9 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@petdud petdud linked an issue Jun 26, 2023 that may be closed by this pull request
[Bug]: TreeItem leaf and branch are not aligned #28254
Closed
2 tasks
@bsunderhus bsunderhus assigned petdud and unassigned bsunderhus and tomi-msft Jun 27, 2023
@bsunderhus bsunderhus self-requested a review June 27, 2023 12:22
@petdud petdud requested a review from a team as a code owner June 28, 2023 09:36
@petdud petdud requested review from a team and GeoffCoxMSFT as code owners June 28, 2023 10:01
@bsunderhus bsunderhus marked this pull request as draft June 28, 2023 10:08
@bsunderhus bsunderhus marked this pull request as ready for review June 28, 2023 10:09
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-jsx-runtime@v9.0.0-alpha.9 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-label@v9.1.18 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-link@v9.0.46 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v9.8.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-migration-v0-v9@v9.0.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-migration-v8-v9@v9.3.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-overflow@v9.0.22 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-persona@v9.2.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-popover@v9.7.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-portal-compat@v9.0.64 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-portal@v9.2.16 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-positioning@v9.7.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-progress@v9.1.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-provider@v9.7.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-radio@v9.1.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-select@v9.1.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-skeleton@v9.0.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-slider@v9.1.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-spinbutton@v9.2.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-spinner@v9.2.5 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-switch@v9.1.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-table@v9.4.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabs@v9.3.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabster@v9.9.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-text@v9.3.15 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-textarea@v9.3.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-toolbar@v9.1.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tooltip@v9.2.20 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tree@v9.0.0-beta.22 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-virtualizer@v9.0.0-alpha.25 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
Reviewers

@bsunderhus bsunderhus bsunderhus approved these changes

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT

@AtishayMsft AtishayMsft Awaiting requested review from AtishayMsft

Assignees

@petdud petdud

Labels
Component: Tree Fluent UI react-components (v9)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: TreeItem leaf and branch are not aligned
6 participants
@petdud @fabricteam @msft-fluent-ui-bot @bsunderhus @AtishayMsft @tomi-msft