lightning-base-components 1.28.11-alpha → 1.28.13-alpha

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

@@ -0,0 +1,28 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group with simple disabled buttons.
+        </p>
+
+        <!-- Button group: simple buttons -->
+        <lightning-button-group>
+            <lightning-button label="Refresh" disabled></lightning-button>
+            <lightning-button label="Edit" disabled></lightning-button>
+            <lightning-button label="Save" disabled></lightning-button>
+        </lightning-button-group>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group with several disabled button variations.
+        </p>
+
+        <!-- Button group: simple buttons -->
+        <lightning-button-group>
+            <lightning-button label="Refresh" disabled></lightning-button>
+            <lightning-button label="Edit" disabled></lightning-button>
+            <lightning-button label="Save" icon-name="utility:save" disabled></lightning-button>
+            <lightning-button label="Delete" variant="destructive" icon-name="utility:delete" disabled></lightning-button>
+        </lightning-button-group>
+    </div>
+</template>

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

@@ -0,0 +1,3 @@
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

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

@@ -0,0 +1,32 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group inverse variant with simple buttons.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <!-- Button group: simple buttons -->
+            <lightning-button-group>
+                <lightning-button label="Refresh" variant="inverse"></lightning-button>
+                <lightning-button label="Edit" variant="inverse"></lightning-button>
+                <lightning-button label="Save" variant="inverse"></lightning-button>
+            </lightning-button-group>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group inverse variant with several button variations.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <!-- Button group: button variantions -->
+            <lightning-button-group>
+                <lightning-button label="Refresh" variant="inverse"></lightning-button>
+                <lightning-button label="Edit" variant="inverse"></lightning-button>
+                <lightning-button label="Save" icon-name="utility:save" variant="inverse"></lightning-button>
+                <lightning-button label="Delete" icon-name="utility:delete" variant="inverse"></lightning-button>
+            </lightning-button-group>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonGroup/__examples__/withMenu/withMenu.html

@@ -0,0 +1,19 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group using simple buttons and a <em>buttonMenu</em>.
+        </p>
+
+        <!-- Button group: simple buttons and a button-menu -->
+        <lightning-button-group>
+            <lightning-button label="Refresh"></lightning-button>
+            <lightning-button label="Edit"></lightning-button>
+            <lightning-button label="Save" icon-name="utility:save"></lightning-button>
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled">
+                <lightning-menu-item label="Menu Item One" value="item1"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Two" value="item2"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Three" value="item3"></lightning-menu-item>
+            </lightning-button-menu>
+        </lightning-button-group>
+    </div>
+</template>

package/src/lightning/buttonGroup/__examples__/withMenuDisabled/withMenuDisabled.html

@@ -0,0 +1,19 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group using simple buttons and a disabled <em>buttonMenu</em>.
+        </p>
+
+        <!-- Button group: simple buttons and a button-menu -->
+        <lightning-button-group>
+            <lightning-button label="Refresh"></lightning-button>
+            <lightning-button label="Edit"></lightning-button>
+            <lightning-button label="Save" icon-name="utility:save"></lightning-button>
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" disabled>
+                <lightning-menu-item label="Menu Item One" value="item1"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Two" value="item2"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Three" value="item3"></lightning-menu-item>
+            </lightning-button-menu>
+        </lightning-button-group>
+    </div>
+</template>

package/src/lightning/buttonIcon/__examples__/basic/basic.css

@@ -0,0 +1,3 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}

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

