lightning-base-components 1.18.3-alpha → 1.18.5-alpha

package/metadata/raptor.json

@@ -3169,6 +3169,27 @@
       {
         "name": "value"
       }
+    ],
+    "methods": [
+      {
+        "name": "blur"
+      },
+      {
+        "name": "focus"
+      }
+    ]
+  },
+  "recordPickerGetRecord": {
+    "properties": [
+      {
+        "name": "displayInfo"
+      },
+      {
+        "name": "objectApiName"
+      },
+      {
+        "name": "recordId"
+      }
     ]
   },
   "recordUtils": {},

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.3-alpha",
+    "version": "1.18.5-alpha",
     "license": "MIT",
     "files": [
         "external",
         "scopedImports",
         "metadata",
-        "src/lightning/*/!(__container__|__integration__|__perf__|__raptorMocks__|__test__|__tests__)",
+        "src/lightning/*/!(__container__|__perf__|__raptorMocks__|__test__|__tests__)",
         "package.json"
     ],
     "engines": {
@@ -1306,6 +1306,7 @@
             "lightning-radio-group",
             "lightning-select",
             "lightning-spinner",
+            "lightning-tab",
             "lightning-tab-bar",
             "lightning-timepicker",
             "lightning-vertical-navigation",

package/src/lightning/baseCombobox/baseCombobox.js

@@ -21,7 +21,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-
+import { isCSR } from 'lightning/utilsPrivate';
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -51,6 +51,7 @@ const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -82,17 +83,16 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    @track _showDropdownActivityIndicator = false;
+    _showDropdownActivityIndicator = false;
     @track _items = [];
-    @track _disabled = false;
-    @track _dropdownVisible = false;
-    @track _hasDropdownOpened = false;
-    @track _highlightedOptionElementId = null;
-    @track _variant;
-    @track _dropdownHeight = 'standard';
-    @track _readonly = false;
-    @track _logoLoaded = false;
-
+    _disabled = false;
+    _dropdownVisible = false;
+    _hasDropdownOpened = false;
+    _highlightedOptionElementId = null;
+    _variant;
+    _dropdownHeight = 'standard';
+    _readonly = false;
+    _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -126,7 +126,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this.setupAriaObserverIfAbsent();
-        this.overrideDropdownAlignment();
+        if (isCSR) {
+            this.overrideDropdownAlignment();
+        }
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -597,7 +599,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get dropdownElement() {
-        return this.template.querySelector('[data-dropdown-element]');
+        return isCSR
+            ? this.template.querySelector('[data-dropdown-element]')
+            : null;
     }
 
     get i18n() {
@@ -942,7 +946,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get inputElement() {
-        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+        return isCSR
+            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
+            : null;
     }
 
     // remove-next-line-for-c-namespace

package/src/lightning/buttonIcon/buttonIcon.js

@@ -1,6 +1,6 @@
 import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
@@ -89,6 +89,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @default medium
      */
     _size = DEFAULT_SIZE;
+
     @api
     get size() {
         return this._originalSize;
@@ -319,22 +320,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        this.dispatchEvent(
-            new CustomEvent('privatebuttoniconregister', {
-                cancelable: true,
-                bubbles: true,
-                detail: {
-                    // Tooltip type should be toggle for some consumers like helptext
-                    setTooltipType: (tooltipType) => {
-                        this.tooltipType = tooltipType;
-                    },
-                    // Title should not be set for some consumers like helptext (see W-12496300)
-                    showTitle: (showTitle) => {
-                        this.showTitle = showTitle;
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privatebuttoniconregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    detail: {
+                        // Tooltip type should be toggle for some consumers like helptext
+                        setTooltipType: (tooltipType) => {
+                            this.tooltipType = tooltipType;
+                        },
+                        // Title should not be set for some consumers like helptext (see W-12496300)
+                        showTitle: (showTitle) => {
+                            this.showTitle = showTitle;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     renderedCallback() {

package/src/lightning/combobox/combobox.js

@@ -19,6 +19,8 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 
+import { isCSR } from 'lightning/utilsPrivate';
+
 const i18n = {
     required: labelRequired,
     placeholder: labelPlaceholder,
@@ -30,15 +32,20 @@ const i18n = {
  */
 export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
-
-    @track _ariaLabelledBy = '';
-    @track _ariaDescribedBy = '';
-    @track _fieldLevelHelp = '';
-    @track _selectedLabel = '';
-    @track _disabled = false;
-    @track _readOnly = false;
-    @track _spinnerActive = false;
-    @track _required = false;
+    static validationOptOut = ['class'];
+
+    _ariaLabelledBy = '';
+    _ariaDescribedBy = '';
+    _fieldLevelHelp = '';
+    _selectedLabel = '';
+    _disabled = false;
+    _readOnly = false;
+    _spinnerActive = false;
+    _required = false;
+    _variant;
+    _helpMessage;
+    _labelForId;
+    @track _items = [];
 
     /**
      * Reserved for internal use. Controls auto-filling of the field.
@@ -84,12 +91,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
      */
     @api name;
 
-    @track _items = [];
-    @track _variant;
-    @track _helpMessage;
-
-    _labelForId;
-
     renderedCallback() {
         this.synchronizeA11y();
     }
@@ -376,7 +377,7 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     get templateRootNode() {
-        return this.template.host.getRootNode();
+        return isCSR ? this.template.host.getRootNode() : null;
     }
 
     get i18n() {

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

@@ -0,0 +1,281 @@
+
+/* 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;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .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;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    /* 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']) .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%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+
+    /*
+    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);
+    }
+
+    /* 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([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)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          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 {
+          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%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            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;
+    }
+}