{ "components": { "buttons": { "description": "Create a button with a `button` or `a` element to retain the native click\nfunction.\n\nUse a disabled attribute when a button can’t be clicked.", "annotations": { "summary": "Buttons are used to invoke an event", "layout": "responsive", "name": "buttons", "support": "dev-ready", "base": true, "role": "button", "type": "action", "category": "base", "selector": ".slds-button" }, "id": "buttons", "restrictees": [ { "description": "The base `.slds-button` looks like a plain text link. It removes all the\nstyling of the native button. It’s typically used to trigger a modal or\ndisplay a “like” link. All button variations are built by adding another\nclass to `.slds-button`.\n\nAdd the `.slds-button--neutral` class to create a neutral button, which\nhas a white background and gray border.\n\nUse a neutral icon button is for buttons with an icon on the left or\nright (not for stateful buttons). Add the `.slds-button--neutral` class\nto `.slds-button`.\n\nThe SVG inside receives the `.slds-button__icon` class. You can position\nthe icon on the right or the left using `.slds-button__icon--right` or\n`.slds-button__icon--left` , which apply the correct amount of space\nbetween the icon and the text.\n\nTo create the brand button, add the `.slds-button--brand` class to\nthe `.slds-button` class.\n\nTo create the destructive button, add the `.slds-button--destructive`\nclass to the `.slds-button` class.\n\nUse the inverse button on dark backgrounds. Add the `.slds-button--inverse`\nclass to the `.slds-button` class.", "annotations": { "summary": "This neutralizes all the base styles making it look like a text link", "name": "base", "selector": ".slds-button", "restrict": "button, a, span", "variant": true }, "id": "base", "restrictees": [ { "description": "Creates the gray border with white background default style", "annotations": { "selector": ".slds-button_neutral", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_neutral", "restrictees": [] }, { "description": "Creates the brand blue Salesforce style", "annotations": { "selector": ".slds-button_brand", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_brand", "restrictees": [] }, { "description": "Creates the inverse style for dark backgrounds", "annotations": { "selector": ".slds-button_inverse", "restrict": ".slds-button", "modifier": true, "group": "theme" }, "id": ".slds-button_inverse", "restrictees": [] }, { "description": "Creates a red button style", "annotations": { "selector": ".slds-button_destructive", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": ".slds-button_destructive", "restrictees": [] }, { "description": "Creates a green button style", "annotations": { "selector": ".slds-button_success", "restrict": ".slds-button", "group": "theme", "modifier": true }, "id": ".slds-button_success", "restrictees": [] }, { "description": "Creates a smaller button style", "annotations": { "selector": ".slds-button_small", "restrict": ".slds-button", "deprecated": true }, "id": ".slds-button_small", "restrictees": [] }, { "description": "The stateful button requires the `.slds-button--neutral` class in addition to the `.slds-button` class.\n\nThe stateful inverse button works just like the stateful button. It requires the `.slds-button--inverse` class in addition to the `.slds-button` class.\n\nIt uses the class `.slds-not-selected` in its initial state. When the user activates the button, use JavaScript to toggle the class to `.slds-is-selected`. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the `.slds-button__icon--stateful` class as well as the `.slds-button__icon--left` class setting the icon on the left.\n\nStateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is `.slds-not-selected`, and JavaScript is used to toggle it to `.slds-is-selected` when activated.\n\n#### Accessibility\n\nFor accessibility, include the attribute `aria-live=\"assertive\"` on the button. The `aria-live=\"assertive\"` attribute means the value of the `` inside the button will be spoken whenever it changes.", "annotations": { "summary": "Initiates a stateful button", "name": "stateful", "selector": ".slds-button_stateful", "restrict": ".slds-button", "variant": true }, "id": "stateful", "restrictees": [ { "description": "Default state of a stateful button", "annotations": { "selector": ".slds-not-selected", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-not-selected", "restrictees": [] }, { "description": "When button is selected and still has focus from click", "annotations": { "selector": ".slds-is-selected-clicked", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-is-selected-clicked", "restrictees": [] }, { "description": "When button is pressed and selected", "annotations": { "selector": ".slds-is-selected", "restrict": ".slds-button_stateful", "notes": "This class should be toggled with JavaScript", "modifier": true, "group": "interaction" }, "id": ".slds-is-selected", "restrictees": [] } ], "markup": "", "markupContext": [] }, { "description": "Sizing for icon that sits inside button--icon", "annotations": { "name": "with-icon", "selector": ".slds-button__icon", "restrict": ".slds-button svg", "variant": true }, "id": "with-icon", "restrictees": [ { "description": "Large size button icon svg", "annotations": { "selector": ".slds-button__icon_large", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_large", "restrictees": [] }, { "description": "Small size button icon svg", "annotations": { "selector": ".slds-button__icon_small", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_small", "restrictees": [] }, { "description": "x-small size button icon svg", "annotations": { "selector": ".slds-button__icon_x-small", "restrict": ".slds-button__icon", "modifier": true, "group": "icon-size" }, "id": ".slds-button__icon_x-small", "restrictees": [] } ], "markup": "", "markupContext": [] } ], "markup": "", "markupContext": [] } ] }, "dueling-picklist": { "description": "#### Accessibility\nThis component is essentially 2 ARIA listboxes side by side, so we follow the [ARIA practices guide](https://www.w3.org/TR/wai-aria-practices/#Listbox) to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:\n\n**Notable attributes**\n- `aria-multiselectable=\"true\"` should be set on each listbox\n- `aria-selected` should be placed on each `role=\"option`, and only set to `true` when selected\n- `aria-labelledby` is used to identify the list to the user and should point to the list label\n- `aria-describedby` is used to provide operation instructions for the Drag and Drop interaction\n\n- *Keyboard navigation**\n- Each list is a tab stop. This provides identification and operation instruction as provided by `aria-describedby` and `aria-labelledby`. State of the overall list is also provided, including total number and number of selected options in the list when focused.\n- Because we support drag and drop re-ordering, we implement the second multi-select keyboard model.\n - Up and Down arrows move focus _and_ selection, with `aria-selected=\"true\"`\n - `shift + up` and `shift + down` moved focus and creates addition selections\n - `ctrl + down` or `ctrl + up` moves focus but selection remains where it is\n - `ctrl + space` toggles selection on the focused option, in addition to previous selections\n - `ctrl + a` selects all options in the list\n - `cmd/ctrl + right` and `cmd/ctrl + left` Moves selected items between lists\n - `space` toggles \"Drag and Drop\" mode. When in \"Drag and Drop\" mode:\n - Up and Down arrows move the selected items _within_ the current list\n\n**Updating Operation and State**\n- As a user interacts with the component, pay close attention to the content of the `aria-live` region and the `option-drag-label` assistive text. This is to provide clear instruction to the user on how to proceed, and what has happened in each State the component will be in", "annotations": { "summary": "Dueling picklist are used to move options between two lists. The list options can be re-ordered.", "base": true, "name": "dueling-picklist", "selector": ".slds-dueling-list", "support": "prototype", "category": "experience", "type": "data-entry", "role": "listbox" }, "id": "dueling-picklist", "restrictees": [ { "description": "A dueling picklist inherits styles from the listbox component", "annotations": { "summary": "Initializes a dueling picklist", "name": "base", "selector": ".slds-dueling-list", "restrict": "div", "variant": true }, "id": "base", "restrictees": [ { "description": "", "annotations": { "summary": "Handles the layout of the dueling picklist", "selector": ".slds-dueling-list__column", "restrict": ".slds-dueling-list div" }, "id": ".slds-dueling-list__column", "restrictees": [] }, { "description": "", "annotations": { "summary": "Bounding visual container for listbox of options", "selector": ".slds-dueling-list__options", "restrict": ".slds-dueling-list div" }, "id": ".slds-dueling-list__options", "restrictees": [] } ], "markup": "
\n
\n
Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.
\n
\n First Category\n
\n
    \n
  • \n \n Option 1\n \n
    • \n
  • \n \n Option 2\n \n
    • \n
  • \n \n Option 3\n \n
    • \n
  • \n \n Option 6\n \n
    • \n
\n
\n
\n
\n \n \n
\n
\n Second Category\n
\n
    \n
  • \n \n Option 4\n \n
    • \n
  • \n \n Option 5\n \n
    • \n
\n
\n
\n
\n \n \n
\n
", "markupContext": [] } ] }, "cards": { "description": "To initialize a card, apply the `.slds-card` class to a containing `
`.\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": "presentation", "type": "data-display, layout", "category": "structure", "selector": ".slds-card" }, "id": "cards", "restrictees": [ { "description": "The base card is used primarily on desktop within a “wide” column\nor “main content area”, which uses two-thirds of the viewport.\nIn addition, the `.slds-card` class is used for layout purposes\nwhen a card has an adjacent card, those proceeding the initial will provide margin\nto give the cards spacing between each other.", "annotations": { "summary": "Initializes card", "name": "base", "selector": ".slds-card", "restrict": "article, div", "variant": true }, "id": "base", "restrictees": [ { "description": "Initializes card header", "annotations": { "selector": ".slds-card__header", "restrict": ".slds-card div" }, "id": ".slds-card__header", "restrictees": [] }, { "description": "Initializes card body", "annotations": { "selector": ".slds-card__body", "restrict": ".slds-card div" }, "id": ".slds-card__body", "restrictees": [] }, { "description": "Initializes card footer", "annotations": { "selector": ".slds-card__footer", "restrict": ".slds-card footer" }, "id": ".slds-card__footer", "restrictees": [] } ], "markup": "
\n
\n
\n
\n \n \n \n \n \n
\n
\n

\n \n Card Header\n \n

\n
\n
\n
\n \n
\n
\n
Card Body (custom goes in here)
\n
Card Footer
\n
", "markupContext": [] } ] }, "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 `