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-composer.yaml

202 lines
13 KiB
YAML
Raw Normal View History

feat: Release Skills Renaming by domain first convention @W-23187998@
2026-06-26 20:21:51 +08:00
name: Docked Composer
description: A persistent composition interface that remains docked at the bottom of the screen, allowing users to create
content (emails, messages, posts) while maintaining context of their current workflow.
category: Overlay
slds_classes:
root: slds-docked-composer
elements:
- class: slds-docked-composer__header
description: Header section of the docked composer
purpose: Contains title, status indicators, and header controls
- class: slds-docked-composer__body
description: Main content area of the composer
purpose: Contains the primary composition interface and controls
- class: slds-docked-composer__footer
description: Footer section with action buttons
purpose: Contains send, save, and other action buttons
- class: slds-docked-composer__lead
description: Lead content area within composer
purpose: Primary content or recipient information
- class: slds-docked-composer__toolbar
description: Toolbar for composer actions
purpose: Contains formatting and composition tools
modifiers: []
states:
- class: slds-is-open
description: Expanded composer state
trigger: Applied when composer is expanded and active
- class: slds-is-closed
description: Minimized composer state
trigger: Applied when composer is minimized
variants:
- name: Base
description: Standard docked composer for general composition
classes:
- slds-docked-composer
usage_context: Default implementation for content composition
differences: Basic composer with header, body, and footer
- name: Email
description: Email-specific docked composer
classes:
- slds-docked-composer
usage_context: For email composition workflows
differences: Email-specific fields and formatting options
- name: Task
description: Task creation docked composer
classes:
- slds-docked-composer
usage_context: For task and reminder creation
differences: Task-specific fields and controls
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-modal
or lightning-card patterns
accessibility:
keyboard_support:
- Tab navigation through composer elements
- Enter/Space to activate buttons and controls
- Escape to minimize or close composer
- Arrow keys for toolbar navigation
screen_reader:
- Composer purpose and state announced
- Form fields and labels properly associated
- Action buttons clearly described
- Status updates communicated
aria_attributes:
- role='dialog' for composer container
- aria-labelledby for composer title
- aria-describedby for composer content
- aria-expanded for minimize/expand state
- aria-live for status updates
usage_guidelines:
when_to_use:
- For content composition that shouldn't interrupt workflow
- When users need to reference other content while composing
- For email, message, or document creation
- When composition is a secondary task
when_not_to_use:
- For simple, quick inputs (use modal instead)
- When composition is the primary task
- On small screens with limited space
best_practices:
- Provide clear minimize/maximize controls
- Save draft content automatically
- Allow multiple composers when appropriate
- Maintain scroll position when minimized
- Provide clear send/save actions
common_mistakes:
- Blocking user interaction with underlying content
- Not saving drafts automatically
- Poor mobile responsive behavior
- Unclear composer state indicators
code_examples:
- title: Basic Docked Composer
description: Standard docked composer for general content creation
code: "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"composer-title\" aria-describedby=\"\
composer-body\">\n <header class=\"slds-docked-composer__header\">\n <div class=\"slds-media slds-media_center\"\
>\n <div class=\"slds-media__figure\">\n <span class=\"slds-icon_container slds-icon-standard-email\"\
>\n <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"\
></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-media__body\">\n \
\ <h2 id=\"composer-title\" class=\"slds-truncate slds-text-heading_small\">New Email</h2>\n </div>\n\
\ <div class=\"slds-media__figure slds-media__figure_reverse\">\n <div class=\"slds-button-group\"\
>\n <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Minimize\">\n \
\ <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#minimize_window\"\
></use>\n </svg>\n <span class=\"slds-assistive-text\">Minimize composer</span>\n \
\ </button>\n <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Expand\"\
>\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"\
></use>\n </svg>\n <span class=\"slds-assistive-text\">Expand composer</span>\n \
\ </button>\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 composer</span>\n \
\ </button>\n </div>\n </div>\n </div>\n </header>\n <div class=\"slds-docked-composer__body\"\
\ id=\"composer-body\">\n <div class=\"slds-form-element slds-m-bottom_small\">\n <label class=\"slds-form-element__label\"\
\ for=\"composer-to\">To</label>\n <div class=\"slds-form-element__control\">\n <input type=\"email\"\
\ id=\"composer-to\" class=\"slds-input\" placeholder=\"Enter recipient email\">\n </div>\n </div>\n \
\ <div class=\"slds-form-element slds-m-bottom_small\">\n <label class=\"slds-form-element__label\" for=\"\
composer-subject\">Subject</label>\n <div class=\"slds-form-element__control\">\n <input type=\"text\"\
\ id=\"composer-subject\" class=\"slds-input\" placeholder=\"Enter subject\">\n </div>\n </div>\n \
\ <div class=\"slds-form-element\">\n <label class=\"slds-form-element__label\" for=\"composer-message\">Message</label>\n\
\ <div class=\"slds-form-element__control\">\n <textarea id=\"composer-message\" class=\"slds-textarea\"\
\ rows=\"10\" placeholder=\"Enter your message\"></textarea>\n </div>\n </div>\n </div>\n <footer\
\ class=\"slds-docked-composer__footer\">\n <div class=\"slds-grid slds-grid_align-spread\">\n <div class=\"\
slds-col\">\n <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Attach file\"\
>\n <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#attach\"\
></use>\n </svg>\n <span class=\"slds-assistive-text\">Attach file</span>\n </button>\n\
\ </div>\n <div class=\"slds-col slds-no-flex\">\n <div class=\"slds-button-group\">\n \
\ <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n <button class=\"slds-button\
\ slds-button_brand\">Send</button>\n </div>\n </div>\n </div>\n </footer>\n </section>\n"
- title: Minimized Docked Composer
description: Docked composer in minimized state
code: "<section class=\"slds-docked-composer slds-is-closed\" role=\"dialog\" aria-labelledby=\"composer-min-title\">\n\
\ <header class=\"slds-docked-composer__header\">\n <div class=\"slds-media slds-media_center\">\n \
\ <div class=\"slds-media__figure\">\n <span class=\"slds-icon_container slds-icon-standard-email\">\n \
\ <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"\
></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-media__body\">\n \
\ <h2 id=\"composer-min-title\" class=\"slds-truncate slds-text-heading_small\">Draft - New Email</h2>\n \
\ </div>\n <div class=\"slds-media__figure slds-media__figure_reverse\">\n <button class=\"slds-button\
\ slds-button_icon slds-button_icon-border\" title=\"Expand\">\n <svg class=\"slds-button__icon\" aria-hidden=\"\
true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"></use>\n \
\ </svg>\n <span class=\"slds-assistive-text\">Expand composer</span>\n </button>\n \
\ </div>\n </div>\n </header>\n </section>\n"
- title: Task Composer
description: Docked composer configured for task creation
code: "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"task-composer-title\">\n \
\ <header class=\"slds-docked-composer__header\">\n <div class=\"slds-media slds-media_center\">\n \
\ <div class=\"slds-media__figure\">\n <span class=\"slds-icon_container slds-icon-standard-task\">\n \
\ <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#task\"\
></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-media__body\">\n \
\ <h2 id=\"task-composer-title\" class=\"slds-truncate slds-text-heading_small\">New Task</h2>\n </div>\n\
\ <div class=\"slds-media__figure slds-media__figure_reverse\">\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 composer</span>\n </button>\n </div>\n \
\ </div>\n </header>\n <div class=\"slds-docked-composer__body\">\n <div class=\"slds-form-element\
\ slds-m-bottom_small\">\n <label class=\"slds-form-element__label\" for=\"task-subject\">Task Subject</label>\n\
\ <div class=\"slds-form-element__control\">\n <input type=\"text\" id=\"task-subject\" class=\"slds-input\"\
\ placeholder=\"Enter task subject\">\n </div>\n </div>\n <div class=\"slds-form-element slds-m-bottom_small\"\
>\n <label class=\"slds-form-element__label\" for=\"task-due-date\">Due Date</label>\n <div class=\"\
slds-form-element__control\">\n <input type=\"date\" id=\"task-due-date\" class=\"slds-input\">\n \
\ </div>\n </div>\n <div class=\"slds-form-element\">\n <label class=\"slds-form-element__label\"\
\ for=\"task-description\">Description</label>\n <div class=\"slds-form-element__control\">\n <textarea\
\ id=\"task-description\" class=\"slds-textarea\" rows=\"6\" placeholder=\"Enter task description\"></textarea>\n \
\ </div>\n </div>\n </div>\n <footer class=\"slds-docked-composer__footer\">\n <div class=\"\
slds-grid slds-grid_align-end\">\n <div class=\"slds-col slds-no-flex\">\n <div class=\"slds-button-group\"\
>\n <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n <button class=\"\
slds-button slds-button_brand\">Create Task</button>\n </div>\n </div>\n </div>\n </footer>\n\
\ </section>\n"
dependencies:
css_files:
- docked-composer.css
- form-element.css
- button.css
- input.css
- textarea.css
javascript:
- docked-composer.js
icons:
- standard-sprite.svg
- utility-sprite.svg
other_components:
- form-element
- button
- input
- textarea
related_components:
- name: Modal
relationship: alternative
description: Alternative for full-screen composition
- name: Rich Text Editor
relationship: depends-on
description: Often includes rich text editing capabilities
- name: Form Element
relationship: container
description: Contains form elements for data input
references:
official_docs: https://v1.lightningdesignsystem.com/components/docked-composer/
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 Copy Permalink