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

package/src/lightning/modalHeader/modalHeader.js

@@ -1,4 +1,5 @@
-import { api, LightningElement } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -11,7 +12,7 @@ const defaultSlotSelector = '[data-default-slot]';
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
  * */
-export default class LightningModalHeader extends LightningElement {
+export default class LightningModalHeader extends LightningShadowBaseClass {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
@@ -187,6 +188,7 @@ export default class LightningModalHeader extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.initState();
     }
 

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

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './modal-header.slds.css';
+@import 'lightning/sldsUtilsHyphenation';

package/src/lightning/overlay/overlay.js

@@ -1,4 +1,6 @@
-import { LightningElement, createElement, api } from 'lwc';
+import { createElement, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 import { instanceName } from 'lightning/overlayUtils';
 import OverlayContainer from 'lightning/overlayContainer';
 
@@ -18,7 +20,7 @@ function container() {
 /**
  * Extend this component for open/close apis.
  */
-export default class LightningOverlay extends LightningElement {
+export default class LightningOverlay extends LightningShadowBaseClass {
     /**
      * Easier to debug when dynamically created.
      */
@@ -30,7 +32,10 @@ export default class LightningOverlay extends LightningElement {
      * @param {Object} apis Set apis directly on the modal instance
      */
     static open(apis) {
-        return container().push(this, apis);
+        if (isCSR) {
+            return container().push(this, apis);
+        }
+        return new Promise(() => {});
     }
 
     /**
@@ -40,6 +45,8 @@ export default class LightningOverlay extends LightningElement {
      */
     @api
     close(result, promise) {
-        container().pop(this.template.host, result, promise);
+        if (isCSR) {
+            container().pop(this.template.host, result, promise);
+        }
     }
 }

package/src/lightning/overlayContainer/overlayContainer.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, createElement } from 'lwc';
+import { api, createElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { parent, instanceName, normalizeApis } from 'lightning/overlayUtils';
 import { guid } from 'lightning/utilsPrivate';
 import {
@@ -16,7 +17,7 @@ import {
     LWC_OVERLAY_ENGINE,
 } from 'lightning/overlayManager';
 
-export default class LightningOverlayContainer extends LightningElement {
+export default class LightningOverlayContainer extends LightningShadowBaseClass {
     // overlayContainer has this.stack, which holds the details, and actual
     // DOM elements of local (this file) LWC overlays only, while
     // overlayManager has this.state.stack, which only tracks details of

package/src/lightning/picklist/picklist.js

@@ -1,9 +1,10 @@
 import labelNoneLabel from '@salesforce/label/LightningPicklist.noneLabel';
 import labelAvailable from '@salesforce/label/LightningPicklist.available';
 import labelChosen from '@salesforce/label/LightningPicklist.chosen';
-import { LightningElement, track, api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { normalizeBoolean, arraysEqual } from 'lightning/utilsPrivate';
 import formFactor from '@salesforce/client/formFactor';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     noneLabel: labelNoneLabel,
@@ -16,15 +17,15 @@ export default class LightningPicklist extends LightningElement {
     static delegatesFocus = true;
 
     // The value that is passed into the sub-components. dual-listbox accepts an array whereas combobox expects a string
-    @track _internalValue;
+    _internalValue;
     // The value (String) returned by the picklist. In the multi case, the values are separated by a semicolon
-    @track _picklistValue;
-    @track _options;
-    @track _required = false;
-    @track _disabled = false;
-    @track _size = 4;
-    @track _showActivityIndicator = false;
-    @track _fieldLevelHelp;
+    _picklistValue;
+    _options;
+    _required = false;
+    _disabled = false;
+    _size = 4;
+    _showActivityIndicator = false;
+    _fieldLevelHelp;
 
     @api label;
     @api name;
@@ -201,9 +202,11 @@ export default class LightningPicklist extends LightningElement {
     }
 
     get getElement() {
-        return this.template.querySelector(
-            'lightning-combobox,lightning-dual-listbox,lightning-select'
-        );
+        return isCSR
+            ? this.template.querySelector(
+                  'lightning-combobox,lightning-dual-listbox,lightning-select'
+              )
+            : null;
     }
 
     // disable reordering functionality on dual-listbox
@@ -411,13 +414,15 @@ export default class LightningPicklist extends LightningElement {
         if (isProgrammatic) {
             detail.programmatic = true;
         }
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                composed: true,
-                bubbles: true,
-                detail,
-            })
-        );
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    composed: true,
+                    bubbles: true,
+                    detail,
+                })
+            );
+        }
     }
 
     getPicklistValue(value) {

package/src/lightning/picklist/picklist.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/pill/avatar.slds.css

@@ -1,182 +1,7 @@
-/**
- * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
- *        fallbacks, styles will regress due to invalid CSS variables from
- *        missing SLDS shared and globals.
- *
- *        Additionally, LBC are currently relying on 'part' attributes to
- *        receive styling. Authoring styles that rely on slots is not recommended.
- */
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size='xxx-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  }
-
-  :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
-  }
-
-  :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
-  }
-
-  :host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
-  }
-
-  :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
-  }
-
-  :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
-  }
-
-  :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
-  }
-
-  :host([data-render-mode="shadow"]) [part='boundary'] {
-    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
-    --sds-c-icon-color-border: var(--slds-c-icon-color-border);
-    --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-blockstart,
-      var(--slds-c-icon-spacing-block)
-    );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
-    --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inlinestart,
-      var(--slds-c-icon-spacing-inline)
-    );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
-
-    /**
-     * There's a divergence in LBC that we have to support here: LBC splits their
-     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
-     * slds-icon is consumed within both with no issues except that the presence of an
-     * additional custom element (primitive-icon) creates an unexpected inline-level
-     * element and breaks our formatting context. tl;dr, we have to reset the formatting
-     * context of the boundary or else we'll inherit line-height from an ancestor and
-     * get visual regressions.
-     *
-     * If lightning-icon is refactored into a single component, this line can be removed.
-     */
-    display: inline-flex;
-  }
-
-  :host([data-render-mode="shadow"]) [part='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-  }
-
-  :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
-  }
-}
-
-/**
- * P R I V A T E
- *
- * The following styling is implemented by classes within the shadow DOM.
- * They're expected to be private to the component and not for external use.
- *
- * See notes for each class for the rationale behind their inclusion.
- */
-
-/**
- * Utility icons traditionally added a class to change the default foreground
- * color (white) to a grey. This was done implicitly whereas other color changes
- * were done explicitly through the 'variant' attribute. So this is an outlier
- * to the overall pattern. Leaving it as-is since an update would require an
- * API change or more investigating.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and the default utility styling would
- * be implemented through an attribute or some other class-less solution.
- */
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default {
-  /*! @css-var-fallback fill */
-  --slds-c-icon-color-foreground: var(
-    --slds-c-icon-color-foreground-default,
-    var(--sds-c-icon-color-foreground-default, var(
-      --sds-g-color-neutral-base-50, #747474))
-  );
-}
-
-:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
-}
-
-/**
- * A temporarily baked-in utility class until SLDS gets a proper utility package.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and replacing the class with the SLDS
- * utility package solution.
- */
-
-:host([data-render-mode="shadow"]) .slds-assistive-text {
-  position: absolute !important;
-  margin: -1px !important;
-  border: 0 !important;
-  padding: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  text-transform: none !important;
-  white-space: nowrap !important;
-}
-
-/**
- * For the initial alpha version, we're hardcoding in the various unique icon styles.
- *
- * Next version, we want to dynamically generate these from legacy SLDS with the
- * following design pattern:
- *
- * [type="action"][icon-name="approval"] {
- *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
- * }
- */
-
-:host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentcolor;
-}
-
-:host([data-render-mode="shadow"]) .slds-input__icon {
-  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-
-  position: absolute;
-  top: 50%;
-  margin-block-start: -0.4375rem;
-  line-height: var(--sds-g-font-lineheight-1, 1);
-  border: 0;
-  z-index: 2;
-}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
-  /* re-assign icon color hook for avatar */
-  :host([data-render-mode="shadow"]) {
-    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
-  }
-
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -191,52 +16,52 @@
   }
 
   :host([data-render-mode="shadow"]) [part='avatar'] {
-    width: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
-    height: var(--slds-c-avatar-sizing, var(--sds-g-sizing-9, 2rem));
+    width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+    height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
     overflow: hidden;
     display: inline-block;
     vertical-align: middle;
-    border-radius: var(--slds-c-avatar-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    line-height: var(--sds-g-font-lineheight-1, 1);
-    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-    color: var(--slds-c-avatar-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
+    line-height: var(--slds-g-font-lineheight-1);
+    font-size: var(--slds-g-font-scale-neg-1);
+    color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
   }
 
   :host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
-    width: var(--sds-g-sizing-6, 1.25rem);
-    height: var(--sds-g-sizing-6, 1.25rem);
-    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
-    --slds-c-icon-sizing: var(--sds-g-sizing-6, 1.25rem);
+    width: var(--slds-g-sizing-6);
+    height: var(--slds-g-sizing-6);
+    font-size: var(--slds-g-font-scale-neg-4);
+    --slds-c-icon-sizing: var(--slds-g-sizing-6);
   }
 
   :host([data-render-mode="shadow"][size='small']) [part='avatar'] {
-    width: var(--sds-g-sizing-7, 1.5rem);
-    height: var(--sds-g-sizing-7, 1.5rem);
-    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+    width: var(--slds-g-sizing-7);
+    height: var(--slds-g-sizing-7);
+    font-size: var(--slds-g-font-scale-neg-4);
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
 
   :host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
-    width: var(--sds-g-sizing-9, 2rem);
-    height: var(--sds-g-sizing-9, 2rem);
-    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-    --slds-c-icon-sizing: var(--sds-g-sizing-9, 2rem);
+    width: var(--slds-g-sizing-9);
+    height: var(--slds-g-sizing-9);
+    font-size: var(--slds-g-font-scale-neg-1);
+    --slds-c-icon-sizing: var(--slds-g-sizing-9);
   }
 
   :host([data-render-mode="shadow"][size='large']) [part='avatar'] {
-    width: var(--sds-g-sizing-10, 3rem);
-    height: var(--sds-g-sizing-10, 3rem);
-    font-size: var(--sds-g-font-scale-1, 1.125rem);
-    line-height: var(--sds-g-font-lineheight-2, 1.25);
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+    width: var(--slds-g-sizing-10);
+    height: var(--slds-g-sizing-10);
+    font-size: var(--slds-g-font-scale-1);
+    line-height: var(--slds-g-font-lineheight-2);
+    --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
 
   :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
-    border-radius: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+    border-radius: calc(var(--slds-g-radius-border-circle) / 2);
   }
 
   :host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
-    border: var(--sds-g-sizing-border-1, 1px) dashed var(--sds-g-color-neutral-base-90, #e5e5e5);
+    border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
   }
 
   :host([data-render-mode="shadow"]) lightning-icon {
@@ -250,10 +75,14 @@
     align-content: center;
     align-items: center;
     margin: auto;
-    color: var(--slds-c-avatar-text-color);
+    color: var(--slds-c-avatar-initials-text-color);
     height: 100%;
     text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
-    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
+    background-color: var(--slds-g-color-accent-container-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
+    color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
@@ -262,10 +91,10 @@
   }
 
   /* inverse is not currently supported by LBC */
+
   :host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
-    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--sds-g-color-neutral-base-30, #444444));
+    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
 
-    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    background-color: var(--slds-g-color-neutral-base-95);
     text-shadow: none;
   }
-}

package/src/lightning/pill/link.css

@@ -1,3 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './pill.slds.css';
-@import './avatar.slds.css'; */
+@import './link.lbc.native.css';

package/src/lightning/pill/link.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './pill.slds.css';
+@import './avatar.slds.css';

package/src/lightning/pill/pill.js

@@ -1,7 +1,8 @@
 import labelPillError from '@salesforce/label/LightningPill.error';
 import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
-import { LightningElement, api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, track } from 'lwc';
 import {
     classListMutation,
     normalizeBoolean,
@@ -44,7 +45,7 @@ function modifyAttribute(el, name, value) {
  * A pill displays a label that can contain links and can be removed from view.
  * @slot default Placeholder for an image, such as an icon or avatar.
  */
-export default class LightningPill extends LightningElement {
+export default class LightningPill extends LightningShadowBaseClass {
     /**
      * The URL of the page that the link goes to.
      * @type {string}
@@ -256,6 +257,7 @@ export default class LightningPill extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         if (this.isPlainLink || this.isLink) {
             this.updateLinkInfo(this.href);

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

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