{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "ActivityTimeline", "description": "Vertical list of expandable activity records (tasks, calls, emails, events) connected by a typed vertical line, each surfacing a header row of metadata and an expandable details panel.", "extensions": { "com.salesforce-ux": { "genReady": false } }, "cssSource": "./activityTimeline.css", "styleApi": { "status": "stable", "ready": true }, "structure": { "name": "activityTimeline", "restrict": [ "ul" ], "description": "Root timeline list that contains each activity item as a list item.", "attributes": { "static": { "class": "slds-timeline" } }, "children": [ { "name": "listItem", "restrict": [ "li" ], "repeats": true, "description": "List item wrapper for a single activity entry.", "children": [ { "name": "item", "restrict": [ "div" ], "description": "Expandable activity item. Carries the base expandable class plus a mutually-exclusive item-type class that paints the vertical line connector.", "attributes": { "static": { "class": "slds-timeline__item_expandable" } }, "variants": [ { "name": "itemType", "description": "Mutually-exclusive activity type. Each option paints the vertical line connector and pairs with a matching standard icon sprite.", "options": [ { "value": "task", "class": "slds-timeline__item_task", "description": "Task activity." }, { "value": "call", "class": "slds-timeline__item_call", "description": "Logged-call activity." }, { "value": "email", "class": "slds-timeline__item_email", "description": "Email activity." }, { "value": "event", "class": "slds-timeline__item_event", "description": "Calendar event activity." } ] } ], "children": [ { "name": "typeAssistiveText", "restrict": [ "span" ], "description": "Visually hidden announcement of the item's activity type.", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "media", "restrict": [ "div" ], "description": "Media object layout: figure (toggle button + activity icon) on the inline-start, body on the inline-end.", "attributes": { "static": { "class": "slds-media" } }, "children": [ { "name": "mediaFigure", "restrict": [ "div" ], "description": "Figure column containing the details-toggle button and the activity-type icon.", "attributes": { "static": { "class": "slds-media__figure" } }, "children": [ { "name": "detailsToggle", "restrict": [ "button" ], "description": "Icon button that toggles the visibility of the item's details panel via aria-controls/aria-expanded.", "attributes": { "static": { "class": "slds-button slds-button_icon" } }, "children": [ { "name": "detailsToggleIcon", "description": "Chevron glyph rendered inside the details-toggle button. Rotates when the item is open.", "attributes": { "static": { "class": "slds-button__icon slds-timeline__details-action-icon" } }, "component": "PrimitiveIcon" }, { "name": "detailsToggleAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label describing what the toggle expands.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "icon", "restrict": [ "div" ], "description": "Standard-sprite icon container for the activity type. The timeline-icon class adds a surface-colored fake border that creates the gap between the icon background and the vertical connecting line.", "attributes": { "static": { "class": "slds-icon_container slds-timeline__icon" } }, "children": [ { "name": "iconSvg", "restrict": [ "svg" ], "description": "Standard sprite glyph for the activity type.", "attributes": { "static": { "class": "slds-icon slds-icon_small" } } } ] } ] }, { "name": "mediaBody", "restrict": [ "div" ], "description": "Body column containing the trigger header row, the activity summary line, and the details panel.", "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "trigger", "restrict": [ "div" ], "description": "Spread grid row: title cluster on the inline-start, date and overflow actions on the inline-end. Provides hover feedback for the item.", "attributes": { "static": { "class": "slds-grid slds-grid_align-spread slds-timeline__trigger" } }, "children": [ { "name": "titleCluster", "restrict": [ "div" ], "description": "Truncating cluster holding an optional checkbox, the activity title, and inline metadata icons.", "attributes": { "static": { "class": "slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space" } }, "children": [ { "name": "checkbox", "restrict": [ "div" ], "description": "Optional inline checkbox that marks the activity complete (task items).", "attributes": { "static": { "class": "slds-checkbox" } }, "children": [ { "name": "checkboxInput", "restrict": [ "input" ], "description": "Native checkbox input." }, { "name": "checkboxLabel", "restrict": [ "label" ], "description": "Visually hidden label associated with the checkbox input.", "attributes": { "static": { "class": "slds-checkbox__label" } }, "children": [ { "name": "checkboxFaux", "restrict": [ "span" ], "description": "Styled checkbox visual.", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "checkboxLabelText", "restrict": [ "span" ], "description": "Visually hidden label text.", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ] } ] }, { "name": "title", "restrict": [ "h3" ], "description": "Truncating activity title containing a link with a strong child.", "attributes": { "static": { "class": "slds-truncate" } }, "children": [ { "name": "titleLink", "restrict": [ "a" ], "description": "Anchor that navigates to the activity record.", "children": [ { "name": "titleText", "restrict": [ "strong" ], "description": "Bolded title text." } ] } ] }, { "name": "titleMetaIcons", "restrict": [ "div" ], "description": "Inline-end cluster of small utility icons that flag attributes like recurring, group, attachments, or public sharing.", "attributes": { "static": { "class": "slds-no-flex" } }, "children": [ { "name": "titleMetaIcon", "restrict": [ "span" ], "repeats": true, "description": "Utility-sprite icon container marking a single metadata attribute.", "attributes": { "static": { "class": "slds-icon_container" } }, "children": [ { "name": "titleMetaIconSvg", "restrict": [ "svg" ], "description": "Utility glyph rendered at xx-small with default text color and a small inline-start margin.", "attributes": { "static": { "class": "slds-icon slds-icon_xx-small slds-icon-text-default slds-m-left_x-small" } } }, { "name": "titleMetaIconAssistiveText", "restrict": [ "span" ], "description": "Visually hidden announcement of the metadata flag.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "actions", "restrict": [ "div" ], "description": "Inline-end column containing the activity date and an overflow menu button. The inline modifier swaps the column to a row layout.", "attributes": { "static": { "class": "slds-timeline__actions slds-timeline__actions_inline" } }, "children": [ { "name": "date", "restrict": [ "p" ], "description": "Date and time the activity occurred.", "attributes": { "static": { "class": "slds-timeline__date" } } }, { "name": "overflowButton", "restrict": [ "button" ], "description": "Filled-border icon button that opens the per-item overflow menu.", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" } }, "children": [ { "name": "overflowIcon", "description": "Down chevron glyph inside the overflow button.", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "overflowAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label announcing the overflow action.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "summary", "restrict": [ "p" ], "description": "Plain-text summary line beneath the trigger, e.g., \"You created a task with Charlie Gomez\".", "attributes": { "static": { "class": "slds-m-horizontal_xx-small" } } }, { "name": "details", "restrict": [ "article" ], "description": "Expandable details panel revealed when the item is open. Hidden by default; the boxed surface holds metadata pairs and an optional description.", "attributes": { "static": { "class": "slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small" } }, "children": [ { "name": "detailsList", "restrict": [ "ul" ], "description": "Two-column wrapping list of metadata key/value pairs (Name, Related To, From Address, etc.).", "attributes": { "static": { "class": "slds-list_horizontal slds-wrap" } }, "children": [ { "name": "detailsListItem", "restrict": [ "li" ], "repeats": true, "description": "Half-width grid cell holding a label and a value.", "attributes": { "static": { "class": "slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small" } }, "children": [ { "name": "detailsLabel", "restrict": [ "span" ], "description": "Field label rendered as a title-cased small caption.", "attributes": { "static": { "class": "slds-text-title slds-p-bottom_x-small" } } }, { "name": "detailsValue", "restrict": [ "span" ], "description": "Truncating body text holding the field value (often a link).", "attributes": { "static": { "class": "slds-text-body_medium slds-truncate" } } } ] } ] }, { "name": "detailsDescription", "restrict": [ "div" ], "description": "Free-form description block below the metadata grid: a label and one or more paragraphs.", "children": [ { "name": "detailsDescriptionLabel", "restrict": [ "span" ], "description": "Label for the description block.", "attributes": { "static": { "class": "slds-text-title" } } }, { "name": "detailsDescriptionText", "restrict": [ "p" ], "description": "Paragraph body of the description.", "attributes": { "static": { "class": "slds-p-top_x-small" } } } ] }, { "name": "detailsAction", "restrict": [ "button" ], "description": "Optional neutral action button rendered at the foot of the details panel (e.g., \"Public Sharing\").", "attributes": { "static": { "class": "slds-button slds-button_neutral slds-m-top_small" } }, "children": [ { "name": "detailsActionIcon", "description": "Leading glyph inside the details action button.", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_left" } }, "component": "PrimitiveIcon" } ] } ] }, { "name": "detailsError", "restrict": [ "div" ], "description": "Inline error row shown in place of the details panel when loading details fails.", "attributes": { "static": { "class": "slds-grid slds-text-color_error slds-m-top_x-small slds-m-horizontal_xx-small" } }, "children": [ { "name": "detailsErrorIconContainer", "restrict": [ "span" ], "description": "Utility-sprite icon container for the error glyph.", "attributes": { "static": { "class": "slds-icon_container" } }, "children": [ { "name": "detailsErrorIcon", "restrict": [ "svg" ], "description": "Error glyph rendered in error color with an inline-end margin.", "attributes": { "static": { "class": "slds-icon slds-icon-text-error slds-icon_x-small slds-m-right_xx-small" } } }, { "name": "detailsErrorAssistiveText", "restrict": [ "span" ], "description": "Visually hidden announcement that an error occurred.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "detailsErrorText", "restrict": [ "p" ], "description": "Plain-text error message describing the failure." } ] } ] } ] } ] } ] } ] }, "stateClasses": [ { "state": "open", "class": "slds-is-open" } ], "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "states": [ { "name": "open", "type": "boolean", "description": "Whether the component is in the open state" } ] }