lightning-base-components 1.21.1-alpha → 1.21.2-alpha

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

@@ -60,7 +60,6 @@ async function clickButton(btnSelector) {
 async function getOverlayContainer() {
     // overlay container isn't present in the DOM
     // until first overlay or modal is created
-    // eslint-disable-next-line
     // eslint-disable-next-line no-undef
     const htmlElem = await $('html');
     // eslint-disable-next-line no-undef
@@ -186,7 +185,7 @@ async function getModalInternals(config, modalIndex = 0) {
             modalFooterElem = await modalElem.shadow$(MODAL_FOOTER);
         }
     }
-    return {
+    const modalDetails = {
         modalBaseElem,
         modalBaseBackdropElem,
         modalSectionElem,
@@ -202,6 +201,8 @@ async function getModalInternals(config, modalIndex = 0) {
         focusTrapElem,
         focusTrapSlotElem,
     };
+    console.log('100 getModalInternals :: modalDetails: ', modalDetails);
+    return modalDetails;
 }
 
 /*
@@ -426,6 +427,19 @@ async function validateModalHeightBehavior(config) {
     const { height: windowHeight, width: windowWidth } =
         // eslint-disable-next-line no-undef
         await browser.getWindowSize();
+    console.log('00 validateModalHeightBehavior :: config: ', config);
+    console.log(
+        '01 validateModalHeightBehavior :: modalSize: ',
+        modalSize,
+        '; modalVariantType: ',
+        modalVariantType
+    );
+    console.log(
+        '02 validateModalHeightBehavior :: windowWidth: ',
+        windowWidth,
+        '; windowHeight: ',
+        windowHeight
+    );
 
     // get child elements element for min and max height values
     const { modalHeaderElem, modalBodyElem, modalFooterElem } =
@@ -433,6 +447,14 @@ async function validateModalHeightBehavior(config) {
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
     const modalBodyOuterDivStyle = await bodyOuterDiv.getAttribute('style');
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
+    console.log(
+        '03 validateModalHeightBehavior :: modalBodyOuterDivStyle: ',
+        modalBodyOuterDivStyle
+    );
+    console.log(
+        '04 validateModalHeightBehavior :: modalBodyStyleProps: ',
+        modalBodyStyleProps
+    );
 
     // based on variant, determine which types of tests will run
     const isVariantHeadless = isModalOfVariantType(
@@ -444,11 +466,19 @@ async function validateModalHeightBehavior(config) {
         'footless'
     );
 
+    console.log(
+        '05 validateModalHeightBehavior :: isVariantHeadless: ',
+        isVariantHeadless,
+        '; isVariantFootless: ',
+        isVariantFootless
+    );
+
     // modalBody is always present in the examples
     const heightBody = (await bodyOuterDiv.getSize('height')) || 0;
 
     // calculate the total height of the child elements present
     let totalModalElemHeight = heightBody;
+    console.log('10 validateModalHeightBehavior :: heightBody: ', heightBody);
 
     // modalHeader is not always present in the examples
     if (!isVariantHeadless) {
@@ -458,6 +488,10 @@ async function validateModalHeightBehavior(config) {
         const heightHdr = await headerOuterDiv.getSize('height');
         if (heightHdr > 0) {
             totalModalElemHeight += heightHdr;
+            console.log(
+                '10 validateModalHeightBehavior :: heightHdr: ',
+                heightHdr
+            );
         }
     }
 
@@ -469,11 +503,34 @@ async function validateModalHeightBehavior(config) {
         const heightFtr = await footerOuterDiv.getSize('height');
         if (heightFtr > 0) {
             totalModalElemHeight += heightFtr;
+            console.log(
+                '10 validateModalHeightBehavior :: heightFtr: ',
+                heightFtr
+            );
         }
     }
 
     // calculate the percentage of the browser
     const percentPageHeightUtilized = totalModalElemHeight / windowHeight;
+    console.log(
+        '10 validateModalHeightBehavior :: totalModalElemHeight: ',
+        totalModalElemHeight
+    );
+    console.log(
+        '10 validateModalHeightBehavior :: windowHeight: ',
+        windowHeight
+    );
+
+    // modalFooter is not always present in the examples
+    if (!isVariantFootless) {
+        const { footerOuterDiv } = await getModalFooterInternals(
+            modalFooterElem
+        );
+        const heightFtr = await footerOuterDiv.getSize('height');
+        if (heightFtr > 0) {
+            totalModalElemHeight += heightFtr;
+        }
+    }
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
@@ -485,6 +542,18 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
+        console.log(
+            '10 validateModalHeightBehavior :: FULL SCREEN :: percentPageHeightUtilized: ',
+            percentPageHeightUtilized
+        );
+        console.log(
+            '11 validateModalHeightBehavior :: FULL SCREEN :: MODAL_FULL_SCREEN_USE_PERCENT: ',
+            MODAL_FULL_SCREEN_USE_PERCENT
+        );
+        console.log(
+            '12 validateModalHeightBehavior :: FULL SCREEN :: percentPageHeightUtilized > MODAL_FULL_SCREEN_USE_PERCENT: ',
+            percentPageHeightUtilized > MODAL_FULL_SCREEN_USE_PERCENT
+        );
         // in full screen mode, the modal utilzes more than 92%
         // of the screen height
         expect(percentPageHeightUtilized).toBeGreaterThan(
@@ -495,11 +564,31 @@ async function validateModalHeightBehavior(config) {
         // to make the modal go full height
         // these values are not set after the SLDS based
         // CSS grid implementation was implemented
+        console.log(
+            '15 validateModalHeightBehavior :: FULL SCREEN :: modalBodyStyleProps[MAX_HEIGHT]: ',
+            modalBodyStyleProps[MAX_HEIGHT]
+        );
+        console.log(
+            '16 validateModalHeightBehavior :: FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT]: ',
+            modalBodyStyleProps[MIN_HEIGHT]
+        );
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
 
         // default modal behavior scenario
     } else {
+        console.log(
+            '20 validateModalHeightBehavior :: NOT FULL SCREEN :: percentPageHeightUtilized: ',
+            percentPageHeightUtilized
+        );
+        console.log(
+            '21 validateModalHeightBehavior :: NOT FULL SCREEN :: MODAL_DEFAULT_SCREEN_USE_PERCENT: ',
+            MODAL_DEFAULT_SCREEN_USE_PERCENT
+        );
+        console.log(
+            '22 validateModalHeightBehavior :: NOT FULL SCREEN :: percentPageHeightUtilized < MODAL_DEFAULT_SCREEN_USE_PERCENT: ',
+            percentPageHeightUtilized < MODAL_DEFAULT_SCREEN_USE_PERCENT
+        );
         // in default modal behavior, the modal utilzes less than 88%
         // of the screen height
         expect(percentPageHeightUtilized).toBeLessThan(
@@ -508,6 +597,23 @@ async function validateModalHeightBehavior(config) {
         // these next two sets of tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
         // to make the modal exhibit normal height behavior (not full screen)
+        console.log(
+            '23 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MAX_HEIGHT]: ',
+            modalBodyStyleProps[MAX_HEIGHT]
+        );
+        console.log(
+            '24 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT] (to be defined, min height not equal max height): ',
+            modalBodyStyleProps[MIN_HEIGHT]
+        );
+        console.log(
+            '25 validateModalHeightBehavior :: NOT FULL SCREEN :: MODAL_BODY_MIN_HEIGHT_PX: ',
+            MODAL_BODY_MIN_HEIGHT_PX
+        );
+        console.log(
+            '26 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT] === MODAL_BODY_MIN_HEIGHT_PX: ',
+            modalBodyStyleProps[MIN_HEIGHT] === MODAL_BODY_MIN_HEIGHT_PX
+        );
+
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MAX_HEIGHT]).not.toEqual(
@@ -627,7 +733,6 @@ async function validateModalWidthBehavior(config) {
         if (!isVariantHeadless) {
             expect(locHeaderX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
         }
-
         // modalBody is always present in the examples
         expect(locBodyX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
     }

package/src/lightning/modalBase/modal-base.slds.css

@@ -0,0 +1,242 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * Remap to SLDS blueprint hooks for parity
+   * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+   *
+   * "Shared" Styling Hooks for modal base/header/body/footer
+   */
+
+  :host([data-render-mode="shadow"]) [part='modal-backdrop'] {
+    --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
+  }
+
+  :host([data-render-mode="shadow"]) [part='modal'] {
+    /* Map modal component hooks to single "shared" hooks from blueprint */
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /* '--slds-c-modal-shadow' is used in body/footer */
+    --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
+    --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
+
+    /* '--slds-c-modal-color-border' is used in header/footer */
+    --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
+    --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
+
+
+    /* '--slds-c-modal-radius-border' is used in header/body/footer */
+    --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
+    --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
+    --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
+
+    /* '--slds-c-modal-sizing-border' is used in header/footer */
+    --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
+    --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+
+  }
+
+  :host([data-render-mode="shadow"]) .slds-backdrop {
+    transition-duration: 0.4s;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    background: var(--slds-c-modalbase-backdrop-color-background, var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%)));
+    z-index: 9000;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-backdrop_open {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.4s linear;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal {
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.1s linear, opacity 0.1s;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    z-index: 9001
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__container {
+    position: relative;
+    transform: translate(0, 0);
+    transition: transform 0.1s linear, opacity 0.1s linear;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 var(--slds-g-spacing-6);
+    height: 100%;
+    padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
+    border-radius: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__close {
+    width: 2rem;
+    height: 2rem;
+    margin-inline-start: auto;
+    position: relative;
+    inset-block-end: var(--slds-g-spacing-2);
+    inset-inline-end: (var(--slds-g-spacing-2) * -1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-fade-in-open {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.1s linear;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(0, 0);
+  }
+
+  /* Sizes: Small, Medium, Large */
+
+  @media (width >= 48em) {
+    :host([data-render-mode="shadow"]) .slds-modal__container {
+      margin: 0 auto;
+      width: 50%;
+      max-width: 40rem;
+      min-width: 20rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
+      width: 60%;
+      max-width: 52.0625rem;
+      min-width: 40rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
+      width: 70%;
+      max-width: 75rem;
+      min-width: 40rem;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
+      width: 90%;
+      max-width: none;
+      min-width: 40rem;
+    }
+  }
+
+
+  /* Sizes: Full */
+
+  /* .slds-modal_full {} */
+
+  /* Behaves like large size when not in a small viewport */
+  @media (width >= 48em) {
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+      width: 90%;
+      max-width: none;
+      min-width: 40rem;
+    }
+  }
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"]) .slds-modal_full {
+      /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
+      inset-block-start: env(safe-area-inset-top, 0);
+
+      /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
+      inset-block-end: auto;
+
+      /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
+      /* stylelint-disable-next-line unit-no-unknown */
+      height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+      width: 100%;
+      max-width: none;
+      min-width: 0;
+      margin: 0;
+      padding: var(--slds-g-spacing-4) 0 0 0;
+      background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
+      border-radius: 0;
+
+      /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
+        which explicitly defines the grid and allows optional elements to be omitted like
+        the header or footer. */
+      display: grid;
+      /* stylelint-disable-next-line unit-no-unknown */
+      height: 100dvh;
+      grid-template-columns: 1fr;
+      grid-template-rows: min-content min-content 1fr min-content;
+      grid-template-areas: "close" "header" "content" "footer";
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
+      grid-area: close;
+      inset-inline-end: var(--slds-g-spacing-4);
+
+      /**
+       * A few things going on here:
+       * - We want to avoid a markup change for a single modifier so we reassign/override.
+       * - Button icon doesn't have component level hooks (yet), so we don't include them here
+       *   and we have to override the CSS property instead of reassign.
+       * - States on button have a bug, they override instead of reassign hooks
+       *   so the values of empty hooks default to initial values. In the case
+       *   of background colors, the background will disappear (initial = transparent).
+       */
+      --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
+      --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
+
+      color: var(--slds-g-color-on-surface-1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
+    .slds-modal_full .slds-modal__close:focus {
+      color: var(--slds-g-color-accent-3);
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon+div,:host([data-render-mode="shadow"]) 
+    .slds-modal_full lightning-modal {
+      display: contents;
+    }
+  }
+
+  /* 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;
+  }
+}

package/src/lightning/modalBase/modalBase.css

@@ -1,16 +1,2 @@
-/* Modal close button */
-
-/* Required for autofocus to work correctly:
-   - child elements of modal appear 'visibility: hidden' at
-     the moment that they are being reviewed for eligibility
-     for focus in focus.js at isElementVisible()
-*/
-.fix-slds-modal {
-    visibility: visible;
-    z-index: unset;
-}
-
-/* Required for z-index */
-.fix-slds-backdrop {
-    z-index: unset;
-}
+@import './modalBase.lbc.synthetic.css';
+@import './modalBase.lbc.native.css';

package/src/lightning/modalBase/modalBase.html

@@ -1,6 +1,7 @@
 <template>
     <div
         class={modalBackdropCssClasses}
+        part="modal-backdrop"
         role="presentation"
         data-backdrop
     ></div>
@@ -10,6 +11,7 @@
             tabindex="-1"
             aria-modal="true"
             class={modalCssClasses}
+            part="modal"
             onkeydown={handleModalKeyDown}
             onprivatemodalheaderregister={handleHeaderRegister}
             onprivatemodalbodyregister={handleBodyRegister}