lightning-base-components 1.17.7-alpha → 1.18.2-alpha

package/src/lightning/input/input.js

@@ -13,7 +13,7 @@ import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helpt
 import userTimeZone from '@salesforce/i18n/timeZone';
 import formFactor from '@salesforce/client/formFactor';
 
-import { api, LightningElement, track } from 'lwc';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
@@ -109,23 +109,6 @@ const VALID_NUMBER_FORMATTERS = [
 const DEFAULT_COLOR = '#000000';
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
-/**
- * Returns an aria string with all the non-autolinked values removed
- * @param {String} values space sperated list of ids
- * @returns {String} The aria values with the non-auto linked ones removed
- */
-function filterNonAutoLink(values) {
-    const ariaValues = values && values.split(/\s+/);
-    return (
-        ariaValues &&
-        ariaValues
-            .filter((value) => {
-                return !!value.match(/^auto-link/);
-            })
-            .join(' ')
-    );
-}
-
 /**
  * Represents interactive controls that accept user input depending on the type attribute.
  */
@@ -382,6 +365,16 @@ export default class LightningInput extends LightningElement {
             );
         }
 
+        if (this.isConnected) {
+            this.ariaObserver.sync(this.isNativeShadow);
+
+            if (!this._rendered) {
+                this.connectAriaDescribedBy();
+                this.connectAriaLabelledBy();
+                this.connectAriaControls();
+            }
+        }
+
         if (!this._initialValueSet && this._inputElement) {
             this._rendered = true;
 
@@ -396,9 +389,6 @@ export default class LightningInput extends LightningElement {
             this._initialValueSet = true;
         }
 
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
         this._synchronizeA11y();
     }
 
@@ -541,6 +531,9 @@ export default class LightningInput extends LightningElement {
 
     set ariaControls(references) {
         this._ariaControls = references;
+        if (this._rendered) {
+            this.connectAriaControls();
+        }
         reflectAttribute(this, ARIA_CONTROLS, references);
     }
 
@@ -550,21 +543,17 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get ariaLabelledBy() {
-        // native version returns the auto linked value
-        if (this.isNative && this._rendered) {
-            const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
-            return filterNonAutoLink(ariaValues);
-        }
-        return this._ariaLabelledBy;
+        // native shadow version returns the mirrored values
+        return this._rendered && this.isNativeShadow
+            ? this._inputElement.getAttribute(ARIA_LABELLEDBY)
+            : this._ariaLabelledBy;
     }
 
     set ariaLabelledBy(references) {
         this._ariaLabelledBy = references;
-        this.ariaObserver.connect({
-            targetSelector: 'input',
-            attribute: ARIA_LABELLEDBY,
-            ids: references,
-        });
+        if (this._rendered) {
+            this.connectAriaLabelledBy();
+        }
     }
 
     /**
@@ -573,26 +562,66 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get ariaDescribedBy() {
-        if (this.isNative) {
-            // in native case return the linked value
-            const ariaValues =
-                this._inputElement.getAttribute(ARIA_DESCRIBEDBY);
-            return filterNonAutoLink(ariaValues);
-        }
-        return this._ariaDescribedBy;
+        // native shadow version returns the mirrored values
+        return this._rendered && this.isNativeShadow
+            ? this._inputElement.getAttribute(ARIA_DESCRIBEDBY)
+            : this._ariaDescribedBy;
     }
 
     set ariaDescribedBy(references) {
         this._ariaDescribedBy = references;
-        this.ariaObserver.connect({
-            targetSelector: 'input',
-            attribute: ARIA_DESCRIBEDBY,
-            ids: references,
-        });
+        if (this._rendered) {
+            this.connectAriaDescribedBy();
+        }
+    }
+
+    get isNativeShadow() {
+        return this._primitiveComponent?.isNativeShadow || this._isNativeShadow;
+    }
+
+    /**
+     * Connect aria-labelledby to the ariaObserver.
+     */
+    connectAriaLabelledBy() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_LABELLEDBY,
+                targetNode: this._inputElement,
+                relatedNodes: this._primitiveComponent.ariaLabelledByElements,
+                relatedNodeIds: this._ariaLabelledBy,
+            });
+        }
+    }
+
+    /**
+     * Connect aria-describedby to the ariaObserver.
+     */
+    connectAriaDescribedBy() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_DESCRIBEDBY,
+                targetNode: this._inputElement,
+                relatedNodes: this._primitiveComponent.ariaDescribedByElements,
+                relatedNodeIds: this._ariaDescribedBy,
+            });
+        }
+    }
+
+    /**
+     * Connect aria-controls to the ariaObserver.
+     */
+    connectAriaControls() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_CONTROLS,
+                targetNode: this._inputElement,
+                relatedNodeIds: this._ariaControls,
+            });
+        }
     }
 
     /**
-     * A boolean value that controls whether accessibility tools read empty required textboxes as invalid. Default value is false.
+     * A Boolean value for aria-invalid.
      * @type {boolean}
      */
     @api
