lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/menuItem/menuItem.html

@@ -1,50 +1,52 @@
 <template>
-    <a href={computedHref}
-        target={_target}
-        role={computedRole}
-        tabindex={computedTabIndex}
-        accesskey={computedAccessKey}
-        aria-checked={computedAriaChecked}
-        aria-disabled={computedAriaDisabled}
-        download={download}
-        onclick={handleClick}
-        onfocus={handleFocus}
-        onkeydown={handleKeyDown}
-        onblur={handleBlur}>
+    <div class="slds-dropdown__item" part="menu-item">
+        <a href={computedHref}
+            target={_target}
+            role={computedRole}
+            tabindex={computedTabIndex}
+            accesskey={computedAccessKey}
+            aria-checked={computedAriaChecked}
+            aria-disabled={computedAriaDisabled}
+            download={download}
+            onclick={handleClick}
+            onfocus={handleFocus}
+            onkeydown={handleKeyDown}
+            onblur={handleBlur}>
 
-        <span class="slds-truncate">
-            <template if:true={isMenuItemCheckbox}>
-                <lightning-primitive-icon
-                    icon-name='utility:check'
-                    size="x-small"
-                    svg-class={computedCheckedIconClass}
-                    variant="bare">
-                </lightning-primitive-icon>
-            </template>
+            <span class="slds-truncate">
+                <template if:true={isMenuItemCheckbox}>
+                    <lightning-primitive-icon
+                        icon-name='utility:check'
+                        size="x-small"
+                        svg-class={computedCheckedIconClass}
+                        variant="bare">
+                    </lightning-primitive-icon>
+                </template>
 
-            <!-- draft marker -->
-            <abbr if:true={isDraft} class="slds-indicator_unsaved" title={draftAlternativeText}>*</abbr>
+                <!-- draft marker -->
+                <abbr if:true={isDraft} class="slds-indicator_unsaved" title={draftAlternativeText}>*</abbr>
 
-            <!-- Prefix icon -->
-            <template if:true={prefixIconName}>
-                <lightning-primitive-icon
-                    icon-name={prefixIconName}
+                <!-- Prefix icon -->
+                <template if:true={prefixIconName}>
+                    <lightning-primitive-icon
+                        icon-name={prefixIconName}
+                        size="x-small"
+                        svg-class="slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
+                        variant="bare">
+                    </lightning-primitive-icon>
+                </template>
+
+                {label}
+            </span>
+
+            <!-- Suffix icon -->
+            <template if:true={iconName}>
+                <lightning-primitive-icon icon-name={iconName}
                     size="x-small"
-                    svg-class="slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
+                    svg-class="slds-icon-text-default slds-m-left_small slds-shrink-none"
                     variant="bare">
                 </lightning-primitive-icon>
             </template>
-
-            {label}
-        </span>
-
-        <!-- Suffix icon -->
-        <template if:true={iconName}>
-            <lightning-primitive-icon icon-name={iconName}
-                size="x-small"
-                svg-class="slds-icon-text-default slds-m-left_small slds-shrink-none"
-                variant="bare">
-            </lightning-primitive-icon>
-        </template>
-    </a>
+        </a>
+    </div>
 </template>

