search

zaichaopan / react-aria-components-tailwind-starter

Tailwind react aria components starter kits
https://zaichaopan.github.io/react-aria-components-tailwind-starter
MIT License
29 stars 4 forks source link

Possibly change the size of an Avatar when used as a MenuTrigger? #6

Closed gregmsanderson closed 3 months ago

gregmsanderson commented 3 months ago

Hello again :)

I was playing with the Avatar component and noticed it defaults to a larger size (size-12) than other components (like the button and menu).

As a result when an Avatar is used as a MenuTrigger https://zaichaopan.github.io/tailwind-react-aria-components-starter-kits/?path=/docs/menu--docs#with%20avatar%20trigger (which i imagine is pretty common) that results in the size being noticeably different:

current-size

I was wondering whether you thought either of these options would be a good idea:

1) reduce the default Avatar size a bit so then it would automatically match the height of the other components (without needing to shrink it by adding a custom class) e.g

with-size-9

... or ...

2) When an Avatar is used as a MenuTrigger, have that code spot that and it would reduce its size to be the same height as the text would be. That way "out of the box" it is already aligned 🚀

The user can just override its size of course (like i did) and so it's not a bug, but it's nice to default to matching heights, perhaps.

Thanks!

Greg

zaichaopan commented 3 months ago

I like the idea of reducing the default avatar size a bit. The default height of button is h-9. Size 9 might seem a little smaller for default size. Also the sizes of avatar menus are different depending on where they are used. For example the size on sidebar is most likely different from the one on the top nav bar. Probably size-10 is a good one for default.

gregmsanderson commented 3 months ago

Makes sense!

I checked shadcn (not that it needs to match, but out of interest) and they've gone for size-10 (which works out to 40px) for their Avatar. So that seems good.