@@ -0,0 +1,101 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>disabled</code> attribute.
+        </p>
+        <!-- with border / by default -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  disabled alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   disabled alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    disabled alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      disabled alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  disabled alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    disabled alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   disabled alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute omitted or set to the default value of <code>border</code>.
+        </p>
+        <!-- with border / by default -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>bare</code>.
+        </p>
+
+        <!-- bare -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  variant="bare" alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   variant="bare" alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    variant="bare" alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      variant="bare" alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  variant="bare" alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    variant="bare" alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   variant="bare" alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+            <p class="slds-m-bottom_medium">
+                Button-icons with the <code>variant</code> attribute set to <code>brand</code>.
+            </p>
+
+            <!-- bare -->
+            <div class="slds-p-around_medium lgc-bg">
+                <lightning-button-icon icon-name="utility:settings"  variant="brand" alternative-text="Settings"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:adduser"   variant="brand" alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:delete"    variant="brand" alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:save"      variant="brand" alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:bookmark"  variant="brand" alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:zoomin"    variant="brand" alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+                <lightning-button-icon icon-name="utility:zoomout"   variant="brand" alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+            </div>
+        </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>container</code>.
+        </p>
+
+        <!-- with container -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  variant="container" alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   variant="container" alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    variant="container" alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      variant="container" alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  variant="container" alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    variant="container" alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   variant="container" alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>border-filled</code>.
+        </p>
+
+        <!-- with border filled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon icon-name="utility:settings"  variant="border-filled" alternative-text="Settings" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   variant="border-filled" alternative-text="Add user" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    variant="border-filled" alternative-text="Delete"   class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      variant="border-filled" alternative-text="Save"     class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  variant="border-filled" alternative-text="Bookmark" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    variant="border-filled" alternative-text="Zoom in"  class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   variant="border-filled" alternative-text="Zoom out" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,3 @@
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

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

@@ -0,0 +1,33 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>border-inverse</code>.
+        </p>
+        <!-- with border / by default -->
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <lightning-button-icon icon-name="utility:settings"  alternative-text="Settings" variant="border-inverse" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   alternative-text="Add user" variant="border-inverse" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    alternative-text="Delete"   variant="border-inverse" class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      alternative-text="Save"     variant="border-inverse" class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  alternative-text="Bookmark" variant="border-inverse" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    alternative-text="Zoom in"  variant="border-inverse" class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   alternative-text="Zoom out" variant="border-inverse" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>bare-inverse</code>.
+        </p>
+        <!-- with border / by default -->
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <lightning-button-icon icon-name="utility:settings"  alternative-text="Settings" variant="bare-inverse" title="Settings"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:adduser"   alternative-text="Add user" variant="bare-inverse" class="slds-m-left_xx-small" title="Add user"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:delete"    alternative-text="Delete"   variant="bare-inverse" class="slds-m-left_xx-small" title="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:save"      alternative-text="Save"     variant="bare-inverse" class="slds-m-left_xx-small" title="Save"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:bookmark"  alternative-text="Bookmark" variant="bare-inverse" class="slds-m-left_xx-small" title="Bookmark"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomin"    alternative-text="Zoom in"  variant="bare-inverse" class="slds-m-left_xx-small" title="Zoom in"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:zoomout"   alternative-text="Zoom out" variant="bare-inverse" class="slds-m-left_xx-small" title="Zoom out"></lightning-button-icon>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonIcon/__examples__/sizes/sizes.html

@@ -0,0 +1,28 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>size</code> attribute set to a valid value (<code>xx-small, x-small, small, medium</code>).
+        </p>
+
+        <!--Sizes -->
+        <div class="slds-p-around_medium">
+            <lightning-button-icon icon-name="utility:down"  size="xx-small" alternative-text="View More"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="x-small"  alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="small"    alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="medium"   alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icons with the <code>variant</code> attribute set to <code>bare</code> and the <code>size</code> attribute set to a valid value (<code>x-small, small, medium, large</code>).
+        </p>
+
+        <div class="slds-p-around_medium">
+            <lightning-button-icon icon-name="utility:down"  size="x-small"   variant="bare" alternative-text="View More"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="small"     variant="bare" alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="medium"    variant="bare" alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:down"  size="large"     variant="bare" alternative-text="View More" class="slds-m-left_xx-small"></lightning-button-icon>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonIconStateful/__examples__/basic/basic.css

@@ -0,0 +1,3 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}

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

