lightning-base-components 1.18.4-alpha → 1.18.6-alpha

package/src/lightning/toastContainer/toast.slds.css

@@ -0,0 +1,97 @@
+
+:host([data-render-mode="shadow"]) .slds-notify_toast {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: none;
+  background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
+  color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+  border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+  margin: var(--sds-g-spacing-2, 0.5rem);
+  padding-block-start: var(--slds-c-toast-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+  padding-inline-end: var(--slds-c-toast-spacing-inline-end, var(--sds-g-spacing-8, 3rem));
+  padding-block-end: var(--slds-c-toast-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+  padding-inline-start: var(--slds-c-toast-spacing-inline-start, var(--sds-g-spacing-5, 1.5rem));
+  min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
+  text-align: left;
+  justify-content: flex-start;
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a {
+  color: currentColor;
+  border: var(--sds-g-sizing-border-1, 1px) solid transparent;
+  border-radius: var(--sds-g-radius-border-2, 0.25rem);
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
+.slds-notify_toast a:focus {
+  text-decoration: none;
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
+  box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
+  border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:active {
+  color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 0.5));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
+  color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 0.15));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
+  float: right;
+  position: absolute;
+  top: var(--sds-g-spacing-3, 0.75rem);
+  right: var(--sds-g-spacing-3, 0.75rem);
+  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  transform: translateY(-0.125rem);
+}
+
+:host([data-render-mode="shadow"]) .slds-region_narrow .slds-notify_toast {
+  min-width: auto;
+  width: 100%;
+  margin-inline-start: 0;
+}
+
+/* TODO W-12674349: remove after name-value-list utils are added */
+
+:host([data-render-mode="shadow"]) .slds-list--inline {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+/* TODO W-12674349: remove after assistive text util is added */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+/* TODO W-12674349: remove after text utils are added */
+
+:host([data-render-mode="shadow"]) .slds-text-heading_small {
+  font-size: var(--sds-g-font-size-base, 1rem);
+  line-height: var(--sds-g-font-lineheight-2, 1.25);
+}
+
+/* TODO W-12674349: remove after alert is added */
+
+:host([data-render-mode="shadow"]) .slds-notify__close {
+  position: absolute;
+  top: 50%;
+  right: var(--sds-g-spacing-3, 0.75rem);
+  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  transform: translateY(-50%);
+}

package/src/lightning/toastContainer/toastContainer.css

@@ -1,30 +1,41 @@
-.top {
+@import 'lightning/sldsCommon';
+@import './toast.slds.css';
+@import 'lightning/sldsUtilsPosition';
+@import 'lightning/sldsUtilsGrid';
+
+.top,
+:host([data-render-mode="shadow"]) .top {
     top: 0;
     bottom: unset;
 }
 
-.bottom {
+.bottom,
+:host([data-render-mode="shadow"]) .bottom {
     bottom: 0;
     top: unset;
 }
 
-.left {
+.left,
+:host([data-render-mode="shadow"]) .left {
     left: 0;
     right: auto;
 }
 
-.right {
+.right,
+:host([data-render-mode="shadow"]) .right {
     left: auto;
     right: 0;
 }
 
-.center {
+.center,
+:host([data-render-mode="shadow"]) .center {
     transform: translate(50%);
     right: 50%;
 }
 
 @media (max-width: 30rem) {
-    .center {
+    .center,
+    :host([data-render-mode="shadow"]) .center {
         transform: none;
         right: 0;
         left: 0;

package/src/lightning/toastContainer/toastContainer.js

@@ -172,6 +172,10 @@ export default class ToastContainer extends LightningOverlay {
 
     // private functions
     connectedCallback() {
+        // Set `data-render-mode` attribute in native shadow mode
+        if (!this.template.synthetic) {
+            this.setAttribute('data-render-mode', 'shadow');
+        }
         if (globalContainer.length < MAX_NUM_GLOBAL_TOAST_CONTAINER) {
             this._showToastHandler = this.handleShowToast.bind(this);
             document.body.addEventListener(

package/src/lightning/utilsPrivate/url.js

@@ -1,11 +1,14 @@
+import { isCSR } from './ssr';
+
 const URL_CHECK_REGEX = /^(\/+|\.+|ftp|http(s?):\/\/)/i;
+const SSR_PROTOCOL = 'https:'; // For LWR (SSR), the protocol will always be HTTPS. See TD-0141280.
 
 export function isAbsoluteUrl(url) {
     return URL_CHECK_REGEX.test(url);
 }
 
 export function makeAbsoluteUrl(url) {
-    const protocol = window.location.protocol;
+    const protocol = isCSR ? window.location.protocol : SSR_PROTOCOL;
     return isAbsoluteUrl(url) ? url : `${protocol}//${url}`;
 }
 

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -162,10 +162,14 @@ const DEFAULT_ZINDEX_BASELINE = DEFAULT_MODAL_ZINDEX + DEFAULT_ZINDEX_OFFSET;
 export function getZIndexBaseline() {
     // When SLDS styles are present, typically on Core
     // this currently resolves to: '9000' (string)
-    const modalZindexValueLwc = (
-        window.getComputedStyle(document.documentElement) ||
-        document.documentElement.style
-    ).getPropertyValue('--lwc-zIndexModal');
+    // If function is called in server context, use default as window and document are not available.
+    const isCSR = typeof window !== 'undefined';
+    const modalZindexValueLwc = isCSR
+        ? (
+              window.getComputedStyle(document.documentElement) ||
+              document.documentElement.style
+          ).getPropertyValue('--lwc-zIndexModal')
+        : DEFAULT_MODAL_ZINDEX;
 
     const baseZindexModalLwc = parseInt(modalZindexValueLwc, 10);
 

package/src/lightning/button/__wdio__/utam/utam.html

@@ -1,3 +0,0 @@
-<template>
-    <lightning-button label="Click me" variant="brand"></lightning-button>
-</template>

package/src/lightning/button/__wdio__/utam/utam.js

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

package/src/lightning/button/__wdio__/utam/utam.spec.js

@@ -1,20 +0,0 @@
-const Button = require('pageobjects/button');
-
-describe('button utam test', () => {
-    let root;
-
-    beforeEach(async () => {
-        await browser.url('/button/utam');
-        root = await $('button-utam');
-        await root.waitForDisplayed();
-    });
-
-    it('should get the button name', async () => {
-        const button = await utam.load(Button, {
-            element: await root.shadow$('lightning-button'),
-        });
-
-        const label = await button.getButtonName();
-        expect(label).toBe('Click me');
-    });
-});

package/src/lightning/datatable/__wdio__/utam/utam.html

@@ -1,32 +0,0 @@
-<template>
-    <div style="height:160px">
-        <lightning-datatable
-            data-render-mode="default"
-            key-field="id"
-            columns={columns}
-            data={data}
-            default-sort-direction={defaultSortDirection}
-            sorted-direction={sortDirection}
-            sorted-by={sortedBy}
-            onsort={onHandleSort}
-            is-loading={loading}>
-        </lightning-datatable>
-    </div>
-    <div style="height:160px">
-        <lightning-datatable
-            data-render-mode="role-based"
-            key-field="id"
-            columns={columns}
-            data={data}
-            default-sort-direction={defaultSortDirection}
-            sorted-direction={sortDirection}
-            sorted-by={sortedBy}
-            onsort={onHandleSort}
-            is-loading={loading}
-            render-mode="role-based">
-        </lightning-datatable>
-    </div>
-    
-    <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
-    <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>
-</template>

package/src/lightning/datatable/__wdio__/utam/utam.js

@@ -1,91 +0,0 @@
-import { LightningElement } from 'lwc';
-
-const data = [
-    { id: 1, name: 'Billy Simmons', age: 40, email: 'billy@salesforce.com' },
-    { id: 2, name: 'Kelsey Denesik', age: 35, email: 'kelsey@salesforce.com' },
-    { id: 3, name: 'Kyle Ruecker', age: 50, email: 'kyle@salesforce.com' },
-    {
-        id: 4,
-        name: 'Krystina Kerluke',
-        age: 37,
-        email: 'krystina@salesforce.com',
-    },
-];
-
-const actions = [
-    { label: 'Show details', name: 'show_details' },
-    { label: 'Delete', name: 'delete' },
-];
-
-const columns = [
-    { label: 'Name', fieldName: 'name' },
-    {
-        label: 'Age',
-        fieldName: 'age',
-        type: 'number',
-        sortable: true,
-        cellAttributes: { alignment: 'left' },
-    },
-    {
-        label: 'Email',
-        fieldName: 'email',
-        type: 'email',
-        hideDefaultActions: true,
-    },
-    {
-        type: 'action',
-        typeAttributes: { rowActions: actions, menuAlignment: 'right' },
-    },
-];
-
-export default class DemoApp extends LightningElement {
-    data = data;
-    columns = columns;
-    defaultSortDirection = 'asc';
-    sortDirection = 'asc';
-    sortedBy;
-    loading = false;
-
-    // Used to sort the 'Age' column
-    sortBy(field, reverse, primer) {
-        const key = primer
-            ? function (x) {
-                  return primer(x[field]);
-              }
-            : function (x) {
-                  return x[field];
-              };
-
-        return function (a, b) {
-            a = key(a);
-            b = key(b);
-            return reverse * ((a > b) - (b > a));
-        };
-    }
-
-    onHandleSort(event) {
-        const { fieldName: sortedBy, sortDirection } = event.detail;
-        const cloneData = [...this.data];
-
-        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
-        this.data = cloneData;
-        this.sortDirection = sortDirection;
-        this.sortedBy = sortedBy;
-    }
-
-    handleLoadingClick() {
-        this.loading = !this.loading;
-    }
-
-    handleMoreRowsClick() {
-        const control = [
-            {
-                id: 20,
-                name: 'Jacqueline Palmer',
-                age: 60,
-                email: 'jacqueline@salesforce.com',
-            },
-        ];
-        this.data = this.data.concat(this.data).concat(control);
-    }
-}

package/src/lightning/datatable/__wdio__/utam/utam.spec.js

@@ -1,214 +0,0 @@
-const Datatable = require('pageobjects/datatable');
-const Button = require('pageobjects/button');
-
-const tableTypes = {
-    default: '[data-render-mode="default"]',
-    roleBased: '[data-render-mode="role-based"]',
-};
-
-describe('Datatable UTAM Page Object Tests', () => {
-    Object.keys(tableTypes).forEach((type) => {
-        describe(`${type} table`, () => {
-            const TABLE_SELECTOR = tableTypes[type];
-
-            let root;
-
-            beforeEach(async () => {
-                await browser.url('/datatable/utam');
-                root = await $('datatable-utam');
-                await root.waitForDisplayed();
-            });
-
-            it('should get the cell value by row and column index', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getCellValueByIndex(1, 2);
-                expect(cellValue).toBe('Billy Simmons');
-            });
-            it('should get the cell value by row index and column label', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getCellValueByLabel(2, 'Age');
-                expect(cellValue).toBe('35');
-            });
-            it('should get the number of rows in the table', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getNumRows();
-                expect(cellValue).toBe(4);
-            });
-            it('should tell if the table has any rows', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.hasRows();
-                expect(cellValue).toBe(true);
-            });
-            it('should toggle selection of row - comprehensive', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                for (let i = 1; i <= 4; i++) {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                }
-
-                await datatable.toggleRowSelection(1);
-                expect(await datatable.isRowSelected(1)).toBe('true');
-                [2, 3, 4].forEach(async (i) => {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                });
-
-                await datatable.toggleRowSelection(2);
-                expect(await datatable.isRowSelected(2)).toBe('true');
-                [3, 4].forEach(async (i) => {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('true');
-                expect(await datatable.isRowSelected(4)).toBe('false');
-
-                await datatable.toggleRowSelection(4);
-                expect(await datatable.isRowSelected(4)).toBe('true');
-            });
-            it('should toggle selection of row', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('true');
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('false');
-            });
-            it('should get the number of selected rows when not all rows are selected', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.getNumSelectedRows()).toBe(1);
-
-                await datatable.toggleRowSelection(2);
-                expect(await datatable.getNumSelectedRows()).toBe(2);
-            });
-            it('should get the number of selected rows when all rows are selected', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.clickSelectAllCheckbox();
-                expect(await datatable.getNumSelectedRows()).toBe(4);
-            });
-            it('should get the number of columns in the table', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.getNumColumns()).toBe(5);
-            });
-            it('should tell whether or not a column is sortable', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isSortableColumn('Age')).toBe(true);
-
-                // Need to speak to UTAM (about isPresent) or find a better way to write this method
-                // If column is not sortable, the test fails with the error:
-                // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
-                // expect(await datatable.isSortableColumn('Name')).toBe(false);
-            });
-            it('should tell whether or not the row is selectable', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isSelectableRow(1)).toBe(true);
-            });
-            it('should get the width of a column', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const datatableElement = await root.shadow$(
-                    'lightning-datatable'
-                );
-                const columnHeader = await datatableElement.shadow$(
-                    '[aria-label="Name"]'
-                );
-
-                // Remove intermediate white spaces
-                let expectedWidth = await columnHeader.getAttribute('style');
-                expectedWidth = expectedWidth.replace(/\s/g, '');
-                let actualWidth = await datatable.getWidth('Name');
-                actualWidth = actualWidth.replace(/\s/g, '');
-
-                // Using indexOf in case of presence of ';'
-                expect(actualWidth.indexOf(expectedWidth) >= 0).toBe(true);
-            });
-            it('should tell whether or not a column has header actions', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.hasHeaderActions('Name')).toBe(true);
-                expect(await datatable.hasHeaderActions('Age')).toBe(true);
-                // false fails; need to check for true or null; check with UTAM if expected
-                expect(await datatable.hasHeaderActions('Email')).toBe(null);
-            });
-            it('should get the text of the rowheader cell of the specified row', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.getRowHeaderText(2)).toBe(
-                    'Kelsey Denesik'
-                );
-            });
-            it('should click column header of the sortable column', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                let cellValue = await datatable.getCellValueByLabel(1, 'Age');
-                expect(cellValue).toBe('40');
-
-                await datatable.clickSortHeaderButton('Age');
-
-                cellValue = await datatable.getCellValueByLabel(1, 'Age');
-                expect(cellValue).toBe('35');
-            });
-            it('should tell whether the specified row has row actions or not', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.hasRowActionInRow(2)).toBe(true);
-            });
-            it('should tell whether or not the datatable has the loading indicator visible', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isLoading()).toBe(false);
-
-                const button = await utam.load(Button, {
-                    element: await root.shadow$('lightning-button'),
-                });
-                await button.click();
-
-                expect(await datatable.isLoading()).toBe(true);
-            });
-        });
-    });
-});