lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/pillContainer/pillContainer.js

@@ -1,6 +1,7 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { LightningElement, api, track } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
@@ -24,23 +25,24 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningElement {
+export default class LightningPillContainer extends LightningShadowBaseClass {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
      */
     @api label = i18n.containerLabel;
 
-    @track _variant;
-    @track _singleLine = false;
-    @track _isExpanded = false;
-    @track _isCollapsible = false;
-    @track _focusedIndex = 0;
-    @track _focusedTabIndex = 0;
-    @track _pillsNotFittingCount;
-    @track _pillContainerElementId;
+    _variant;
+    _singleLine = false;
+    _isExpanded = false;
+    _isCollapsible = false;
+    _focusedIndex = 0;
+    _focusedTabIndex = 0;
+    _pillsNotFittingCount;
+    _pillContainerElementId;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 
@@ -145,6 +147,7 @@ export default class LightningPillContainer extends LightningElement {
 
     set singleLine(value) {
         this._singleLine = normalizeBoolean(value);
+        reflectAttribute(this, 'single-line', this._singleLine);
     }
 
     /**
@@ -206,8 +209,8 @@ export default class LightningPillContainer extends LightningElement {
     }
 
     get computedListboxClass() {
-        const singleLineClass = this.singleLine ? 'slds-listbox_inline' : '';
-        return `slds-listbox slds-is-relative slds-listbox_horizontal ${singleLineClass}`;
+        const singleLineClass = this.singleLine ? ' slds-listbox_inline' : '';
+        return `slds-listbox slds-is-relative slds-listbox_horizontal${singleLineClass}`;
     }
 
     get focusedIndex() {

package/src/lightning/pillContainer/pillContainer.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>42.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/pillContainer/standardPillContainer.css

@@ -1,4 +1,5 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './pill.slds.css';
 @import './pill-container.slds.css';
-@import './listbox.slds.css'; */
+@import './listbox.slds.css';
+@import './button.slds.css'

package/src/lightning/pillContainer/standardPillContainer.html

@@ -1,7 +1,7 @@
 <template>
     <div class={computedWrapperClass} part="listbox pill-container">
         <template if:true={_showMore}>
-            <span class="slds-listbox-toggle" aria-hidden="true"><button class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
+            <span class="slds-listbox-toggle" aria-hidden="true"><button part="button" class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
         </template>
         <ul
             class={computedListboxClass}

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

@@ -2,29 +2,28 @@
 @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);
+      border-radius: var(--slds-g-radius-border-2);
+      width: var(--slds-g-sizing-15);
+      min-height: calc(var(--slds-g-sizing-5) * 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)));
+          var(--slds-g-color-surface-container-1));
       display: inline-block;
       box-shadow: 0 2px 3px 0 rgba(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));
+      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__meta {
-      margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+      margin-block-end: var(--slds-g-sizing-4);
   }
 
   :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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
-      padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+      padding-block: 0 var(--slds-g-sizing-3);
       padding-inline: 0;
   }
 
@@ -32,8 +31,8 @@
   .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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
       word-wrap: break-word;
   }
 
@@ -42,38 +41,38 @@
   }
 
   :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-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+      background-color: var(--slds--g-color-surface-container-2);
       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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
   }
 
   :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);
+      background: var(--slds-g-color-surface-container-2);
+      border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__body_small {
-      max-height: var(--sds-g-sizing-14, 15rem);
+      max-height: var(--slds-g-sizing-14);
       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);
+      margin-block: var(--slds-g-spacing-1);
+      margin-inline: var(--slds-g-spacing-1);
       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);
+      max-width: var(--slds-g-sizing-14);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover_medium {
-      min-width: var(--sds-g-sizing-15, 20rem);
+      min-width: var(--slds-g-sizing-15);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover_large {
@@ -98,24 +97,24 @@
   }
 
   :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));
+      background-color: var(--slds-g-color-accent-container-3);
+      color: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      background-color: var(--slds-g-color-surface-container-1);
   }
 
   :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));
+      color: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      fill: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      border-top-color: var(--slds-g-color-border-accent-2);
+      background-color: var(--slds-g-color-on-accent-2);
   }
 }

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, 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/popup/popup.js-meta.xml

@@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/popup/popup.lbc.native.css

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

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,11 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './tooltip.slds.css'; */
-
-/* Fix for tooltip alignment issue, for details see: W-11677142
- *
- * fix-tooltip_alignment - the custom class that edits min-width
- */
-
-.fix-popover_tooltip_alignment {
-    min-width: inherit;
-}
+@import './primitiveBubble.lbc.synthetic.css';
+@import './primitiveBubble.lbc.native.css';

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/primitiveBubble/primitiveBubble.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './tooltip.slds.css';

package/src/lightning/primitiveBubble/primitiveBubble.lbc.synthetic.css

@@ -0,0 +1,8 @@
+/* Fix for tooltip alignment issue, for details see: W-11677142
+ *
+ * fix-tooltip_alignment - the custom class that edits min-width
+ */
+
+.fix-popover_tooltip_alignment {
+    min-width: inherit;
+}