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

package/src/lightning/primitiveIcon/icon.slds.css

@@ -1,43 +1,54 @@
+/*******************************************
+* Imported dependency from @salesforce-ux/sds-primitives/src/sds/icon/icon.css
+*******************************************/
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
 :host([data-render-mode="shadow"]) {
   /**
-   * Establish independent formatting context, we don't want ancestor rules affecting our layout.
-   * This assumes there will not be a direct, child inline-level element.
-   * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
-   */
+     * Establish independent formatting context, we don't want ancestor rules affecting our layout.
+     * This assumes there will not be a direct, child inline-level element.
+     * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
+     */
   display: inline-flex;
 }
-
 :host([data-render-mode="shadow"]) [part~='boundary'] {
-  padding-block-start: var(--sds-c-icon-spacing-block-start, var(--sds-c-icon-spacing));
-  padding-block-end: var(--sds-c-icon-spacing-block-end, var(--sds-c-icon-spacing));
-  padding-inline-start: var(--sds-c-icon-spacing-inline-start, var(--sds-c-icon-spacing));
-  padding-inline-end: var(--sds-c-icon-spacing-inline-end, var(--sds-c-icon-spacing));
-  border-radius: var(--sds-c-icon-radius-border);
-  border-width: var(--sds-c-icon-sizing-border, 1px);
+  padding-block-start: var(
+    --sds-c-icon-spacing-blockstart,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-block-end: var(
+    --sds-c-icon-spacing-blockend,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-start: var(
+    --sds-c-icon-spacing-inlinestart,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-end: var(
+    --sds-c-icon-spacing-inlineend,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  border-radius: var(--sds-c-icon-radius-border, var(--sds-s-icon-radius-border));
+  border-width: var(--sds-c-icon-sizing-border, var(--sds-s-icon-sizing-border));
   border-style: solid;
-  border-color: var(--sds-c-icon-color-border, transparent);
-  background-color: var(--sds-c-icon-color-background);
-}
 
+  /* If undefined, border-color resolves to currentColor, so we need to explicitly set to transparent */
+  border-color: var(--sds-c-icon-color-border, var(--sds-s-icon-color-border, transparent));
+  background-color: var(--sds-c-icon-color-background, var(--sds-s-icon-color-background));
+}
 :host([data-render-mode="shadow"]) [part~='icon'] {
   display: flex; /* See line #5 */
-  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing));
-  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing));
-  color: var(--sds-c-icon-color-foreground);
+  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  color: var(--sds-c-icon-color-foreground, var(--sds-s-icon-color-foreground));
 }
-
 /**
- * Normalize svgs and control width/height with Styling Hooks
- */
-
+   * Normalize svgs and control width/height with Styling Hooks
+   */
 :host([data-render-mode="shadow"]) svg {
   width: 100%;
   height: 100%;
 }
-
 /**
  * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
  *        fallbacks, styles will regress due to invalid CSS variables from
@@ -46,47 +57,36 @@
  *        Additionally, LBC are currently relying on 'part' attributes to
  *        receive styling. Authoring styles that rely on slots is not recommended.
  */
-
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size='xxx-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
+:host([data-render-mode="shadow"][size='xxx-small']) {
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+:host([data-render-mode="shadow"][size='xx-small']) {
+    --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
   }
-
-  :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+:host([data-render-mode="shadow"][size='x-small']) {
+    --slds-c-icon-sizing: var(--slds-g-sizing-5);
   }
-
-  :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+:host([data-render-mode="shadow"][size='small']) {
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
-
-  :host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+:host([data-render-mode="shadow"][size='large']) {
+    --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
-
-  :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
+:host([data-render-mode="shadow"][variant='warning']) {
+    --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
   }
-
-  :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+:host([data-render-mode="shadow"][variant='success']) {
+    --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
   }
-
-  :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+:host([data-render-mode="shadow"][variant='error']) {
+    --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
   }
-
-  :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+:host([data-render-mode="shadow"][variant='light']) {
+    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
   }
-
-  :host([data-render-mode="shadow"]) [part='boundary'] {
+:host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--slds-g-radius-border-2));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
@@ -113,20 +113,16 @@
      */
     display: inline-flex;
   }
-
-  :host([data-render-mode="shadow"]) [part='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+:host([data-render-mode="shadow"]) [part='icon'] {
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--slds-g-color-on-accent-1));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
   }
-
-  :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+:host([data-render-mode="shadow"][icon-name*='action']) {
+    --slds-c-icon-spacing-block: var(--slds-g-sizing-3);
+    --slds-c-icon-spacing-inline: var(--slds-g-sizing-3);
+    --slds-c-icon-radius-border: calc(var(--slds-g-radius-border-circle) / 2);
   }
-}
-
 /**
  * P R I V A T E
  *
@@ -135,7 +131,6 @@
  *
  * See notes for each class for the rationale behind their inclusion.
  */
