Anatomy
Learn about the individual parts of the record tags component.
Main anatomy
- Icon: Shows tag feature status and opens popover to add, delete, or assign tags
- Popover header: Identifies all tags
- Popover: Displays tag search field and any current tags
- "Add tags" title: Identifies search function for tag labels
- Pill: Shows current tags with option to delete
- Label: Shows who can view the record tags
- Search field: Displays tag search and auto-populates text
Modal anatomy
- Container: Includes the header, tag name, and viewing options
- Menu title: Declares tag is visible to all users, specific groups of users, or a single user
- Close icon: Closes the modal and returns to the record
- Dropdown icon: Expands dropdown menu to select viewing status
- Dropdown menu: Offers selections of tag viewing status
- Primary action button: Saves record tag changes
- Secondary action button: Cancels record tag changes
- Value title: Displays current selected viewing status
- Value input: Displays tag name
- Input title: Displays input field name
- Heading: Identifies the modal and its contents
Usage
Learn about the record tags component and how to create, edit, and assign record tags. The user can click the tag icon to bring up the tag popover. In the popover, the user can search for a pre-existing tag and add it to the record.
The user can also click a previously saved record tag (pill) to open the viewing preferences and edit the tag name.
In the popover, the user can delete any tags associated with the record or click a saved record tag that opens the record tag modal.
In the modal, the user can rename the tag, and set record tag sharing levels.
Variants
Learn about the atrributes of record tags.
Types
There is only one type of record tags component, and it always displays within the header of the incident child tab.
Sizes
The record tags component icon has only one size and does not change or truncate in any screen size.
Configurations
Learn how to customize activity stream by configuring the available properties.
Presets and controllers
This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.
Show/hide component
You can choose to show or hide the record tags component based on the experience you're creating for the user.
In this example, the Hide Tags checkbox has been selected
Design recommendations
Learn how to apply the record tags component in your design.
Place the record tag icon next to the header group, so the user understands the group it belongs to.]
Avoid separating the record tag icon from the header group, or the user might not notice its context.
Alignment and positioning
By default, record tags should appear embedded in the record header, unless configured otherwise.
UI text guidelines
These are some recommendations for using text within the record tags component.
- Use sentence case for all titles, labels, and column headers
- Keep all text labels short and informative to increase
- Keep content concise and purposeful to provide value to the user
- Capitalize only the first letter and any proper nouns in a string of
- Ensure content is contextual and specific to offer guidance and
Behavior
Learn how the record tags component behaves when the display changes or a user interacts with the component.
States
The record tags component icon has 4 states: empty state, value state, multiple-value state, and disabled state.
Empty state
In this example, the record tags component icon is empty
Value state
In this example, the record has a single tag
Multiple-value state
In this example, the record has multiple tags
Disabled state
In this example, the record tags component is disabled.
Responsive behaviors
The record tags component icon doesn't change size or orientation and is responsive at all screen sizes. The icon stays left aligned with the header of the incident child tab. The record tags component modal expands to fit an entire screen for mobile layouts.
The popover is not responsive and can't be put in a smaller container than the desktop size.
In this example, the record tags component's responsive layout is displayed when making the container smaller.
Interactions
A user can click the tag icon to initiate a new tag.
A user can type in the value field to search for a tag name in the database.
A user can click a saved tag to open the preferences.
Truncation
When text in the record tags popover exceeds its maximum width, the text truncates with an ellipsis and a tooltip shows the full content on hover.
In this example, the record tags component popover shows truncation of text overflow.
Usability
The record tags component complies with all internationalization and accessibility requirements.
Internationalization
When a popover translates to a right-to-left (RTL) language, the content aligns on the right.
In this example, the record tags component text alignment displays internationally.
Accessibility
Learn how to access the actionable elements of the record tags component through keyboard interactions and screen readers.
Keyboard interactions
- Tab: Allows user to shift the focus of screen elements in sequential order (top to down, right to left, etc.)
- Shift+Tab: Moves focus in the opposite direction of the tabbing focus (for example, focus moves from a record tag menu to the record tag search field).
- Enter/Space: Used to execute all actions/selections.
- Up/Down arrows: When focus is inside the record tag modal, the up and down arrow keys are used to move between the menu options.
Screen readers
When you apply ARIA labels to a component, the screen readers announce the controls and content of the record tags component in the prescribed tab order.
- Search bar: "search field"
- Tag icon: "create new record tag"