lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/metadata/raptor.json

@@ -11,6 +11,11 @@
       {
         "name": "allowMultipleSectionsOpen"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "accordionSection": {
@@ -29,6 +34,11 @@
       {
         "name": "name"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "actions": {
@@ -123,6 +133,11 @@
       {
         "name": "label"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "barcodeScanner": {
@@ -166,6 +181,7 @@
       }
     ]
   },
+  "billingApi": {},
   "billingBatchApi": {},
   "breadcrumb": {
     "minVersion": "0.0",
@@ -246,6 +262,11 @@
     "minVersion": "45.0",
     "slotNames": [
       ""
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "buttonIcon": {
@@ -308,6 +329,9 @@
       {
         "name": "size"
       },
+      {
+        "name": "tooltip"
+      },
       {
         "name": "value"
       },
@@ -380,6 +404,11 @@
       {
         "name": "focus"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "buttonStateful": {
@@ -652,6 +681,7 @@
   "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
+  "communityPreviewUrlApi": {},
   "communityRecordSeoPropertiesApi": {},
   "configProvider": {
     "minVersion": "0.0"
@@ -925,6 +955,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "dynamicIcon": {
@@ -1045,9 +1080,15 @@
       "footer"
     ],
     "properties": [
+      {
+        "name": "bundle"
+      },
       {
         "name": "contexts"
       },
+      {
+        "name": "dependentFieldValues"
+      },
       {
         "name": "disabled"
       },
@@ -1060,6 +1101,9 @@
       {
         "name": "extraData"
       },
+      {
+        "name": "isFormValid"
+      },
       {
         "name": "metadata"
       },
@@ -1564,8 +1608,14 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
+  "harmonizebillingApi": {},
   "helptext": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -1889,6 +1939,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "inputAddress": {
@@ -2002,6 +2057,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "inputField": {
@@ -2111,6 +2171,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "inputName": {
@@ -2270,6 +2335,11 @@
       {
         "name": "setRangeText"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "interactionOrchestratorApi": {},
@@ -2662,6 +2732,11 @@
       {
         "name": "focus"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "menuSubheader": {
@@ -3924,6 +3999,7 @@
       }
     ]
   },
+  "primitiveThemeProvider": {},
   "primitiveTooltipManager": {
     "slotNames": [
       ""
@@ -4156,6 +4232,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "recordEditForm": {
@@ -4397,6 +4478,7 @@
   "salesEnablementMeasureApi": {},
   "salesEnablementProgramApi": {},
   "salesEngagementWorkspaceApi": {},
+  "salesPathAssistantApi": {},
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},
   "select": {
@@ -4796,6 +4878,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "tile": {
@@ -4994,7 +5081,7 @@
   "unstable_cmsDeliveryApi": {},
   "unstable_cmsTypeApi": {},
   "unstable_commerceApi": {},
-  "unstable_commerceManagementApi": {},
+  "unstable_commerceChannelManagementApi": {},
   "unstable_communityNavigationMenuApi": {},
   "unstable_communityRecordSeoPropertiesApi": {},
   "unstable_communitySitesSearchApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.21.1-alpha",
+    "version": "1.21.3-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -266,6 +266,10 @@
                 "name": "@salesforce/label/LightningRichTextEditor.fontSize",
                 "path": "scopedImports/@salesforce-label-LightningRichTextEditor.fontSize.js"
             },
+            {
+                "name": "@salesforce/label/LightningRichTextEditor.colorPicker",
+                "path": "scopedImports/@salesforce-label-LightningRichTextEditor.colorPicker.js"
+            },
             {
                 "name": "@salesforce/label/LightningRichTextEditor.linkInputTitle",
                 "path": "scopedImports/@salesforce-label-LightningRichTextEditor.linkInputTitle.js"
@@ -1307,7 +1311,181 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
-        "nativeShadowEnabledComponents": [],
+        "ssrEnabledComponents": [
+            "lightning-accordion",
+            "lightning-accordion-section",
+            "lightning-alert",
+            "lightning-avatar",
+            "lightning-badge",
+            "lightning-base-combobox",
+            "lightning-base-combobox-formatted-text",
+            "lightning-base-combobox-item",
+            "lightning-breadcrumb",
+            "lightning-breadcrumbs",
+            "lightning-button",
+            "lightning-button-group",
+            "lightning-button-icon",
+            "lightning-button-icon-stateful",
+            "lightning-button-menu",
+            "lightning-button-stateful",
+            "lightning-calendar",
+            "lightning-color-picker-custom",
+            "lightning-color-picker-panel",
+            "lightning-combobox",
+            "lightning-confirm",
+            "lightning-datepicker",
+            "lightning-datetimepicker",
+            "lightning-dual-listbox",
+            "lightning-dynamic-icon",
+            "lightning-focus-trap",
+            "lightning-formatted-address",
+            "lightning-formatted-date-time",
+            "lightning-formatted-email",
+            "lightning-formatted-location",
+            "lightning-formatted-phone",
+            "lightning-formatted-rich-text",
+            "lightning-formatted-text",
+            "lightning-formatted-time",
+            "lightning-formatted-url",
+            "lightning-grouped-combobox",
+            "lightning-helptext",
+            "lightning-icon",
+            "lightning-input-address",
+            "lightning-input-location",
+            "lightning-input-rich-text",
+            "lightning-interactive-dialog-base",
+            "lightning-layout",
+            "lightning-layout-item",
+            "lightning-lookup-address",
+            "lightning-menu-divider",
+            "lightning-menu-item",
+            "lightning-menu-subheader",
+            "lightning-modal",
+            "lightning-modal-base",
+            "lightning-modal-body",
+            "lightning-modal-footer",
+            "lightning-modal-header",
+            "lightning-overlay",
+            "lightning-overlay-container",
+            "lightning-picklist",
+            "lightning-pill",
+            "lightning-pill-container",
+            "lightning-popup",
+            "lightning-popup-source",
+            "lightning-progress-bar",
+            "lightning-progress-ring",
+            "lightning-primitive-bubble",
+            "lightning-primitive-button",
+            "lightning-primitive-icon",
+            "lightning-primitive-iframe",
+            "lightning-primitive-input-checkbox",
+            "lightning-primitive-input-checkbox-button",
+            "lightning-primitive-input-color",
+            "lightning-primitive-input-file",
+            "lightning-primitive-input-simple",
+            "lightning-primitive-input-toggle",
+            "lightning-prompt",
+            "lightning-radio-group",
+            "lightning-rich-text-toolbar-button",
+            "lightning-rich-text-toolbar-button-group",
+            "lightning-select",
+            "lightning-spinner",
+            "lightning-toast",
+            "lightning-toast-container",
+            "lightning-textarea",
+            "lightning-timepicker"
+        ],
+        "nativeShadowEnabledComponents": [
+            "lightning-accordion",
+            "lightning-accordion-section",
+            "lightning-alert",
+            "lightning-avatar",
+            "lightning-badge",
+            "lightning-base-combobox",
+            "lightning-base-combobox-formatted-text",
+            "lightning-base-combobox-item",
+            "lightning-breadcrumb",
+            "lightning-breadcrumbs",
+            "lightning-bubble",
+            "lightning-button",
+            "lightning-button-group",
+            "lightning-button-icon",
+            "lightning-button-icon-stateful",
+            "lightning-button-menu",
+            "lightning-button-stateful",
+            "lightning-card",
+            "lightning-calendar",
+            "lightning-color-picker-custom",
+            "lightning-color-picker-panel",
+            "lightning-combobox",
+            "lightning-confirm",
+            "lightning-datepicker",
+            "lightning-datetimepicker",
+            "lightning-dual-listbox",
+            "lightning-dynamic-icon",
+            "lightning-focus-trap",
+            "lightning-formatted-address",
+            "lightning-formatted-date-time",
+            "lightning-formatted-email",
+            "lightning-formatted-location",
+            "lightning-formatted-phone",
+            "lightning-formatted-rich-text",
+            "lightning-formatted-text",
+            "lightning-formatted-time",
+            "lightning-formatted-url",
+            "lightning-grouped-combobox",
+            "lightning-helptext",
+            "lightning-icon",
+            "lightning-input",
+            "lightning-input-address",
+            "lightning-input-name",
+            "lightning-input-location",
+            "lightning-input-rich-text",
+            "lightning-interactive-dialog-base",
+            "lightning-layout",
+            "lightning-layout-item",
+            "lightning-menu-divider",
+            "lightning-menu-item",
+            "lightning-menu-subheader",
+            "lightning-modal",
+            "lightning-modal-base",
+            "lightning-modal-body",
+            "lightning-modal-footer",
+            "lightning-modal-header",
+            "lightning-overlay",
+            "lightning-overlay-container",
+            "lightning-picklist",
+            "lightning-pill",
+            "lightning-pill-container",
+            "lightning-popup",
+            "lightning-popup-source",
+            "lightning-primitive-bubble",
+            "lightning-primitive-button",
+            "lightning-primitive-color-picker-button",
+            "lightning-primitive-icon",
+            "lightning-primitive-input-checkbox",
+            "lightning-primitive-input-checkbox-button",
+            "lightning-primitive-input-color",
+            "lightning-primitive-input-file",
+            "lightning-primitive-input-simple",
+            "lightning-primitive-input-toggle",
+            "lightning-prompt",
+            "lightning-progress-bar",
+            "lightning-progress-ring",
+            "lightning-radio-group",
+            "lightning-rich-text-toolbar-button",
+            "lightning-rich-text-toolbar-button-group",
+            "lightning-select",
+            "lightning-spinner",
+            "lightning-tab",
+            "lightning-tab-bar",
+            "lightning-tabset",
+            "lightning-toast",
+            "lightning-toast-container",
+            "lightning-timepicker",
+            "lightning-vertical-navigation",
+            "lightning-vertical-navigation-section"
+        ],
         "bestPerformanceTests": [
             "lightning-accordion",
             "lightning-breadcrumbs",
@@ -1357,6 +1535,7 @@
             "lightning-input-address",
             "lightning-input-location",
             "lightning-map",
+            "lightning-modal",
             "lightning-message-service-internal",
             "lightning-pill-container",
             "lightning-popup",

package/scopedImports/@salesforce-label-LightningRichTextEditor.colorPicker.js

@@ -0,0 +1 @@
+export default 'Color Picker';

package/src/lightning/accordion/accordion-section.slds.css

@@ -0,0 +1,122 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+    :host([data-render-mode="shadow"]) .slds-accordion__list-item {
+        border-top-width: var(--slds-c-accordionsection-sizing-border, var(--slds-g-sizing-border-1));
+        border-top-style: solid;
+        border-top-color: var(--slds-c-accordionsection-color-border,  var(--slds-g-color-border-1));
+    }
+
+    :host([data-render-mode="shadow"]) [part="accordion-section"] {
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-spacing-3));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-spacing-3));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-spacing-3));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-spacing-3));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-accordion__summary {
+        display: flex;
+        margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart,
+        var(--slds-g-sizing-4)) * -1);
+        margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend,
+        var(--slds-g-sizing-4)) * -1);
+        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart,
+        var(--slds-g-sizing-4)) * -1);
+        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend,
+        var(--slds-g-sizing-4) * -1));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+        background-color: var(--slds-c-accordion-summary-color-background, transparent);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading {
+        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
+
+        display: flex;
+        flex-grow: 1;
+        min-width: 0;
+        color: var(--slds-c-accordion-heading-color, var(--slds-g-color-on-surface-3));
+        font-size: var(--slds-c-accordion-heading-font-size, 1em);
+        line-height: var(--slds-c-accordion-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-accordion__summary-heading .slds-button:focus {
+        text-decoration: underline;
+        box-shadow: none;
+    }
+
+    /* Note:
+    Currently button is being hard coded so using
+    [part="button"] to style button.
+    However this should be changed to lightning-button::part(button) once hard coded button gets refactored to lightning-button */
+
+    :host([data-render-mode="shadow"]) [part="button"] {
+        display: inline-flex;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: start;
+        min-width: 0;
+        margin-block-start: calc(
+          var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4)) * -1);
+        margin-block-end: calc(
+        var(--slds-c-accordionsection-spacing-blockend,
+        var(--slds-g-sizing-4)) * -1);
+        margin-inline-end: calc(
+          var(--slds-c-accordionsection-spacing-inlineend,
+          var(--slds-g-sizing-4)) * -1);
+        margin-inline-start: calc(
+          var(--slds-c-accordionsection-spacing-inlinestart,
+          var(--slds-g-sizing-4)) * -1);
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--slds-g-sizing-4));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--slds-g-sizing-4));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--slds-g-sizing-4));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--slds-g-sizing-4));
+    }
+
+    /* Note:
+    Should be changed to lightning-button::part(button)
+    if button can be refactored to slds-button
+    */
+
+    :host([data-render-mode="shadow"]) [part="button"]:hover,:host([data-render-mode="shadow"]) 
+    [part="button"]:focus {
+        --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+
+        color: var(--slds-c-accordion-heading-color-hover, var(--slds-g-color-brand-base-30));
+        /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    }
+
+    /* Note:
+    Media query will need to be worked out properly
+    and be replaced with utility classes */
+
+    @media (width >= 64.0625em) {
+        :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    :host([data-render-mode="shadow"]) .slds-accordion__content {
+        overflow: hidden;
+        visibility: hidden;
+        opacity: 0;
+        height: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__summary {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-is-open > .slds-accordion__content {
+        overflow: visible;
+        visibility: visible;
+        opacity: 1;
+        height: auto;
+    }

package/src/lightning/accordion/accordion.css

@@ -1,16 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './accordion.slds.css'; */
-
-:host {
-    display: block;
-    list-style: none;
-}
-
-/* To Do: 
-   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in. 
-*/
-/* Removes first child border top */
-::slotted(lightning-accordion-section:first-child) {
-    --slds-c-accordionsection-sizing-border: 0;
-}
-
+@import './accordion.lbc.synthetic.css';
+@import './accordion.lbc.native.css';

package/src/lightning/accordion/accordion.js

@@ -1,23 +1,28 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { createAccordionManager } from 'lightning/accordionUtilsPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 /**
  * A collection of vertically stacked sections with multiple content areas.
  * @slot default Placeholder for accordion-section components.
  */
-export default class LightningAccordion extends LightningElement {
+export default class LightningAccordion extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     privateIsSectionLessInLastRender = true;
     _allowMultipleSectionsOpen = false;
     connected = false;
 
     constructor() {
         super();
-
         this.privateAccordionManager = createAccordionManager();
+    }
+
+    connectedCallback() {
         this.privateAccordionManager.attachOpenSectionObserver(() => {
             const openSections = this.activeSectionName;
             // there is nothing but to dispatch the sectiontoggle here.
-            if (this.connected) {
+            if (this.connected && isCSR) {
                 this.dispatchEvent(
                     new CustomEvent('sectiontoggle', {
                         detail: {
@@ -27,9 +32,7 @@ export default class LightningAccordion extends LightningElement {
                 );
             }
         });
-    }
-
-    connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
         this.setAttribute('role', 'list');
         this.classList.add('slds-accordion');

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

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

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

@@ -0,0 +1,4 @@
+@import 'lightning/sldsCommon';
+@import './accordion.slds.css';
+@import './accordion-section.slds.css';
+

package/src/lightning/accordion/accordion.lbc.synthetic.css

@@ -0,0 +1,13 @@
+:host {
+    display: block;
+    list-style: none;
+}
+
+/* To Do:
+   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in.
+*/
+/* Removes first child border top */
+::slotted(lightning-accordion-section:first-child) {
+    --slds-c-accordionsection-sizing-border: 0;
+}
+