lightning-base-components 1.16.6-alpha → 1.16.8-alpha

package/src/lightning/helptext/helptext.js

@@ -1,17 +1,12 @@
 import labelButtonAlternativeText from '@salesforce/label/LightningHelptext.buttonAlternativeText';
 import { LightningElement, api, track } from 'lwc';
 import { isValidName } from 'lightning/iconUtils';
-import { normalizeString, getRealDOMId } from 'lightning/utilsPrivate';
-import { classSet } from 'lightning/utils';
-import { Tooltip, TooltipType, BUBBLE_PREFIX } from 'lightning/tooltipLibrary';
+import { normalizeString } from 'lightning/utilsPrivate';
+import { TooltipType } from 'lightning/tooltipLibrary';
 
 const DEFAULT_BUTTON_ALT_TEXT = labelButtonAlternativeText;
 const DEFAULT_ICON_NAME = 'utility:info';
 const DEFAULT_ICON_VARIANT = 'bare';
-const SELECTORS = {
-    BUTTON: 'button',
-    DESCRIPTION: '.desc',
-};
 
 /**
  * An icon with a text popover used for tooltips.
@@ -31,24 +26,7 @@ export default class LightningHelptext extends LightningElement {
      * @param {string} value - The plain text string for the tooltip
      */
     @api
-    get content() {
-        return this._tooltip ? this._tooltip.value : undefined;
-    }
-
-    set content(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'),
-                type: TooltipType.Toggle,
-            });
-            this._tooltip.initialize();
-        }
-    }
+    content;
 
     set iconName(value) {
         this.state.iconName = value;
@@ -134,65 +112,38 @@ export default class LightningHelptext extends LightningElement {
      */
     @api
     focus() {
-        this.template.querySelector('button').focus();
+        this.template.querySelector('lightning-button-icon').focus();
     }
 
-    _tooltip = null;
-
-    disconnectedCallback() {
-        // W-6441609 helptext maybe destroyed first, and tooltip won't receive events to hide.
-        if (this._tooltip && !this._tooltip.initialized) {
-            this._tooltip.hide();
-        }
-        this._tooltip = null;
-    }
-
-    renderedCallback() {
-        if (this._tooltip && !this._tooltip.initialized) {
-            this._tooltip.initialize();
-            this.overrideDescribedBy();
+    // Get the variant to be applied to button based on the icon variant
+    get computedButtonVariant() {
+        switch (this.iconVariant) {
+            case 'inverse':
+                return 'bare-inverse';
+            default:
+                return 'bare';
         }
     }
 
-    // Get the classes to be applied to button based on the icon variant
-    get computedButtonClass() {
-        const classes = classSet('slds-button slds-button_icon');
+    // Get the class to be applied to icon based on the icon variant
+    get computedIconClass() {
         switch (this.iconVariant) {
             case 'error':
-                classes.add('slds-button_icon-error');
-                break;
+                return 'slds-icon-text-error';
             case 'warning':
-                classes.add('slds-button_icon-warning');
-                break;
-            case 'inverse':
-                classes.add('slds-button_icon-inverse');
-                break;
-            case 'bare':
-                break;
+                return 'slds-icon-text-warning';
             default:
+                return '';
         }
-        return classes.toString();
-    }
-
-    /**
-     * override the aria-describedby to link to the DOM element present
-     * inside the helptext button. We are doing this because, screen readers
-     * can't read tooltip content which is present outside modal.
-     */
-    overrideDescribedBy() {
-        const domId = getRealDOMId(
-            this.template.querySelector(SELECTORS.DESCRIPTION)
-        );
-        this.template
-            .querySelector(SELECTORS.BUTTON)
-            .setAttribute('aria-describedby', domId);
     }
 
     /**
-     * use the bubble prefix format from tooltip library
-     * @returns {*}
+     * Set lightning-button-icon tooltips to be created with toggle events
+     *
+     * @param {*} event
      */
-    get describedByID() {
-        return BUBBLE_PREFIX;
+    handleButtonIconRegister(event) {
+        event.stopPropagation();
+        event.detail.setTooltipType(TooltipType.Toggle);
     }
 }

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

@@ -3,6 +3,7 @@
     padding: 12px;
     color: #fff;
 }
+
 .row{
-    margin:10px 0 10px;
+    margin:10px 0;
 }