@@ -659,10 +688,10 @@ export default class LightningInput extends LightningElement {
             // from text to 'checkbox', so we need to set the initial value again
             this._initialValueSet = false;
 
-            if (this.isTypeNumber) {
-                // If the type has changed, we need to re-parse the value as a number
-                this._updateNumberValue(this._value);
-            }
+            // Reconnect aria attributes as the parentSelector is based on the input type
+            this.connectAriaLabelledBy();
+            this.connectAriaDescribedBy();
+            this.connectAriaControls();
         }
 
         this._updateProxyInputAttributes([
@@ -1104,6 +1133,13 @@ export default class LightningInput extends LightningElement {
     @api
     reportValidity() {
         return this._constraint.reportValidity((message) => {
+            if (this.isTypeDesktopTime) {
+                reflectAttribute(
+                    this._inputElement.comboboxComponent,
+                    'invalid',
+                    !this.checkValidity()
+                );
+            }
             if (this._rendered && !this.isNativeInput) {
                 this._inputElement.showHelpMessage(message);
             } else {
@@ -1141,16 +1177,6 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    get isAutoCompleteSupported() {
-        return (
-            this.isTypeTelephone ||
-            this.isTypeUrl ||
-            this.isTypeSearch ||
-            this.isTypeEmail ||
-            this.isTypeText
-        );
-    }
-
     get isNativeInput() {
         return !(
             this.isTypeDesktopDate ||
@@ -1334,12 +1360,6 @@ export default class LightningInput extends LightningElement {
             .toString();
     }
 
-    get computedHelpMessageClass() {
-        return classSet('slds-form-element__help')
-            .add({ 'slds-m-left_none': this.variant !== VARIANT.LABEL_INLINE })
-            .toString();
-    }
-
     get normalizedMax() {
         return this._normalizeDateTimeString(this.max);
     }
@@ -1348,6 +1368,10 @@ export default class LightningInput extends LightningElement {
         return this._normalizeDateTimeString(this.min);
     }
 
+    get isTypeNumber() {
+        return this.type === 'number';
+    }
+
     get isTypeTelephone() {
         return this.type === 'tel';
     }
@@ -1356,10 +1380,6 @@ export default class LightningInput extends LightningElement {
         return this.type === 'url';
     }
 
-    get isTypeNumber() {
-        return this.type === 'number';
-    }
-
     get isTypeEmail() {
         // To test against native change this to type="emails"
         return this.type === 'email';
@@ -1514,7 +1534,7 @@ export default class LightningInput extends LightningElement {
             // This will not affect the value dispatched by input via the change event, as it only dispatches a valid decimal number.
             // Due to the above, in integrations like input-field, the user's initial input of a symbol
             // like a minus sign will not be overwritten by an empty string value.
-            // See description in PR for more details: https://github.com/salesforce-experience-platform-emu/lightning-components/pull/3843
+            // See description in PR for more details: https://github.com/salesforce-experience-platform/lightning-components/pull/3843
             if (
                 this._inputElement.value.length === 1 &&
                 hasValidNumberSymbol(this._inputElement.value)
@@ -1727,6 +1747,20 @@ export default class LightningInput extends LightningElement {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
 
+    get isAutoCompleteSupported() {
+        return (
+            this.isTypeTelephone ||
+            this.isTypeUrl ||
+            this.isTypeSearch ||
+            this.isTypeEmail ||
+            this.isTypeText
+        );
+    }
+
+    get templateRootNode() {
+        return this.template.host.getRootNode();
+    }
+
     handleFileClick() {
         this._setInputValue(null);
         this._updateValueAndValidityAttribute(null);
@@ -2105,9 +2139,9 @@ export default class LightningInput extends LightningElement {
 
     _updateDateOrTimePickerA11y(elem) {
         synchronizeAttrs(elem, {
-            ariaLabelledByElement: this.ariaLabelledBy,
-            ariaDescribedByElements: this.ariaDescribedBy,
-            ariaControlsElement: this.ariaControls,
+            ariaLabelledByElement: this._ariaLabelledBy,
+            ariaDescribedByElements: this._ariaDescribedBy,
+            ariaControlsElement: this._ariaControls,
             [ARIA_LABEL]: this.computedAriaLabel,
         });
     }

package/src/lightning/internationalizationLibrary/README.md

@@ -0,0 +1,24 @@
+# internationalizationLibrary
+
+Currently, the code base contains logic that directs execution in two different paths, depending whether a component is being executed on the platform vs off. That logic, was intented to aid the migration off the current Aura's localization service, in favor of an unified and universal solution based on standards, that could be consumed on any enviroment.
+
+Such logic can be detailed, on a high level as follows, at run time a path execution decides that:
+
+if a component is run on the platform, it will make use of Aura's localization Service to format and parse dates/times.
+if a component is run anywhere else, it will use the globalization i18n-service
+
+## When to use this utility
+
+Because of our legacy support and backward compatiblity contracts, we use this utility as a facade, with the hope that once we are able to fully deprecate Aura's Localization service, this utility will help us to transition into [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs).
+
+If you have an existing component that maps to any of the Aura's localization service methods, this module will aid with that.
+
+## Our recommmended approach
+
+- For declarative usage, use our localization specific components, they will work both off/on platform.
+- For low level, programatic usage, dealing with dates/times/numbers etc. use [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs). The next section covers more on usage and how these utiltiies are exposed.
+
+## Access/Exposure/Usage
+
+1. [internationalizationLibrary](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/internationalizationLibrary) as a module is not exposed on the platform, but it's part of our NPM package.
+2. [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs) is maintained by the Globalization team, however, we expose it as part of Lightning. For example [i18nService](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/i18nService). All usage of `localizerjs` should be consumed as `lightning/i18nService` and `lightning/i18nCldrOptions`. This is exposed on the platform internally and available as part of our NPM package.

package/src/lightning/internationalizationLibrary/utils.js

@@ -1,9 +1,12 @@
+import { isCSR } from 'lightning/utilsPrivate';
+
 /**
  * Used to determine if aura localization service is available
  * This should be true on-core and false off-core, and will
  * no longer be needed when we fully migrate off aura's service
  */
-export const isAuraL10NAvailable = window.$A && window.$A.localizationService;
+export const isAuraL10NAvailable =
+    isCSR && window.$A && window.$A.localizationService;
 
 /**
  * Returns string to use when throwing an error message

package/src/lightning/layout/__docs__/layout.md

@@ -121,7 +121,7 @@ To create columns with fixed widths, use the `size` attribute on `lightning-layo
 </lightning-layout>
 ```
 
-For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/).
+For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/), and [SLDS sizing utility classes](https://www.lightningdesignsystem.com/utilities/sizing/).
 
 #### Usage Considerations
 

package/src/lightning/layout/__examples__/simple/simple.css

@@ -12,4 +12,4 @@
     line-height: 1.25;
     color: #54698d;
     margin-bottom: .25rem;
-}
+}

package/src/lightning/layout/layout.css

@@ -1,4 +1,8 @@
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid';
+
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
     .slds-slot {
         display: flex;
     }

package/src/lightning/layout/layout.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeParam,
     computeLayoutClass,
@@ -11,7 +12,7 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 /**
  * Represents a responsive grid system for arranging containers on a page.
  */
-export default class LightningLayout extends LightningElement {
+export default class LightningLayout extends LightningShadowBaseClass {
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.
@@ -79,6 +80,7 @@ export default class LightningLayout extends LightningElement {
     _layoutClass = [];
 
     connectedCallback() {
+        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/layoutItem/__examples__/alignmentBump/alignmentBump.css

@@ -1,3 +1,3 @@
 .custom-box {
-    background-color: #f4f6f9;    
+    background-color: #f4f6f9;
 }

package/src/lightning/layoutItem/__examples__/sizePerDevice/sizePerDevice.css

@@ -1,4 +1,3 @@
 .custom-box {
     background-color: #f4f6f9;
-
 }

package/src/lightning/layoutItem/layoutItem.css

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsBox';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsPadding';
+@import 'lightning/sldsUtilsSizing';

package/src/lightning/layoutItem/layoutItem.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeFlexibility,
     normalizePadding,
@@ -13,7 +14,7 @@ import {
  * A layout item groups information together to define visual grids, spacing, and sections.
  * @slot default Placeholder for your content in lightning-layout-item.
  */
-export default class LightningLayoutItem extends LightningElement {
+export default class LightningLayoutItem extends LightningShadowBaseClass {
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:
@@ -136,6 +137,7 @@ export default class LightningLayoutItem extends LightningElement {
     _layoutClass = [];
 
     connectedCallback() {
+        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/menuDivider/menu-divider.slds.css

@@ -0,0 +1,15 @@
+
+/* 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: '') {
+  :host([data-render-mode="shadow"]) .slds-has-divider_top {
+    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-divider_top-space {
+    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+    margin-top: var(--sds-g-spacing-2, 0.5rem);
+    padding-top: var(--sds-g-spacing-2, 0.5rem);
+  }
+}

package/src/lightning/menuDivider/menuDivider.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-divider.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/menuDivider/menuDivider.html

@@ -1,3 +1,3 @@
 <template>
-    <div class={computedClass}></div>
+    <div class={computedClass} part="menu-divider"></div>
 </template>

package/src/lightning/menuDivider/menuDivider.js

@@ -1,14 +1,16 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningElement {
+export default class LightningMenuDivider extends LightningShadowBaseClass {
     @track _variant = 'standard';
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 

package/src/lightning/menuItem/menu-item.slds.css

@@ -0,0 +1,140 @@
+
+/* 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: '') {
+  /**
+   * Note: .slds-dropdown__item class used to be on the host element. Moved to
+   * new containing element to prevent duplicate styles in mixed-mode.
+   */
+
+  /**
+   * Menu Item
+   */
+  :host([data-render-mode="shadow"]) a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sds-g-spacing-2, 0.5rem);
+    position: relative;
+    padding: var(--sds-g-spacing-2, 0.5rem) var(--sds-g-spacing-3, 0.75rem);
+    color: var(--sds-g-color-neutral-base-10, #181818);
+    line-height: var(--sds-g-font-lineheight-4, 1.5);
+    font-weight: var(--sds-g-font-weight-4, 400);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"]) 
+  a:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) a:active {
+    text-decoration: none;
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) a[aria-disabled='true'] {
+    color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    cursor: default;
+
+    /* Reassignment - lightning-icon */
+    --slds-c-icon-color-foreground-default: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    --slds-c-icon-boundary-spacing-inline-end: 25px;
+  }
+
+  /* TODO: bring in PostCSS fix and see if it fixes output CSS */
+  :host([data-render-mode="shadow"]) a[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+  a:host([data-render-mode="shadow"]) [aria-disabled='true']:focus {
+    background-color: transparent;
+  }
+
+  /**
+   * Note: these styles were originally on the "a" element above, but flex
+   * context was lost because the truncate span was added, so we hijack the
+   * span to get the layout control that we want. Display: flex on both the
+   * "a" and "span" is intended, add prefix and suffix icons to see the
+   * generated markup and it'll make sense.
+   */
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  /**
+   * State - Error
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-error) a {
+    background: var(--sds-g-color-error-base-40, #ba0517);
+  }
+
+  /**
+   * State - Success
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-success) a {
+    background: var(--sds-g-color-success-base-70, #45c65a);
+  }
+
+  :host([data-render-mode="shadow"].slds-has-error) a,:host([data-render-mode="shadow"].slds-has-success) a {
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  /**
+   * State - Warning
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-warning) a {
+    background: var(--sds-g-color-warning-base-70, #fe9339);
+  }
+
+  :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unread {
+    background-color: currentColor;
+  }
+
+  :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unsaved {
+    color: currentColor;
+  }
+
+  :host([data-render-mode="shadow"].slds-has-error) a:hover,:host([data-render-mode="shadow"].slds-has-error) a:focus,:host([data-render-mode="shadow"].slds-has-success) a:hover,:host([data-render-mode="shadow"].slds-has-success) a:focus,:host([data-render-mode="shadow"].slds-has-warning) a:hover,:host([data-render-mode="shadow"].slds-has-warning) a:focus {
+    text-decoration: underline;
+  }
+
+  /**
+   * State - Selected
+   *
+   * We scope to aria-checked so we don't accidentally toggle prefix icons
+   * which are a separate API.
+   */
+  :host([data-render-mode="shadow"]) [aria-checked='false'] lightning-primitive-icon::part(icon) {
+    opacity: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [aria-checked='true'] lightning-primitive-icon::part(icon) {
+    opacity: 1;
+  }
+
+  /**
+   * Status Indicator
+   *
+   * @TODO: Look into viability of refactoring into utility
+   */
+  :host([data-render-mode="shadow"]) .slds-indicator_unsaved,:host([data-render-mode="shadow"]) 
+  .slds-indicator--unsaved {
+    color: var(--sds-g-color-brand-base-50, #0176d3);
+    align-self: center;
+    position: relative;
+
+    /* Unsaved indicator does not have gap spacing, everything else does */
+    margin-inline-end: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+  }
+}

package/src/lightning/menuItem/menuItem.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-item.slds.css';
+
 :host {
     display: block;
 }