-
 /**
  * Utility icons traditionally added a class to change the default foreground
  * color (white) to a grey. This was done implicitly whereas other color changes
@@ -147,20 +142,17 @@
  * outcome is the removal of this class and the default utility styling would
  * be implemented through an attribute or some other class-less solution.
  */
-
 :host([data-render-mode="shadow"]) .slds-icon-text-default {
   /*! @css-var-fallback fill */
   --slds-c-icon-color-foreground: var(
     --slds-c-icon-color-foreground-default,
     var(--sds-c-icon-color-foreground-default, var(
-      --sds-g-color-neutral-base-50, #747474))
+      --slds-g-color-on-surface-1))
   );
 }
-
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  fill: var(--slds-g-color-disabled-1);
 }
-
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -168,7 +160,6 @@
  * outcome is the removal of this class and replacing the class with the SLDS
  * utility package solution.
  */
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -181,7 +172,6 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-
 /**
  * For the initial alpha version, we're hardcoding in the various unique icon styles.
  *
@@ -192,18 +182,26 @@
  *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
  * }
  */
-
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
   background-color: currentcolor;
 }
-
 :host([data-render-mode="shadow"]) .slds-input__icon {
-  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
 
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
-  line-height: var(--sds-g-font-lineheight-1, 1);
+  line-height: var(--slds-g-font-lineheight-1);
   border: 0;
   z-index: 2;
 }
+:host([data-render-mode="shadow"][data-input-pill-search-primicon]) .slds-icon {
+  --sds-c-icon-sizing-height: 1.25rem;
+  --sds-c-icon-sizing-width: 1.25rem;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"] {
+  --sds-c-icon-color-foreground: none;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"]:hover {
+  --sds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+}

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,11 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './icon.slds.css'; */
-/*
-"Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
-at the SLDS level or at the browser level.
- https://git.soma.salesforce.com/aura/lightning-global/issues/1349
- Also prevents IE11 from gacking during some interactions
-*/
-_:-ms-lang(x), svg {
-    pointer-events: none;
-}
+@import './primitiveIcon.lbc.synthetic.css';
+@import './primitiveIcon.lbc.native.css';

package/src/lightning/primitiveIcon/primitiveIcon.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, isCSR } from 'lightning/utilsPrivate';
 
@@ -9,7 +10,10 @@ 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 {
+
+    static stylesheets = [iconStylesheets] // stylesheets that apply to every rendered template
+
     @api src;
     @api svgClass;
     _size = 'medium';
@@ -97,14 +101,8 @@ export default class LightningPrimitiveIcon extends LightningElement {
                 const name = this.iconName;
                 if (isValidName(name)) {
                     const [spriteName, iconName] = name.split(':');
-                    const template =
-                        this._iconLibrary[`${spriteName}_${iconName}`];
-
+                    const template = this._iconLibrary[`${spriteName}_${iconName}`];
                     if (template) {
-                        // manually attach the stylesheets in native shadow mode
-                        if (!this.template.synthetic) {
-                            template.stylesheets = iconStylesheets;
-                        }
                         return template;
                     }
                 }

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

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

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

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './icon.slds.css';

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

@@ -0,0 +1,9 @@
+/*
+"Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
+at the SLDS level or at the browser level.
+ https://git.soma.salesforce.com/aura/lightning-global/issues/1349
+ Also prevents IE11 from gacking during some interactions
+*/
+_:-ms-lang(x), svg {
+    pointer-events: none;
+}

package/src/lightning/primitiveIframe/primitiveIframe.html

@@ -1,10 +1,11 @@
 <template>
-    <iframe src={src}
-            title={title}
-            onload={handleContentLoad}
-            width={width}
-            height={height}
-            style={frameStyle}
-            lang={language}>
-    </iframe>
+    <iframe
+        src={src}
+        title={title}
+        onload={handleContentLoad}
+        width={width}
+        height={height}
+        style={frameStyle}
+        lang={language}
+    ></iframe>
 </template>

package/src/lightning/primitiveIframe/primitiveIframe.js

@@ -1,11 +1,14 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { registerDomain, unregisterDomain } from 'lightning/messageDispatcher';
+import { isCSR } from 'lightning/utilsPrivate';
+
 
 /**
  * Class representing primitive iframe.
  * @extends Element
  */
-export default class LightningPrimitiveIframe extends LightningElement {
+export default class LightningPrimitiveIframe extends LightningShadowBaseClass {
     @api src;
     @api domain;
     @api width = '100%';
@@ -13,9 +16,10 @@ export default class LightningPrimitiveIframe extends LightningElement {
     @api frameStyle = '';
     @api title;
 
-    language = document.documentElement.lang || null;
+    language = isCSR ? document.documentElement.lang || null : null;
 
     connectedCallback() {
+        super.connectedCallback();
         registerDomain(this.src);
     }