๐ Missing Description in a Listbox causes issues with Avatar size
Closed this issue ยท 8 comments
Describe the bug
When a Listbox item has no description and contains an Avatar the Avatar is shrunk and the remaining text is not centered.
Steps to reproduce
Type this in https://orbit.sharegate.design/?path=/docs/listbox--default-story
<Listbox aria-label="Planets">
<Item key="earth">
<Avatar name="Earth" />
<Text>Earth</Text>
</Item>
<Item key="jupiter">
<Avatar name="Jupiter" />
<Text>Jupiter</Text>
<Text slot="description">The fourth-brightest object in the sky</Text>
</Item>
<Item key="mars">
<Avatar name="Mars" />
<Text>Mars</Text>
<Text slot="description">See you in 2026</Text>
</Item>
</Listbox>
Expected results
- The Avatar size is not changed.
- The title is vertically centered.
Upon further investigation the issues lies in the fact that when a listOption has no Description the Avatar size is set to 2xs
, where it's set to md
when such description is present, causing visual inconsistencies when a listbox contains both.
I see some potential solutions:
- Always set the avatar to
sm
as2xs
is very small and not lisible anyway. - As soon as a description is present on any items set all avatars to
sm
. Currently the listBox is not aware of it's children, I don't know if we want to go this route.
I don't think it has to be automated.
When we developed the component, we made a requirement that if an item have a description, they must all have one.
We haven't added any validation mecanism as we thought it doesn't worth the effort.
I think it could be solved simply by enforcing the requirement in the documentation (the Select documentation also)
I think it could be solved simply by enforcing the requirement in the documentation (the Select documentation also)
And the Menu documentation too.
When we developed the component, we made a requirement that if an item have a description, they must all have one.
I managed to make it work back in the days for the non avatar one, the problematic situations is with an Avatar. We don't support a mix and match of avatars no avatars, we probably not support the description / no description either.
Yeah we don't, that's my point. Sorry if it wasn't clear.
I doubt we should. Is there any specific use case right now which requires to mix and match description / no description?
We didn't prioritize this edge case for now. So we won't be dealing with this issue any longer until it surfaces again.
Since we don't support no description on some instances anyways I will close the issue, if the problem ever arise a new discussion will have to happen.