lightning-base-components 1.18.2-alpha → 1.18.4-alpha

package/src/lightning/formattedText/formattedText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -8,7 +9,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningElement {
+export default class FormattedText extends LightningShadowBaseClass {
     /**
      * Sets the text to display.
      * @type {string}

package/src/lightning/helptext/__docs__/helptext.md

@@ -73,9 +73,9 @@ some text that appears before the tooltip icon here
 
 To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
 
-`lightning-helptext` contains the same customizable elements as `lightning-button-icon` for the button icon, which supports `--sds-c-button-*` custom properties. See the [`lightning-button-icon` documentation](bundle/lightning-button-icon/documentation).
+`lightning-helptext` contains the same customizable elements as `lightning-button-icon` for the button icon, which supports `--slds-c-button-*` custom properties. See the [`lightning-button-icon` documentation](bundle/lightning-button-icon/documentation).
 
-Customizing the tooltip content using the `--sds-c-tooltip-*` custom properties isn't supported. `lightning-helptext` renders the tooltip as the child of the body element outside of the scoped container.
+Customizing the tooltip content using the `--slds-c-tooltip-*` custom properties isn't supported. `lightning-helptext` renders the tooltip as the child of the body element outside of the scoped container.
 
 #### Accessibility
 

package/src/lightning/icon/__docs__/icon.md

@@ -83,12 +83,12 @@ To change the fill and background color of a utility icon, define a custom class
 </lightning-icon>
 ```
 
-Specify the fill and background colors on the utility icon using the `--sds-c-icon-color-*` custom properties.
+Specify the fill and background colors on the utility icon using the `--slds-c-icon-color-*` custom properties.
 
 ```css
 .my-icon {
-    --sds-c-icon-color-foreground-default: orange;
-    --sds-c-icon-color-background: gray;
+    --slds-c-icon-color-foreground-default: orange;
+    --slds-c-icon-color-background: gray;
 }
 ```
 
@@ -96,8 +96,8 @@ To change the fill and background colors of a non-utility icon, such as an [acti
 
 ```css
 .my-icon {
-    --sds-c-icon-color-foreground: orange;
-    --sds-c-icon-color-background: gray;
+    --slds-c-icon-color-foreground: orange;
+    --slds-c-icon-color-background: gray;
 }
 ```
 

package/src/lightning/icon/icon.js

@@ -18,6 +18,8 @@ import { normalizeVariant } from './util';
  * Represents a visual element that provides context and enhances usability.
  */
 export default class LightningIcon extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     _src;
     _privateIconName;
     _iconName;
@@ -174,7 +176,10 @@ export default class LightningIcon extends LightningShadowBaseClass {
         const name = getName(iconName);
         const color = iconColors[category] && iconColors[category][name];
         if (color) {
-            this.template.host.style = `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color});`;
+            this.setAttribute(
+                'style',
+                `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color})`
+            );
         }
     }
 }

package/src/lightning/iconUtils/iconUtils.js

@@ -1,5 +1,4 @@
 import { getPathPrefix, getToken } from 'lightning/configProvider';
-import isIframeInEdge from './isIframeInEdge';
 
 const validNameRe = /^([a-zA-Z]+):([a-zA-Z]\w*)$/;
 const underscoreRe = /_/g;
@@ -65,17 +64,6 @@ export const getIconPath = (iconName, direction = 'ltr') => {
     if (isValidName(iconName)) {
         const baseIconPath = getBaseIconPath(getCategory(iconName), direction);
         if (baseIconPath) {
-            // This check was introduced the following MS-Edge issue:
-            // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9655192/
-            // If and when this get fixed, we can safely remove this block of code.
-            if (isIframeInEdge) {
-                // protocol => 'https:' or 'http:'
-                // host => hostname + port
-                const origin = `${window.location.protocol}//${window.location.host}`;
-                return `${origin}${pathPrefix}${baseIconPath}#${getName(
-                    iconName
-                )}`;
-            }
             return `${pathPrefix}${baseIconPath}#${getName(iconName)}`;
         }
     }

package/src/lightning/iconUtils/polyfill.js

@@ -1,93 +1,8 @@
 /**
-This polyfill injects SVG sprites into the document for clients that don't
-fully support SVG. We do this globally at the document level for performance
-reasons. This causes us to lose namespacing of IDs across sprites. For example,
-if both #image from utility sprite and #image from doctype sprite need to be
-rendered on the page, both end up as #image from the doctype sprite (last one
-wins). SLDS cannot change their image IDs due to backwards-compatibility
-reasons so we take care of this issue at runtime by adding namespacing as we
-polyfill SVG elements.
-
-For example, given "/assets/icons/action-sprite/svg/symbols.svg#approval", we
-replace the "#approval" id with "#${namespace}-approval" and a similar
-operation is done on the corresponding symbol element.
+This polyfill is no longer needed, since we no longer
+support IE or the non-Chromium versions of Edge
+However, since it's exported to customers we can't
+remove it from our repo entirely
 **/
 
-import fetchSvg from './fetchSvg';
-import supportsSvg from './supportsSvg';
-
-const svgTagName = /svg/i;
-const isSvgElement = (el) => el && svgTagName.test(el.nodeName);
-
-const requestCache = {};
-const symbolEls = {};
-const svgFragments = {};
-
-const spritesContainerId = 'slds-svg-sprites';
-let spritesEl;
-
-export function polyfill(el) {
-    if (!supportsSvg && isSvgElement(el)) {
-        if (!spritesEl) {
-            spritesEl = document.createElement('svg');
-            spritesEl.xmlns = 'http://www.w3.org/2000/svg';
-            spritesEl['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
-            spritesEl.style.display = 'none';
-            spritesEl.id = spritesContainerId;
-
-            document.body.insertBefore(spritesEl, document.body.childNodes[0]);
-        }
-
-        Array.from(el.getElementsByTagName('use')).forEach((use) => {
-            // We access the href differently in raptor and in aura, probably
-            // due to difference in the way the svg is constructed.
-            const src =
-                use.getAttribute('xlink:href') || use.getAttribute('href');
-
-            if (src) {
-                // "/assets/icons/action-sprite/svg/symbols.svg#approval" =>
-                // ["/assets/icons/action-sprite/svg/symbols.svg", "approval"]
-                const parts = src.split('#');
-                const url = parts[0];
-                const id = parts[1];
-                const namespace = url.replace(/[^\w]/g, '-');
-                const href = `#${namespace}-${id}`;
-
-                if (url.length) {
-                    // set the HREF value to no longer be an external reference
-                    if (use.getAttribute('xlink:href')) {
-                        use.setAttribute('xlink:href', href);
-                    } else {
-                        use.setAttribute('href', href);
-                    }
-
-                    // only insert SVG content if it hasn't already been retrieved
-                    if (!requestCache[url]) {
-                        requestCache[url] = fetchSvg(url);
-                    }
-
-                    requestCache[url].then((svgContent) => {
-                        // create a document fragment from the svgContent returned (is parsed by HTML parser)
-                        if (!svgFragments[url]) {
-                            const svgFragment = document
-                                .createRange()
-                                .createContextualFragment(svgContent);
-
-                            svgFragments[url] = svgFragment;
-                        }
-                        if (!symbolEls[href]) {
-                            const svgFragment = svgFragments[url];
-                            const symbolEl = svgFragment.querySelector(
-                                `#${id}`
-                            );
-
-                            symbolEls[href] = true;
-                            symbolEl.id = `${namespace}-${id}`;
-                            spritesEl.appendChild(symbolEl);
-                        }
-                    });
-                }
-            }
-        });
-    }
-}
+export function polyfill() {}

package/src/lightning/input/__docs__/input.md

@@ -120,8 +120,8 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 ```css
 :host {
-    --sds-c-checkbox-color-background-checked: green;
-    --sds-c-checkbox-mark-color-foreground: yellow;
+    --slds-c-checkbox-color-background-checked: green;
+    --slds-c-checkbox-mark-color-foreground: yellow;
 }
 ```
 
@@ -555,7 +555,7 @@ to select a time.
 
 On mobile devices, this component uses the native time picker, which ignores the `time-style` attribute. The native time picker uses the user's device settings for the input time format.
 
-On desktop, this component uses a time picker styled with the Lightning Design System. This picker uses the user's Salesforce locale setting for the time format, either 12-hr time with AM/PM or 24-hr time format. The entered date and time are validated against the user's Salesforce locale format during the `blur` event. 
+On desktop, this component uses a time picker styled with the Lightning Design System. This picker uses the user's Salesforce locale setting for the time format, either 12-hr time with AM/PM or 24-hr time format. The entered date and time are validated against the user's Salesforce locale format during the `blur` event.
 
 The component uses the attribute `time-style="short"` by default, so the time picker
 displays time without seconds. To display time including seconds, set `time-style="medium"`.
@@ -596,8 +596,8 @@ To apply custom styling, use the `:host` selector. Use SLDS styling hooks to cus
 
 ```css
 :host {
-    --sds-c-checkbox-toggle-switch-color-background: orange;
-    --sds-c-checkbox-toggle-color-background-checked: green;
+    --slds-c-checkbox-toggle-switch-color-background: orange;
+    --slds-c-checkbox-toggle-color-background-checked: green;
 }
 ```
 
@@ -1033,11 +1033,11 @@ This example creates two fields using `lightning-input` in a compound row simila
 </fieldset>
 ```
 
-To apply custom styling, use the `:host` selector. Use SLDS styling hooks to customize the component's styles. For example, change the background color of the input fields using the `--sds-c-input-color-background` custom property.
+To apply custom styling, use the `:host` selector. Use SLDS styling hooks to customize the component's styles. For example, change the background color of the input fields using the `--slds-c-input-color-background` custom property.
 
 ```css
 :host {
-    --sds-c-input-color-background: orange;
+    --slds-c-input-color-background: orange;
 }
 ```
 

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.css

@@ -0,0 +1,6 @@
+      .slds-box {
+        padding: 1rem;
+        margin: 0;
+        border-radius: .25rem;
+        border: 1px solid lightgrey;
+      }

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.html

@@ -3,6 +3,7 @@
         <h2 class="header">Input Checkbox Button</h2>
         <lightning-input type="checkbox-button" label="Input One" name="input1"></lightning-input>
         <lightning-input type="checkbox-button" label="Input Two" name="input2" checked required></lightning-input>
-        <lightning-input type="checkbox-button" label="Input Three" name="input3" checked disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Three" name="input3" disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Four" name="input3" checked disabled></lightning-input>
     </div>
 </template>

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.js

@@ -1,3 +1,3 @@
 import { LightningElement } from 'lwc';
 
-export default class InputCheckboxBasic extends LightningElement {}
+export default class InputCheckboxButton extends LightningElement {}

package/src/lightning/input/__examples__/number/number.html

@@ -19,11 +19,6 @@
         <lightning-input type="number" name="input8" required value="5" label="Required number field with a maximum value of 99" max="99"></lightning-input>
     </div>
 
-    <div>
-        <h2>Input Counter</h2>
-        <lightning-input type="counter" value="123" label="Input with a Counter"></lightning-input>
-    </div>
-
     <div>
         <h2>Live Input Number</h2>
         <lightning-input type="number" name="seven" value={amount} onchange={handleAmountChange} placeholder="type the number of items..." label="Enter a number" ></lightning-input>

package/src/lightning/input/input.css

@@ -1,7 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './input-text.slds.css';
-@import './input-checkbox.slds.css';
-@import './form-element.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './form-element.slds.css';
 
 :host {
     display: block;