UI shell left panel background color token
The UI shell left panel background color uses the color token `$background`. The UI Shell can be customized to use any of the four IBM themes by applying an inline theme to the shell zone.
ui shell header
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
UI shell left panel link colors in all states
Link colors in the UI shell left panel vary by state: Enabled state uses `$text-secondary` for text color and `$icon-secondary` for icon color. Hover state uses `$background-hover` for background, `$text-primary` for text, and `$icon-primary` for icon. Focus state uses `$focus` for border. Active state uses `$background-active` for background, `$text-primary` for text, and `$icon-primary` for icon. Selected state uses `$background-selected` for background, `$text-primary` for text, `$icon-primary` for icon, and `$border-interactive` for border.
UI shell left panel sub-menu item colors in all states
Sub-menu item colors in the UI shell left panel vary by state: Enabled state uses `$text-secondary` for text color. Hover state uses `$background-hover` for background and `$text-primary` for text. Focus state uses `$focus` for border. Active state uses `$background-active` for background and `$text-primary` for text. Selected state uses `$background-selected` for background, `$text-primary` for text, and `$border-interactive` for border.
UI shell left panel icon colors by state
Icon colors in the UI shell left panel vary by state: Enabled state uses `$icon-secondary`. Hover, Active, and Selected states all use `$icon-primary`.
UI shell left panel typography for menu labels
Menu labels and text in the UI shell left panel should be set in sentence case. Links and sub-menus use font-size 14px / 0.875rem with SemiBold / 600 font-weight using the type token `$heading-compact-01`. Sub-menu items use font-size 14px / 0.875rem with Regular / 400 font-weight using the type token `$body-compact-01`.
UI shell left panel structure and dimensions
The UI shell left panel spans the full height of the browser and is fixed to the left edge of the window. Panel width is 256px / 16rem. Links have a height of 32px / 2rem with padding left and right of 16px / 1rem (spacing token `$spacing-05`). Sub-menus have a height of 32px / 2rem with padding left and right of 16px / 1rem (spacing token `$spacing-05`). Sub-menu items have a height of 32px / 2rem, with padding left of 32px / 2rem (spacing token `$spacing-07`) and padding right of 16px / 1rem (spacing token `$spacing-05`). The selected border width is 4px / 0.25rem. Icons have a size of 16px / 1rem.
UI shell definition and purpose
The Carbon UI shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products. The UI shell is made up of three components: the header, the left panel, and the right panel.
UI shell header primary function
The UI shell header is the foundation for navigating and orienting users to the UI. The header can be used by itself or combined with the UI shell left and right panels for more complex UI navigation.
UI shell header component types
The UI shell header has four types: Header base (has a persistent site title for a single page UI), Header with navigation (includes links and dropdowns for simple navigation), Header with actions (actions or utilities appear as icon buttons for quick access to common utilities), and Header with sidenav (paired with the UI shell left panel for deeper navigation).
When to use UI shell header
Use the UI shell header to identify the UI by name and to provide a globally persistent location for navigational links and utilities.
Header anatomy elements
The UI shell header contains the following elements: hamburger menu (opens product navigation like the left panel, only needed when there is collapsable left navigation), header name (always preceded by 'IBM' for IBM products), header links (product navigation, move to side menu at narrow screen widths), sub-menu (product navigation with down-pointing chevron, opens on click, closes by selecting item, clicking outside, or clicking menu label, chevron points up when open), header utilities (reserved for universal system-level functions like profile, search, notifications), and switcher (allows navigation between products and systems).
Header placement hierarchy from left to right
In the UI shell header, left-to-right translates to product-to-global. The left side contains product-level items. The middle contains system-level controls. The right side contains the most global functions spanning multiple products.
Icon placement and alignment
Icons in the header should always be aligned to the right with no gaps between icons. Icons are not required elements and a product may choose which icons to use.
Header icon positioning order from left to right
Header icons follow this positioning order from left to right: Search (furthest left, allows expanding search field without disrupting other positions), Other icons (number may vary by product), Help (4th from right), Notifications (3rd from right when paired with account and switcher), Account (2nd from right, provides quick access to account from anywhere), Switcher (furthest right, ensures icon does not shift when navigating across systems).
Header name guidelines
The header name should be the name of the parent domain and be as brief as possible while giving the user a sense of place. For IBM products, the header name is always preceded by 'IBM'.
Header links content guidelines
Header links should be unique and clearly describe the content and location they link to. Avoid using verbs as header links, which could imply that an action will be taken when clicking.
Header element target areas
In the UI shell header, element target areas span the full height of the header, providing large clickable zones for mouse interaction.
Header responsive behavior
As the header scales down to smaller screen sizes, header links and menus should collapse into a left-panel hamburger menu. If a left panel is included in the UI, header links should be added above the left panel items, pushing them down accordingly.
Sub-menu behavior and interaction
Sub-menus in the header open on click. They close by either selecting an item in the menu, clicking outside the menu area, or clicking on the menu label again. When open, the chevron should point up; when closed, it points down. Sub-menu labels serve only to open the dropdown and cannot link to another page.
Switcher component purpose
The switcher provides a way for users to easily navigate between products and systems. Recommended uses include recently used apps, frequently used apps, or all apps attached to the user's account.