mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
176 lines
11 KiB
YAML
176 lines
11 KiB
YAML
|
name: Docked Utility Bar
|
||
|
|
description: A persistent utility panel that remains docked at the bottom or side of the screen, providing quick access to
|
||
|
|
frequently used tools, actions, and information without interrupting the primary workflow.
|
||
|
|
category: Actions
|
||
|
|
slds_classes:
|
||
|
|
root: slds-utility-bar_container
|
||
|
|
elements:
|
||
|
|
- class: slds-utility-bar
|
||
|
|
description: Fixed bar at the bottom of viewport that contains items
|
||
|
|
purpose: Main utility bar element with fixed positioning and background
|
||
|
|
- class: slds-utility-bar__item
|
||
|
|
description: Individual utility item that invokes specific utility bar panel
|
||
|
|
purpose: Represents a single utility tool or action
|
||
|
|
- class: slds-utility-bar__action
|
||
|
|
description: Action button within utility bar
|
||
|
|
purpose: Interactive element for utility functions
|
||
|
|
- class: slds-utility-bar__text
|
||
|
|
description: Text content within utility bar actions
|
||
|
|
purpose: Contains label text for utility actions
|
||
|
|
modifiers:
|
||
|
|
- class: slds-utility-bar__item_pop-out
|
||
|
|
description: Modifier for utility item with panel popped out in new window
|
||
|
|
usage: When utility panel is opened in a separate window
|
||
|
|
states:
|
||
|
|
- class: slds-is-active
|
||
|
|
description: Active utility action state
|
||
|
|
trigger: Applied to currently active utility action
|
||
|
|
- class: slds-indicator_unread
|
||
|
|
description: Unread notification indicator
|
||
|
|
trigger: Applied when utility has unread notifications
|
||
|
|
variants:
|
||
|
|
- name: Base
|
||
|
|
description: Standard docked utility bar fixed at bottom of viewport
|
||
|
|
classes:
|
||
|
|
- slds-utility-bar_container
|
||
|
|
- slds-utility-bar
|
||
|
|
usage_context: Default implementation for utility access
|
||
|
|
differences: Fixed horizontal utility bar at bottom of screen
|
||
|
|
- name: With Pop-out
|
||
|
|
description: Utility bar item with panel popped out in new window
|
||
|
|
classes:
|
||
|
|
- slds-utility-bar__item
|
||
|
|
- slds-utility-bar__item_pop-out
|
||
|
|
usage_context: When utility panel is opened in a separate window
|
||
|
|
differences: Visual indicator showing panel is popped out
|
||
|
|
lightning_component:
|
||
|
|
name: No direct component
|
||
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
||
|
|
mapping_notes: No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-button-group
|
||
|
|
patterns
|
||
|
|
accessibility:
|
||
|
|
keyboard_support:
|
||
|
|
- Tab navigation through utility items
|
||
|
|
- Enter/Space to activate utility actions
|
||
|
|
- Arrow keys for utility bar navigation
|
||
|
|
- Escape to close expanded panels
|
||
|
|
screen_reader:
|
||
|
|
- Utility bar purpose and items announced
|
||
|
|
- Panel expansion state communicated
|
||
|
|
- Utility actions clearly described
|
||
|
|
aria_attributes:
|
||
|
|
- role='toolbar' for utility bar container
|
||
|
|
- role='button' for utility actions
|
||
|
|
- aria-expanded for expandable utilities
|
||
|
|
- aria-label for utility descriptions
|
||
|
|
- aria-controls for panel relationships
|
||
|
|
usage_guidelines:
|
||
|
|
when_to_use:
|
||
|
|
- For frequently accessed tools and utilities
|
||
|
|
- When users need persistent access to functions
|
||
|
|
- For secondary tools that support primary workflows
|
||
|
|
- To provide quick actions without navigation
|
||
|
|
when_not_to_use:
|
||
|
|
- For primary navigation (use main navigation)
|
||
|
|
- For infrequently used features
|
||
|
|
- When screen space is severely limited
|
||
|
|
best_practices:
|
||
|
|
- Include only essential utilities
|
||
|
|
- Provide clear icons and labels
|
||
|
|
- Allow customization of utility order
|
||
|
|
- Handle responsive behavior gracefully
|
||
|
|
- Maintain consistent interaction patterns
|
||
|
|
common_mistakes:
|
||
|
|
- Overcrowding with too many utilities
|
||
|
|
- Unclear or ambiguous utility icons
|
||
|
|
- Poor responsive behavior on small screens
|
||
|
|
- Inconsistent interaction patterns
|
||
|
|
code_examples:
|
||
|
|
- title: Basic Docked Utility Bar
|
||
|
|
description: Standard utility bar with common tools and actions
|
||
|
|
code: "<div class=\"\" role=\"toolbar\" aria-label=\"Utility tools\">\n <div class=\"\">\n <div class=\"\">\n\
|
||
|
|
\ <button class=\"slds-button slds-button_icon\" aria-expanded=\"false\" aria-controls=\"utility-panel-1\" title=\"\
|
||
|
|
Notes\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#note\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Open notes utility</span>\n </button>\n\
|
||
|
|
\ </div>\n <div class=\"\">\n <button class=\"slds-button slds-button_icon slds-is-active\" aria-expanded=\"\
|
||
|
|
true\" aria-controls=\"utility-panel-2\" title=\"Calculator\">\n <svg class=\"slds-button__icon\" aria-hidden=\"\
|
||
|
|
true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#calculator\"></use>\n \
|
||
|
|
\ </svg>\n <span class=\"slds-assistive-text\">Open calculator utility</span>\n </button>\n \
|
||
|
|
\ </div>\n <div class=\"\">\n <button class=\"slds-button slds-button_icon\" aria-expanded=\"false\"\
|
||
|
|
\ aria-controls=\"utility-panel-3\" title=\"Timer\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\"\
|
||
|
|
>\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#clock\"></use>\n </svg>\n \
|
||
|
|
\ <span class=\"slds-assistive-text\">Open timer utility</span>\n </button>\n </div>\n \
|
||
|
|
\ <div class=\"\">\n <button class=\"slds-button slds-button_icon\" title=\"Help\">\n <svg class=\"\
|
||
|
|
slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#help\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Open help</span>\n </button>\n \
|
||
|
|
\ </div>\n </div>\n </div>\n"
|
||
|
|
- title: Utility Bar with Expanded Panel
|
||
|
|
description: Utility bar with an expanded utility panel showing detailed content
|
||
|
|
code: "<div class=\"slds-is-open\" role=\"toolbar\" aria-label=\"Utility tools\">\n <div class=\"\" id=\"utility-panel-calculator\"\
|
||
|
|
\ role=\"dialog\" aria-labelledby=\"panel-title\">\n <header class=\"\">\n <h2 id=\"panel-title\" class=\"\
|
||
|
|
slds-text-heading_small\">Calculator</h2>\n <button class=\"slds-button slds-button_icon slds-button_icon-border\"\
|
||
|
|
\ title=\"Close\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"\
|
||
|
|
/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n </svg>\n <span class=\"slds-assistive-text\"\
|
||
|
|
>Close calculator</span>\n </button>\n </header>\n <div class=\"\">\n <div class=\"slds-grid\
|
||
|
|
\ slds-grid_vertical\">\n <div class=\"slds-col\">\n <input type=\"text\" class=\"slds-input slds-text-align_right\"\
|
||
|
|
\ value=\"0\" readonly aria-label=\"Calculator display\">\n </div>\n <div class=\"slds-col slds-m-top_small\"\
|
||
|
|
>\n <div class=\"slds-grid slds-wrap\">\n <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\"\
|
||
|
|
>\n <button class=\"slds-button slds-button_neutral slds-size_1-of-1\">7</button>\n </div>\n\
|
||
|
|
\ <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n <button class=\"\
|
||
|
|
slds-button slds-button_neutral slds-size_1-of-1\">8</button>\n </div>\n <div class=\"slds-col\
|
||
|
|
\ slds-size_1-of-4 slds-p-around_xx-small\">\n <button class=\"slds-button slds-button_neutral slds-size_1-of-1\"\
|
||
|
|
>9</button>\n </div>\n <div class=\"slds-col slds-size_1-of-4 slds-p-around_xx-small\">\n\
|
||
|
|
\ <button class=\"slds-button slds-button_brand slds-size_1-of-1\">÷</button>\n </div>\n\
|
||
|
|
\ </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"\">\n \
|
||
|
|
\ <div class=\"\">\n <button class=\"slds-button slds-button_icon\" title=\"Notes\">\n <svg class=\"\
|
||
|
|
slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#note\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Notes</span>\n </button>\n \
|
||
|
|
\ </div>\n <div class=\"\">\n <button class=\"slds-button slds-button_icon slds-is-active\" aria-expanded=\"\
|
||
|
|
true\" title=\"Calculator\">\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"\
|
||
|
|
/assets/icons/utility-sprite/svg/symbols.svg#calculator\"></use>\n </svg>\n <span class=\"slds-assistive-text\"\
|
||
|
|
>Calculator (Active)</span>\n </button>\n </div>\n </div>\n </div>\n"
|
||
|
|
- title: Vertical Utility Bar
|
||
|
|
description: Vertically oriented utility bar for side placement
|
||
|
|
code: "<div class=\"\" role=\"toolbar\" aria-label=\"Utility tools\">\n <div class=\"\">\n <div class=\"\">\n\
|
||
|
|
\ <button class=\"slds-button slds-button_icon\" title=\"Bookmarks\">\n <svg class=\"slds-button__icon\"\
|
||
|
|
\ aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#bookmark\"></use>\n\
|
||
|
|
\ </svg>\n <span class=\"slds-assistive-text\">Bookmarks</span>\n </button>\n </div>\n\
|
||
|
|
\ <div class=\"\">\n <button class=\"slds-button slds-button_icon\" title=\"Recent Items\">\n \
|
||
|
|
\ <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#recent\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Recent Items</span>\n </button>\n\
|
||
|
|
\ </div>\n <div class=\"\">\n <button class=\"slds-button slds-button_icon\" title=\"Search\">\n\
|
||
|
|
\ <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#search\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Search</span>\n </button>\n \
|
||
|
|
\ </div>\n </div>\n </div>\n"
|
||
|
|
dependencies:
|
||
|
|
css_files:
|
||
|
|
- docked-utility-bar.css
|
||
|
|
- button.css
|
||
|
|
- grid.css
|
||
|
|
- panel.css
|
||
|
|
javascript:
|
||
|
|
- docked-utility-bar.js
|
||
|
|
icons:
|
||
|
|
- utility-sprite.svg
|
||
|
|
other_components:
|
||
|
|
- button
|
||
|
|
- grid
|
||
|
|
- panel
|
||
|
|
related_components:
|
||
|
|
- name: Docked Composer
|
||
|
|
relationship: similar
|
||
|
|
description: Similar docked interface concept
|
||
|
|
- name: Global Header
|
||
|
|
relationship: alternative
|
||
|
|
description: Alternative location for utility access
|
||
|
|
- name: Button Group
|
||
|
|
relationship: depends-on
|
||
|
|
description: Uses button group patterns for utility items
|
||
|
|
references:
|
||
|
|
official_docs: https://v1.lightningdesignsystem.com/components/docked-utility-bar/
|
||
|
|
metadata:
|
||
|
|
version: 1.0.0
|
||
|
|
last_updated: '2025-11-12'
|
||
|
|
review_status: complete
|
||
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|