[figma] Tree View items don't align properly

mui / mui-design-kits

The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.

https://mui.com/design-kits/

109 stars 16 forks source link

[figma] Tree View items don't align properly #55

Closed brookssolveig closed 2 years ago

brookssolveig commented 2 years ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯

In Figma, when Tree List items receive nesting, the text appears at a different indentation depending on if they have a dropdown or not.

Expected behavior 🤔

Figma should match prod. In production, the text of Tree List items display at the same regardless of whether a dropdown is present in the item.

https://mui.com/material-ui/react-tree-view/

Steps to reproduce 🕹

Steps:

Use the Figma file.
Notice that text doesn't align between Tree View items of the same nesting level.

Context 🔦

Provide pixel perfect specs to my engineers.

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

brookssolveig commented 2 years ago

Actually, there's at least one more issue with this Figma component. Prod has more padding than Figma between the left side of the dropdown and the edge of the component.

brookssolveig commented 2 years ago

Got another one. In the example provided, the nesting is incorrect. Since Item 1 has a dropdown and is expanded, I assume Items 2, 3, and 4 are children. If so, Items 2 and 4 should be nested one level deeper.

We can see in prod that nested children without dropdowns visually align with those that do have dropdowns.

danilo-leal commented 2 years ago

Hey, @brookssolveig, thanks for the heads up! I've moved the issue to the design-kits repo — we've been trying to centralize issues regarding them in this separate space for better coordination, so feel free to come here whenever you bump into things about it.

cc @adrianmanea

brookssolveig commented 2 years ago

Hey, @brookssolveig, thanks for the heads up! I've moved the issue to the design-kits repo — we've been trying to centralize issues regarding them in this separate space for better coordination, so feel free to come here whenever you bump into things about it.

cc @adrianmanea

Awesome! I'll post here next time.

adrianmanea commented 2 years ago

Updated in 5.9.0, now items are aligned properly but the values are a bit strange, child items have a 17px margin-left, I wonder why 17 and not the usual multipliers.

oliviertassinari commented 2 years ago

I wonder why 17 and not the usual multipliers.

@adrianmanea True, the spacings look quite strange in v5.10.0:

https://mui.com/material-ui/react-tree-view/#controlled-tree-view