lightning-base-components 1.17.5-alpha → 1.17.6-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.17.5-alpha",
+    "version": "1.17.6-alpha",
     "license": "MIT",
     "files": [
         "external",

package/src/lightning/ariaObserver/__examples__/connect/connect.js

@@ -1,7 +1,6 @@
 import { LightningElement } from 'lwc';
 
 export default class AriaObserverConnect extends LightningElement {
-
     connectIds = 'foo bar';
 
     handleUpdateIds() {

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.js

@@ -3,7 +3,6 @@ import { LightningElement, api } from 'lwc';
 import AriaObserver from 'lightning/ariaObserver';
 
 export default class AriaObserverConnectChild extends LightningElement {
-
     constructor() {
         super();
         this.ariaObserver = new AriaObserver(this);
@@ -38,8 +37,7 @@ export default class AriaObserverConnectChild extends LightningElement {
         this.ariaObserver.connect({
             targetSelector: 'input',
             attribute: 'aria-labelledby',
-            id: refs
+            id: refs,
         });
     }
-
 }

package/src/lightning/modalBase/modalBase.html

@@ -38,7 +38,7 @@
                     data-container
                 >
                     <lightning-button-icon
-                        class="slds-modal__close"
+                        class={computedCloseButtonCssClass}
                         icon-name="utility:close"
                         variant={computedCloseButtonVariant}
                         alternative-text={closeButtonAltText}

package/src/lightning/modalBase/modalBase.js

@@ -332,6 +332,25 @@ export default class LightningModalBase extends LightningElement {
         return classes.toString();
     }
 
+    /**
+     * Compute the correct lightning-button-icon CSS class to use
+     * for the size="full" behaviors, based upon the screen size
+     * threshold.  Two classes are added for full screen behavior
+     * to handle edge cases where customers change background of the
+     * modal header so the close button maintains visibility for a11y
+     * @private
+     */
+    get computedCloseButtonCssClass() {
+        let classes = classSet('slds-modal__close');
+        const fullScreenActive =
+            this.isSmallScreenSize && this.size === SIZE_FULL;
+        classes.add({
+            'slds-button_icon-border-filled': fullScreenActive,
+            'slds-modal_full-close-button': fullScreenActive,
+        });
+        return classes.toString();
+    }
+
     /**
      * Compute the correct lightning-button-icon variant to use
      * for the size="full" behaviors, based upon the screen size

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -16,16 +16,6 @@ function isResizeObserverSupported() {
     return window.ResizeObserver != null;
 }
 
-function buildResizeObserver(callback) {
-    if (isResizeObserverSupported()) {
-        return new ResizeObserver(callback);
-    }
-    return {
-        observe() {},
-
-        unobserve() {},
-    };
-}
 /**
  * Shared instance of a primitive bubble used as a tooltip by most components. This was originally
  * defined in the helptext component which is where the minWidth style came from.
@@ -255,7 +245,7 @@ export class Tooltip {
 
     get resizeObserver() {
         if (!this._resizeObserver) {
-            this._resizeObserver = buildResizeObserver(() => {
+            this._resizeObserver = this._buildResizeObserver(() => {
                 if (this._visible && this._autoPosition) {
                     const tooltip = this._element();
                     /**
@@ -412,4 +402,15 @@ export class Tooltip {
             this._autoPosition.stop();
         }
     }
+
+    _buildResizeObserver(callback) {
+        if (isResizeObserverSupported()) {
+            return new ResizeObserver(callback);
+        }
+        return {
+            observe() {},
+
+            unobserve() {},
+        };
+    }
 }