kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 03:09:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
2c6aefabd7
afv-library/skills/design-systems-slds-apply/assets/blueprints/components/docked-utility-bar.yaml

176 lines
11 KiB
YAML
Raw Blame History

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.'
Reference in New Issue View Git Blame Copy Permalink