{ "components": { "carousel": { "description": "A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time.\n\nYou are able to navigate between panels by interacting with the `slds-carousel__indicator` elements that sit below the panel.\n\nA panel becomes visible by toggling the `slds-hide` class with the `slds-show` class on the `slds-carousel__panel` element.\n\nWhen making the `slds-carousel__panel` active, the indicator should be updated with the `slds-is-active` class. This provides visual feedback showing which carousel panel is active.\n\n### Accessibility\n\nA Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:\n\n- The tab list, which should have `role=\"tablist\"`\n- The tabs in that list, which should each be an `` anchor wrapped in a `
  • ` list item\n- The tab panels, which display each tab’s content and should each have `role=\"tabpanel\"`\n\n**Expected markup:**\n\n- Selected tab’s anchor has `aria-selected=\"true\"`, all other tabs’ anchors have `aria-selected=\"false\"`\n- Selected tab’s anchor has `tabindex=\"0\"`, all other tabs have `tabindex=\"-1\"`\n- Each tab’s anchor has an `aria-controls` attribute whose value is the id of the associated `
    `\n- Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated ``\n- When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set\n\n**Expected keyboard interactions:**\n\n- Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab\n- Tab key, when focus is before the tab list, moves focus to the selected tab panel\n- Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements\n- Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset", "annotations": { "summary": "A carousel allows multiple pieces of featured content to occupy an allocated amount of space.", "base": true, "name": "carousel", "selector": ".slds-carousel", "support": "dev-ready", "category": "experience", "type": "navigation, data-display", "layout": "responsive" }, "id": "carousel", "restrictees": [ { "description": "", "annotations": { "summary": "Initiates a carousel component", "name": "base", "selector": ".slds-carousel", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Main stage for carousel's tab-panels and tab-list inidicators", "selector": ".slds-carousel__stage", "restrict": ".slds-carousel div" }, "id": ".slds-carousel__stage", "restrictees": [ { "description": "", "annotations": { "summary": "Tabpanel region that contains all carousel panels", "selector": ".slds-carousel__panels", "restrict": ".slds-carousel__stage div" }, "id": ".slds-carousel__panels", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable element that contains the carousel's tab-panel content", "selector": ".slds-carousel__panel-action", "restrict": ".slds-carousel__stage a" }, "id": ".slds-carousel__panel-action", "restrictees": [ { "description": "", "annotations": { "summary": "Element that contains the image inside the carousel's tab-panel", "selector": ".slds-carousel__image", "restrict": ".slds-carousel__panel-action div" }, "id": ".slds-carousel__image", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Element that contains the content inside the carousel's tab-panel", "selector": ".slds-carousel__content", "restrict": ".slds-carousel__panel-action div" }, "id": ".slds-carousel__content", "restrictees": [ { "description": "", "annotations": { "summary": "Heading element that contains the title of the carousel's tab-panel", "selector": ".slds-carousel__content-title", "restrict": ".slds-carousel__content h2" }, "id": ".slds-carousel__content-title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Element that contains the auto-play button icon to toggle on/off", "selector": ".slds-carousel__autoplay", "restrict": ".slds-carousel__stage span" }, "id": ".slds-carousel__autoplay", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "List element that contains the carousel's tab-list inidicators", "selector": ".slds-carousel__indicators", "restrict": ".slds-carousel ul" }, "id": ".slds-carousel__indicators", "restrictees": [ { "description": "", "annotations": { "summary": "Carousel's tab-list inidicator items", "selector": ".slds-carousel__indicator", "restrict": ".slds-carousel__indicators li" }, "id": ".slds-carousel__indicator", "restrictees": [ { "description": "", "annotations": { "summary": "Actionable element inside of each tab-list indicator", "selector": ".slds-carousel__indicator-action", "restrict": ".slds-carousel__indicator a" }, "id": ".slds-carousel__indicator-action", "restrictees": [ { "description": "", "annotations": { "summary": "Active state notifying the tab that its current panel is active", "selector": ".slds-is-active", "restrict": ".slds-carousel__indicator-action" }, "id": ".slds-is-active", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/carousel/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "tab-1-active", "label": "Tab 1 Active" }, { "id": "tab-2-active", "label": "Tab 2 Active" }, { "id": "tab-3-active", "label": "Tab 3 active" }, { "id": "auto-play-enabled", "label": "Auto-play enabled" }, { "id": "auto-play-stopped", "label": "Auto-play stopped" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/carousel/docs.mdx", "showcasePath": null, "showcase": [] }, "datetime-picker": { "description": "#### Implementation Notes and Requirements\n\nThe datetime picker has the following markup requirements:\n\n**Desktop**\n- Add `.slds-is-open` to the element with `.slds-dropdown-trigger` to invoke the dropdown that contains the datepicker and the list of time options.\n- On the timepicker, the `.slds-has-focus` modifier class is required on the `.slds-listbox__option` element that has focus.\n- On the timpicker, the `.slds-is-selected` modifier class is required on the `.slds-listbox__option` element that has been selected.\n- On the datepicker, the `.slds-is-selected` modifier class is required on the `td` element that has the selected day.\n- On the datepicker, the `.slds-is-today` modifier class is required on the `td` element that is the current day.\n\n**Mobile**\n- When on mobile, we want to leverage the native datetime picker by changing the `input` type from `text` to `datetime-local`\n- The `input type=\"datetime-local\"` will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes.\n- When switching `input type=\"text\"` to `input type=\"datetime-local\"` for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.\n - On the element with the class `slds-combobox`, please remove `role=\"combobox\"`, `aria-expanded`, and `aria-haspopup.\n - On the `input` that we just added `type=\"datetime-local\"` to, please remove `aria-controls`, `aria-autocomplete`, and `role=\"textbox\"`.", "annotations": { "summary": "A datetime picker is used to select a day and a time.", "base": true, "name": "datetime-picker", "selector": ".slds-datetime-picker", "support": "dev-ready", "category": "experience", "type": "data-entry", "role": "grid, combobox" }, "id": "datetime-picker", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes a datetime picker", "name": "base", "selector": ".slds-datetime-picker", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/datetime-picker/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "date-selection", "label": "Date selected" }, { "id": "time-selection", "label": "Time selected" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "slider": { "description": "The slider component is built using a native input form element with the\nattribute type of \"range\".\n\n### Implementation Notes and Requirements\n\n- `slds-slider` should be applied to the div containing both the `` and the `` that holds the value of the ``\n- `slds-slider__range` should be applied to the `` element\n - The `` should have a unique ID that matches the `for` attribute on the form element `
    `.\nA card is made up of three sections, a header, a body, and a footer.\nThe card header will get the `.slds-card__header` class.\nThe card body will get the `.slds-card__body` class. The card footer will\nget the `.slds-card__footer` class.", "annotations": { "summary": "Cards are used to apply a container around a related grouping of information.", "layout": "responsive", "name": "cards", "support": "dev-ready", "base": true, "role": "article", "type": "data-display, layout", "category": "base, structure", "selector": ".slds-card, .slds-card-wrapper" }, "id": "cards", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes card", "name": "base", "selector": ".slds-card", "restrict": "article, div, section", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Used to bring back the border on a card when needed", "selector": ".slds-card_boundary", "restrict": ".slds-card" }, "id": ".slds-card_boundary", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card header", "selector": ".slds-card__header", "restrict": ".slds-card div" }, "id": ".slds-card__header", "restrictees": [ { "description": "", "annotations": { "summary": "Title element within card header", "selector": ".slds-card__header-title", "restrict": ".slds-card__header h2" }, "id": ".slds-card__header-title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable element within the card header title", "selector": ".slds-card__header-link", "restrict": ".slds-card__header h2 a" }, "id": ".slds-card__header-link", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "variant": true, "summary": "Einstein themed card header", "name": "einstein", "support": "dev-ready", "role": "article", "type": "layout", "restrict": ".slds-card__header", "category": "feature", "selector": ".slds-einstein-header" }, "id": "einstein", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/cards/einstein/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "einstein-with-icon", "label": "Einstein card - with icon" }, { "id": "einstein-with-icon-and-actions", "label": "Einstein card - with icon and actions" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card body", "selector": ".slds-card__body", "restrict": ".slds-card div" }, "id": ".slds-card__body", "restrictees": [ { "description": "", "annotations": { "summary": "Apply the same spacing found on the card header to the card body", "selector": ".slds-card__body_inner", "restrict": ".slds-card__body" }, "id": ".slds-card__body_inner", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Initializes card footer", "selector": ".slds-card__footer", "restrict": ".slds-card footer" }, "id": ".slds-card__footer", "restrictees": [ { "description": "", "annotations": { "summary": "Actionable element within card footer", "selector": ".slds-card__footer-action", "restrict": ".slds-card__footer a" }, "id": ".slds-card__footer-action", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/cards/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "empty", "label": "Empty" } ] }, { "title": "examples", "items": [ { "id": "related-list-table", "label": "With data-table" }, { "id": "related-list-tiles", "label": "With tiles" }, { "id": "nested-cards", "label": "Nested cards" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "name": "wrapper", "summary": "Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card", "selector": ".slds-card-wrapper", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "wrapper", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/cards/wrapper/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "tabs-wrapper", "label": "Card wrapper for tabs" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/cards/docs.mdx", "showcasePath": null, "showcase": [] }, "checkbox": { "description": "The ability to style checkboxes with CSS varies across browsers.\nTo ensure that checkboxes look the same everywhere, we use a custom DOM.\nPay close attention to the markup, because all elements must exist for the\nstyles to work.\n\n#### Accessibility\n\nGroups of checkboxes should be marked up using the fieldset and legend\nelement. This helps someone using assistive technology to understand the\nquestion they're answering with the group of checkboxes. The fieldset is\nplaced around the whole group and the legend contains the question.\n\nCustom checkboxes are created by applying the `.slds-checkbox` class to\na `
    ` should\nget `*` added to the DOM,\ndirectly before the `` for visual indication\nthat the checkbox is required.\n\nWhen a checkbox group is required, the `
    ` should receive the\nclass `.slds-is-required`. The `` should then get\n`*` added to the DOM for\nvisual indication that the checkbox group is required.\n\nAs SLDS checkboxes rely on the :checked psuedo selector, and the\nindeterminate state is only accessible via JavaScript, the use of a\nCSS class on the input will be necessary to implement this in SLDS.\nUse JavaScript to add the class when the indeterminate property is set to\ntrue on the input.\n\nThe following JavaScript demonstrates how to set a checkbox to be indeterminate:\n```js\nvar checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n```", "annotations": { "summary": "A checkable input that communicates if an option is true, false or indeterminate", "layout": "responsive", "name": "checkbox", "support": "dev-ready", "base": true, "role": "checkbox", "type": "data-entry", "category": "base", "selector": ".slds-checkbox" }, "id": "checkbox", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes checkbox", "name": "base", "selector": ".slds-checkbox", "restrict": "span, label, div", "required": true, "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "name": "stacked", "summary": "stacks label over checkbox", "selector": ".slds-checkbox_stacked", "restrict": ".slds-checkbox", "modifier": true, "group": "layout", "deprecated": true }, "id": "stacked", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Container for faux checkbox element", "selector": ".slds-checkbox__label", "restrict": ".slds-checkbox label" }, "id": ".slds-checkbox__label", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates a custom styled checkbox", "selector": ".slds-checkbox_faux", "restrict": ".slds-checkbox span" }, "id": ".slds-checkbox_faux", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": true, "name": "form-element", "selector": ".slds-checkbox_standalone", "restrict": ".slds-checkbox", "support": "dev-ready", "variant": true }, "id": "form-element", "restrictees": [], "docPath": "./ui/components/form-element/docs.mdx", "showcasePath": "./ui/components/checkbox/form-element/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "checked", "label": "Checked" }, { "id": "disabled", "label": "Disabled" }, { "id": "checked-disabled", "label": "Checked and Disabled" }, { "id": "error", "label": "Error" }, { "id": "required", "label": "Required" }, { "id": "view-mode-unchecked", "label": "View mode - Unchecked" }, { "id": "view-mode-checked", "label": "View mode - Checked" } ] }, { "title": "examples", "items": [ { "id": "help-text-icon", "label": "Help text icon" }, { "id": "required-help-text-icon", "label": "Required with Help text icon" }, { "id": "required-help-text-icon-tooltip", "label": "Required with Help text icon, showing tooltip" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": "./ui/components/checkbox/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "required", "label": "Required" }, { "id": "error", "label": "Error" }, { "id": "disabled", "label": "Disabled" }, { "id": "checked-and-disabled", "label": "Checked and Disabled" } ] }, { "title": "examples", "items": [ { "id": "group", "label": "Group" }, { "id": "group-required", "label": "Group Required" }, { "id": "group-error", "label": "Group with error" }, { "id": "group-disabled", "label": "Group Disabled" }, { "id": "stacked", "label": "Stacked" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "prompt": { "description": "A prompt uses the [base modal component](/components/modals) and then adds the class `.slds-modal_prompt` to the overall `.slds-modal`. The utilities > themes > colors class is placed on the `.slds-modal__head` to create the color of the header. In the example, we illustrate using `.slds-theme_error`. The class `.slds-theme_alert-texture` should be applied to create the striped gradient. The `.slds-modal__footer` receives the class `.slds-theme_default`.\n\n#### Accessibility\n\nPrompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different `role` of `alertdialog` to indicate their severity. Like modals they should be labelled by their headings, but additonally they should be described by the message details of the prompt.\n\nThe element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add `tab-index=\"0\"` to `slds-modal__container`.\n\nThere is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal.\n\n**Expected markup ([same as Modals](/components/modals), but with the following differences):**\n- Modal has `role=\"alertdialog\"`\n- Modal has an `aria-describedby` attribute that matches the id of the modal message container.\n- Modal message container container should have `tab-index=\"0\"`\n\n**Expected keyboard interaction ([same as Modals](/components/modals), with the addition of):**\n- Modal message container should take initial focus", "annotations": { "summary": "Prompt notice grabs the user’s attention & alerts them of system-related issues/updates.", "layout": "responsive", "name": "prompt", "support": "dev-ready", "base": true, "role": "alert", "type": "messaging", "category": "experience", "selector": ".slds-modal_prompt" }, "id": "prompt", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes Prompt style notification", "name": "base", "selector": ".slds-modal_prompt", "restrict": "section[role=\"alertdialog\"]", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/prompt/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "path": { "description": "#### Accessibility\n\nThis component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it’s associated content changes with it.\n\nOn the other hand, if a Path doesn’t have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.\n\nThe markup structure is identical, just some attributes change their values.\n\n| DOM Node | Without Coaching | With Coaching |\n|------------------|-------------------|----------------|\n| .slds-path__nav | role=\"listbox\" | role=\"tabset\" |\n| .slds-path__link | role=\"option\" | role=\"tab\" |\n\n\n\n**Notable Attributes - Without Coaching**\n- `aria-orientation=\"horizontal\"` should be applied to the `slds-path__nav` element to indicate to the screen reader to use horizontal navigation\n- `aria-selected=\"true\"` should be applied to the selected Stage of the Path as you navigate through the Stages\n\n**Notable Attributes - With Coaching**\n- When the Path Stage Coaching is not visible, `aria-expanded=\"false\"` should be set on each `slds-path__link` Tab\n- When the Path Stage Coaching is visible, `aria-expanded` should be set to `true`\n- `aria-selected=\"true\"` is used to describe the currently active `slds-path__link` Tab, not the Stage the Path is currently set to\n\n**Keyboard navigation**\n- For both with and without Path Stage Coaching variants, the following keyboard navigation applies\n- `left` and `right` arrow keys move focus _and_ selection, with `aria-selected=\"true\"`\n\n**Responsive path**\n\nWhen the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class `.slds-region_small` should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class `.slds-region_medium` should be applied.", "annotations": { "summary": "A process component communicates to the user the progress of a particular process.", "name": "path", "support": "dev-ready", "base": true, "role": "tablist", "type": "process", "category": "experience", "s1": "false", "selector": ".slds-path" }, "id": "path", "restrictees": [ { "description": "", "annotations": { "name": "base", "selector": ".slds-path", "restrict": "div", "variant": true, "support": "dev-ready", "s1": "false" }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Indicates the coaching section is expanded", "selector": ".slds-is-expanded", "restrict": ".slds-path" }, "id": ".slds-is-expanded", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Allows the path itself to be responsive", "selector": ".slds-path__track", "restrict": ".slds-path div" }, "id": ".slds-path__track", "restrictees": [ { "description": "Indicates the scroller is in the overflow state", "annotations": { "selector": ".slds-has-overflow", "restrict": ".slds-path__track" }, "id": ".slds-has-overflow", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates the scrolling container for tab overflow", "selector": ".slds-path__scroller", "restrict": ".slds-path__track div" }, "id": ".slds-path__scroller", "restrictees": [ { "description": "", "annotations": { "summary": "Allows the path to scroll when necessary", "selector": ".slds-path__scroller_inner", "restrict": ".slds-path__scroller div" }, "id": ".slds-path__scroller_inner", "restrictees": [ { "description": "", "annotations": { "summary": "Horizontal list of stages in path component", "selector": ".slds-path__nav", "restrict": ".slds-path__scroller_inner ul" }, "id": ".slds-path__nav", "restrictees": [ { "description": "", "annotations": { "summary": "Individual stages of a path", "selector": ".slds-path__item", "restrict": ".slds-path__nav li" }, "id": ".slds-path__item", "restrictees": [ { "description": "", "annotations": { "summary": "Creates the incomplete stage of the path", "selector": ".slds-is-incomplete", "restrict": ".slds-path__item" }, "id": ".slds-is-incomplete", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates the completed stage of the path", "selector": ".slds-is-complete", "restrict": ".slds-path__item" }, "id": ".slds-is-complete", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates the current stage of the path", "selector": ".slds-is-current", "restrict": ".slds-path__item" }, "id": ".slds-is-current", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates the active stage of the sales path", "selector": ".slds-is-active", "restrict": ".slds-path__item", "notes": "This class must be placed on the item programatically when the guidance section is activated" }, "id": ".slds-is-active", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates lost stage of the path", "selector": ".slds-is-lost", "restrict": ".slds-path__item", "notes": "This class must be added to the \"closed\" stage with JS when the Sales Path is complete and the opportunity is lost" }, "id": ".slds-is-lost", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates success stage of the path", "selector": ".slds-is-won", "restrict": ".slds-path__item" }, "id": ".slds-is-won", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates actionable element inside of each path item", "selector": ".slds-path__link", "restrict": ".slds-path__item a" }, "id": ".slds-path__link", "restrictees": [ { "description": "", "annotations": { "summary": "Contains the name of the stage", "selector": ".slds-path__title", "restrict": ".slds-path__link span" }, "id": ".slds-path__title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Contains the check mark when the stage is completed", "selector": ".slds-path__stage", "restrict": ".slds-path__link span" }, "id": ".slds-path__stage", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Container for the buttons that control the scrolling", "selector": ".slds-path__scroll-controls", "restrict": ".slds-path__track div" }, "id": ".slds-path__scroll-controls", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Shows the stage name when in the smaller state", "selector": ".slds-path__stage-name", "restrict": ".slds-path__track span" }, "id": ".slds-path__stage-name", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Creates the container for toggle button and path", "selector": ".slds-path__scroller-container", "restrict": ".slds-path div" }, "id": ".slds-path__scroller-container", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Container for path actions", "selector": ".slds-path__action", "restrict": ".slds-path div" }, "id": ".slds-path__action", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Button that toggles visibility of stage's tabpanel", "selector": ".slds-path__trigger", "restrict": ".slds-path button" }, "id": ".slds-path__trigger", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable button that invokes a completion of the path", "selector": ".slds-path__mark-complete", "restrict": ".slds-path button" }, "id": ".slds-path__mark-complete", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Actionable button that invokes a current stage of the path", "selector": ".slds-path__mark-current", "restrict": ".slds-path button, .slds-path-coach button" }, "id": ".slds-path__mark-current", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Tabpanel of each stage of the path", "selector": ".slds-path__content", "restrict": ".slds-path div" }, "id": ".slds-path__content", "restrictees": [ { "description": "", "annotations": { "summary": "Key field section of expanded tabpanel", "selector": ".slds-path__keys", "restrict": ".slds-path__content div" }, "id": ".slds-path__keys", "restrictees": [ { "description": "", "annotations": { "summary": "This creates the underlined titles in the coaching area", "selector": ".slds-path__coach-title", "restrict": ".slds-path__keys div, .slds-path__guidance h2" }, "id": ".slds-path__coach-title", "restrictees": [ { "description": "", "annotations": { "summary": "The Edit link in Path Coaching", "selector": ".slds-path__coach-edit", "restrict": ".slds-path__coach-title button" }, "id": ".slds-path__coach-edit", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Guidance section of expanded tabpanel", "selector": ".slds-path__guidance", "restrict": ".slds-path__content div" }, "id": ".slds-path__guidance", "restrictees": [ { "description": "", "annotations": { "summary": "This creates the underlined titles in the coaching area", "selector": ".slds-path__coach-title", "restrict": ".slds-path__keys div, .slds-path__guidance h2" }, "id": ".slds-path__coach-title", "restrictees": [ { "description": "", "annotations": { "summary": "The Edit link in Path Coaching", "selector": ".slds-path__coach-edit", "restrict": ".slds-path__coach-title button" }, "id": ".slds-path__coach-edit", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "This creates the space at the top of the guidance area", "selector": ".slds-path__guidance-content", "restrict": ".slds-path__guidance div" }, "id": ".slds-path__guidance-content", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/path/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "later-stage", "label": "In a later stage" }, { "id": "different-stage-selected", "label": "With different stage selected" }, { "id": "with-visible-tooltip", "label": "With visible tooltip" }, { "id": "with-coaching", "label": "With coaching available" }, { "id": "different-coaching", "label": "With different stage selected - with coaching" }, { "id": "lost", "label": "Lost" }, { "id": "won", "label": "Won" }, { "id": "with-overflow", "label": "Path with overflow" }, { "id": "medium", "label": "Medium viewport" }, { "id": "medium-coaching", "label": "Medium viewport with coaching" }, { "id": "small-coaching", "label": "Small viewport" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "tiles": { "description": "Tiles are setup to be displayed with or without an image/icon. The default\npattern for tiles has an image/icon, a detail body which contains a list of\ninformation and action overflow menu dropdown. The detail body list, by\ndefault, comes as a name/value pairing but can be swapped out with a string\nof text or an inline horizontal list.\n\nTiles can have different groupings of information based on its context.\nPay close attention to the markup, as each tile layout is constructed differently.", "annotations": { "summary": "A tile is a grouping of related information associated with a record.", "base": true, "name": "tiles", "selector": ".slds-tile", "support": "dev-ready", "category": "structure", "type": "data-display", "layout": "responsive" }, "id": "tiles", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes tile", "name": "base", "selector": ".slds-tile", "restrict": "article", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Use class if card consumes any form of a tile", "selector": ".slds-card__tile", "restrict": ".slds-tile" }, "id": ".slds-card__tile", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-tile__detail", "restrict": ".slds-tile div" }, "id": ".slds-tile__detail", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-tile__meta", "restrict": ".slds-tile div" }, "id": ".slds-tile__meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/tiles/base/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "with-action", "label": "Default with actions" }, { "id": "with-icon", "label": "With icon" }, { "id": "with-avatar", "label": "With avatar" }, { "id": "task", "label": "Task" }, { "id": "article", "label": "Article" }, { "id": "article-liker-bar", "label": "Article With like bar" }, { "id": "board", "label": "Board" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "modals": { "description": "Default modals are used in the vast majority of cases. They are as wide as\n50% of the viewport, but include a minimum and maximum width to avoid going\ntoo narrow or too wide.\n\nModals always have an equal amount of space at the top and bottom to account\nfor the height of the close button.\n\nModals grow according to how much content is within, but once the modal\nreaches full height (including the previously mentioned space on top and\nbottom), the content area will begin to scroll. (This scrolling is currently\nnot available in Salesforce1 Mobile.)\n\nModals can have a tagline in the header, simply by adding a paragraph after\nthe heading.\n\nBy default, the content area of the modal does not have spacing. This allows\nfor content such as Tables to be full-width to the modal. To get spacing\nwhen you need it, apply a padding utility (`.slds-p-around_medium`).\n\nModal headers can also have taglines, if you need to provide additional\ncontext. This tagline can also contain links, or the whole thing could be a\nlink in and of itself.\n\nLarge modals call for large amounts of content. The height follows the same\nbehavior and styles of other modals. The width changes to 90% of the viewport,\nand uses a wider minimum width and no maximum width.\n\nThese are modals that require a linearly directional paradigm of navigation\n(“Next” and “Back”, etc.) — the actionable buttons in the modal footer live\non the left and right, rather than all on the right. These can either be\nwithin a large or default modal, depending on the use case.\n\nIf you're using a Modal for a system alert that the user must acknowledge,\nconsider using a [Prompt](/components/prompt).\n#### Accessibility\n\nModals, by definition, trap focus. This means that if a user presses Tab or\nShift+Tab while their keyboard focus is in the modal, their focus should\nstay in and cycle through the modal’s content. Focus shouldn’t return to\nthe underlying page until the user presses the Esc key, presses an explicit\n“Cancel” or “Close” button in the modal, or performs another action that\ncloses the modal.\n\n**Expected markup:**\n\n- Modal has `role=\"dialog\"`\n- When the modal is open, everything behind it has HTML attribute `aria-hidden=\"true\"`, so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle `aria-hidden=\"true\"`/`aria-hidden=\"false\"` on the main page's wrapper depending on whether or not the modal is open.\n- Modal contains an HTML heading\n- Modal has an `aria-labelledby` attribute whose value is the id of the modal’s heading\n\n**Expected keyboard interactions:**\n\n- Esc key closes the modal and moves focus to whatever triggered the modal to open\n- Tab key at bottom of modal cycles focus back to first focusable element at top of modal\n- Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal\n- Enter key submits modal’s form data, if applicable", "annotations": { "summary": "Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.", "layout": "adaptive", "name": "modals", "support": "dev-ready", "base": true, "role": "modal-dialog", "scroller": true, "type": "layout", "category": "structure", "s1": "false", "selector": ".slds-modal" }, "id": "modals", "restrictees": [ { "description": "", "annotations": { "name": "base", "selector": ".slds-modal", "restrict": "section", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "Centers and sizes the modal horizontally and confines modal within viewport height", "annotations": { "selector": ".slds-modal__container", "restrict": ".slds-modal div", "notes": "This should be nested immediately inside `.slds-modal` with nothing else nested on the same level.", "required": true }, "id": ".slds-modal__container", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the Modal Header container.", "annotations": { "selector": ".slds-modal__header", "restrict": ".slds-modal header", "notes": "This should be nested immediately inside `.slds-modal__container` as the first element.", "required": true }, "id": ".slds-modal__header", "restrictees": [ { "description": "Use when modal header has no content", "annotations": { "selector": ".slds-modal__header_empty", "restrict": ".slds-modal__header" }, "id": ".slds-modal__header_empty", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the scrollable content area for the modal.", "annotations": { "selector": ".slds-modal__content", "restrict": ".slds-modal div", "required": true }, "id": ".slds-modal__content", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the shaded menu area for the modal.", "annotations": { "selector": ".slds-modal__menu", "restrict": ".slds-modal div", "notes": "Either `.slds-modal__menu` or `.slds-modal__content` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.", "required": true }, "id": ".slds-modal__menu", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the Modal Footer container.", "annotations": { "selector": ".slds-modal__footer", "restrict": ".slds-modal footer", "notes": "This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__container`. Nothing should follow it. Note that by default, elements will be aligned to the right.", "required": true }, "id": ".slds-modal__footer", "restrictees": [ { "description": "Makes buttons inside the footer spread to both left and right.", "annotations": { "selector": ".slds-modal__footer_directional", "restrict": ".slds-modal__footer", "notes": "This is only needed when you have two buttons that indicate a back and forward navigation.", "modifier": true, "group": "direction" }, "id": ".slds-modal__footer_directional", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Positions the close button to the top right outside of the modal.", "annotations": { "selector": ".slds-modal__close", "restrict": ".slds-modal button", "notes": "Either `.slds-modal__content` or `.slds-modal__menu` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.", "required": true }, "id": ".slds-modal__close", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Widens the modal to take more horizontal space than default", "name": "small", "selector": ".slds-modal_small", "restrict": ".slds-modal", "modifier": true, "group": "size" }, "id": "small", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Widens the modal to take more horizontal space than small", "name": "medium", "selector": ".slds-modal_medium", "restrict": ".slds-modal", "modifier": true, "group": "size" }, "id": "medium", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Widens the modal to take more horizontal space than large", "name": "large", "selector": ".slds-modal_large", "restrict": ".slds-modal", "modifier": true, "group": "size" }, "id": "large", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Allows the modal to be visible.", "annotations": { "selector": ".slds-fade-in-open", "restrict": ".slds-modal", "notes": "Apply this class to a modal with JavaScript to make it visible.", "modifier": true, "group": "animation" }, "id": ".slds-fade-in-open", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-slide-up-open", "restrict": ".slds-modal", "modifier": true, "group": "animation" }, "id": ".slds-slide-up-open", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-slide-up-saving", "restrict": ".slds-modal", "modifier": true, "group": "animation" }, "id": ".slds-slide-up-saving", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-slide-down-cancel", "restrict": ".slds-modal", "modifier": true, "group": "animation" }, "id": ".slds-slide-down-cancel", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Creates the shaded backdrop used behind the modal.", "annotations": { "selector": ".slds-backdrop", "restrict": ".slds-modal ~ div", "notes": "This should follow after the `.slds-modal` as an empty element.", "required": true }, "id": ".slds-backdrop", "restrictees": [ { "description": "Allows the backdrop to be visible.", "annotations": { "selector": ".slds-backdrop_open", "restrict": ".slds-backdrop", "notes": "Apply this class to a modal backdrop with JavaScript to make it visible.", "modifier": true, "required": true }, "id": ".slds-backdrop_open", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/modals/base/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "taglines", "label": "Taglines" }, { "id": "headless", "label": "Header empty" }, { "id": "footless", "label": "Footer removed" }, { "id": "large", "label": "Large" }, { "id": "directional", "label": "Directional" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "toast": { "description": "#### Accessibility\n\nNotifications should contain `role=\"status\"` on the container to signal to\nassistive technology that they require the user’s attention. Historically the role of `alert` would be used,\nbut because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen\nreader's speech queue. Role of `status` is a polite live region, which does not clear the queue, reducing the risk\nof a toast message being missed.\n\nUse a span with `slds-assistive-text` to let the user know what type of notification it is.", "annotations": { "summary": "Toast serves as a feedback & confirmation mechanism after the user takes an action.", "layout": "responsive", "name": "toast", "support": "dev-ready", "base": true, "role": "alert", "type": "messaging", "category": "base", "selector": ".slds-notify_container" }, "id": "toast", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes a toast container", "name": "base", "selector": ".slds-notify_container", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes toast notification", "selector": ".slds-notify_toast", "restrict": ".slds-notify_container div" }, "id": ".slds-notify_toast", "restrictees": [ { "description": "", "annotations": { "summary": "Alert close button", "selector": ".slds-notify__close", "restrict": ".slds-notify_toast div" }, "id": ".slds-notify__close", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/toast/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "success", "label": "Success" }, { "id": "warning", "label": "Warning" }, { "id": "error", "label": "Error" }, { "id": "error-with-details", "label": "Error With Details" } ] }, { "title": "examples", "items": [ { "id": "small", "label": "Small Column" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "notifications": { "description": "Notifications serve as a feedback & confirmation mechanism that comes in at the top right. The body of the notification is a clickable region that will prompt an additional browser tab with that record loaded and dismiss the notification. It is also dismissable by clicking the X icon.\n\n### Implementation Notes\n\nThe first three notifications that appear on the page should stack on one another. The fourth notification will show slightly beneath the third notification. Any subsequent notifications won't show until earlier notifications are dismissed.\n\n\n#### Accessibility\n\nNotifications should contain `role=\"dialog\"` to signal to\nassistive technology that they require the user’s immediate attention.\n\n#### Implementation Notes and Requirements\nThis notification will consist of the following:\n* Entity icon with background color\n* Subject field for the reminder\n* The time/date of when the event/task is occurring\n* An ‘X’ icon to dismiss the reminder", "annotations": { "summary": "Notifications serve as a feedback & confirmation mechanism that comes into the page at the top right.", "base": true, "name": "notifications", "selector": ".slds-notification", "support": "dev-ready", "category": "experience", "type": "messaging", "role": "dialog" }, "id": "notifications", "restrictees": [ { "description": "", "annotations": { "name": "base", "selector": ".slds-notification", "restrict": ".slds-notification-container section, .slds-notification-container div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "The body of the notification", "selector": ".slds-notification__body", "restrict": ".slds-notification div" }, "id": ".slds-notification__body", "restrictees": [ { "description": "", "annotations": { "summary": "Main reminder component", "selector": ".slds-notification__target", "restrict": ".slds-notification__body a" }, "id": ".slds-notification__target", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Notification close button", "selector": ".slds-notification__close", "restrict": ".slds-notification__body button" }, "id": ".slds-notification__close", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Optional notification footer", "selector": ".slds-notification__footer", "restrict": ".slds-notification div" }, "id": ".slds-notification__footer", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/notifications/base/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "task-notification", "label": "Task Notification" }, { "id": "stacked-2", "label": "Stacked Notifications" }, { "id": "stacked-3", "label": "Three Stacked Notifications" }, { "id": "overflow-six", "label": "Six Stacked Notifications" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "accordion": { "description": "", "annotations": { "summary": "An accordion allows a user to toggle the display of a section of content.", "layout": "responsive", "name": "accordion", "support": "dev-ready", "base": true, "synonyms": "expando collapso, expandable sections, toggle visibility", "type": "expandable-panel", "category": "experience", "selector": ".slds-accordion" }, "id": "accordion", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title", "name": "base", "selector": ".slds-accordion", "restrict": "ul", "variant": true, "support": "dev-ready" }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "List item for each accordion section", "selector": ".slds-accordion__list-item", "restrict": ".slds-accordion li" }, "id": ".slds-accordion__list-item", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Each expandable panel inside of an accordion", "selector": ".slds-accordion__section", "restrict": ".slds-accordion section" }, "id": ".slds-accordion__section", "restrictees": [ { "description": "", "annotations": { "summary": "Summary title for each expandable panel inside of an accordion", "selector": ".slds-accordion__summary", "restrict": ".slds-accordion__section div" }, "id": ".slds-accordion__summary", "restrictees": [ { "description": "", "annotations": { "summary": "Actionable button inside of accordion summary that would toggle the visibility of each section", "selector": ".slds-accordion__summary-action", "restrict": ".slds-accordion__summary button" }, "id": ".slds-accordion__summary-action", "restrictees": [ { "description": "", "annotations": { "summary": "Icon inside of actionable button within an accordion section", "selector": ".slds-accordion__summary-action-icon", "restrict": ".slds-accordion__summary-action svg" }, "id": ".slds-accordion__summary-action-icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Summary title for each expandable panel inside of an accordion", "selector": ".slds-accordion__summary-heading", "restrict": ".slds-accordion__section h3" }, "id": ".slds-accordion__summary-heading", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Each expandable panel inside of an accordion", "selector": ".slds-accordion__content", "restrict": ".slds-accordion__section div" }, "id": ".slds-accordion__content", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "toggle section", "summary": "Toggle visibility of accordion section + rotate icon", "selector": ".slds-is-open", "restrict": ".slds-accordion__section", "modifier": true, "group": "visibility" }, "id": "toggle section", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/accordion/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "section-one-open", "label": "Section one open" }, { "id": "section-two-open", "label": "Section two open" }, { "id": "section-three-open", "label": "Section three open" }, { "id": "multiple-sections-open", "label": "Multiple sections open" }, { "id": "styled", "label": "Wrapped in Card" } ] }, { "title": "examples", "items": [ { "id": "nested-accordions", "label": "Nested Accordions" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "data-tables": { "description": "To initialize a data table, apply the `slds-table` class to the\n`table` element. This class creates a `table`\nwith formatted cells and allows you to use data table utilities.\n\n#### Accessibility\nTo create an accessible table, the top row of column headers (`th`)\nare placed in a `thead`. Each one receives the `scope=\"col\"`\nattribute. The first non-actionable (meaning that doesn't contain a checkbox\nor menu) column in each row should be marked as a `th` with a\n`scope=\"row\"` attribute.", "annotations": { "summary": "Data tables are an enhanced version of an HTML table and are used to display tabular data.", "layout": "adaptive", "name": "data-tables", "support": "dev-ready", "base": true, "role": "grid", "type": "data-display, data-entry, navigation", "category": "structure", "s1": "false", "selector": ".slds-table" }, "id": "data-tables", "restrictees": [ { "description": "", "annotations": { "summary": "Initializes data table", "name": "base", "selector": ".slds-table", "restrict": "table", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "Default Table Row Hover", "annotations": { "selector": ".slds-no-row-hover", "restrict": ".slds-table", "modifier": true }, "id": ".slds-no-row-hover", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Selected Table Row + Hover", "annotations": { "selector": ".slds-is-selected", "restrict": ".slds-table tr", "modifier": true }, "id": ".slds-is-selected", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "By default, nowrap is applied", "annotations": { "selector": ".slds-cell-wrap", "restrict": ".slds-table th, .slds-table td", "modifier": true }, "id": ".slds-cell-wrap", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Use to add a left padding buffer to cells", "annotations": { "selector": ".slds-cell-buffer_left", "restrict": ".slds-table th, .slds-table td", "modifier": true }, "id": ".slds-cell-buffer_left", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Use to add a right padding buffer to cells", "annotations": { "selector": ".slds-cell-buffer_right", "restrict": ".slds-table th, .slds-table td", "modifier": true }, "id": ".slds-cell-buffer_right", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Focus state on a cell", "annotations": { "selector": ".slds-has-focus", "restrict": ".slds-table th, .slds-table td", "modifier": true }, "id": ".slds-has-focus", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Add left and right padding to the first and last cells of a table", "annotations": { "selector": ".slds-table_cell-buffer", "restrict": ".slds-table", "required": true, "modifier": true }, "id": ".slds-table_cell-buffer", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Add vertical borders to a table", "annotations": { "selector": ".slds-table_bordered", "restrict": ".slds-table", "modifier": true }, "id": ".slds-table_bordered", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Add column borders", "annotations": { "selector": ".slds-table_col-bordered", "restrict": ".slds-table", "modifier": true }, "id": ".slds-table_col-bordered", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Add alternating strips to rows", "annotations": { "selector": ".slds-table_striped", "restrict": ".slds-table", "modifier": true }, "id": ".slds-table_striped", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Set table to use fixed layout for width and truncation purposes", "name": "advanced", "selector": ".slds-table_fixed-layout", "restrict": ".slds-table", "support": "dev-ready", "variant": true }, "id": "advanced", "restrictees": [ { "description": "If the column is sortable, then let's handle the actionable\nregion of the `` cell", "annotations": { "selector": ".slds-is-sortable", "restrict": ".slds-table_fixed-layout th" }, "id": ".slds-is-sortable", "restrictees": [ { "description": "Icon inside sortable th", "annotations": { "selector": ".slds-is-sortable__icon", "restrict": ".slds-is-sortable .slds-icon" }, "id": ".slds-is-sortable__icon", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "If the column header has a menu button, then let's add right padding to the\nheader to preserve truncation", "annotations": { "selector": ".slds-has-button-menu", "restrict": ".slds-table_fixed-layout th" }, "id": ".slds-has-button-menu", "restrictees": [ { "description": "Allows for alignment of button, such as a menu", "annotations": { "selector": ".slds-th__action-button", "restrict": ".slds-has-button-menu .slds-button_icon" }, "id": ".slds-th__action-button", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Active state of sorted column", "annotations": { "selector": ".slds-is-sorted", "restrict": ".slds-table_fixed-layout th" }, "id": ".slds-is-sorted", "restrictees": [ { "description": "Change direction of arrow", "annotations": { "name": "sorted-ascending", "selector": ".slds-is-sorted_asc", "restrict": ".slds-is-sorted", "modifier": true }, "id": "sorted-ascending", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Resizable data table columns", "annotations": { "selector": ".slds-table_resizable-cols", "restrict": ".slds-table_fixed-layout" }, "id": ".slds-table_resizable-cols", "restrictees": [ { "description": "Provide an indicator that resizing is available", "annotations": { "selector": ".slds-is-resizable", "restrict": ".slds-table_resizable-cols th" }, "id": ".slds-is-resizable", "restrictees": [ { "description": "Resizable handle", "annotations": { "selector": ".slds-resizable", "restrict": ".slds-is-resizable div" }, "id": ".slds-resizable", "restrictees": [ { "description": "Grab handle to resize column", "annotations": { "selector": ".slds-resizable__handle", "restrict": ".slds-resizable span" }, "id": ".slds-resizable__handle", "restrictees": [ { "description": "Grab handle divider indicator when resizing column", "annotations": { "selector": ".slds-resizable__divider", "restrict": ".slds-resizable__handle span" }, "id": ".slds-resizable__divider", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/data-tables/advanced/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "cell-focused", "label": "Cell Focused" }, { "id": "actionable-mode", "label": "Actionable Mode" }, { "id": "row-selected", "label": "Row Selected (Actionable mode)" }, { "id": "all-row-selected", "label": "All Rows Selected (Actionable mode)" }, { "id": "sorted-column-asc", "label": "Sorted Ascending (Actionable mode)" }, { "id": "sorted-column-desc", "label": "Sorted Descending (Actionable mode)" }, { "id": "resized-column", "label": "Column Resized (Actionable mode)" } ] }, { "title": "examples", "items": [ { "id": "header-icon-menu-button", "label": "Header Icon and Menu Button" }, { "id": "header-menu-button", "label": "Header Menu Button" }, { "id": "cell-icon", "label": "Cell Icon" }, { "id": "product-listing", "label": "Product Listing" }, { "id": "radio-group", "label": "Radio Group" }, { "id": "data-table-no-borders", "label": "No borders" }, { "id": "data-table-headless", "label": "Headless" }, { "id": "data-table-headless-no-borders", "label": "Headless with no borders" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "Actionable area inside th", "annotations": { "selector": ".slds-th__action", "restrict": ".slds-table th div, .slds-table th a" }, "id": ".slds-th__action", "restrictees": [ { "description": "Allows for alignment of form element, such as a checkbox", "annotations": { "selector": ".slds-th__action_form", "restrict": ".slds-th__action" }, "id": ".slds-th__action_form", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to remove the top border when a table's header is visually hidden", "name": "hidden-header", "selector": ".slds-table_header-hidden", "restrict": ".slds-table", "support": "dev-ready", "variant": true }, "id": "hidden-header", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/data-tables/hidden-header/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "Inline edit plugin for advanced tables\n\n#### Accessibility\nThe Advanced Data Table and Inline Edit Data Table are based on the semantics,\nroles and interaction model of the [ARIA Grid](http://w3c.github.io/aria/practices/aria-practices.html#grid).\nIn SLDS we overlay the ARIA Grid on top of native HTML table semantics.\n\nThe role of Grid comes with 2 distinct modes, Navigation mode and Actionable\nmode. Both come with very specific keyboard interaction modals. Navigation\nmode is the default mode of the Grid.\n\n**Navigation Mode**\n- Tabbing into the grid focuses the first data cell in the table.\n- The second tab key press takes the user focus out of the grid onto the next focusable element on the page.\n- Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on.\n- Navigation in the grid is accomplished via the arrow keys.\n- No actionable items in cell contents are focusable.\n- Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode.\n\n**Actionable Mode**\n- Once in Actionable mode, all focusable items in the entire grid can be tabbed to.\n- Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one.\n- Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in.\n- When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode.\n\nFor the purposes of these docs, the Default state of Inline Edit is\nrepresentative of Navigation mode, all other states are assumed to be in Actionable Mode.", "annotations": { "summary": "Initiates inline-edit mode for data-tables", "name": "inline-edit", "selector": ".slds-table_edit", "restrict": ".slds-table", "support": "dev-ready", "variant": true }, "id": "inline-edit", "restrictees": [ { "description": "Cell that has error icon appear within", "annotations": { "selector": ".slds-cell-error", "restrict": ".slds-table_edit td", "required": true }, "id": ".slds-cell-error", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Informs a table cell that it has editing capabilities", "annotations": { "selector": ".slds-cell-edit", "restrict": ".slds-table_edit th, .slds-table_edit td" }, "id": ".slds-cell-edit", "restrictees": [ { "description": "Informs a cell that it has been edited but not saved", "annotations": { "selector": ".slds-is-edited", "restrict": ".slds-cell-edit", "modifier": true }, "id": ".slds-is-edited", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Informs a cell that it has an error inside of it", "annotations": { "selector": ".slds-has-error", "restrict": ".slds-cell-edit", "modifier": true }, "id": ".slds-has-error", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "selector": ".slds-cell-edit__button", "restrict": ".slds-cell-edit button" }, "id": ".slds-cell-edit__button", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "Handles children of the table where we don't want any focusable cells", "annotations": { "selector": ".slds-no-cell-focus", "restrict": ".slds-table_edit", "modifier": true }, "id": ".slds-no-cell-focus", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/data-tables/inline-edit/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "with-link", "label": "Cell focused - Link (Actionable mode)", "script": "\n document.getElementById('link-01').focus()\n " }, { "id": "checkbox", "label": "Cell focused - Checkbox (Actionable mode)", "script": "\n document.getElementById('checkbox-01').focus()\n " }, { "id": "focused", "label": "Cell focused (Navigation mode)" }, { "id": "edit", "label": "Cell edit (Actionable mode)", "script": "\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n " }, { "id": "required", "label": "Cell edit — Required (Actionable mode)", "script": "\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n " }, { "id": "error", "label": "Cell edit — Error (Actionable mode)", "script": "\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n " }, { "id": "edited", "label": "Cell edited (Actionable mode)" }, { "id": "row-selected-with-edited-cell", "label": "Row Selected with an Edited Cell" }, { "id": "row-error", "label": "Error - Row level on save (Actionable mode)", "script": "\n document.getElementById('button-01').focus()\n " }, { "id": "row-error-and-selected", "label": "Error - Row level on save (Actionable mode) with entire row selected" }, { "id": "row-error-focused", "label": "Error indicator - Focused (Actionable mode)", "script": "\n document.getElementById('error-01').focus()\n " }, { "id": "header-cell-focused", "label": "Header cell focused (Navigation mode)" }, { "id": "header-cell-marked", "label": "Header cell marked (Navigation mode)" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "Responsive tables\n\nWhen a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.\n\nWhen `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.\n\nWhen `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.", "annotations": { "summary": "Creates stacked row with stacked cells", "name": "responsive", "selector": ".slds-max-medium-table_stacked", "restrict": ".slds-table", "support": "prototype", "variant": true, "layout": "responsive" }, "id": "responsive", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/data-tables/responsive/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "data-table-responsive-horizontal", "label": "Stacked with Horizontal Cells" }, { "id": "data-table-responsive-stacked", "label": "Stacked" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "summary": "Creates stacked rows with horizontal cells", "selector": ".slds-max-medium-table_stacked-horizontal", "restrict": ".slds-table", "support": "prototype", "modifier": true, "layout": "responsive" }, "id": ".slds-max-medium-table_stacked-horizontal", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/data-tables/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "data-table-striped-rows", "label": "With striped rows" }, { "id": "data-table-no-hover", "label": "With no row hovers" }, { "id": "data-table-vertical-borders", "label": "With vertical borders" }, { "id": "single-column", "label": "Single Column" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "page-headers": { "description": "", "annotations": { "summary": "Page headers are used at the top of several page types. They use the `.slds-page-header` class as a base and are comprised of multiple components.", "layout": "adaptive", "name": "page-headers", "support": "dev-ready", "base": true, "role": "presentation", "type": "data-display", "category": "structure", "selector": ".slds-page-header" }, "id": "page-headers", "restrictees": [ { "description": "The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.", "annotations": { "summary": "Initializes page header", "variant": true, "name": "base", "selector": ".slds-page-header", "restrict": "div", "support": "dev-ready" }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Used for creating rows in a page header", "selector": ".slds-page-header__row", "restrict": ".slds-page-header div" }, "id": ".slds-page-header__row", "restrictees": [ { "description": "", "annotations": { "summary": "Used to create rows with gutters in the page header", "selector": ".slds-page-header__row_gutters", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__row_gutters", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a column containing the page title", "selector": ".slds-page-header__col_title", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__col_title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a column containing the page actions", "selector": ".slds-page-header__col_actions", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__col_actions", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a column containing the page meta data", "selector": ".slds-page-header__col_meta", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__col_meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a column containing the page controls", "selector": ".slds-page-header__col_controls", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__col_controls", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a column containing the page record details", "selector": ".slds-page-header__col_controls", "restrict": ".slds-page-header__row" }, "id": ".slds-page-header__col_controls", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Holds all the elements that make up the overall page name", "selector": ".slds-page-header__name", "restrict": ".slds-page-header div" }, "id": ".slds-page-header__name", "restrictees": [ { "description": "", "annotations": { "summary": "Used to contain the page name title", "selector": ".slds-page-header__name-title", "restrict": ".slds-page-header__name div" }, "id": ".slds-page-header__name-title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to position the list view switcher", "selector": ".slds-page-header__name-switcher", "restrict": ".slds-page-header__name div" }, "id": ".slds-page-header__name-switcher", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to display the meta-text related to the page name", "selector": ".slds-page-header__name-meta", "restrict": ".slds-page-header p" }, "id": ".slds-page-header__name-meta", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Contains the page header meta text", "selector": ".slds-page-header__meta-text", "restrict": ".slds-page-header p" }, "id": ".slds-page-header__meta-text", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "sumamry": "Used to display the main page heading title", "selector": ".slds-page-header__title", "restrict": ".slds-page-header h1 span" }, "id": ".slds-page-header__title", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create a row of page header controls", "selector": ".slds-page-header__controls", "restrict": ".slds-page-header div" }, "id": ".slds-page-header__controls", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Used to create spacing between each page header control", "selector": ".slds-page-header__control", "restrict": ".slds-page-header div" }, "id": ".slds-page-header__control", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "The title for the Object Home page header is sorting component.\nThe `.slds-text-focus` class is placed on the media object that\ncontains the title and down icon to simulate a hover and\nfocus state of a link.\n\nThis component is created entirely of existing components\nlike grids, buttons, button groups, and\nicons.", "annotations": { "summary": "Initializes object home page header", "variant": true, "name": "object-home", "selector": ".slds-page-header_object-home", "restrict": ".slds-page-header", "support": "dev-ready" }, "id": "object-home", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/page-headers/object-home/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "base-extra-long", "label": "Base with extra long name" }, { "id": "card", "label": "Inside a card" }, { "id": "tab-card", "label": "Inside a tabs card" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "Vertical page header record home contains up to seven compact layout fields. They're contained in the `.slds-page-header__detail-row` div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.", "annotations": { "summary": "Initializes vertical page header", "variant": true, "name": "record-home-vertical", "selector": ".slds-page-header_vertical", "restrict": ".slds-page-header", "support": "dev-ready" }, "id": "record-home-vertical", "restrictees": [ { "description": "", "annotations": { "summary": "Vertical list of detail items", "selector": ".slds-page-header__detail-list", "restrict": ".slds-page-header_vertical ul" }, "id": ".slds-page-header__detail-list", "restrictees": [ { "description": "", "annotations": { "summary": "List items of vertical detail list", "selector": ".slds-page-header__detail-item", "restrict": ".slds-page-header__detail-list li" }, "id": ".slds-page-header__detail-item", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/page-headers/record-home-vertical/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "Page header record home contains up to four\ncompact layout fields. They're contained in the `.slds-page-header__detail-row` div.\nThat div contains the top and bottom spacing needed for this version of the page header.\n\nWhen text is truncated, the full text should be placed in\na tooltip on hover (currently shown in the title\nattribute). One line truncation is created by using the\n`.slds-truncate` class. Two line truncation must be achieved\nusing JavaScript.\n\nThe page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.\n\n**Record Title**\n\n- Display Record Type icon to the left of the title\n- Record Type is displayed above the title\n- When required, follow action is displayed to the right of the record title\n- Display one line of text, truncate when the length conflicts with the page level actions\n\nAs shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto: or web url. Do not modify the user's input, display as intended.\n\nWhen text is truncated, display full field text in browser tooltip on hover.\n\nDisplay addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the `.slds-truncate` class. Display the full address via browser tooltip.", "annotations": { "summary": "Bottom section containing record details", "variant": true, "name": "record-home", "selector": ".slds-page-header_record-home", "restrict": ".slds-page-header", "support": "dev-ready" }, "id": "record-home", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/page-headers/record-home/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] }, { "description": "", "annotations": { "summary": "Creates margins around the detail section of record home", "selector": ".slds-page-header__detail-row", "restrict": ".slds-page-header ul", "notes": "Only the record home page header contains this detail area" }, "id": ".slds-page-header__detail-row", "restrictees": [ { "description": "", "annotations": { "summary": "Creates margins around the detail section of record home", "selector": ".slds-page-header__detail-block", "restrict": ".slds-page-header__detail-row li", "notes": "Only the record home page header contains this detail area" }, "id": ".slds-page-header__detail-block", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "The Related List page header is similar to the Object Home page header.\nIt includes a breadcrumb component at the top and the title is truncated.", "annotations": { "summary": "Initializes Related List home page header", "variant": true, "name": "related-list", "selector": ".slds-page-header_related-list", "restrict": ".slds-page-header", "support": "dev-ready" }, "id": "related-list", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/page-headers/related-list/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": "./ui/components/page-headers/base/example.jsx", "showcase": [ { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "docked-form-footer": { "description": "", "annotations": { "summary": "Docked form footer is used to dock form actions to the bottom of the viewport", "base": true, "name": "docked-form-footer", "selector": ".slds-docked-form-footer", "support": "dev-ready", "s1": "false" }, "id": "docked-form-footer", "restrictees": [ { "description": "The popover should be positioned with JavaScript.\n\nWhen errors are found within a form, the user will be notified with a popover\nwith the page-level errors listed out. Please provide a contextually specific\ntitle for the dialog with the aria-label attribute. e.g. \"Acme Global edit\nform errors\"", "annotations": { "summary": "Creates a docked form footer", "name": "base", "selector": ".slds-docked-form-footer", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [], "docPath": null, "showcasePath": "./ui/components/docked-form-footer/base/example.jsx", "showcase": [ { "title": "states", "items": [ { "id": "docked-form-footer-with-error", "label": "With error(s)" }, { "id": "docked-form-footer-with-popover", "label": "With error popover" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": null, "showcasePath": null, "showcase": [] }, "drop-zone": { "description": "Screen building elements that surround areas where components can be placed.\nDrop Zones visually indicate to users where they may drag and drop components onto a page.", "annotations": { "summary": "Screen building element to indicate to users where components may be dragged and dropped.", "base": true, "name": "drop-zone", "selector": ".slds-drop-zone", "category": "experience", "type": "layout", "support": "dev-ready", "synonyms": "builder, screens, screen building" }, "id": "drop-zone", "restrictees": [ { "description": "", "annotations": { "summary": "Creates a drop-zone component for screen building", "name": "base", "selector": ".slds-drop-zone", "restrict": "div", "support": "dev-ready", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "name": "drag over", "summary": "Modifier used to indicate that component may be dropped in container", "selector": ".slds-drop-zone_drag", "restrict": ".slds-drop-zone", "modifier": true, "group": "interaction" }, "id": "drag over", "restrictees": [ { "description": "", "annotations": { "summary": "Insertion point of drop zone", "selector": ".slds-drop-zone_drag__slot", "restrict": ".slds-drop-zone_drag div" }, "id": ".slds-drop-zone_drag__slot", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Top label of drop zone", "selector": ".slds-drop-zone__label", "restrict": ".slds-drop-zone div" }, "id": ".slds-drop-zone__label", "restrictees": [ { "description": "", "annotations": { "summary": "Top of populated label of drop zone", "selector": ".slds-drop-zone__label_container", "restrict": ".slds-drop-zone__label" }, "id": ".slds-drop-zone__label_container", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Button within drop zone label", "selector": ".slds-drop-zone__label_button", "restrict": ".slds-drop-zone__label button" }, "id": ".slds-drop-zone__label_button", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Populated region within drop zone", "selector": ".slds-drop-zone__container", "restrict": ".slds-drop-zone div" }, "id": ".slds-drop-zone__container", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "name": "item-hovered", "summary": "Hover state for a component within a drop zone", "selector": ".slds-is-hovered", "restrict": ".slds-drop-zone div", "notes": "Class should be applied via Javascript", "modifier": true, "group": "interactions" }, "id": "item-hovered", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] }, { "description": "", "annotations": { "summary": "Action buttons within drop zone", "selector": ".slds-drop-zone__actions", "restrict": ".slds-drop-zone div" }, "id": ".slds-drop-zone__actions", "restrictees": [], "docPath": null, "showcasePath": null, "showcase": [] } ], "docPath": null, "showcasePath": "./ui/components/drop-zone/base/example.jsx", "showcase": [ { "title": "examples", "items": [ { "id": "drag-over", "label": "Drag Over" }, { "id": "with-populated-region", "label": "With Populated Region" }, { "id": "with-populated-region-and-actions", "label": "With Populated Region and Actions" }, { "id": "with-cards", "label": "With Cards" }, { "id": "dragging-with-cards", "label": "Dragging With Cards" } ] }, { "title": "default", "items": [ { "id": "default" } ] } ] } ], "docPath": "./ui/components/drop-zone/docs.mdx", "showcasePath": null, "showcase": [] }, "input": { "description": "You can style the HTML `` element to align with the Salesforce brand\nby using the `.slds-input` class on the `` element.\n\nThe `` element includes support for all HTML5 types: `text`,\n`password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`,\n`number`, `email`, `url`, `search`, `tel`, and `color`.\n\nThe static state is for form elements that can’t be modified by the user. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.\n\n##### Pointer Events\n\nIn order to have an actionable SVG within the input, like a clear\nor increment/decrement button, the icon must be contained within\na button, not an anchor ``, in order for pointer events to work properly.\nYou can see examples of the correct markup in the [Left Icon & Clear Button example](../input/?example=double-icon&variant=base)\nor the [Counter example](../input/?example=increment-decrement-counter&variant=base).\n\n#### Accessibility\n\nInputs with errors should have `aria-describedby` to insure that the\nassociated field level error message is read by assistive technology.\nIf the error message has an `id=\"my-error-message\"`, then the input should\nhave `aria-describedby=\"my-error-message\"`.\n\nIf you need some type of field level help and if your tooltips are\navailable on hover, make sure they’re also available on keyboard focus. The\nhelp icon needs to be associated to the tooltip so that when the user focuses\non the icon, assistive technology reads out the content of the tooltip. If\nthe tooltip has an `id=\"help\"`, then the `