lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/primitiveIcon/primitiveIcon.js

@@ -1,14 +1,16 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
 import standardTemplate from './primitiveIcon.html';
+import iconStylesheets from './primitiveIcon.css';
 
-import { getName, isValidName, polyfill } from 'lightning/iconUtils';
+import { getName, isValidName } from 'lightning/iconUtils';
 import dir from '@salesforce/i18n/dir';
 import { fetchIconLibrary, hasIconLibrary, getIconLibrary } from './fetch';
 
-export default class LightningPrimitiveIcon extends LightningElement {
+export default class LightningPrimitiveIcon extends LightningShadowBaseClass {
     @api src;
     @api svgClass;
     _size = 'medium';
@@ -23,6 +25,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
     }
     set size(val) {
         this._size = val;
+        this.setAttribute('size', this.normalizeSize(this._size));
     }
 
     @api
@@ -31,6 +34,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
     }
     set variant(val) {
         this._variant = val;
+        this.setAttribute('variant', this.normalizeVariant(this._variant));
     }
 
     @api
@@ -66,7 +70,12 @@ export default class LightningPrimitiveIcon extends LightningElement {
         if (this.category) {
             try {
                 this._iconLibrary = null;
-                this._iconLibrary = await fetchIconLibrary(dir, this.category);
+                if (isCSR) {
+                    this._iconLibrary = await fetchIconLibrary(
+                        dir,
+                        this.category
+                    );
+                }
             } catch (e) {
                 // eslint-disable-next-line no-console
                 console.warn(
@@ -79,8 +88,6 @@ export default class LightningPrimitiveIcon extends LightningElement {
     renderedCallback() {
         if (this.isReady || this.iconName !== this.prevIconName) {
             this.prevIconName = this.iconName;
-            const svgElement = this.template.querySelector('svg');
-            polyfill(svgElement);
         }
     }
 
@@ -95,6 +102,10 @@ export default class LightningPrimitiveIcon extends LightningElement {
                         this._iconLibrary[`${spriteName}_${iconName}`];
 
                     if (template) {
+                        // manually attach the stylesheets in native shadow mode
+                        if (!this.template.synthetic) {
+                            template.stylesheets = iconStylesheets;
+                        }
                         return template;
                     }
                 }
@@ -111,14 +122,14 @@ export default class LightningPrimitiveIcon extends LightningElement {
         return getName(this.iconName);
     }
 
-    get normalizedSize() {
-        return normalize(this._size, {
+    normalizeSize(val) {
+        return normalize(val, {
             fallbackValue: 'medium',
             validValues: ['xx-small', 'x-small', 'small', 'medium', 'large'],
         });
     }
 
-    get normalizedVariant() {
+    normalizeVariant(val) {
         // NOTE: Leaving a note here because I just wasted a bunch of time
         // investigating why both 'bare' and 'inverse' are supported in
         // lightning-primitive-icon. lightning-icon also has a deprecated
@@ -126,7 +137,7 @@ export default class LightningPrimitiveIcon extends LightningElement {
         // that no classes should be applied. So this component needs to
         // support both 'bare' and 'inverse' while lightning-icon only needs to
         // support 'inverse'.
-        return normalize(this._variant, {
+        return normalize(val, {
             fallbackValue: '',
             validValues: ['bare', 'error', 'inverse', 'warning', 'success'],
         });
@@ -134,13 +145,12 @@ export default class LightningPrimitiveIcon extends LightningElement {
 
     get computedClass() {
         const classes = classSet(this.svgClass);
-        const { normalizedSize, normalizedVariant } = this;
 
-        if (normalizedVariant !== 'bare') {
+        if (this._variant !== 'bare') {
             classes.add('slds-icon');
         }
 
-        switch (normalizedVariant) {
+        switch (this._variant) {
             case 'error':
                 classes.add('slds-icon-text-error');
                 break;
@@ -161,8 +171,8 @@ export default class LightningPrimitiveIcon extends LightningElement {
                 }
         }
 
-        if (normalizedSize !== 'medium') {
-            classes.add(`slds-icon_${normalizedSize}`);
+        if (this._size !== 'medium') {
+            classes.add(`slds-icon_${this._size}`);
         }
 
         return classes.toString();

package/src/lightning/progressStep/progressStep.js

@@ -102,6 +102,9 @@ export default class LightningProgressStep extends LightningElement {
         if (this._deRegistrationCallback) {
             this._deRegistrationCallback();
         }
+        if (this._tooltip) {
+            this._tooltip.disconnect();
+        }
     }
 
     renderedCallback() {
@@ -153,7 +156,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseEnter() {
-        this.updateAriaDescribedBy('progress-indicator-tooltip');
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseenter', {
@@ -164,7 +166,7 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.updateAriaDescribedBy(null);
+        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseleave', {
@@ -175,10 +177,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleFocus() {
-        if (this.state.type === 'base') {
-            this.updateAriaDescribedBy('progress-indicator-tooltip');
-        }
-
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepfocus', {
@@ -189,7 +187,7 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleBlur() {
-        this.updateAriaDescribedBy(null);
+        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepblur', {
@@ -199,15 +197,11 @@ export default class LightningProgressStep extends LightningElement {
         );
     }
 
-    updateAriaDescribedBy(value) {
+    clearAriaDescribedBy() {
         if (this.state.type === 'base') {
             const button = this.template.querySelector('button');
             if (button) {
-                if (value !== null) {
-                    button.setAttribute('aria-describedBy', value);
-                } else {
-                    button.removeAttribute('aria-describedBy');
-                }
+                button.removeAttribute('aria-describedBy');
             }
         }
     }
@@ -246,6 +240,9 @@ export default class LightningProgressStep extends LightningElement {
                 },
             });
             this._tooltip.initialize();
+
+            // unset aria-describedby that would've been set by tooltipLibrary
+            this.clearAriaDescribedBy();
         }
     }
 }

package/src/lightning/radioGroup/__docs__/radioGroup.md

@@ -158,11 +158,11 @@ To apply custom styling, use the `:host` selector or define a custom class using
 </lightning-radio-group>
 ```
 
-When using `type="button"`, you can change the line height of the button label with SLDS styling hooks. For example, use `--sds-c-button-line-height` to reduce or increase the whitespace between lines of the text label.
+When using `type="button"`, you can change the line height of the button label with SLDS styling hooks. For example, use `--slds-c-button-line-height` to reduce or increase the whitespace between lines of the text label.
 
 ```css
 .my-radio-group {
-    --sds-c-button-line-height: 2.875rem;
+    --slds-c-button-line-height: 2.875rem;
 }
 ```
 
@@ -170,8 +170,8 @@ When using `type="radio"`, customize the component's styles using SLDS styling h
 
 ```css
 :host {
-    --sds-c-radio-mark-color-foreground: #000000;
-    --sds-c-radio-color-background-checked: orange;
+    --slds-c-radio-mark-color-foreground: #000000;
+    --slds-c-radio-color-background-checked: orange;
 }
 ```
 

package/src/lightning/radioGroup/radioGroup.css

@@ -1,4 +1,5 @@
-/* @import './input-radio-group.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './input-radio-group.slds.css';
 
 :host {
     display: block;

package/src/lightning/radioGroup/radioGroup.js

@@ -1,5 +1,6 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeBoolean,
     synchronizeAttrs,
@@ -25,7 +26,7 @@ const i18n = {
 /**
  * A radio button group that can have a single option selected.
  */
-export default class LightningRadioGroup extends LightningElement {
+export default class LightningRadioGroup extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -77,6 +78,7 @@ export default class LightningRadioGroup extends LightningElement {
         });
     }
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/select/__docs__/select.md

@@ -238,11 +238,11 @@ Use the `variant` attribute with one of these values to position the labels diff
 
 To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute. For example, you can add padding on the top of the component using the `slds-p-top_medium` SLDS class.
 
-To apply custom styling, define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles. For example, specify the border color on the `select` element using the `--sds-c-select-color-border` custom property.
+To apply custom styling, define a custom class using the `class` attribute. Use SLDS styling hooks to customize the component's styles. For example, specify the border color on the `select` element using the `--slds-c-select-color-border` custom property.
 
 ```css
 .my-select {
-    --sds-c-select-color-border: red;
+    --slds-c-select-color-border: red;
 }
 ```
 

package/src/lightning/select/form-element.slds.css

@@ -2,6 +2,13 @@
 /* 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: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
     /* FORM ELEMENT: BASE */
     :host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
@@ -29,11 +36,6 @@
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
-    .slds-form-element__control .slds-checkbox {
-        display: block;
-    }
-
     :host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
@@ -48,7 +50,7 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper { 
+    .slds-form-element__helper {
         font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
         margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
         display: block;
@@ -135,29 +137,31 @@
         display: block;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
     }
-  
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
@@ -170,26 +174,39 @@
     }
 
     /* --------------------------------------- */
-    
+
     /* FORM ELEMENT: INLINE */
 
     :host([data-render-mode="shadow"][variant~='label-inline']) {
         display: block;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: var(--sds-g-spacing-1, 0.25rem);   
-    }
-  
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
@@ -204,16 +221,20 @@
           position: relative;
           z-index: 1;
         }
-  
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          padding-inline-start: 33%;
+          margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
-  
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
-      
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
@@ -225,8 +246,36 @@
             margin-block-end: 0;
         }
 
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
 }

package/src/lightning/select/select.css

@@ -1,3 +1,3 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
-@import "./select.slds.css"; */
+@import "./select.slds.css";

package/src/lightning/select/select.js

@@ -1,6 +1,7 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -23,7 +24,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningSelect extends LightningElement {
+export default class LightningSelect extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -71,6 +72,7 @@ export default class LightningSelect extends LightningElement {
     _size;
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();