Activity Timeline
- HTML/CSS:Dev Ready
- Layout:Desktop Only
The activity timeline displays each of the user’s upcoming, current, and past activities.
Base
Preview
About Activity Timeline
Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar.
Note: This new version of activity timeline allows for expandable detail sections on each timeline item. The static version is still supported.
Accessibility
Text describing the type of timeline item is placed in a span
. It is the
first element in the timeline item and should be hidden with the
.slds-assistive-text
class. The SVG
image does not need the
.slds-assistive-text
class.
Notable attributes
Button:
aria-controls
is used to create an association between the button and the details section. If the details section has anid="email-content"
, then the button should havearia-controls="email-content"
.- The title of the timeline item can also be used as a button to open the details section. If the details section has an
id="email-content"
, then the div withslds-timeline__trigger
should havearia-controls="email-content"
and the click handler. aria-expanded
indicates if the details section is open or closed and is read aloud by assitive technology when the button is focused.
Section:
aria-hidden
indicates if the details section is open or closed, and if set totrue
, assistive technology hides the details section.
Keyboard navigation
- The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.
Updating Operation and State
- When the user interacts with the button to open the details section,
aria-expanded
on the button should betrue
andaria-hidden
on the details section should befalse
. - When the user interacts with the button to close the details section,
aria-expanded
on the button should befalse
andaria-hidden
on the details section should betrue
.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-timeline__item_expandable |
---|---|
Summary | Create each expandable activity timeline item in a list |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-timeline__item_details |
---|---|
Summary | Class to show and hide details |
Restrict | .slds-timeline__item_expandable article |
Selector | .slds-is-open |
---|---|
Summary | Toggles the visibility of the timeline item |
Restrict | .slds-timeline__item_expandable |
Modifier | True |
Selector | .slds-timeline__item_call |
---|---|
Summary | Applies line connector for a call timeline item |
Restrict | .slds-timeline__item_expandable |
Selector | .slds-timeline__item_email |
---|---|
Summary | Applies line connector for an email timeline item |
Restrict | .slds-timeline__item_expandable |
Selector | .slds-timeline__item_event |
---|---|
Summary | Applies line connector for an event timeline item |
Restrict | .slds-timeline__item_expandable |
Selector | .slds-timeline__item_task |
---|---|
Summary | Applies line connector for a task timeline item |
Restrict | .slds-timeline__item_expandable |
Selector | .slds-timeline__icon |
---|---|
Summary | Icon associated with timeline item |
Restrict | .slds-timeline__item_expandable .slds-icon_container |
Selector | .slds-timeline__details-action-icon |
---|---|
Summary | Icon inside of actionable button within an expandable timeline item |
Restrict | .slds-timeline__item_expandable svg |