Tag

[airikej]

Figma design?node-id=2405-49830&m=dev)

Community Tag component will break into 2 components: Badge and Tag:

• A badge is a status label that indicates the state of a process, person, document, or something similar. It provides the user with information about which stage the given process is in.
• A tag displays keywords, topics, applied filters, or other selections related to a document

New simplified Tag component would have API like this:

Name	Required/Optional	Descrption	Type	Possible values	Default
children	Required	Any content to be rendered within the tag component	React.ReactNode \| React.ReactNode[]
className	Optional	Additional class name(s) to apply to the element	string
onClose	Optional	Callback fired when the Tag close button is clicked	MouseEventHandler<HTMLButtonElement>
isLoading	Optional	If Tag has loading state	boolean		false

[kasparsuvi1]

1. Should it also have isLoading property? For example if we want to use this new Tag in fileUpload, we should indicate how long the file is loading? (with spinner)
2. will it be replaced in Community components? Which ones?

[airikej]

1. Sounds like a reasonable suggestion for me but have to discuss this with TEDI team
2. This component is tricky and can't be replaced so straight forwardly so we would have to leave Community-s Tag to Community right now and change them while we are bringing more components over to Tedi-ready

[karolin-kivisikk]

1. Should it also have isLoading property? For example if we want to use this new Tag in fileUpload, we should indicate how long the file is loading? (with spinner)
2. will it be replaced in Community components? Which ones?

@kasparsuvi1 you mean loader like this?

[airikej]

Upgraded the API regarding to isLoading prop