mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
93 lines
3.8 KiB
YAML
93 lines
3.8 KiB
YAML
name: Activity Timeline
|
|
description: A visual representation of events arranged in chronological order, used to display a sequence of activities or
|
|
milestones with associated metadata.
|
|
category: Display
|
|
slds_classes:
|
|
root: ''
|
|
elements:
|
|
- class: slds-timeline__date
|
|
description: Date/time display for timeline item
|
|
purpose: Shows when the timeline event occurred
|
|
- class: slds-timeline__actions
|
|
description: Actions container for timeline item
|
|
purpose: Contains interactive elements like buttons or links
|
|
modifiers: []
|
|
states: []
|
|
variants:
|
|
- name: Base
|
|
description: Standard activity timeline with chronological events
|
|
classes: []
|
|
usage_context: Default implementation for showing activity history
|
|
differences: Vertical timeline with media objects for each event
|
|
lightning_component:
|
|
name: No direct component
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
|
mapping_notes: No direct Lightning Base Component equivalent - SLDS-only pattern
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab navigation through interactive elements
|
|
- Focus management for embedded actions
|
|
screen_reader:
|
|
- Chronological order conveyed through markup structure
|
|
- Event details properly associated with headings
|
|
- Time/date information announced with events
|
|
aria_attributes:
|
|
- aria-labelledby for timeline item titles
|
|
- role='list' and role='listitem' for semantic structure
|
|
- aria-describedby for additional event details
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- To display chronological sequence of events or activities
|
|
- For showing audit trails or activity logs
|
|
- When temporal relationship between events is important
|
|
- To provide historical context for records or objects
|
|
when_not_to_use:
|
|
- For non-chronological lists (use regular lists instead)
|
|
- When temporal order is not relevant
|
|
- For simple status updates (use feeds instead)
|
|
- When space is extremely constrained
|
|
best_practices:
|
|
- Order events chronologically (newest first or oldest first consistently)
|
|
- Use meaningful icons to categorize different event types
|
|
- Keep event descriptions concise but informative
|
|
- Include relevant timestamps
|
|
- Group related events when appropriate
|
|
common_mistakes:
|
|
- Mixing chronological orders inconsistently
|
|
- Using unclear or non-descriptive event labels
|
|
- Omitting important temporal information
|
|
- Making timeline items too dense with information
|
|
code_examples:
|
|
- title: Basic Timeline Item
|
|
code: "<div class=\"\">\n <div class=\"\">\n <span class=\"\">\n <span class=\"\">\n <svg\
|
|
\ class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"\
|
|
></use>\n </svg>\n </span>\n <div class=\"\">\n <h3 class=\"\">Email sent</h3>\n\
|
|
\ <p class=\"slds-timeline__date\">Today at 2:30 PM</p>\n <div class=\"\">\n <p>Follow-up\
|
|
\ email sent to customer regarding their inquiry.</p>\n </div>\n </div>\n </span>\n </div>\n\
|
|
\ </div>\n"
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- timeline.css
|
|
- media-objects.css
|
|
javascript: []
|
|
icons:
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- media-objects
|
|
- icons
|
|
related_components:
|
|
- name: Feeds
|
|
relationship: alternative
|
|
description: Alternative for activity streams with less temporal emphasis
|
|
- name: Path
|
|
relationship: similar
|
|
description: Similar concept for process progression
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/activity-timeline/
|
|
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.'
|