gsoft-inc/sg-orbit

🐛 Missing Description in a Listbox causes issues with Avatar size

Closed this issue · 8 comments

fraincs commented

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.

image

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.
fraincs commented

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 as 2xs 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.
patricklafrance commented

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)

fraincs commented

I think it could be solved simply by enforcing the requirement in the documentation (the Select documentation also)

And the Menu documentation too.

fraincs commented

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.

patricklafrance commented

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?

fraincs commented
kcharen commented

We didn't prioritize this edge case for now. So we won't be dealing with this issue any longer until it surfaces again.

fraincs commented

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.