lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1,2 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import "./dropdown.slds.css"; */
+@import 'lightning/sldsCommon';
+@import './button-menu.slds.css';

package/src/lightning/buttonMenu/buttonMenu.html

@@ -14,7 +14,7 @@
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
         part="button button-icon">
-        
+
         <abbr if:true={isDraft} class="slds-indicator_unsaved slds-p-right_xx-small" title={draftAlternativeText}>*</abbr>
         {label}
 
@@ -28,7 +28,7 @@
     </button>
     <template if:true={_dropdownOpened}>
         <div
-            part="overlay dropdown" 
+            part="overlay dropdown"
             class={computedDropdownClass}
             onmousedown={handleDropdownMouseDown}
             onmouseup={handleDropdownMouseUp}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -1,6 +1,7 @@
 import labelLoading from '@salesforce/label/LightningButtonMenu.loading';
 import labelShowMenu from '@salesforce/label/LightningButtonMenu.showMenu';
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -28,9 +29,7 @@ const i18n = {
     showMenu: labelShowMenu,
 };
 
-// CSS class and selectors for menu items
-const menuItemCSSClassName = 'slds-dropdown__item';
-const menuItemCSSSelector = `.slds-dropdown__list .${menuItemCSSClassName}`;
+const menuItemTagName = 'LIGHTNING-MENU-ITEM';
 
 const validMenuAlignments = [
     'left',
@@ -48,7 +47,7 @@ validMenuAlignments.push(...['auto', 'auto-right', 'auto-left']);
  * Represents a dropdown menu with a list of actions or functions.
  * @slot default Placeholder for menu-item
  */
-export default class LightningButtonMenu extends LightningElement {
+export default class LightningButtonMenu extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -147,6 +146,7 @@ export default class LightningButtonMenu extends LightningElement {
     _needsFocusAfterRender = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         this.keyboardInterface = this.menuKeyboardInterface();
 
@@ -158,14 +158,13 @@ export default class LightningButtonMenu extends LightningElement {
         if (this.isDraft) {
             this.classList.add('slds-is-unsaved');
         }
-
-        if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
-        }
     }
 
     disconnectedCallback() {
         this._connected = false;
+        if (this._tooltip) {
+            this._tooltip.disconnect();
+        }
     }
 
     renderedCallback() {
@@ -718,7 +717,7 @@ export default class LightningButtonMenu extends LightningElement {
     }
 
     getMenuItems() {
-        return Array.from(this.querySelectorAll(menuItemCSSSelector));
+        return Array.from(this.querySelectorAll(menuItemTagName));
     }
 
     getMenuItemByIndex(index) {
@@ -733,10 +732,7 @@ export default class LightningButtonMenu extends LightningElement {
         let currentNode = element;
         const stopAtElement = this.template.querySelector("[role='menu']");
         while (currentNode !== stopAtElement) {
-            if (
-                currentNode.classList &&
-                currentNode.classList.contains(menuItemCSSClassName)
-            ) {
+            if (currentNode.tagName === menuItemTagName) {
                 return currentNode;
             }
             if (currentNode.parentNode) {

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -123,29 +123,29 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-button-stateful>
 ```
 
-Use SLDS styling hooks to customize the component's styles. For example, specify the background and text color on the button using the `--sds-c-button-*` custom properties.
+Use SLDS styling hooks to customize the component's styles. For example, specify the background and text color on the button using the `--slds-c-button-*` custom properties.
 
 ```css
 .my-button {
-    --sds-c-button-neutral-color-background: orange;
-    --sds-c-button-text-color: white;
+    --slds-c-button-neutral-color-background: orange;
+    --slds-c-button-text-color: white;
 }
 ```
 
-`lightning-button-stateful` contains the same customizable elements as `lightning-button`, which supports `--sds-c-button-*` custom properties.
+`lightning-button-stateful` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
 
 Custom properties for stateful buttons work only with particular `lightning-button-stateful` variants.
 
 | CSS Custom Property            | `lightning-button-stateful` Variants |
 | ------------------------------ | ------------------------------------ |
-| `--sds-c-button-*`             | all                                  |
-| `--sds-c-button-color-*`       | `base`                               |
-| `--sds-c-button-text-color-*`  | `neutral` (default) and `text`       |
-| `--sds-c-button-neutral-*`     | `neutral` (default)                  |
-| `--sds-c-button-brand-*`       | `brand`                              |
-| `--sds-c-button-destructive-*` | `destructive`                        |
-| `--sds-c-button-inverse-*`     | `inverse`                            |
-| `--sds-c-button-success-*`     | `success`                            |
+| `--slds-c-button-*`             | all                                  |
+| `--slds-c-button-color-*`       | `base`                               |
+| `--slds-c-button-text-color-*`  | `neutral` (default) and `text`       |
+| `--slds-c-button-neutral-*`     | `neutral` (default)                  |
+| `--slds-c-button-brand-*`       | `brand`                              |
+| `--slds-c-button-destructive-*` | `destructive`                        |
+| `--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.