diff --git a/aries-site/src/pages/components/tag.mdx b/aries-site/src/pages/components/tag.mdx index 16da4f3f0..f870c88c2 100644 --- a/aries-site/src/pages/components/tag.mdx +++ b/aries-site/src/pages/components/tag.mdx @@ -22,49 +22,39 @@ import { Tag } from 'grommet'; ## Use cases ### Displaying metadata -[Static tags](/components/tag#static) can be used to display non-critical, concise information with -the purpose to annotate or label items.
Tags can contain value only, -or a name value pair to assist with classification. - +[Static tags](/components/tag#static) can be used to display non-critical, concise information with the purpose to annotate or label items.Tags can contain value only, or a name value pair to assist with classification. + + ### Managing metadata + Tags can be created, assigned and [removed](/components/tag#removable) from resources or items by a user. - + ### Filtering + [Interactive tags](/components/tag#interactive) can be activated by mouse or keyboard input to enable quick filtering. Interacting with the tag will display items that share the same assigned value. - + ### Drawing attention -[Highlight tags](/components/tag#highlight) can be used to draw attention to an element on the page. -They are a decorative variant of the [static tag](/components/tag#static). -Highlights should only contain descriptions that are temporary, such as “New”, + +[Highlight tags](/components/tag#highlight) can be used to draw attention to an element on the page. They are a decorative variant of the [static tag](/components/tag#static). Highlights should only contain descriptions that are temporary, such as “New”, “Updated”. As such they should not be used a permanent design feature. - + - - ## Anatomy - -| Label | Region | Purpose | Required | Notes | -| :---: | ------------- | ------------------------------------------------------------ | :------: | ----------------------------------------------------------- | -| **1** | **Container** | Controls padding, border & background color. | Required | Behavior and style will change depending on tag type. | -| **2** | **Name** | Descriptive label or category that identifies what kind of data is stored in the associated value.
For example “Country” or “Color”. | Optional | Up to 128 characters max. | -| **3** | **Value** | The specific descriptive data associated with an item. 
For example “USA” or “Green”. | Required | Up to 256 characters max. | -| **4** | **Close Icon Button** | Used to indicate that tag is removable. | Optional | Required for only removable tags. | - +| Label | Region | Purpose | Required | Notes | +| :---: | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | :------: | ----------------------------------------------------- | +| **1** | **Container** | Controls padding, border & background color. | Required | Behavior and style will change depending on tag type. | +| **2** | **Name** | Descriptive label or category that identifies what kind of data is stored in the associated value.For example “Country” or “Color”. | Optional | Up to 128 characters max. | +| **3** | **Value** | The specific descriptive data associated with an item. For example “USA” or “Green”. | Required | Up to 256 characters max. | +| **4** | **Close Icon Button** | Used to indicate that tag is removable. | Optional | Required for only removable tags. | ## Types ### Static + + + + + - Contains simple, concise information used to annotate, categorize, group or otherwise label items. -- Used to display secondary or supplementary information related to an object or item. -- Can be used to communicate the state or condition of something (e.g. published, deployed, new, updated, etc.). State is defined [here](/components/notification#taxonomy). +- Used to display secondary or supplementary information related to an object or item. +- Can be used to communicate the state or condition of something (e.g. published, deployed, new, updated, etc.). State is defined in [notification taxonomy](/components/notification#taxonomy). - A tag should not be used to convey system status, that is considered primary information. - Static tags are not interactive in any way. - - - +### Interactive + + {}} value="Interactive" /> + -### Interactive - Interactive tags enable users to discover, filter, or navigate to identically tagged items. - An interactive tag can be actioned by mouse or keyboard. - - {}} value="Interactive" /> - - ### Removable + + {}} /> + + - A removable tag is interactive via the "Close" icon button. - Can be used to dismiss a category/value set from a filtered view. - Can be used to remove a value that has been assigned to an item or resource. - - {}} /> - ### Highlight + + + + - Used to indicate a temporary or transient state associated with an item - eg new, updated, promotional. - Draws attention but is no louder than a secondary/primary button. - A highlight tag is not interactive in any way. - A tags size should be limited to x-small or small. - Use “primary/blue” border for highlight tags. This treatment should be used sparingly. - - - - ## Accessibility - -| Key | Interaction | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| **Tab** | Used to navigate between interactive tags. Focuses on tag if it is selectable. When there is a close icon present, icon receives focus. For read-only, screen reader will read alongside content from where it lives. | -| **Space/Enter** | For interactive tags, selects the tag. For removable tags, remove the tag. | +| Key | Interaction | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Tab** | Used to navigate between interactive tags. Focuses on tag if it is selectable. When there is a close icon present, icon receives focus. For read-only, screen reader will read alongside content from where it lives. | +| **Space/Enter** | For interactive tags, selects the tag. For removable tags, remove the tag. |