lightning-base-components 1.19.8-alpha → 1.19.10-alpha

package/src/lightning/button/__docs__/button.md

@@ -1,259 +0,0 @@
----
-examples:
-    - name: basic
-      label: Basic Buttons
-      description: Button variants display the buttons with different colors to convey different meanings. The default variant is neutral.
-    - name: disabled
-      label: Disabled Buttons
-      description: Disabled buttons are grayed out and can't be clicked.
-    - name: withIcon
-      label: Buttons with Icons
-      description: Buttons can include a utility icon next to the label for decorative purposes. The default icon position is left.
-    - name: inverse
-      label: Inverse Buttons
-      description: Buttons with the inverse variant are transparent and have light-colored labels, which works well with a dark background.
-    - name: onclick
-      label: Buttons with Custom onclick Actions
-      description: Buttons can use custom onclick handlers to perform actions.
-    - name: accesskey
-      label: Buttons with Accesskey and Tabindex Attributes
-      description: Buttons define access key shortcuts with the accesskey attribute, and use the tabindex attribute to determine the order in which those buttons are visited when using the tab key.
----
-
-A `lightning-button` component represents a button element that executes an
-action. Use `lightning-button` where users need to:
-
--   Submit or reset a form
--   Begin a new task
--   Trigger a new UI element to appear on the page
--   Specify a new or next step in a process
-
-Use the `type` attribute to specify `button`, `submit`, or `reset`. The default type is `button` and doesn't need to be specified.
-
-The `submit` and `reset` types create buttons for submitting and resetting form data.
-Use these button types in `lightning-record-edit-form` and the HTML `form` element. The `reset` type button only deletes the values in the form fields without interacting with the database. For information about resetting the form fields to their initial values, see
-[`lightning-record-edit-form`](bundle/lightning-record-edit-form/documentation) .
-
-For the default button, clicking the button triggers the `click` event. Use an `onclick` handler to perform the button's action.
-
-You can create a button with a label only, or add the `icon-name` attribute
-for a button with a label and icon. To create an icon-only
-button, use the `lightning-button-icon` component instead.
-
-Here's an example that creates a button with the `brand` variant, and displays
-`label` text on the button. The `title` attribute provides tooltip text for the button.
-
-```html
-<template>
-    <lightning-button
-        variant="brand"
-        label="Start"
-        title="Begins the task"
-        onclick={handleClick}
-    >
-    </lightning-button>
-</template>
-```
-
-Here's another example that creates a button with the `brand` variant, with a label
-and icon. The icon is positioned to the left
-of the label by default, so the example uses `icon-position` to display it on the right.
-
-```html
-<template>
-    <lightning-button
-        variant="brand"
-        label="Download"
-        icon-name="utility:download"
-        icon-position="right"
-        onclick={handleClick}
-    >
-    </lightning-button>
-</template>
-```
-
-You can retrieve the button that's clicked by using `event.target`. For
-example, to retrieve the label on the button, use
-`event.target.label`.
-
-#### Component Styling
-
-`lightning-button` implements the
-[buttons](https://www.lightningdesignsystem.com/components/buttons/) blueprint in the Salesforce Lightning Design System (SLDS).
-
-##### Icons
-
-Use the `icon-name` attribute to add a utility icon to the button.
-
-The SLDS utility icon category provides nearly 200 utility
-icons that can be used in `lightning-button` along with label text. Although
-SLDS provides several categories of icons, only the utility category can be used in `lightning-button`.
-
-Visit [https://lightningdesignsystem.com/icons/#utility](https://lightningdesignsystem.com/icons/#utility) to view the utility icons.
-
-##### Variants
-
-Use the `variant` attribute with one of these values to apply styling.
-
--   `base` is a button without a border, which gives it the look of a plain text link.
--   `neutral` is the default variant, a plain uncolored button.
--   `brand` is a blue button, used to draw attention to the primary action on a page.
--   `brand-outline` is similar to `brand` but the color is used for the label and border only, not the button color.
--   `destructive` is a red button used to warn users that its action has a negative effect.
--   `destructive-text` is similar to `destructive` but only the label and border are red.
--   `inverse` uses the background color and light text, useful for dark backgrounds.
--   `success` is a green button used to indicate a successful action.
-
-##### Customize Component Styling
-
-To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
-
-This example adds a margin to the left of the second button using an SLDS class.
-
-```html
-<lightning-button label="Cancel" title="Cancel"></lightning-button>
-<lightning-button
-    variant="brand"
-    label="Brand"
-    title="Primary action"
-    class="slds-m-left_x-small"
-></lightning-button>
-```
-
-You can also use the `stretch` attribute to expand the button to the full available width. In this example, the button stretches horizontally to fit the full `<div>` container.
-
-```html
-<div>
-    <lightning-button
-        variant="brand"
-        label="Get Started"
-        title="Get Started"
-        stretch
-    ></lightning-button>
-</div>
-```
-
-To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
-
-```html
-<lightning-button
-    variant="brand"
-    label="Submit"
-    title="Submit"
-    class="my-brand"
->
-</lightning-button>
-```
-
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with `brand` variant using the `--slds-c-button-brand-color-background` custom property.
-
-```css
-.my-brand {
-    --slds-c-button-brand-color-background: purple;
-}
-```
-
-Custom properties for buttons work only with particular `lightning-button` variants.
-
-| CSS Custom Property                 | `lightning-button` Variants                      |
-| ----------------------------------- | ------------------------------------------------ |
-| `--slds-c-button-*`                  | all                                              |
-| `--slds-c-button-color-*`            | `base`                                           |
-| `--slds-c-button-text-color-*`       | `neutral` (default), `base`, and `brand-outline` |
-| `--slds-c-button-neutral-*`          | `neutral` (default)                              |
-| `--slds-c-button-brand-*`            | `brand`                                          |
-| `--slds-c-button-outline-brand-*`    | `brand-outline`                                  |
-| `--slds-c-button-destructive-*`      | `destructive`                                    |
-| `--slds-c-button-text-destructive-*` | `destructive-text`                               |
-| `--slds-c-button-inverse-*`          | `inverse`                                        |
-| `--slds-c-button-success-*`          | `success`                                        |
-
-See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
-
-For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
-
-To understand how we implemented SLDS in `lightning-button`, see the **Source Code** section.
-
-#### Usage Considerations
-
-To create an icon-only button, use the `lightning-button-icon` component instead. Creating an icon-only button using `lightning-button` results in additional spacing next to the icon. To create a button that triggers a menu, use `lightning-button-menu`.
-
-Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.
-
-If you're creating forms to interact with Salesforce records, consider using `lightning-record-form` or `lightning-record-edit-form`.
-
-We don't support changing the label alignment on the button. To adjust the padding, inline spacing, or line height of the text label, use [SLDS styling hooks](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview).
-
-To address text wrapping in long labels when the browser viewport is reduced, customize the line height and block spacing of the button label using SLDS styling hooks.
-
--   `--slds-c-button-line-height`
--   `--slds-c-button-spacing-blockstart`
--   `--slds-c-button-spacing-blockend`
-
-On mobile screens, we recommend setting the button size to
-44x44 px. If you have more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44x44 px. For more information, see [Follow Accessible Mobile Design Guidelines
-](https://developer.salesforce.com/docs/platform/lwc/guide/mobile-a11y).
-
-#### Accessibility
-
-Buttons must have an accessible name to enable assistive technology to describe the button's purpose. Provide this name using the `label` attribute and make it a clear call to action, for example, "Edit record".
-
-If you create an icon-only button using `lightning-button`, provide an accessible name using the `aria-label` or `aria-labelledby` attribute. We recommend that you use one of the attributes but not both.
-
-To provide a text label that's not visible on the screen, use `aria-label`.
-
-```html
-<lightning-button
-    aria-label="Download"
-    icon-name="utility:download"
-    variant="base"></lightning-button>
-```
-
-To associate the button with text from another element, use `aria-labelledby`.
-
-```html
-<h2 id="downloadLabel">Download Files</h2>
-<h3 id="downloadDesc">View and make changes to your files</h3>
-<lightning-button
-    aria-labelledby="downloadLabel downloadDesc"
-    icon-name="utility:download"
-    variant="base"></lightning-button>
-```
-
-To use `aria-label` with additional descriptive text, use `aria-describedby`.
-
-```html
-<lightning-button
-    aria-label="Close"
-    aria-describedby="descriptionClose"
-    icon-name="utility:close"
-    variant="base"></lightning-button>
-
-
-<div id="descriptionClose">Closing this window resets the form and
-returns you back to the main page.</div>
-```
-
-`lightning-button` provides many variants that add color to a button, which convey different meaning on a button. Use the variants together with clear text on the button to match the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message.
-
-To inform screen readers that a button is disabled, include the `disabled` attribute.
-
-Use the following accessibility and `aria` attributes on `lightning-button`.
-
-| Attribute        | Type              | Description                                                                                                                                                                                                                                                                                                                                          |
-| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| accesskey        | string            | A shortcut key to activate or place focus on the button.                                                                                                                                                                                                                                                                                             |
-| aria-atomic      | boolean           | Specifies whether the screen reader should always present the live region as a whole, even if only part of the region changes. The default is `false`.                                                                                                                                                                                               |
-| aria-controls    | ID reference list | An element ID or a space-separated list of element IDs whose presence or content is controlled by this button.                                                                                                                                                                                                                                       |
-| aria-describedby | ID reference list | An element ID or a space-separated list of element IDs that provide a descriptive label or description for the button.                                                                                                                                                                                                                               |
-| aria-expanded    | boolean           | Indicates whether a collapsible element that's controlled by the button is expanded or collapsed. To reference the controlled element, use `aria-controls`.                                                                                                                                                                                          |
-| aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'.                                                                                                                                                                                                                |
-| aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
-| aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.  |
-| aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
-
-For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/button/__examples__/accesskey/accesskey.css

@@ -1,14 +0,0 @@
-kbd {
-    background-color: #eee;
-    border-radius: 3px;
-    border: 1px solid #b4b4b4;
-    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
-    color: #333;
-    display: inline-block;
-    font-family: consolas,"Liberation Mono",courier,monospace;
-    font-size: .85em;
-    font-weight: 700;
-    line-height: 1;
-    padding: 2px 4px;
-    white-space: nowrap;
-}

package/src/lightning/button/__examples__/accesskey/accesskey.html

@@ -1,33 +0,0 @@
-<template>
-    <div class="slds-m-top_xx-small slds-m-bottom_xx-small">
-        <h2 class="slds-text-heading_small slds-m-bottom_xx-small">
-            Buttons with custom access keys.
-        </h2>
-        <div class="slds-m-bottom_medium slds-p-bottom_medium slds-border_bottom">
-            To activate the buttons using the access key, press the following keys:
-            <ul class="slds-list_dotted">
-                <li class="slds-m-vertical_x-small">Mac: &nbsp;<kbd>Control</kbd>&nbsp;+&nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
-                <li class="slds-m-vertical_x-small">Windows: &nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
-                <li class="slds-m-vertical_x-small">Firefox on Windows: &nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd>Shift</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
-            </ul>
-        </div>
-        <p>
-            The <code>accesskey</code> attribute has a value specified in the button's label text
-        </p>
-
-        <div class="slds-p-vertical_small">
-            <!-- Basic button -->
-            <lightning-button label="With accesskey 'x'" title="Download action" accesskey="x" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Button with icon before the label text -->
-            <lightning-button label="With accesskey 'y'" title="Download action" accesskey="y" onclick={handleClick} icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Button with icon after the label text -->
-            <lightning-button label="With accesskey 'z'" title="Download action" accesskey="z" onclick={handleClick} icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-        </div>
-
-        <div class="slds-m-vertical_medium slds-p-vertical_medium slds-border_bottom slds-border_top">
-            <p>The label of the button that was activated is: <span class="slds-text-heading_small">{clickedButtonLabel}</span></p>
-        </div>
-    </div>
-</template>

package/src/lightning/button/__examples__/accesskey/accesskey.js

@@ -1,9 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonAccesskey extends LightningElement {
-    clickedButtonLabel;
-
-    handleClick(event) {
-        this.clickedButtonLabel = event.target.label;
-    }
-}

package/src/lightning/button/__examples__/basic/basic.html

@@ -1,32 +0,0 @@
-<template>
-    <div class="slds-m-top_small slds-m-bottom_medium">
-        <h2 class="slds-text-heading_small slds-m-bottom_small">
-            Click the buttons to activate the <code>onclick</code> handler and view the label of the clicked button.
-        </h2>
-
-        <!-- Base variant: Makes a button look like a link -->
-        <lightning-button variant="base" label="Base" title="Looks like a link" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Neutral variant (default) -->
-        <lightning-button label="Neutral" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Brand variant: Identifies the primary action in a group of buttons -->
-        <lightning-button variant="brand" label="Brand" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look -->
-        <lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Destructive variant: Identifies a potentially negative action -->
-        <lightning-button variant="destructive" label="Destructive" title="Destructive action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Destructive text variant: Identifies a potentially negative action, but has a lighter look -->
-        <lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-
-        <!-- Success variant: Identifies a successful action -->
-        <lightning-button variant="success" label="Success" title="Successful action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
-    </div>
-
-    <div class="slds-m-vertical_medium">
-        <p>The label of the button that was clicked is: <span class="slds-text-heading_small">{clickedButtonLabel}</span></p>
-    </div>
-</template>

package/src/lightning/button/__examples__/basic/basic.js

@@ -1,9 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonBasic extends LightningElement {
-    clickedButtonLabel;
-
-    handleClick(event) {
-        this.clickedButtonLabel = event.target.label;
-    }
-}

package/src/lightning/button/__examples__/disabled/disabled.html

@@ -1,28 +0,0 @@
-<template>
-    <div class="slds-m-top_small slds-m-bottom_medium">
-        <h2 class="slds-text-heading_small slds-m-bottom_small">
-                These buttons don't respond when you click them.
-            </h2>
-
-            <!-- Base variant: Makes a button look like a link -->
-            <lightning-button variant="base" label="Base" title="Looks like a link" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Neutral variant (default) -->
-            <lightning-button label="Neutral" title="Non-primary action" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Brand variant: Identifies the primary action in a group of buttons -->
-            <lightning-button variant="brand" label="Brand" title="Primary action" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Brand outline variant -->
-            <lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Destructive variant: Identifies a potentially negative action -->
-            <lightning-button variant="destructive" label="Destructive" title="Destructive action" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Destructive text variant: This button is used to indicate a destructive action to the user, like permanently erasing data.  -->
-            <lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" disabled class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Success variant: Identifies a successful action -->
-            <lightning-button variant="success" label="Success" title="Success" disabled class="slds-m-left_x-small"></lightning-button>
-        </div>
-    </template>

package/src/lightning/button/__examples__/disabled/disabled.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonDisabled extends LightningElement {}

package/src/lightning/button/__examples__/inverse/inverse.css

@@ -1,11 +0,0 @@
-.lgc-bg-inverse {
-    background-color: rgb(22 50 92);
-}
-
-.slds-m-left_x-small {
-    margin-left: 0.5rem;
-}
-  
-.slds-p-around_medium {
-   padding: 1rem;
-}

package/src/lightning/button/__examples__/inverse/inverse.html

@@ -1,43 +0,0 @@
-<template>
-        <div class="slds-m-top_small slds-m-bottom_small">
-                <h2 class="slds-text-heading_small slds-m-bottom_xx-small">
-                    Inverse variant of buttons with varying attribute values.
-                </h2>
-                <p class="slds-m-bottom_medium">
-                    <code>variant</code> attribute has a value of <code>inverse</code>
-                </p>
-
-            <div class="slds-p-around_medium lgc-bg-inverse"
-            style="display: flex">
-                <!-- Basic button -->
-                <lightning-button variant="inverse" label="Download" title="Download action" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Button with icon before the label text -->
-                <lightning-button variant="inverse" label="Download" title="Download action" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Button with icon after the label text -->
-                <lightning-button variant="inverse" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-            </div>
-        </div>
-
-        <div class="slds-m-top_medium slds-m-bottom_x-large">
-                <h2 class="slds-text-heading_small slds-m-bottom_xx-small">
-                    Inverse variant of buttons that are disabled.
-                </h2>
-            <ul class="slds-list_dotted slds-m-bottom_medium">
-                <li><code>variant</code> attribute has a value of <code>inverse</code></li>
-                <li><code>disabled</code> attribute is present</li>
-            </ul>
-
-            <div class="slds-p-around_medium lgc-bg-inverse" style="display: flex">
-                <!-- Button that is disabled -->
-                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Button that is disabled and has an icon before the label text -->
-                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Button that is disabled and has an icon after the label text -->
-                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled icon-name="utility:delete" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-            </div>
-        </div>
-    </template>

package/src/lightning/button/__examples__/inverse/inverse.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonInverse extends LightningElement {}

package/src/lightning/button/__examples__/onclick/onclick.html

@@ -1,38 +0,0 @@
-<template>
-        <div class="slds-m-top_medium slds-m-bottom_x-large">
-            <h2 class="slds-text-heading_small slds-m-bottom_medium">
-                Buttons with custom <code>onclick</code> handlers.
-            </h2>
-            <div class="slds-card">
-                <div class="slds-m-around_medium">
-                    <p class="slds-text-heading_x-small slds-m-bottom_medium">
-                        This button's handler toggles the icon used on the button and visibility of a content block. </p>
-                    <!-- Toggle visibility of a content block when clicked -->
-                    <lightning-button label={toggleButtonLabel} title="Toggle content action" icon-name={toggleIconName}
-                        onclick={handleToggleClick}>
-                    </lightning-button>
-                </div>
-                <div class="slds-m-vertical_large slds-m-around_medium lgc-id_content-toggle">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </div>
-            </div>
-            <div class="slds-card">
-                <div class="slds-m-around_medium">
-                    <p class="slds-text-heading_x-small slds-m-top_medium slds-m-bottom_large">
-                        This button's handler generates random content.</p>
-
-                    <!-- Generate random content when clicked -->
-                    <lightning-button label="Random greek letter" title="Random greek letter action"
-                        icon-name="utility:refresh" onclick={handleRandomClick} class="slds-m-left_x-small">
-                    </lightning-button>
-                    <div class="slds-m-vertical_large slds-p-vertical_medium slds-border_top slds-border_bottom">
-                        Random greek letter: <span class="slds-text-heading_small">{greekLetter}</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>

package/src/lightning/button/__examples__/onclick/onclick.js

@@ -1,99 +0,0 @@
-import { LightningElement, track } from 'lwc';
-
-export default class ButtonOnclick extends LightningElement {
-    toggleIconName = 'utility:preview';
-    toggleButtonLabel = 'Hide content';
-    @track greekLetter;
-
-    // when the component is first initialized assign an initial value to the `greekLetter` variable
-    connectedCallback() {
-        this.greekLetter = this.getRandomGreekLetter();
-    }
-
-    // Handles click on the 'Show/hide content' button
-    handleToggleClick() {
-        // retrieve the classList from the specific element
-        const contentBlockClasslist = this.template.querySelector(
-            '.lgc-id_content-toggle'
-        ).classList;
-        // toggle the hidden class
-        contentBlockClasslist.toggle('slds-hidden');
-
-        // if the current icon-name is `utility:preview` then change it to `utility:hide`
-        if (this.toggleIconName === 'utility:preview') {
-            this.toggleIconName = 'utility:hide';
-            this.toggleButtonLabel = 'Reveal content';
-        } else {
-            this.toggleIconName = 'utility:preview';
-            this.toggleButtonLabel = 'Hide content';
-        }
-    }
-
-    // Handles click on the 'Random greek letter' button
-    handleRandomClick() {
-        this.greekLetter = this.getRandomGreekLetter();
-    }
-
-    // internal only method of this example component
-    // :: this generates a random greek letter string that is inserted into the template
-    getRandomGreekLetter() {
-        // retrieve a random greek letter from the array
-        const letter =
-            this.greek[Math.floor(Math.random() * this.greek.length)];
-
-        // create a temporary <textarea> element using the DOMParser
-        // :: this allows for the pretty formatting using the HTML character entities such as `&alpha;`
-        // :: this allows the browser to automatically convert the string to proper HTML
-        const textarea = new DOMParser().parseFromString(
-            `<textarea>${letter} [ &${letter}; ]</textarea>`,
-            'text/html'
-        ).body.firstChild;
-
-        // return the final converted value for output in our component
-        return textarea.value;
-    }
-
-    // list of greek letter names
-    greek = [
-        'alpha',
-        'theta',
-        'tau',
-        'beta',
-        'vartheta',
-        'pi',
-        'upsilon',
-        'gamma',
-        'iota',
-        'varpi',
-        'phi',
-        'delta',
-        'kappa',
-        'rho',
-        'varphi',
-        'epsilon',
-        'lambda',
-        'varrho',
-        'chi',
-        'varepsilon',
-        'mu',
-        'sigma',
-        'psi',
-        'zeta',
-        'nu',
-        'varsigma',
-        'omega',
-        'eta',
-        'xi',
-        'Gamma',
-        'Lambda',
-        'Sigma',
-        'Psi',
-        'Delta',
-        'Xi',
-        'Upsilon',
-        'Omega',
-        'Theta',
-        'Pi',
-        'Phi',
-    ];
-}

package/src/lightning/button/__examples__/withIcon/withIcon.html

@@ -1,43 +0,0 @@
-<template>
-        <div class="slds-m-top_small slds-m-bottom_medium">
-            <h2 class="slds-text-heading_small slds-m-bottom_small">
-                Buttons with an icon before the label text, the default location.
-            </h2>
-                <p class="slds-m-bottom_medium">
-                    <code>icon-position</code> attribute is omitted to use the default value of <code>left</code>.
-                </p>
-
-            <!-- Base variant: Makes a button look like a link -->
-            <lightning-button variant="base" label="Download" title="Download action with base variant" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Neutral variant (default) -->
-            <lightning-button label="Download" title="Download action" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Brand variant: Identifies the primary action in a group of buttons -->
-            <lightning-button variant="brand" label="Download" title="Download action with brand variant" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
-
-            <!-- Destructive variant: Identifies a potentially negative action -->
-            <lightning-button variant="destructive" label="Delete" title="Delete action with destructive variant" icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
-        </div>
-
-        <div class="slds-m-top_x-large slds-m-bottom_small">
-                <h2 class="slds-text-heading_small slds-m-bottom_small">
-                  Buttons with an icon after the label text.
-                 </h2>
-                 <p class="slds-m-bottom_medium">
-                     <code>icon-position</code> attribute has a value of <code>right</code>.
-                 </p>
-
-                <!-- Base variant: Makes a button look like a link -->
-                <lightning-button variant="base" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Neutral variant (default) -->
-                <lightning-button label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Brand variant: Identifies the primary action in a group of buttons -->
-                <lightning-button variant="brand" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-
-                <!-- Destructive variant: Identifies a potentially negative action -->
-                <lightning-button variant="destructive" label="Delete" title="Delete action" icon-name="utility:delete" icon-position="right" class="slds-m-left_x-small"></lightning-button>
-            </div>
-    </template>

package/src/lightning/button/__examples__/withIcon/withIcon.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonWithIcon extends LightningElement {}