package/src/lightning/menuItem/menuItem.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -10,7 +11,7 @@ import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningElement {
+export default class LightningMenuItem extends LightningShadowBaseClass {
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -62,8 +63,7 @@ export default class LightningMenuItem extends LightningElement {
     @api draftAlternativeText;
 
     connectedCallback() {
-        this.classList.add('slds-dropdown__item');
-
+        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 

package/src/lightning/menuSubheader/menu-subheader.slds.css

@@ -0,0 +1,22 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-dropdown__header {
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    font-weight: var(--sds-g-font-weight-7, 700);
+    padding-block: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  /**
+   * @TODO: refactor when utility is available
+   */
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/menuSubheader/menuSubheader.html

@@ -1,3 +1,5 @@
 <template>
-    <span>{label}</span>
+    <div class="slds-dropdown__header slds-truncate" part="menu-subheader">
+        <span>{label}</span>
+    </div>
 </template>

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,9 +1,10 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningElement {
+export default class LightningMenuSubheader extends LightningShadowBaseClass {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -11,10 +12,7 @@ export default class LightningMenuSubheader extends LightningElement {
     @api label;
 
     connectedCallback() {
-        // add default CSS classes to custom element tag
-        this.classList.add('slds-dropdown__header');
-        this.classList.add('slds-truncate');
-
+        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 }

package/src/lightning/modal/__docs__/modal.md

@@ -58,7 +58,7 @@ The `.open()` method lets you assign values to the modal's properties. `Lightnin
 
 * `label` - Required. Sets the modal's title and assistive device label. If the modal has a header, set `label` in the `lightning-modal-header` component. If the modal doesn't have a header, set the `label` property when opening the modal.
 
-* `size` - Determines how much of the viewport width the modal uses. Supported values are `small`, `medium`, and `large`, which you can set when you open the modal. Default value is `medium`. The length of the modal is determined by the amount of content.
+* `size` - Determines how much of the viewport width the modal uses. Supported values are `small`, `medium`, `large`, and `full`. You can set the `size` attribute when you open the modal. Default value is `medium`. The height of the modal is determined by the amount of content in the `lightning-modal-body` component, and the `size` value. For more information on the `full` variant, see the **Styling Variants** section.
 
 * `description` - Sets the modal's accessible description. It uses the `aria-description` attribute where supported, or falls back to `aria-describedby`. If you set a custom description value, include the label name at the beginning of your description, because some screen readers only read the description, and not the label.
 
@@ -560,6 +560,8 @@ The headerless variant of `LightningModal` has these additional requirements.
 -  The `label` property is required for all variants of `LightningModal`. Assistive devices read the `label` value, even though the headerless modal variant doesn't display the label.
 -  Because this variant doesn't use `lightning-modal-header`, you have to manually create an `<h1>` heading in `lightning-modal-body`. Provide accessible structure by starting with heading level `<h1>` and using levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
+You can also create a full-screen modal component by setting the `size` attribute to `full`. This variant resizes the modal to the full width and height of the viewport on screens with 767 pixels or less, like mobile phone devices. On screens 768 pixels or larger, like desktop monitors or tablets, a `size=full` modal has the same behavior as a modal with `size=large` set.
+
 The `LightningModal` component also supports the SLDS [Directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional) modal blueprint pattern.
 
 To achieve the directional button layout, place the buttons in a `div` with the `slds-modal__footer_directional` class.

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -0,0 +1,267 @@
+/* Contains constants for modal testing
+ * NOTE: there is sample Modal DOM structure for reference
+ * at the bottom of this file
+ */
+
+// Selectors
+
+// buttons that open modals
+const BUTTON_MODAL_ALL = '[data-modal-button-all]';
+const BUTTON_MODAL_ALL_TWO = '[data-modal-button-all-two]';
+const BUTTON_MODAL_HEADLESS = '[data-modal-button-headless]';
+const BUTTON_MODAL_HEADLESS_NO_LABEL = '[data-modal-button-headless-no-label]';
+const BUTTON_MODAL_HEADLESS_TWO = '[data-modal-button-headless-two]';
+const BUTTON_MODAL_FOOTLESS = '[data-modal-button-footless]';
+const BUTTON_MODAL_FOOTLESS_TWO = '[data-modal-button-footless-two]';
+const BUTTON_MODAL_FORM = '[data-modal-button-form]';
+const BUTTON_MODAL_MULTI = '[data-modal-button-multi]';
+const BUTTON_MODAL_HEADLESS_FULL = '[data-modal-button-headless-full]';
+const BUTTON_MODAL_FOOTLESS_FULL = '[data-modal-button-footless-full]';
+
+// top level component selectors
+const OVERLAY_CONTAINER = 'lightning-overlay-container';
+const MODAL_BASE = 'lightning-modal-base';
+const MODAL = 'lightning-modal';
+const BUBBLE_ELEM = 'lightning-primitive-bubble';
+
+// LightningModal specific selectors
+const MODAL_SLDS_CSS = 'slds-modal';
+const MODAL_SLDS_FULL_SIZE_CSS = 'slds-modal_full';
+const MODAL_SLDS_SMALL_SIZE_CSS = 'slds-modal_small';
+const MODAL_SLDS_MEDIUM_SIZE_CSS = 'slds-modal_medium';
+const MODAL_SLDS_LARGE_SIZE_CSS = 'slds-modal_large';
+const MODAL_DIV_SLOT = '[data-slot]';
+const MODAL_CONTAINER_DIV = '[data-container]';
+const FOCUS_TRAP = 'lightning-focus-trap';
+const MODAL_CLOSE_BTN = '.slds-modal__close';
+const MODAL_DATA_SELECTOR = '[data-modal]'; // the 'section' element
+const MODAL_DESCRIPTION_SELECTOR = '[data-aria-description]'; // the 'section' > span element
+const MODAL_ARIALIVE_SELECTOR = '[data-aria-live-message]'; // the 'section' > span element
+// modal header
+const MODAL_HEADER = 'lightning-modal-header';
+// modal body
+const MODAL_BODY = 'lightning-modal-body';
+const MODAL_BODY_DIV = '[data-content-container]';
+const MODAL_BODY_BACKDROP = '.slds-backdrop';
+const MODAL_BODY_SLOT = '[data-default-slot]';
+// modal footer
+const MODAL_FOOTER = 'lightning-modal-footer';
+
+// inner modal specific details ===========================
+
+// close button variants
+const MODAL_CLOSE_BUTTON_FULL_VARIANT = 'bare';
+const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare-inverse';
+const MODAL_CLOSE_BTN_CLASS = 'slds-modal__close';
+const MODAL_CLOSE_BTN_SELECTOR = `.${MODAL_CLOSE_BTN_CLASS}`;
+const MODAL_CLOSE_BTN_FULL_CLASS = 'slds-modal_full-close-button';
+const MODAL_CLOSE_BTN_ICON_BORDER_CLASS = 'slds-button_icon-border-filled';
+// modal screen size testing
+// utilized by full screen modal tests
+const SCREEN_SIZE_SMALL = 'SMALL';
+const SCREEN_SIZE_MEDIUM = 'MEDIUM';
+const SCREEN_SIZE_LARGE = 'LARGE';
+const SCREEN_SIZE_XLARGE = 'XLARGE';
+const SCREEN_SIZE_SMALL_LANDSCAPE = 'SMALL_LANDSCAPE';
+const SCREEN_SIZE_MEDIUM_LANDSCAPE = 'MEDIUM_LANDSCAPE';
+const SCREEN_SIZE_LARGE_LANDSCAPE = 'LARGE_LANDSCAPE';
+
+// modal size api testing value constants
+const MODAL_SIZE_SMALL = 'small';
+const MODAL_SIZE_MEDIUM = 'medium';
+const MODAL_SIZE_LARGE = 'large';
+const MODAL_SIZE_FULL = 'full';
+const MODAL_SIZE_RANDO = 'modal-ex-large';
+
+// modal body selectors ================================
+// Empty CSS classes
+const BODY_HEADLESS_SELECTOR = 'slds-modal__content_headless';
+const BODY_FOOTLESS_SELECTOR = 'slds-modal__content_footless';
+
+// modal size measurements and values
+const MODAL_FULL_SCREEN_SMALL_BREAKPOINT = 767;
+// <lightning-modal> element location, medium+ screen
+const MODAL_DEFAULT_PX_OFFSET_X = 25;
+const MODAL_DEFAULT_PX_OFFSET_Y = 50;
+// <lightning-modal> element location, full screen
+const MODAL_ELEM_FULL_PX_OFFSET_X = 0;
+const MODAL_ELEM_FULL_PX_OFFSET_Y = 52;
+const MAX_HEIGHT = 'max-height';
+const MIN_HEIGHT = 'min-height';
+const MODAL_BODY_MIN_HEIGHT_PX = 80;
+
+// Accessibility
+const ARIA_LABELLEDBY = 'aria-labelledby';
+const ARIA_LABEL = 'aria-label';
+
+// PAUSES
+const PAUSE_MICRO = 100;
+const PAUSE_BRIEF = 1250;
+const BROWSER_RESIZE_PAUSE = 2000;
+const MODAL_RENDER_PAUSE = 1250;
+
+// modal launcher data selectors
+const SELECTORS = {
+    // main testing options
+    all: BUTTON_MODAL_ALL,
+    'all-form': BUTTON_MODAL_FORM,
+    headless: BUTTON_MODAL_HEADLESS,
+    footless: BUTTON_MODAL_FOOTLESS,
+    'headless-full': BUTTON_MODAL_HEADLESS_FULL,
+    'footless-full': BUTTON_MODAL_FOOTLESS_FULL,
+    // alternate testing options
+    'all-two': BUTTON_MODAL_ALL_TWO,
+    'headless-no-label': BUTTON_MODAL_HEADLESS_NO_LABEL,
+    'headless-two': BUTTON_MODAL_HEADLESS_TWO,
+    'footless-two': BUTTON_MODAL_FOOTLESS_TWO,
+    'multi-modals': BUTTON_MODAL_MULTI,
+};
+
+// modal type to size api value mapping
+const NAME_TO_SIZE = {
+    all: MODAL_SIZE_FULL,
+    'all-form': MODAL_SIZE_MEDIUM,
+    headless: MODAL_SIZE_SMALL,
+    footless: MODAL_SIZE_LARGE,
+    'headless-full': MODAL_SIZE_FULL,
+    'footless-full': MODAL_SIZE_FULL,
+
+    'all-two': MODAL_SIZE_MEDIUM,
+    'headless-no-label': MODAL_SIZE_MEDIUM,
+    'headless-two': MODAL_SIZE_MEDIUM,
+    'footless-two': MODAL_SIZE_MEDIUM,
+    'multi-modals': MODAL_SIZE_MEDIUM,
+};
+
+// modal type to size api value mapping
+// this will get filled in as more test
+// suites for modal utilize this map
+const SPEC_TO_TABS_TO_CLOSE_BTN = {
+    accessibility: {
+        footless: -1,
+        headless: -3,
+    },
+};
+
+const MODAL_RANGE = { min: 9000, max: 9099 };
+const OVERLAY_RANGE = { min: 9100, max: 9199 };
+
+const KEY = {
+    SHIFT: 'Shift',
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    SPACE: 'Space',
+    ESC: 'Escape',
+};
+
+// pixel values for testing screen sizes
+const SCREEN_SIZE = {
+    // based on iPhone 14
+    // close to iPhone 12 Pro, Pixel 5
+    // when Modal size='full',
+    // full screen behavior will be applied
+    SMALL: {
+        width: 393,
+        height: 852,
+    },
+    SMALL_LANDSCAPE: {
+        width: 852,
+        height: 393,
+    },
+    // iPad sizing, in portrait
+    MEDIUM: {
+        width: 768,
+        height: 1024,
+    },
+    MEDIUM_LANDSCAPE: {
+        width: 1024,
+        height: 768,
+    },
+    // Typical desktop lower bound
+    LARGE: {
+        width: 1024,
+        height: 768,
+    },
+    // Higher res desktop
+    XLARGE: {
+        width: 1920,
+        height: 1080,
+    },
+};
+
+module.exports = {
+    BUTTON_MODAL_ALL,
+    BUTTON_MODAL_ALL_TWO,
+    BUTTON_MODAL_HEADLESS,
+    BUTTON_MODAL_HEADLESS_NO_LABEL,
+    BUTTON_MODAL_HEADLESS_TWO,
+    BUTTON_MODAL_FOOTLESS,
+    BUTTON_MODAL_FOOTLESS_TWO,
+    BUTTON_MODAL_FORM,
+    BUTTON_MODAL_MULTI,
+    BUTTON_MODAL_HEADLESS_FULL,
+    BUTTON_MODAL_FOOTLESS_FULL,
+    OVERLAY_CONTAINER,
+    MODAL_BASE,
+    MODAL,
+    MODAL_SLDS_CSS,
+    MODAL_SLDS_FULL_SIZE_CSS,
+    MODAL_SLDS_SMALL_SIZE_CSS,
+    MODAL_SLDS_MEDIUM_SIZE_CSS,
+    MODAL_SLDS_LARGE_SIZE_CSS,
+    MODAL_DIV_SLOT,
+    MODAL_CONTAINER_DIV,
+    MODAL_HEADER,
+    MODAL_BODY,
+    MODAL_BODY_DIV,
+    MODAL_BODY_BACKDROP,
+    MODAL_BODY_SLOT,
+    MODAL_FOOTER,
+    FOCUS_TRAP,
+    MODAL_CLOSE_BTN,
+    MODAL_CLOSE_BTN_CLASS,
+    MODAL_CLOSE_BTN_SELECTOR,
+    MODAL_CLOSE_BTN_FULL_CLASS,
+    MODAL_CLOSE_BTN_ICON_BORDER_CLASS,
+    MODAL_DATA_SELECTOR,
+    MODAL_CLOSE_BUTTON_FULL_VARIANT,
+    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
+    SCREEN_SIZE_SMALL,
+    SCREEN_SIZE_MEDIUM,
+    SCREEN_SIZE_LARGE,
+    SCREEN_SIZE_XLARGE,
+    SCREEN_SIZE_SMALL_LANDSCAPE,
+    SCREEN_SIZE_MEDIUM_LANDSCAPE,
+    SCREEN_SIZE_LARGE_LANDSCAPE,
+    MODAL_SIZE_SMALL,
+    MODAL_SIZE_MEDIUM,
+    MODAL_SIZE_LARGE,
+    MODAL_SIZE_FULL,
+    MODAL_SIZE_RANDO,
+    MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
+    MODAL_DEFAULT_PX_OFFSET_X,
+    MODAL_DEFAULT_PX_OFFSET_Y,
+    MODAL_ELEM_FULL_PX_OFFSET_X,
+    MODAL_ELEM_FULL_PX_OFFSET_Y,
+    MAX_HEIGHT,
+    MIN_HEIGHT,
+    MODAL_BODY_MIN_HEIGHT_PX,
+    BROWSER_RESIZE_PAUSE,
+    MODAL_RENDER_PAUSE,
+    PAUSE_MICRO,
+    PAUSE_BRIEF,
+    SELECTORS,
+    NAME_TO_SIZE,
+    BODY_HEADLESS_SELECTOR,
+    BODY_FOOTLESS_SELECTOR,
+    MODAL_DESCRIPTION_SELECTOR,
+    MODAL_ARIALIVE_SELECTOR,
+    BUBBLE_ELEM,
+    MODAL_RANGE,
+    OVERLAY_RANGE,
+    SPEC_TO_TABS_TO_CLOSE_BTN,
+    SCREEN_SIZE,
+    ARIA_LABELLEDBY,
+    ARIA_LABEL,
+    KEY,
+};