lightning-base-components 1.18.3-alpha → 1.18.5-alpha

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -0,0 +1,164 @@
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import {
+    isNativeComponent,
+    normalizeAriaAttribute,
+    reflectAttribute,
+} from 'lightning/utilsPrivate';
+import { VARIANT } from 'lightning/inputUtils';
+import labelRequired from '@salesforce/label/LightningControl.required';
+
+const i18n = {
+    required: labelRequired,
+};
+
+export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
+    _checked;
+    _value = '';
+    _ariaLabel;
+    _cachedInputElement;
+    _helpMessage = '';
+    _messageToggleActive;
+    _messageToggleInactive;
+
+    initialRender = false;
+
+    @api accessKey;
+    @api disabled;
+    @api label;
+    @api variant;
+    @api name;
+    @api readOnly;
+    @api required;
+    @api ariaInvalid;
+
+    /**
+     * Text shown for the active state of a toggle. The default is "Active".
+     * @type {string}
+     */
+    @api messageToggleActive;
+
+    /**
+     * Text shown for the inactive state of a toggle. The default is "Inactive".
+     * @type {string}
+     */
+    @api messageToggleInactive;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        // value can only be a string
+        this._value =
+            typeof newValue === 'number' || typeof newValue === 'string'
+                ? String(newValue)
+                : '';
+    }
+
+    @api
+    get checked() {
+        if (this.initialRender) {
+            return this.inputElement.checked;
+        }
+        return this._checked;
+    }
+    set checked(value) {
+        value = Boolean(value);
+        this._checked = value;
+        if (this.initialRender) {
+            this.inputElement.checked = this._checked;
+        }
+    }
+
+    @api
+    get ariaDescribedByElements() {
+        return [
+            this.template.querySelector('[data-help-message]'),
+            this.template.querySelector('data-toggle-description'),
+        ];
+    }
+
+    @api
+    get isNativeShadow() {
+        return this._isNativeShadow;
+    }
+
+    @api
+    get ariaLabel() {
+        return this._ariaLabel;
+    }
+    set ariaLabel(value) {
+        this._ariaLabel = normalizeAriaAttribute(value);
+    }
+
+    @api
+    get inputElement() {
+        // cache the input in order to reduce dom queries
+        if (!this._cachedInputElement) {
+            let inputElement = this.template.querySelector('input');
+            this._cachedInputElement = inputElement;
+        }
+        return this._cachedInputElement;
+    }
+
+    @api
+    get helpMessage() {
+        return this._helpMessage;
+    }
+    set helpMessage(message) {
+        this._helpMessage = message;
+        reflectAttribute(this, 'invalid', Boolean(message));
+    }
+
+    get computedLabelClass() {
+        return this.variant === VARIANT.LABEL_HIDDEN
+            ? 'slds-form-element__label slds-assistive-text'
+            : 'slds-form-element__label';
+    }
+
+    get i18n() {
+        return i18n;
+    }
+
+    handleBlur() {
+        this.dispatchEvent(new CustomEvent('blur'));
+    }
+
+    handleFocus() {
+        this.dispatchEvent(new CustomEvent('focus'));
+    }
+
+    handleChange(event) {
+        this._checked = event.target.checked;
+        const changeEvent = new CustomEvent('change', {
+            detail: {
+                checked: event.target.checked,
+            },
+        });
+        this.dispatchEvent(changeEvent);
+    }
+
+    handleClick() {
+        if (this.template.activeElement === null) {
+            this.template.querySelector("[type='checkbox']").focus();
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this._isNativeShadow = isNativeComponent(this);
+    }
+
+    renderedCallback() {
+        if (!this.initialRender) {
+            this.inputElement.checked = this.checked;
+            this.inputElement.value = this._value;
+            this.initialRender = true;
+        }
+    }
+
+    disconnectedCallback() {
+        this._cachedInputElement = undefined;
+    }
+}

package/src/lightning/tab/tab.css

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

package/src/lightning/tab/tab.js

@@ -1,28 +1,36 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
  */
