{ "_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": "PathSimple", "description": "Deprecated legacy Sales Path visualization built on the slds-tabs_path BEM. Renders an ordered list of pipeline stages with chevron-shaped tabs that flip between a complete check icon and a stage title as each item moves through complete, current, incomplete, active, lost, and won states. Optionally wraps the path with a coach trigger button, a mark-complete action, and an expanded guidance panel.", "extensions": { "com.salesforce-ux": { "genReady": false } }, "cssSource": "./pathSimple.deprecated.css", "styleApi": { "status": "deprecated", "ready": false }, "deprecated": { "message": "Replaced by the modern Path component (slds-path BEM). The slds-tabs_path / slds-path-coach / slds-coach__* class names are retained only for legacy markup; new work should target the Path component instead.", "replacement": { "component": "Path" } }, "structure": { "name": "pathSimple", "restrict": [ "div" ], "description": "Root wrapper for the legacy path. When no coaching panel is shown the root is a flex row (slds-grid) holding the trigger, the tablist, and the mark-complete action. When the coaching panel is visible the root is slds-path-coach, which contains the same row plus a stack of tabpanels.", "attributes": { "static": { "class": "slds-grid" } }, "variants": [ { "name": "coach", "description": "Root rendering treatment. base keeps the path as a single flex row; coach upgrades the root to slds-path-coach so the expanded guidance content can render beneath the row.", "default": "base", "options": [ { "value": "base", "class": "slds-grid", "description": "Flex row containing only the trigger, the tablist, and the mark-complete action." }, { "value": "coach", "class": "slds-path-coach", "description": "Coaching wrapper that can host an expanded tabpanel beneath the path row." } ] } ], "modifiers": [ { "name": "expanded", "attribute": "class", "value": "slds-is-expanded", "description": "Applied to the slds-path-coach root when the guidance panel is open; reveals the border and bottom padding." } ], "children": [ { "name": "row", "restrict": [ "div" ], "description": "Flex row holding the trigger, tablist, and mark-complete action. Rendered as the root itself in the base variant and as a nested slds-grid inside slds-path-coach when the coach variant is used.", "renderWhen": { "prop": "coach", "eq": "coach" }, "attributes": { "static": { "class": "slds-grid" } }, "children": [ { "name": "trigger", "restrict": [ "button" ], "description": "Icon button that toggles the coaching panel open and closed. Uses the buttonIcon border-filled treatment and reserves margin around the path.", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-button slds-button--icon-border-filled slds-path__trigger slds-no-flex slds-m-horizontal--small" } }, "modifiers": [ { "name": "flipped", "attribute": "class", "value": "slds-flip--vertical", "description": "Rotates the caret icon 180deg to indicate the coaching panel is currently open." } ], "children": [ { "name": "triggerIcon", "description": "Caret glyph indicating the open/close affordance.", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "triggerAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label announcing the trigger action.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "tabs", "restrict": [ "div" ], "description": "Application-role container that wraps the tablist of stage items.", "attributes": { "static": { "class": "slds-tabs--path" } }, "children": [ { "name": "nav", "restrict": [ "ul" ], "description": "Horizontal flex list rendered as a tablist of stage items.", "attributes": { "static": { "class": "slds-tabs--path__nav" } }, "children": [ { "name": "item", "restrict": [ "li" ], "description": "Single stage in the path. Carries one mutually-exclusive progress class (complete / current / incomplete / active / lost / won) that drives the chevron color and the icon-vs-title flip animation.", "repeats": true, "attributes": { "static": { "class": "slds-tabs--path__item" } }, "variants": [ { "name": "progress", "description": "Mutually exclusive stage state. Drives the chevron background color and which face of the flip card is visible.", "default": "incomplete", "options": [ { "value": "complete", "class": "slds-is-complete", "description": "Stage already finished; shows the check icon face." }, { "value": "current", "class": "slds-is-current", "description": "Stage the record is currently on; renders an inverse surface." }, { "value": "incomplete", "class": "slds-is-incomplete", "description": "Future stage that has not been reached yet." }, { "value": "active", "class": "slds-is-incomplete slds-is-active", "description": "User is previewing a different stage than the current one; combines incomplete with active for the hover preview affordance." }, { "value": "lost", "class": "slds-is-lost", "description": "Closed-lost terminal state, painted with the error background." }, { "value": "won", "class": "slds-is-complete slds-is-won", "description": "Closed-won terminal state, combining complete with the won title flip." } ] } ], "children": [ { "name": "link", "restrict": [ "a" ], "description": "Anchor that acts as the focusable tab for the stage and hosts the flip card.", "attributes": { "static": { "class": "slds-tabs--path__link" } }, "children": [ { "name": "stage", "restrict": [ "span" ], "description": "Back face of the flip card showing the check icon for completed and current stages.", "attributes": { "static": { "class": "slds-tabs--path__stage" } }, "children": [ { "name": "stageIcon", "restrict": [ "svg" ], "description": "Check glyph rendered on the stage face.", "attributes": { "static": { "class": "slds-icon slds-icon--x-small" } } }, { "name": "stageAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label announcing the stage completion semantics.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "title", "restrict": [ "span" ], "description": "Front face of the flip card showing the stage label.", "attributes": { "static": { "class": "slds-tabs--path__title" } } } ] } ] } ] } ] }, { "name": "markComplete", "restrict": [ "button" ], "description": "Brand button rendered at the end of the path row used to advance the record to the next stage. May also carry slds-path__mark-current when the previewed stage is not the record's current stage.", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-button slds-button--brand slds-path__mark-complete slds-no-flex slds-m-horizontal--small" } }, "modifiers": [ { "name": "markCurrent", "attribute": "class", "value": "slds-path__mark-current", "description": "Applied when the action will set the previewed stage as the new current stage rather than completing the existing one." } ], "children": [ { "name": "markCompleteIcon", "description": "Optional check glyph rendered to the inline-start of the button label.", "attributes": { "static": { "class": "slds-button__icon slds-button__icon--left" } }, "component": "PrimitiveIcon" } ] } ] }, { "name": "content", "restrict": [ "div" ], "description": "Tabpanel that holds the expanded coaching content for a stage. Toggles slds-show / slds-hide to control visibility within the coach wrapper.", "renderWhen": { "prop": "coach", "eq": "coach" }, "repeats": true, "attributes": { "static": { "class": "slds-tabs--path__content" } }, "variants": [ { "name": "visibility", "description": "Whether this tabpanel is currently visible. Maps to the slds-show / slds-hide utility classes used by the legacy template.", "default": "hidden", "options": [ { "value": "hidden", "class": "slds-hide", "description": "Tabpanel is not visible." }, { "value": "visible", "class": "slds-show", "description": "Tabpanel is the currently expanded stage." } ] } ], "children": [ { "name": "contentLayout", "restrict": [ "div" ], "description": "Two-column flex row that spreads the keys list and the guidance copy.", "attributes": { "static": { "class": "slds-grid slds-grid--align-spread" } }, "children": [ { "name": "keys", "restrict": [ "div" ], "description": "Key-fields column. Hosts a heading row plus a horizontal dl of stage-specific data.", "attributes": { "static": { "class": "slds-coach__keys slds-size--1-of-2 slds-m-left--x-large" } }, "children": [ { "name": "keysHeader", "restrict": [ "div" ], "description": "Header row holding the section title and an edit affordance.", "attributes": { "static": { "class": "slds-grid slds-grid--align-spread" } }, "children": [ { "name": "keysTitle", "restrict": [ "h2" ], "description": "All-caps title for the key-fields section.", "attributes": { "static": { "class": "slds-text-title--caps slds-p-bottom--small" } } }, { "name": "keysEdit", "restrict": [ "span" ], "description": "Small-body span hosting the edit link for the section.", "attributes": { "static": { "class": "slds-text-body--small" } } } ] }, { "name": "keysList", "restrict": [ "dl" ], "description": "Horizontal definition list pairing each field label with its value.", "attributes": { "static": { "class": "slds-dl--horizontal" } }, "children": [ { "name": "keyLabel", "restrict": [ "dt" ], "description": "Field label.", "repeats": true, "attributes": { "static": { "class": "slds-coach__item slds-dl--horizontal__label" } } }, { "name": "keyValue", "restrict": [ "dd" ], "description": "Field value paired with the preceding label.", "repeats": true, "attributes": { "static": { "class": "slds-coach__value slds-dl--horizontal__detail" } } } ] } ] }, { "name": "guidance", "restrict": [ "div" ], "description": "Guidance-for-success column rendered with the legacy coach surface background.", "attributes": { "static": { "class": "slds-coach__guidance slds-size--1-of-2 slds-m-left--x-large" } }, "children": [ { "name": "guidanceTitle", "restrict": [ "h2" ], "description": "All-caps title above the guidance copy, separated from the body by a bottom divider.", "attributes": { "static": { "class": "slds-text-title--caps slds-p-bottom--small slds-has-divider--bottom" } } }, { "name": "guidanceBody", "restrict": [ "div" ], "description": "Long-form body copy with paragraphs and inline links.", "attributes": { "static": { "class": "slds-text-longform slds-p-top--medium" } } } ] } ] } ] } ] }, "stateClasses": [ { "state": "complete", "class": "slds-is-complete" }, { "state": "current", "class": "slds-is-current" }, { "state": "incomplete", "class": "slds-is-incomplete" }, { "state": "active", "class": "slds-is-active" }, { "state": "lost", "class": "slds-is-lost" }, { "state": "won", "class": "slds-is-won" }, { "state": "expanded", "class": "slds-is-expanded" } ], "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": "complete", "type": "boolean", "description": "Whether the component is in the complete state" }, { "name": "current", "type": "boolean", "description": "Whether the component is in the current state" }, { "name": "incomplete", "type": "boolean", "description": "Whether the component is in the incomplete state" }, { "name": "active", "type": "boolean", "description": "Whether the component is in the active state" }, { "name": "lost", "type": "boolean", "description": "Whether the component is in the lost state" }, { "name": "won", "type": "boolean", "description": "Whether the component is in the won state" }, { "name": "expanded", "type": "boolean", "description": "Whether the component is in the expanded state" } ] }