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

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();

package/src/lightning/select/select.slds.css

@@ -32,6 +32,13 @@
   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;
@@ -59,11 +66,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;
@@ -78,7 +80,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;
@@ -165,29 +167,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%;
@@ -200,26 +204,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)
     }
@@ -234,16 +251,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%;
@@ -255,12 +276,43 @@
             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;
+    }
 }
 
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
 @supports (--styling-hooks: '') {
     /* SELECT */
     :host([data-render-mode="shadow"]) [part~='select'] {

package/src/lightning/sldsCommon/sldsCommon.css

@@ -5,11 +5,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  * Normalize box sizing to border box for all browsers.
  */
 
- *,
- ::before,
- ::after {
-   box-sizing: border-box;
- }
+*,
+::before,
+::after {
+    box-sizing: border-box;
+}
 
  h1,
  h2,
@@ -17,80 +17,140 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  h4,
  h5,
  h6 {
-   font-weight: var(--sds-s-heading-font-weight);
+   font-weight: var(--sds-s-heading-font-weight, inherit);
    margin-block-start: var(--sds-s-heading-spacing-block-start, var(--sds-s-heading-spacing-block));
    margin-block-end: var(--sds-s-heading-spacing-block-end, var(--sds-s-heading-spacing-block));
+   font-size: 1em;
  }
 
- p {
-   margin-block-start: var(--sds-s-content-spacing-block-start, var(--sds-s-content-spacing-block));
-   margin-block-end: var(--sds-s-content-spacing-block-end, var(--sds-s-content-spacing-block));
- }
-
- ol,
- ul {
-   list-style: none;
-   padding: 0;
-   margin-block-start: var(--sds-s-content-spacing-block-start, var(--sds-s-content-spacing-block));
-   margin-block-end: var(--sds-s-content-spacing-block-end, var(--sds-s-content-spacing-block));
- }
-
- button,
- [type='button'],
- [type='reset'],
- [type='submit'] {
-   appearance: button;
-   appearance: button;
-   cursor: pointer;
- }
-
- [type='search'] {
-   appearance: textfield;
+a {
+    text-decoration: none;
+}
+
+p {
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block, 0)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block, 0)
+    );
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+}
+
+ol,
+ul {
+    list-style: none;
+    padding: 0;
+    margin-block-start: var(
+        --sds-s-content-spacing-block-start,
+        var(--sds-s-content-spacing-block)
+    );
+    margin-block-end: var(
+        --sds-s-content-spacing-block-end,
+        var(--sds-s-content-spacing-block)
+    );
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+    appearance: button;
+    cursor: pointer;
+}
+
+[type='search'] {
+   -webkit-appearance: textfield;
    outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration, 
+[type=search]::-webkit-search-cancel-button,
+[type=search]::-webkit-search-results-button, 
+[type=search]::-webkit-search-results-decoration{
+    display: none;
+  }
+
+/* Below selectors are commented out
+because it seems to disrupt synthetic mode
+styling but exist in SLDS-internal. 
+They are added in to individual component css
+(ex. calendar.css) */
+/* button,
+input,
+optgroup,
+textarea, */
+select {
+    color: inherit;
+    font: inherit; 
+    margin: 0;
+}
+
+input:focus,
+button:focus,
+select:focus,
+textarea:focus {
+    outline-offset: 0;
+}
+
+::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+code,
+kbd,
+samp,
+pre {
+    font-family: var(--sds-g-font-family-monospace);
+}
+
+img,
+[type='image'] {
+    max-width: 100%;
+    height: auto;
+}
+
+iframe {
+    border-style: none;
+}
+
+svg:not([fill]) {
+    fill: currentColor;
+}
+
+abbr[title] {
+  text-decoration: none;
+  cursor: help;
  }
 
- input:focus,
- button:focus,
- select:focus,
- textarea:focus {
-   outline-offset: 0;
- }
-
- ::-moz-focus-inner {
-   border-style: none;
-   padding: 0;
- }
-
- ::-webkit-search-decoration {
-   appearance: none;
- }
-
- ::-webkit-file-upload-button {
-   appearance: button;
-   font: inherit;
- }
-
- :-moz-focusring {
-   outline: 1px dotted ButtonText;
- }
-
- :-moz-ui-invalid {
-   box-shadow: none;
- }
-
- code,
- kbd,
- samp,
- pre {
-   font-family: var(--sds-g-font-family-monospace);
- }
-
- img,
- [type='image'] {
-   max-width: 100%;
-   height: auto;
- }
-
- iframe {
-   border-style: none;
- }
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}

package/src/lightning/spinner/spinner.css

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

package/src/lightning/spinner/spinner.js

@@ -1,4 +1,5 @@
-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';
 
@@ -8,7 +9,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningElement {
+export default class LightningSpinner extends LightningShadowBaseClass {
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -58,6 +59,7 @@ export default class LightningSpinner extends LightningElement {
     _altText = '';
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-spinner_container');
         this.template.addEventListener('mousewheel', this.stopScrolling);
         this.template.addEventListener('touchmove', this.stopScrolling);