Less prominent status indicator

[davicostalf]

Summary

Currently we have tags, but they only work well in less information dense tables, right next to the menu. Should we have a more discrete way to indicate status? Are there studies in other scenarios? When should a regular Tag be used?

Rationale

No response

[beatrizmilhomem]

I've seen lots of studies with a solution similar to your second one when it comes to representing status, I think that it makes sense to have this pattern at this point.

Just as a first suggestion regarding the application, tags could be more category-related.

[elleenvs-d]

I agree with you @davicostalf In my scenario, I used a previous exploration on Catalog (i believe) to indicate Inactive and Active status on API Key UI and it worked well. But for this discussion i think that the icon is not scalable for other status types because the icon reminds something that is/is not 'in live'.

[beatrizmilhomem]

What other types of statuses have been used besides active/inactive?

[elleenvs-d]

Severity could be another type? If so, we had this type to indicate risk degree for findings.

[matheusps]

We can call it StatusDot. A good reference is Vercel Geist.

[beatrizmilhomem]

@elleenvs-d why did you choose to use a custom component in this scenario?

[lafray]

I wanted to mention that we have had apps in the Marketplace that needed a component like this (at the time it was still admin-ui and shorelina didn't exist). And at the time we ended up going for a custom component as well.

I wanted to mention it because I think it would bring a lot of value to have this here in the lib. I believe we would have gone down a more uniform path if this discussion had already been had at the time.

[beatrizmilhomem]

Next step: make a proposal for the component.

[luarakerlen]

We created a StatusIndicator locally to use it at admin ads reports: https://github.com/vtex/admin-ads/pull/125

The possible status, in this case, are: Processing, Error and Available.

@davicostalf asked me to add this here as an architectural proposal.

[lafray]

Você estão vendo esse componente sendo com status mais fechados (como o que tem na doc que o @matheusps trouxe e do que a @luarakerlen trouxe do StatusIndicator) ou algo mais aberto como é a tag do shoreline onde só é definido colors, varianets and size?

Tenho uma preocupação quanto e ter status fechados, pois acho que a vtex tem casos muito diversos onde pode ser dificil de criar um conjunto de status que resoonda bem a maioria dos casos.