Workspace global search tab

Anatomy

Learn about the individual parts of the workspace global search tab component.

One or more results anatomy

In this case, the anatomy shows one or more search results that display.

1. Search results message: Indicates total number of results, unless toggled off, and search term.
2. Source content section header: Includes name of the content source and indicates number of results returned for the specific content source, unless toggled off.
3. Source content section: All the search results displayed in result cards for a specific content source.
4. Search result card: A single search result for a specific content source. Clicking on a result will navigate the user to the element in context on a new page outside of the context of this component.
5. Source drilldown: Always includes text "View all [Content Source]". Clicking on this text brings the user to the Results Drilldown which displays all results for the matching content source.
6. Source navigation pane: This is the navigation pane on the right of the page that includes all clickable Source Navigation Options to provide a means for quick navigation between source content sections.
7. Source navigation option: Clicking on a Source Navigation Option allows the user to quickly navigate to the matching content source section. Includes text [Source Content] [number of matching results] by default. If the option to hide search result counts is used, the number of matching results will be excluded.
8. Search results content pane: Includes all search results. This pane scrolls separately from the Source Navigation Pane.

Results drilldown anatomy

In this case, the anatomy shows that once a user clicks on a source drilldown, they are navigated to a page that contains all results matching that source content.

1. Back control: Clicking on this returns the user to the workspace global search tab page overview.
2. Source content section: All the search results displayed in result cards for a specific content source.
3. Pagination: Displays up to 25 results per page by default. The number of search results can be configured via the workspace global search tab configuration table.

No results anatomy

In this case, the anatomy shows the empty state when there are no search results to display.

1. Empty state graphic: Graphic for no results scenario.
2. Empty state message: Indicates no results returned for search term used

Subcomponents

See the usage guidelines for button bare.

See the usage guidelines for pagination control.

Usage

The workspace global search tab component is only intended for use within workspace in conjunction with the workspace search input configured in the chrome header.

Configurations

Learn how to customize the workspace global search tab by configuring the available properties.

Hide search result counts

By default, search result counts are displayed for the total number of results at the top of the page, for each source content section and each source navigation option in the source navigation pane. If the option to hide search result counts is toggled on, then the counts are removed from all of these areas. There is no configuration option to control this by page element. This toggle controls counts in all areas.

View configurations

The number of items displayed on the search results overview or drilldown can be configured in the workspace global search configuration table.

Design recommendations

Learn how to apply the workspace global search tab component in your design.

Alignment and positioning

The workspace global search tab component always covers the full page, without other margins or padding.

UI text guidelines

These are some recommendations for using text within the workspace global search tab component.

• Use sentence case for all titles, labels, and column headers
• Keep all text labels informative and short to increase readability and scanning
• Keep content concise and purposeful to help a user understand options and actions
• Capitalize only the first letter and any proper nouns in a string of text
• Use plain language and avoid slang, vague, or complex descriptions a user might misinterpret
• Limit using abbreviations and acronyms (and always include full spelling with an acronym's first appearance on a page)
• Ensure content is contextual and specific to offer guidance and support to the user

Behavior

Learn how workspace global search tab component behaves when the display changes or a user interacts with the component.

States

The workspace global search tab component has 2 hover states: one for the search result card and the other for the source content section header info icon.

Search result card hover

Hovering over the search result card will change the card background to the pre-defined color variable.

Responsive behaviors

The workspace global search tab component automatically resizes to fit its container. If the pane has more vertical content than space, it displays a vertical scrollbar. If it has more horizontal content than space, it displays a horizontal scroll bar.

Interactions

Learn how the workspace global search tab component responds when a user interacts with it.

Source navigation option

When the user clicks on a source navigation option in the source navigation pane, the page auto scrolls to the location on the page where the corresponding source content exists in the search results. The content of the page does not change, only the user position within the page is updated.

Source drilldown

Clicking the "View all [Content Source]" brings the user to the results drilldown, which displays all results for the matching content source.

Search result card

Clicking the search result card opens that record as a new parent tab.

Truncation

When text in the search results message exceeds the width of the container or content area, the text truncates with an ellipsis, and a tooltip shows the full content on hover.

Usability

The workspace global search tab component complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the search results content pane and source navigation pane flip their orientation and right align.

Accessibility

Keyboard interactions

You can access the actionable elements of action bar with these keyboard keys:

• Tab: Shifts focus left to right through the search results content pane. Once the bottom of the content pane is reached, focus will shift to the source navigation pane and move top down.
• Shift + Tab: Shifts focus right to left through the search results content pane.
• Enter: Launches the action in focus.