Change tag component so it supports different states

[inesdgomes]

Hi @beatrizmartinmartins We need the tag component to be a bit more versatile. The use case is: we need to use the tag to show an event status. For example, the event can be: a) scheduled; b) starting in X min; c) live; d) interrupted; e) ended.

Please see here a design test that Davide, who's implementing the design system on ILO Live, did: https://www.figma.com/design/ulu2zb7ZOuT4VXu4M7Yp98/ILO-Live?node-id=65-3247&node-type=section&t=VcjLOH4WlNhcaEO2-0

Could you please:

• Review the proposal
• Make any improvements
• Integrate the changes in the component using more agnostic labels for the different colours/states

Both Justin and I are happy with the proposal, we just think the 'Starting' status should be emphatic. Perhaps purple?

[beatrizmartinmartins]

Honestly, I'd rather create another component called Status Tag, because the Tag one is clicable and navigationable while this status one is not, and can not be deleted or anything like that. Wouldn't it be better to have them separate so we are able to use the Hover, Focus, etc states for the Tag, while on the Status one, we just need the states for Live, Schedule, etc? @inesdgomes @justintemps I did made a version of them here, but since they can't be removed, we are lacking some variants there that look weird.

[inesdgomes]

@beatrizmartinmartins Thanks - yes, let's create a new component, please.

[beatrizmartinmartins]

done. please check here @inesdgomes

[inesdgomes]

Thanks @beatrizmartinmartins. @justintemps Beatriz created a new component for the status that can be used in ILO Live. She suggested we do this, instead of trying to adapt the tag component, because the tag component is clickable and requires different status (active, hover, focus, reset), whereas we only need the status to be informative. Please check here and let us know if this can be moved to development.

[justintemps]

Hey @inesdgomes and @beatrizmartinmartins this is fine design-wise, but how should we refer to these different states? It doesn't seem like we should call them by colors...

[inesdgomes]

Hi @beatrizmartinmartins See Justin's comment above. Do you agree with these labels? And if so, could you please update the designs?
Light green --> Active
Light blue --> Info
Red --> Alert
Light red --> Subtle Alert
Grey --> Inactive

[beatrizmartinmartins]

@inesdgomes change done on the component properties. Check here

[inesdgomes]

Thanks! @justintemps Labels are added.

[inesdgomes]

@beatrizmartinmartins Before this moves to development, could you look at these comments from Davide? https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf?node-id=4579-8211#1085725366

[inesdgomes]

@beatrizmartinmartins Davide suggested that we have a small version of the tags. As discussed, please check if it's needed.

[inesdgomes]

@beatrizmartinmartins Apologies, I just saw your comment about the tag size in the new event card. Will get back to you on this.