@@ -0,0 +1,39 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Click one of the example buttons below to activate the `onclick` handler and toggle the state of each button.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon-stateful icon-name="utility:like" selected={likeState} onclick={handleLikeButtonClick} alternative-text="Like"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:answer" selected={answerState} onclick={handleAnswerButtonClick} alternative-text="Answer" class="slds-m-left_xx-small"></lightning-button-icon-stateful>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icon-statefuls with the <code>size</code> attribute set to a valid value (<code>xx-small, x-small, small, medium</code>).
+        </p>
+
+        <!-- Sizes -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon-stateful icon-name="utility:like" size="xx-small" selected={likeStateSize01} onclick={handleLikeButtonSizeClick} alternative-text="Like" data-button-number="01"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:like" size="x-small" selected={likeStateSize02} onclick={handleLikeButtonSizeClick} alternative-text="Like" class="slds-m-left_xx-small" data-button-number="02"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:like" size="small" selected={likeStateSize03} onclick={handleLikeButtonSizeClick} alternative-text="Like" class="slds-m-left_xx-small" data-button-number="03"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:like" size="medium" selected={likeStateSize04} onclick={handleLikeButtonSizeClick} alternative-text="Like" class="slds-m-left_xx-small" data-button-number="04"></lightning-button-icon-stateful>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icon-statefuls with the <code>disabled</code> attribute set.
+        </p>
+
+        <!-- Disabled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon-stateful icon-name="utility:like" disabled selected={likeStateDisabled} onclick={handleLikeButtonDisabledClick} alternative-text="Like"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:answer" disabled selected={answerStateDisabled} onclick={handleAnswerButtonDisabledClick} alternative-text="Answer" class="slds-m-left_xx-small"></lightning-button-icon-stateful>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonIconStateful/__examples__/variants/variants.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/buttonIconStateful/__examples__/variants/variants.html

@@ -0,0 +1,25 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button-icon-statefuls with the <code>variant</code> attribute set to <code>border-inverse</code>.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <lightning-button-icon-stateful icon-name="utility:like" variant="border-inverse" selected={likeStateInverse} onclick={handleLikeButtonInverseClick} alternative-text="Like"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:answer" variant="border-inverse" selected={answerStateInverse} onclick={handleAnswerButtonInverseClick} alternative-text="Answer" class="slds-m-left_xx-small"></lightning-button-icon-stateful>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+                Button-icon-statefuls with the <code>variant</code> attribute set to <code>border-filled</code>.
+        </p>
+
+        <!-- Disabled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-icon-stateful icon-name="utility:like" variant="border-filled" selected={likeStateFilled} onclick={handleLikeButtonFilledClick} alternative-text="Like"></lightning-button-icon-stateful>
+            <lightning-button-icon-stateful icon-name="utility:answer" variant="border-filled" selected={answerStateFilled} onclick={handleAnswerButtonFilledClick} alternative-text="Answer" class="slds-m-left_xx-small"></lightning-button-icon-stateful>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonMenu/__examples__/basic/basic.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

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

@@ -0,0 +1,33 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with only <code>lightning-menu-item</code> elements.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with some <code>lightning-menu-item</code> elements disabled.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" disabled></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" disabled></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonMenu/__examples__/onselect/onselect.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/buttonMenu/__examples__/onselect/onselect.html

@@ -0,0 +1,21 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with a custom <code>onselect</code> event handler. The value of the item selected is shown below the menu.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" onselect={handleOnselect}>
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+
+        <div class="slds-m-vertical_medium">
+            <p>The value of the menu item you selected is: <span class="slds-text-heading_small">{selectedItemValue}</span></p>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonMenu/__examples__/variants/variants.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/buttonMenu/__examples__/variants/variants.html

@@ -0,0 +1,98 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with the <code>variant</code> attribute set to <code>border</code>,
+            which is the default if omitted.
+        </h2>
+
+        <!-- Default/border -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>bare</code> variant has a smaller clickable area.
+        </h2>
+
+        <!-- Bare -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="bare">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>container</code> variant is borderless with default size clickable area.
+        </h2>
+
+        <!-- Container/borderless -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="container">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>border-filled</code> variant.
+        </h2>
+
+        <!-- Border-filled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button-menu with the <code>bare-inverse</code> variant.
+        </h2>
+
+        <!-- Bare-inverse -->
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <lightning-button-menu alternative-text="Show menu" variant="bare-inverse">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>border-inverse</code> variant.
+        </h2>
+
+        <!-- Border-inverse -->
+        <div class="slds-p-around_medium lgc-bg-inverse">
+            <lightning-button-menu alternative-text="Show menu" variant="border-inverse">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/buttonMenu/__examples__/withIcon/withIcon.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}