-export default class LightningTab extends LightningElement {
+export default class LightningTab extends LightningShadowBaseClass {
     @track _loadContent = false;
+    _registered = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
+    }
 
-        this.dispatchEvent(
-            new CustomEvent('privatetabregister', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-                detail: {
-                    setDeRegistrationCallback: (deRegistrationCallback) => {
-                        this._deRegistrationCallback = deRegistrationCallback;
+    renderedCallback() {
+        if (!this._registered) {
+            this._registered = true;
+            this.dispatchEvent(
+                new CustomEvent('privatetabregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        setDeRegistrationCallback: (deRegistrationCallback) => {
+                            this._deRegistrationCallback =
+                                deRegistrationCallback;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     /**

package/src/lightning/tab/tab.slds.css

@@ -0,0 +1,47 @@
+
+@supports (--styling-hooks: '') {
+  /* Reassignments for parity with SLDS blueprint
+    https://www.lightningdesignsystem.com/components/tabs/#Styling-Hooks-Overview */
+
+
+  :host([data-render-mode="shadow"].slds-tabs_default__content) {
+    --slds-c-tabs-panel-spacing-block-start: var(--slds-c-tab-panel-spacing-block-start);
+    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-block-end);
+    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inline-end);
+    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inline-start);
+
+    position: relative;
+    padding-block-start: var(--slds-c-tab-panel-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-tab-panel-spacing-inline-end, 0);
+    padding-block-end: var(--slds-c-tab-panel-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-tab-panel-spacing-inline-start, 0);
+  }
+
+  :host([data-render-mode="shadow"].slds-tabs_scoped__content) {
+    background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: var(--sds-g-spacing-1, 0.25rem);
+    border-end-start-radius: var(--sds-g-spacing-1, 0.25rem);
+    padding: var(--sds-g-spacing-4, 1rem);
+  }
+
+  :host([data-render-mode="shadow"].slds-vertical-tabs__content) {
+    flex: 1;
+    padding: var(--sds-g-spacing-4, 1rem);
+    background: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+  :host([data-render-mode="shadow"].slds-show) {
+    display: block;
+  }
+
+  /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+  :host([data-render-mode="shadow"].slds-hide) {
+    display: none !important
+  }
+
+}

package/src/lightning/tabset/tabset.css

@@ -0,0 +1,10 @@
+/* TODO W-12129682: styles are commented out for the future migration of `tabset`
+   to Native Shadow
+
+    :host([data-render-mode="shadow"]) .slds-vertical-tabs {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
+        border-radius: 0.25rem;]
+    }
+*/

package/src/lightning/tabset/tabset.js

@@ -23,6 +23,8 @@ export default class LightningTabset extends LightningElement {
 
     @track _tabHeaders = [];
 
+    _rerender = false;
+
     connectedCallback() {
         this._tabByValue = {};
         this._connected = true;
@@ -36,6 +38,19 @@ export default class LightningTabset extends LightningElement {
         );
     }
 
+    // must wait for this entire `tab-set` component to be rendered in order to
+    // successfully querySelect `tab-bar` from it, in methods such as _updateTabBarHeaders
+    // or _selectTab.
+    // using _rerender to trigger renderedCallback and execute these methods in here
+    // instead of the handleTabRegister method, where `tab-bar` is not querySelectable.
+    renderedCallback() {
+        if (this._rerender) {
+            this._rerender = false;
+            this._updateTabBarHeaders(this._tabHeaders);
+            this._selectTab(this._activeTabValue);
+        }
+    }
+
     disconnectedCallback() {
         this._connected = false;
     }
@@ -84,7 +99,8 @@ export default class LightningTabset extends LightningElement {
 
     handleTabRegister(event) {
         event.stopPropagation();
-
+        // setting this to true, will trigger _updateTabBarHeaders and _selectTab in renderedCallback
+        this._rerender = true;
         const tab = event.target;
 
         tab.role = 'tabpanel';
@@ -149,6 +165,11 @@ export default class LightningTabset extends LightningElement {
             endIconAlternativeText: tab.endIconAlternativeText,
             showErrorIndicator: tab.showErrorIndicator,
         });
+
+        // need to leave this _updateTabBarHeaders here so that `tab-bar` can be updated
+        // in the case of a "conditional tab". the _updateTabBarHeaders in the renderedCallback
+        // has no knowledge of the new tab being added.
+        // this call works here in the "conditional tab" case, as `tab-set` is already rendered.
         this._updateTabBarHeaders(this._tabHeaders);
 
         this._tabByValue[tabValue] = tab;
@@ -157,10 +178,6 @@ export default class LightningTabset extends LightningElement {
         if (!this._activeTabValue) {
             this._activeTabValue = tab.value;
         }
-
-        if (this._activeTabValue === tab.value) {
-            this._selectTab(tabValue);
-        }
     }
 
     _selectTab(value) {
@@ -242,16 +259,17 @@ export default class LightningTabset extends LightningElement {
      * @param {Array} headers
      */
     _updateTabBarHeaders(headers) {
-        this.template.querySelector('lightning-tab-bar').tabHeaders =
-            headers.slice();
+        if (this.template.querySelector('lightning-tab-bar')) {
+            this.template.querySelector('lightning-tab-bar').tabHeaders =
+                headers.slice();
+        }
     }
 
     _selectTabHeaderByTabValue(value) {
-        if (!this._connected) {
+        const tabBar = this.template.querySelector('lightning-tab-bar');
+        if (!this._connected || !tabBar) {
             return;
         }
-
-        const tabBar = this.template.querySelector('lightning-tab-bar');
         tabBar.selectTabByValue(value);
     }
 

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);
-    }
-}