lightning-base-components 1.16.7-alpha → 1.16.9-alpha

package/src/lightning/buttonIcon/buttonIcon.js

@@ -2,7 +2,7 @@ import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
-import { Tooltip } from 'lightning/tooltipLibrary';
+import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './buttonIcon.html';
 
@@ -109,16 +109,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     set tooltip(value) {
+        this.tooltipValue = value;
         if (this._tooltip) {
             this._tooltip.value = value;
-        } else if (value) {
-            // Note that because the tooltip target is a child element it may not be present in the
-            // dom during initial rendering.
-            this._tooltip = new Tooltip(value, {
-                root: this,
-                target: () => this.template.querySelector('button'),
-            });
-            this._tooltip.initialize();
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
         }
     }
 
@@ -136,6 +131,23 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     _tooltip = null;
+    tooltipValue = null;
+    tooltipType = TooltipType.Info;
+    rendered = false;
+
+    /**
+     * Generate a tooltip with the specified value and current tooltip type
+     *
+     * @param {*} value - The plain text string for the tooltip
+     */
+    createTooltip(value) {
+        this._tooltip = new Tooltip(value, {
+            root: this,
+            target: () => this.template.querySelector('button'),
+            type: this.tooltipType,
+        });
+        this._tooltip.initialize();
+    }
 
     // this is there because raptor currently doesnt support inheritance
     render() {
@@ -296,6 +308,17 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     connectedCallback() {
         this._connected = true;
+        this.dispatchEvent(
+            new CustomEvent('privatebuttoniconregister', {
+                cancelable: true,
+                bubbles: true,
+                detail: {
+                    setTooltipType: (tooltipType) => {
+                        this.tooltipType = tooltipType;
+                    },
+                },
+            })
+        );
     }
 
     renderedCallback() {
@@ -303,13 +326,14 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.renderedCallback();
 
         // remove-next-line-for-c-namespace
-        if (this._tooltip && !this._tooltip.initialized) {
-            this._tooltip.initialize();
+        if (this.tooltipValue) {
+            this.createTooltip(this.tooltipValue);
         }
 
         // button inherits from primitiveButton, button.css not working in this case.
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
+        this.rendered = true;
     }
 
     disconnectedCallback() {

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

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

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

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonIconStateful/buttonIconStateful.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button-icon-stateful.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-icon-stateful.slds.css'; */

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

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

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

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

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

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

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

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/buttonMenu.css

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

package/src/lightning/buttonMenu/buttonMenu.html

@@ -11,6 +11,8 @@
         onblur={handleBlur}
         onfocus={handleFocus}
         type="button"
+        aria-controls="lgt-button-menu-dropdown"
+        id="lgt-button-menu"
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
         part="button button-icon">
@@ -38,9 +40,10 @@
                 <lightning-spinner size="small" alternative-text={computedLoadingStateAlternativeText}></lightning-spinner>
             </template>
             <template if:false={isLoading}>
-                <div
-                    class="slds-dropdown__list slds-dropdown_length-with-icon-10"
+                <div class="slds-dropdown__list slds-dropdown_length-with-icon-10"
+                    id="lgt-button-menu-dropdown"
                     role="menu"
+                    aria-labelledby="lgt-button-menu"
                     onprivateselect={handleMenuItemPrivateSelect}
                     onprivateblur={handlePrivateBlur}
                     onprivatefocus={handlePrivateFocus}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -772,7 +772,10 @@ export default class LightningButtonMenu extends LightningElement {
             // prevent blur during a non-blurring focus change
             // set lock so that while focusing on menutitem, menu doesnt close
             this.cancelBlur();
-            menuItem.focus();
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                menuItem.focus();
+            });
         }
         // allowBlur is called when the menu items receives focus
     }