lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/popup/popover.slds.css

@@ -1,121 +1,121 @@
 
 @supports (--styling-hooks: '') {
-    :host([data-render-mode="shadow"]) .slds-popover {
-        position: relative;
-        border-radius: var(--sds-g-radius-border-2, 0.25rem);
-        width: var(--sds-g-sizing-15, 20rem);
-        min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
-        z-index: var(--slds-c-popover-position-zindex, 6000);
-        background-color: var(--slds-c-popover-color-background, 
-            var(--slds-g-color-neutral-base-100, 
-                var(--sds-g-color-neutral-base-100, #ffffff)));
-        display: inline-block;
-        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); 
-        border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-popover__meta {
-        margin-block-end: var(--sds-g-sizing-4, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body {
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
-        padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
-        padding-inline: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
-    .slds-popover__header,:host([data-render-mode="shadow"]) 
-    .slds-popover__footer {
-        position: relative;
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-        word-wrap: break-word;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__header {
-        border-bottom: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__footer {
-        border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
-        background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__footer_form {
-        text-align: center;
-        background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
-        border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body_small {
-        max-height: var(--sds-g-sizing-14, 15rem);
-        overflow-y: auto;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__close {
-        position: relative;
-        margin-block: var(--sds-g-spacing-1, 0.25rem);
-        margin-inline: var(--sds-g-spacing-1, 0.25rem);
-        z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_small {
-        max-width: var(--sds-g-sizing-14, 15rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_medium {
-        min-width: var(--sds-g-sizing-15, 20rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_large {
-        min-width: 25rem;
-        max-width: 512px;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
-        border: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover *:last-child {
-        margin-bottom: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_full-width {
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_hide {
-        display: none;
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-popover_dark {
-        background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
-        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
-        background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
-        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
-        fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
-        border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
-        background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
-    }
-}
+  :host([data-render-mode="shadow"]) .slds-popover {
+      position: relative;
+      border-radius: var(--sds-g-radius-border-2, 0.25rem);
+      width: var(--sds-g-sizing-15, 20rem);
+      min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
+      z-index: var(--slds-c-popover-position-zindex, 6000);
+      background-color: var(--slds-c-popover-color-background,
+          var(--slds-g-color-neutral-base-100,
+              var(--sds-g-color-neutral-base-100, #ffffff)));
+      display: inline-block;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
+      border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__meta {
+      margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body {
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+      padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+      padding-inline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+  .slds-popover__header,:host([data-render-mode="shadow"]) 
+  .slds-popover__footer {
+      position: relative;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+      word-wrap: break-word;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__header {
+      border-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer {
+      border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+      background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+      text-align: center;
+      background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body_small {
+      max-height: var(--sds-g-sizing-14, 15rem);
+      overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__close {
+      position: relative;
+      margin-block: var(--sds-g-spacing-1, 0.25rem);
+      margin-inline: var(--sds-g-spacing-1, 0.25rem);
+      z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_small {
+      max-width: var(--sds-g-sizing-14, 15rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_medium {
+      min-width: var(--sds-g-sizing-15, 20rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_large {
+      min-width: 25rem;
+      max-width: 512px;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+      border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+      margin-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_full-width {
+      width: 100%;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_hide {
+      display: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark {
+      background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+      background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+      fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+      border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
+      background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
+  }
+}

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

@@ -1,4 +1,5 @@
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { AutoPosition } from 'lightning/positionLibrary';
 import {
     createAlignmentConfiguration,
@@ -7,7 +8,7 @@ import {
 import { getElementWithFocus } from 'lightning/focusUtils';
 import { isUndefinedOrNull, normalizeBoolean } from 'lightning/utilsPrivate';
 
-export default class LightningPopup extends LightningElement {
+export default class LightningPopup extends LightningShadowBaseClass {
     @track _visible;
     @track _queueShow;
     @track _ariaLabelledBy;

package/src/lightning/positionLibrary/elementProxy.js

@@ -1,4 +1,4 @@
-import { isInDom, WindowManager } from './util';
+import { isInDom, WindowManager, pxToInt } from './util';
 
 export class ElementProxy {
     constructor(el, id) {
@@ -142,8 +142,13 @@ export class ElementProxy {
             ? '0'
             : parseInt(style.top.replace('px', ''), 10);
 
+        const marginOffset =
+            this.top < absPos.top
+                ? pxToInt(style.marginBottom)
+                : pxToInt(style.marginTop) * -1;
+
         let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + scrollTop);
+        const topDif = this.top - (absPos.top + marginOffset + scrollTop);
 
         const viewPortWidth = w.innerWidth || document.body.clientWidth;
         let rightPos = parseInt(style.right, 10);

package/src/lightning/positionLibrary/util.js

@@ -239,3 +239,11 @@ export function requestAnimationFrameAsPromise() {
         requestAnimationFrame(() => resolve());
     });
 }
+
+function isPx(value) {
+    return value.slice(-2) === 'px';
+}
+
+export function pxToInt(value) {
+    return value && isPx(value) ? parseInt(value, 10) : 0;
+}

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,5 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './tooltip.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './tooltip.slds.css';
 
 /* Fix for tooltip alignment issue, for details see: W-11677142
  *

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -1,6 +1,7 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 
 const DEFAULT_ALIGN = {
@@ -8,7 +9,7 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
-export default class LightningPrimitiveBubble extends LightningElement {
+export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     @track
     state = {
         // tracks the `visibility` of the tooltip
@@ -39,6 +40,7 @@ export default class LightningPrimitiveBubble extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'tooltip');
         this.state.inDOM = true;
     }

package/src/lightning/primitiveButton/primitiveButton.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isIE11,
     normalizeBoolean,
@@ -25,7 +26,7 @@ const ROLE = 'role';
  *  - aria-labelledby: Role that depeneds on AriaObserver for native shadow.
  *  - aria-owns: Abstracts the logic of setting the id-reference on the host element.
  */
-export default class LightningPrimitiveButton extends LightningElement {
+export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 
@@ -113,7 +114,7 @@ export default class LightningPrimitiveButton extends LightningElement {
         this.ariaObserver.connect({
             targetSelector: 'button',
             attribute: 'aria-labelledby',
-            id: value,
+            relatedNodeIds: value,
         });
     }
 
@@ -132,7 +133,7 @@ export default class LightningPrimitiveButton extends LightningElement {
         this.ariaObserver.connect({
             targetSelector: 'button',
             attribute: 'aria-describedby',
-            id: value,
+            relatedNodeIds: value,
         });
     }
 

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -19,17 +19,15 @@
 
             <!-- left icon -->
             <template if:true={hasLeftIcon}>
-                <lightning-icon icon-name={iconName} size="x-small" alternative-text={iconAlternativeText}></lightning-icon>
-                &nbsp;
+                <lightning-icon icon-name={iconName} size="x-small" class="slds-m-right_x-small" alternative-text={iconAlternativeText}></lightning-icon>
                 {iconLabel}
-                &nbsp;
             </template>
 
             <!-- *************** PREFIX ICONS END *************** -->
 
             <!-- action -->
             <template if:true={isAction}>
-                <lightning-primitive-cell-actions data-navigation="enable"
+                <lightning-primitive-cell-actions class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
                                                   data-action-triggers="enter,space"
                                                   row-key-value={rowKeyValue}
                                                   col-key-value={colKeyValue}
@@ -42,7 +40,7 @@
 
             <!-- button -->
             <template if:true={isButton}>
-                <lightning-primitive-cell-button data-navigation="enable"
+                <lightning-primitive-cell-button class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
                                                  data-action-triggers="enter,space"
                                                  row-key-value={rowKeyValue}
                                                  col-key-value={colKeyValue}
@@ -61,7 +59,7 @@
 
             <!-- button-icon-->
             <template if:true={isButtonIcon}>
-                <lightning-primitive-cell-button data-navigation="enable"
+                <lightning-primitive-cell-button class={computedMarginClassWhenLeftIconExists} data-navigation="enable"
                                                  data-action-triggers="enter,space"
                                                  type="button-icon"
                                                  row-key-value={rowKeyValue}
@@ -92,7 +90,7 @@
 
             <!-- currency -->
             <template if:true={isCurrency}>
-                <lightning-formatted-number value={value} format-style="currency"
+                <lightning-formatted-number class={computedMarginClassWhenLeftIconExists} value={value} format-style="currency"
                                             currency-code={typeAttribute0}
                                             currency-display-as={typeAttribute1}
                                             minimum-integer-digits={typeAttribute2}
@@ -106,6 +104,7 @@
             <!-- custom type -->
             <template if:true={isCustomType}>
                 <lightning-primitive-custom-cell
+                      class={computedMarginClassWhenLeftIconExists}
                       types={types}
                       keyboard-mode={keyboardMode}
                       column-type={columnType}
@@ -133,7 +132,8 @@
 
             <!-- datetime -->
             <template if:true={isDateTime}>
-                <lightning-formatted-date-time value={dateValue}
+                <lightning-formatted-date-time class={computedMarginClassWhenLeftIconExists}
+                                               value={dateValue}
                                                day={typeAttribute0}
                                                era={typeAttribute1}
                                                hour={typeAttribute2}
@@ -150,7 +150,8 @@
 
             <!-- datetime -->
             <template if:true={isDateLocal}>
-                <lightning-formatted-date-time value={value}
+                <lightning-formatted-date-time class={computedMarginClassWhenLeftIconExists}
+                                               value={value}
                                                day={computedDateLocalDay}
                                                month={computedDateLocalMonth}
                                                year={computedDateLocalYear}
@@ -160,7 +161,8 @@
 
             <!-- email -->
             <template if:true={isEmail}>
-                 <lightning-formatted-email data-navigation="enable"
+                 <lightning-formatted-email class={computedMarginClassWhenLeftIconExists}
+                                            data-navigation="enable"
                                             data-action-triggers="enter"
                                             value={value}
                                             tabindex={internalTabIndex}>
@@ -169,14 +171,16 @@
 
             <!-- location -->
             <template if:true={isLocation}>
-                <lightning-formatted-location latitude={value.latitude}
+                <lightning-formatted-location class={computedMarginClassWhenLeftIconExists}
+                                              latitude={value.latitude}
                                               longitude={value.longitude}>
                 </lightning-formatted-location>
             </template>
 
             <!-- number -->
             <template if:true={isNumber}>
-                <lightning-formatted-number value={value}
+                <lightning-formatted-number class={computedMarginClassWhenLeftIconExists}
+                                            value={value}
                                             minimum-integer-digits={typeAttribute0}
                                             minimum-fraction-digits={typeAttribute1}
                                             maximum-fraction-digits={typeAttribute2}
@@ -187,7 +191,8 @@
 
             <!-- percent -->
             <template if:true={isPercent}>
-                    <lightning-formatted-number value={value} format-style="percent"
+                    <lightning-formatted-number class={computedMarginClassWhenLeftIconExists}
+                                                value={value} format-style="percent"
                                                 minimum-integer-digits={typeAttribute0}
                                                 minimum-fraction-digits={typeAttribute1}
                                                 maximum-fraction-digits={typeAttribute2}
@@ -198,7 +203,8 @@
 
             <!-- phone -->
             <template if:true={isPhone}>
-                <lightning-formatted-phone data-navigation="enable"
+                <lightning-formatted-phone class={computedMarginClassWhenLeftIconExists}
+                                           data-navigation="enable"
                                            data-action-triggers="enter"
                                            value={value}
                                            tabindex={internalTabIndex}>
@@ -207,7 +213,8 @@
 
             <!-- Reference (Lookup) -->
             <template if:true={isReference}>
-                <lightning-formatted-lookup data-navigation="enable"
+                <lightning-formatted-lookup class={computedMarginClassWhenLeftIconExists}
+                                            data-navigation="enable"
                                             data-action-triggers="enter"
                                             record-id={value}
                                             tabindex={internalTabIndex}
@@ -218,7 +225,8 @@
             <!-- row number -->
             <template if:true={isRowNumber}>
                 <template if:true={_rowHasError}>
-                    <lightning-primitive-datatable-tooltip data-navigation="enable"
+                    <lightning-primitive-datatable-tooltip
+                                                           data-navigation="enable"
                                                            data-action-triggers="enter,space"
                                                            class="slds-m-horizontal_xxx-small"
                                                            size="xx-small"
@@ -235,14 +243,16 @@
 
             <!-- text -->
             <template if:true={isText}>
-                <lightning-base-formatted-text value={value}
+                <lightning-base-formatted-text class={computedMarginClassWhenLeftIconExists}
+                                               value={value}
                                                linkify={typeAttribute0}>
                 </lightning-base-formatted-text>
             </template>
 
             <!-- url -->
             <template if:true={isUrl}>
-                <lightning-formatted-url data-navigation="enable"
+                <lightning-formatted-url class={computedMarginClassWhenLeftIconExists}
+                                         data-navigation="enable"
                                          data-action-triggers="enter"
                                          value={value}
                                          tooltip={urlTooltip}
@@ -254,9 +264,7 @@
 
             <!-- *************** SUFFIX ICONS ADD ALL TYPES BEFORE THIS *************** -->
             <template if:true={hasRightIcon}>
-                &nbsp;
-                <lightning-icon icon-name={iconName} size="x-small" alternative-text={iconAlternativeText}></lightning-icon>
-                &nbsp;
+                <lightning-icon icon-name={iconName} class="slds-m-left_x-small slds-m-right_x-small" size="x-small" alternative-text={iconAlternativeText}></lightning-icon>
                 {iconLabel}
             </template>
             <!-- *************** SUFFIX ICONS END *************** -->

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -283,6 +283,10 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             .toString();
     }
 
+    get computedMarginClassWhenLeftIconExists() {
+        return this.hasLeftIcon ? 'slds-m-left_x-small' : '';
+    }
+
     get computedWrapperClass() {
         const alignment = this.computedAlignment;