lightning-base-components 1.18.8-alpha → 1.19.1-alpha

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

@@ -19,7 +19,6 @@ import {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BTN_ICON_BORDER_CLASS,
     MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_LARGE,
@@ -60,8 +59,6 @@ async function getOverlayContainer() {
     // overlay container isn't present in the DOM
     // until first overlay or modal is created
     // eslint-disable-next-line
-    // wrapper = await kontajner.getWrapper();
-    // await wrapper.waitForDisplayed();
     // eslint-disable-next-line no-undef
     const htmlElem = await $('html');
     // eslint-disable-next-line no-undef
@@ -139,9 +136,9 @@ async function getModalInternals(config, modalIndex = 0) {
         modalBaseBackdropElem = await modalBaseElem.shadow$(
             MODAL_BODY_BACKDROP
         );
+
         // get focus trap element
         focusTrapElem = await modalBaseElem.shadow$(FOCUS_TRAP);
-        await focusTrapElem.waitForDisplayed();
         focusTrapSlotElem = await focusTrapElem.shadow$('slot');
 
         // get modal's <section> element just inside focus trap
@@ -150,20 +147,15 @@ async function getModalInternals(config, modalIndex = 0) {
             'getFirstSlotElement',
             focusTrapSlotElem
         );
-        await modalSectionElem.waitForDisplayed();
         // get modal close button
         modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
-        await modalCloseButton.waitForDisplayed();
 
         // get modal div slot (not an actual slot)
         modalDataSlot = await modalSectionElem.$(MODAL_DIV_SLOT);
-        await modalDataSlot.waitForDisplayed();
         // get div[data-container].slds-modal__container
         modalContainerElem = await modalSectionElem.$(MODAL_CONTAINER_DIV);
-        await modalContainerElem.waitForDisplayed();
         // get lightning-modal element
         modalElem = await modalSectionElem.$(MODAL);
-        await modalElem.waitForDisplayed();
 
         // skip looking for modalHeader when type of modal is 'headless'
         if (!isModalOfVariantType(modalVariantType, 'headless')) {
@@ -325,7 +317,7 @@ async function validateModalCloseButtonAttributes(config) {
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
@@ -335,22 +327,72 @@ async function validateModalCloseButtonAttributes(config) {
         );
 
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
-        expect(modalCloseButtonCssClass).toContain(
-            MODAL_CLOSE_BTN_ICON_BORDER_CLASS
-        );
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
         expect(modalCloseButtonVariant).toEqual(
             MODAL_CLOSE_BUTTON_NORMAL_VARIANT
         );
         expect(modalCloseButtonCssClass).not.toContain(
             MODAL_CLOSE_BTN_FULL_CLASS
         );
-        expect(modalCloseButtonCssClass).not.toContain(
-            MODAL_CLOSE_BTN_ICON_BORDER_CLASS
-        );
     }
 }
+/*
+ * get some of the modal internals element details
+ * including offset values and classes
+ * utilizes DOM based approach via browser.execute
+ */
+// eslint-disable-next-line @lwc/lwc/no-async-await
+async function getModalInternalsDomBased() {
+    // eslint-disable-next-line no-undef
+    const result = await browser.execute(() => {
+        // down the modal dom tree
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const loc = document.querySelector('lightning-overlay-container');
+        const modalBase = loc.shadowRoot.querySelector('lightning-modal-base');
+        const modalBackdrop =
+            modalBase.shadowRoot.querySelector('.slds-backdrop');
+        const focusTrap = modalBase.shadowRoot.querySelector(
+            'lightning-focus-trap'
+        );
+        const focusTrapSlot = focusTrap.shadowRoot.querySelector('slot');
+        const modalSectionElem = focusTrapSlot.assignedNodes()[0];
+        const modalContainerElem = modalSectionElem.querySelector(
+            '.slds-modal__container'
+        );
+        const modalCloseButton = modalSectionElem.querySelector(
+            'lightning-button-icon'
+        );
+        const modalElem = modalSectionElem.querySelector('lightning-modal');
+        return {
+            window: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+            modalBase: {
+                offset: modalBase.getBoundingClientRect(),
+            },
+            modalBackdrop: {
+                offset: modalBackdrop.getBoundingClientRect(),
+            },
+            modalSectionElem: {
+                class: modalSectionElem.getAttribute('class'),
+                offset: modalSectionElem.getBoundingClientRect(),
+            },
+            modalContainerElem: {
+                class: modalContainerElem.getAttribute('class'),
+                offset: modalContainerElem.getBoundingClientRect(),
+            },
+            modalCloseButton: {
+                class: modalCloseButton.getAttribute('class'),
+            },
+            modalElem: {
+                offset: modalElem.getBoundingClientRect(),
+            },
+        };
+    });
+    return result;
+}
 
 /* Function includes expect tests to validate the expected
  * modal HEIGHT behavior based on screen size, size attribute,
@@ -359,23 +401,20 @@ async function validateModalCloseButtonAttributes(config) {
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function validateModalHeightBehavior(config) {
     const { modalSize } = config;
-
-    // first, get window size
-    // eslint-disable-next-line no-undef
-    const { width: windowWidth } = await browser.getWindowSize();
-    // get <lightning-modal> element
-    const { modalBodyElem, modalElem } = await getModalInternals(config);
-
-    const { x: modalElemLocX, y: modalElemLocY } =
-        await modalElem.getLocation();
-
-    // get <lightning-modal-body> element
+    // first, get sizes of elements
+    const { modalSectionElem, window, modalElem } =
+        await getModalInternalsDomBased();
+    const { height: modalSectionElemHeight } = modalSectionElem.offset;
+    const { height: windowHeight, width: windowWidth } = window;
+
+    // get <lightning-modal-body> element for min and max height values
+    const { modalBodyElem } = await getModalInternals(config);
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
     const modalBodyOuterDivStyle = await bodyOuterDiv.getAttribute('style');
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
-
+    const { x: modalElemX, y: modalElemY } = modalElem.offset;
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     // note: reliably testing outer div element was not possible as
     // webdriver getSize didn't provide correct values for comparison
     // the tests below verify that the code path for setting full height are invoked
@@ -383,33 +422,29 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        // the <lightning-modal> element is consistently accurate for
-        // location measurment in the CI
-        // typical values are: { x: 0, y: 48 },
-        // y=48 comes from margin/padding and is expected
-        expect(modalElemLocX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
-        expect(modalElemLocY).toBeLessThan(MODAL_ELEM_FULL_PX_OFFSET_Y);
+        expect(modalSectionElemHeight).toEqual(windowHeight);
+        expect(modalElemX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
+        expect(modalElemY).toEqual(MODAL_ELEM_FULL_PX_OFFSET_Y);
         // these next two tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
         // to make the modal go full height
-        expect(modalBodyStyleProps[MAX_HEIGHT]).toEqual(
-            modalBodyStyleProps[MIN_HEIGHT]
-        );
-        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeGreaterThan(
-            MODAL_BODY_MIN_HEIGHT_PX
-        );
+        // these values are not set after the SLDS based
+        // CSS grid implementation was implemented
+        expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
+        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
-        // the <lightning-modal> element is consistently accurate for
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        // the div.slds-modal__container element is consistently accurate for
         // location measurment in the CI
         // location values vary based on screen and size value
-        // typical value are: { x: > 25, y: > 60 },
-        // y=48 comes from margin/padding and is expected
-        expect(modalElemLocX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
-        expect(modalElemLocY).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_Y);
-        // these next two tests are proxy behavior indicating
+        // typical value are: { x: > 25 },
+        expect(modalElemX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
+        expect(modalElemY).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_Y);
+        // these next two sets of tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
-        // to make the modal go full height
+        // to make the modal exhibit normal height behavior (not full screen)
+        expect(modalBodyStyleProps[MAX_HEIGHT]).toBeDefined();
+        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MAX_HEIGHT]).not.toEqual(
             modalBodyStyleProps[MIN_HEIGHT]
         );
@@ -428,22 +463,25 @@ async function validateModalWidthBehavior(config, modalIndex = 0) {
     const { modalSize } = config;
     // first, get outer window size
     // eslint-disable-next-line no-undef
-    const { width: windowWidth } = await browser.getWindowSize();
+    const { width: windowWidth } =
+        // eslint-disable-next-line no-undef
+        await browser.getWindowSize();
 
     // second, find modal elem, then get width
-    const { modalElem } = await getModalInternals(config, modalIndex);
-    const { width: modalElemWidth } = await modalElem.getSize();
+    const { modalContainerElem } = await getModalInternals(config, modalIndex);
+    const { width: modalContainerElemWidth } =
+        await modalContainerElem.getSize();
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalElemWidth).toEqual(windowWidth);
+        expect(modalContainerElemWidth).toEqual(windowWidth);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
-        expect(modalElemWidth).toBeLessThan(windowWidth);
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        expect(modalContainerElemWidth).toBeLessThan(windowWidth);
     }
 }
 
@@ -495,7 +533,6 @@ async function openModal({
     if (runMockMatchMedia) {
         await mockMatchMedia();
     }
-
     // set a specific window size based on sizing descriptor (SMALL, MEDIUM)
     await setWindowSize(screenSizeToSet);
 
@@ -1122,6 +1159,7 @@ async function validateModalOpenTabNavFocusBehavior(
 }
 
 module.exports = {
+    getModalInternalsDomBased,
     setupStrategy,
     isModalOfVariantType,
     parseStyleAttributes,

package/src/lightning/modalBase/modalBase.js

@@ -1,6 +1,7 @@
 import { api, LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
+    isCSR,
     makeEverythingExceptElementInert,
     normalizeString,
     synchronizeAttrs,
@@ -18,7 +19,7 @@ import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandcl
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 
 const DEBOUNCE_RESIZE = 300;
-const SMALL_SCREEN_SIZE = 767;
+const SMALL_SCREEN_SIZE = 768;
 const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
@@ -50,7 +51,6 @@ export default class LightningModalBase extends LightningElement {
     headerLabelIsPopulated = null;
     headerTitleRef = null;
     headerTabElemRef = null;
-    headerHeightCheck = null;
 
     // modalBody, child
     bodyRegistered = false;
@@ -72,7 +72,6 @@ export default class LightningModalBase extends LightningElement {
     footerSlotHasRendered = false;
     footerDefaultSlotIsPopulated = false;
     footerTabElemRef = null;
-    footerHeightCheck = null;
 
     // aria attributes
     modalLabel = null;
@@ -342,12 +341,12 @@ export default class LightningModalBase extends LightningElement {
      * modal header so the close button maintains visibility for a11y
      * @private
      */
+    // slds-button slds-button_icon slds-modal__close slds-button_icon-inverse
     get computedCloseButtonCssClass() {
         let classes = classSet('slds-modal__close');
         const fullScreenActive =
             this.isSmallScreenSize && this.size === SIZE_FULL;
         classes.add({
-            'slds-button_icon-border-filled': fullScreenActive,
             'slds-modal_full-close-button': fullScreenActive,
         });
         return classes.toString();
@@ -840,7 +839,6 @@ export default class LightningModalBase extends LightningElement {
         firstTabbableElemRef,
         defaultSlotWrapperId,
         defaultSlotHasRendered,
-        checkHeaderHeightCallback,
         unRegisterCallback,
         labelIsPopulated,
         headerHeight,
@@ -856,7 +854,6 @@ export default class LightningModalBase extends LightningElement {
         this.headerLabelIsPopulated = labelIsPopulated;
         this.headerTitleRef = headerRef;
         this.headerTabElemRef = firstTabbableElemRef;
-        this.headerHeightCheck = checkHeaderHeightCallback;
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
@@ -894,7 +891,6 @@ export default class LightningModalBase extends LightningElement {
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
         this.headerTabElemRef = null;
-        this.headerHeightCheck = null;
     }
 
     /**
@@ -926,14 +922,12 @@ export default class LightningModalBase extends LightningElement {
         footerHeight,
         unRegisterCallback,
         firstTabbableElemRef,
-        checkFooterHeightCallback,
     }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
         this.updateFooterHeight(footerHeight);
         this.footerTabElemRef = firstTabbableElemRef || null;
-        this.footerHeightCheck = checkFooterHeightCallback;
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
@@ -966,7 +960,6 @@ export default class LightningModalBase extends LightningElement {
         this.footerSlotHasRendered = false;
         this.footerDefaultSlotIsPopulated = false;
         this.footerTabElemRef = null;
-        this.footerHeightCheck = null;
     }
 
     /**
@@ -991,54 +984,6 @@ export default class LightningModalBase extends LightningElement {
         return this.size === SIZE_FULL && this.isSmallScreenSize;
     }
 
-    /**
-     * Under the right conditions, update the local tracked header height value
-     * @private
-     */
-    checkAndUpdateHeaderHeight() {
-        // important to verify that header is registered,
-        // and not on initial render of modal parent, since
-        // child component may not yet exist
-        const shouldCheckHeaderHeight =
-            !this.initialRender &&
-            this.headerRegistered &&
-            this.shouldModalBeFullScreen();
-        // when screen size changes, variable height content within the
-        // modal header can reflow
-        // for example: 3 rows of content in tagline can become 2 rows
-        if (shouldCheckHeaderHeight) {
-            const { changed: headerChangedHeight, value: newHeaderHeight } =
-                this.headerHeightCheck();
-            if (headerChangedHeight) {
-                this.updateHeaderHeight(newHeaderHeight);
-            }
-        }
-    }
-
-    /**
-     * Under the right conditions, update the local tracked footer height value
-     * @private
-     */
-    checkAndUpdateFooterHeight() {
-        // important to verify that footer is registered,
-        // and not on initial render of modal parent, since
-        // child component may not yet exist
-        const shouldCheckFooterHeight =
-            !this.initialRender &&
-            this.footerRegistered &&
-            this.shouldModalBeFullScreen();
-        // when screen size changes, variable height content within the
-        // modal footer can reflow
-        // for example: 1 row of buttons to 2 rows, or 2 rows to 1 row
-        if (shouldCheckFooterHeight) {
-            const { changed: footerChangedHeight, value: newFooterHeight } =
-                this.footerHeightCheck();
-            if (footerChangedHeight) {
-                this.updateFooterHeight(newFooterHeight);
-            }
-        }
-    }
-
     /**
      * When the modalBody content height is tall, it requires max-height
      * to be set in order to prevent overflow of the modal offscreen
@@ -1054,9 +999,6 @@ export default class LightningModalBase extends LightningElement {
             // check, and update isSmallScreenSize before
             // callback to modalBody
             this.setIsSmallScreenSize();
-            // check for height changes in header or footer
-            this.checkAndUpdateHeaderHeight();
-            this.checkAndUpdateFooterHeight();
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.bodyResizeScheduled = false;
@@ -1106,7 +1048,7 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     addWindowResizeEventListener() {
-        if (window && !this.windowResizeEventBound) {
+        if (isCSR && !this.windowResizeEventBound) {
             window.addEventListener('resize', this.handleWindowResizeEvent);
             this.windowResizeEventBound = true;
         }
@@ -1117,7 +1059,7 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     removeWindowResizeEventListener() {
-        if (window && this.windowResizeEventBound) {
+        if (isCSR && this.windowResizeEventBound) {
             window.removeEventListener('resize', this.handleWindowResizeEvent);
             clearTimeout(this.timeoutId);
             this.timeoutId = 0;
@@ -1148,15 +1090,19 @@ export default class LightningModalBase extends LightningElement {
      * orientation changes: 'portrait' -> 'landscape' -> 'portrait'
      */
     addOrientationChangeListener() {
-        this.portraitMatchMedia = window.matchMedia('(orientation: portrait)');
-        this.screenOrientationChangeHandler =
-            this.handleWindowResizeEvent.bind(this);
-        if (this.portraitMatchMedia) {
-            this.portraitMatchMedia.addEventListener(
-                'change',
-                this.screenOrientationChangeHandler
+        if (isCSR) {
+            this.portraitMatchMedia = window.matchMedia(
+                '(orientation: portrait)'
             );
-            this.windowOrientationEventBound = true;
+            this.screenOrientationChangeHandler =
+                this.handleWindowResizeEvent.bind(this);
+            if (this.portraitMatchMedia) {
+                this.portraitMatchMedia.addEventListener(
+                    'change',
+                    this.screenOrientationChangeHandler
+                );
+                this.windowOrientationEventBound = true;
+            }
         }
     }
 
@@ -1169,11 +1115,15 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     setIsSmallScreenSize() {
-        const docElem = (document && document.documentElement) || null;
-        const browserWidth = docElem ? docElem.clientWidth : window.innerWidth;
-        const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
-        if (isSmallScreenSize !== this.isSmallScreenSize) {
-            this.isSmallScreenSize = isSmallScreenSize;
+        if (isCSR) {
+            const docElem = (document && document.documentElement) || null;
+            const browserWidth = docElem
+                ? docElem.clientWidth
+                : window.innerWidth;
+            const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
+            if (isSmallScreenSize !== this.isSmallScreenSize) {
+                this.isSmallScreenSize = isSmallScreenSize;
+            }
         }
     }
 

package/src/lightning/modalBody/__docs__/modalBody.md

@@ -5,7 +5,7 @@ component after `lightning-modal-header` and before `lightning-modal-footer` com
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 ```html
 <!-- my/modalDialog.html -->
@@ -53,9 +53,9 @@ For example, specify the background color on the modal using the `sds-c-modal-co
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.
 

package/src/lightning/modalBody/modalBody.js

@@ -147,26 +147,19 @@ export default class LightningModalBody extends LightningElement {
      * Based on initial values, calculate min/max height style values
      * to set on modalBody for correct display of content, and scrollability
      * @param {object} values passed from modalBase to modalBody,
-     * @param {boolean} shouldUseFullHeight boolean to determine if full
      * height of screen should be used
      * representing height and width values of header, footer, and body
      * @return {object} values, after adding of modalUsableHeight
      * @private
      */
-    updateModalBodyHeightValues(values, shouldUseFullHeight) {
-        const { modalBodyMinHeight } = values;
-        // first have to calculate the correct values
+    updateModalBodyHeightValues(values) {
+        // first, have to calculate the correct values
         const updatedValues = this.calculateModalUsableHeight(values);
         const modalBodyUsableHeight =
             this.calculateModalBodyUsableHeight(updatedValues);
         // update values with calculated values
         values.modalBodyUsableHeight = modalBodyUsableHeight;
         values.maxModalBodyHeightStyle = `${modalBodyUsableHeight}px`;
-        // need to adjust minHeight, to force modal to use full height
-        // of user screen
-        values.minModalBodyHeightStyle = shouldUseFullHeight
-            ? `${modalBodyUsableHeight}px`
-            : `${modalBodyMinHeight}px`;
         return values;
     }
 
@@ -176,33 +169,38 @@ export default class LightningModalBody extends LightningElement {
      * @private
      */
     setModalBodyHeight(values, shouldUseFullHeight) {
-        const { maxModalBodyHeightStyle, minModalBodyHeightStyle } =
-            this.updateModalBodyHeightValues(values, shouldUseFullHeight);
+        // set base style to remove any preset max/min-height values
+        // if you move from > 767 to <= 767 or vise versa, previously set
+        // values must be unset. removing by setting initial 'null' values
+        let styles = { maxHeight: null, minHeight: null };
+        // when not utilizing size=full screen modal
+        // we need to calculate the max-height value
+        // so the modalBody content scrolls correctly
+        // (min-height value is always static for non size=full modals)
+        // size=full screen modal required a CSS Grid based solution
+        // due to iOS dynamic view port heights
+        if (!shouldUseFullHeight) {
+            // update the max-height and min height values
+            // on modal body wrapper div
+            const { maxModalBodyHeightStyle, minModalBodyHeightStyle } =
+                this.updateModalBodyHeightValues(values);
+            styles.maxHeight = maxModalBodyHeightStyle;
+            styles.minHeight = minModalBodyHeightStyle;
+        }
         const divElem = this.contentElem;
-        const styles = {
-            maxHeight: maxModalBodyHeightStyle,
-            minHeight: minModalBodyHeightStyle,
-        };
-        // set the max and min height value on modal body wrapper div
         Object.assign(divElem.style, styles);
     }
 
     /**
-     * Update values based on whether size="full" behavior should be full screen (small)
-     * or less than full screen (large)
-     * @param {Boolean} shouldUseFullHeight Whether full height of screen should be used
+     * Update values for any size modal behavior when not exhibiting full height behavior
+     * size=small|medium|large && size=full (when screen size greater than 767px)
      * @param {object} values Provided height, width values from handleUpdateHeight
-     * @returns {object} updatedValues based on full screen or default strategy used
+     * @returns {object} updatedValues for default modal behavior. not utilized for full screen
      * @private
      */
-    updateValues(shouldUseFullHeight, values) {
+    updateValues(values) {
         const { headerHeight, footerHeight, backdropHeight } = values;
         const MODAL_BODY_MIN_HEIGHT = 80;
-        // Full screen size constants
-        // positioning values of body and footer are effected
-        // by modalHeader presence (headless)
-        const PAD_TOP_FULL = 48;
-        const PAD_BOTTOM_FULL = 1;
         // default screen behavior (original modal behavior)
         const PAD_TOP_DEFAULT = 48;
         const PAD_BOTTOM_DEFAULT = 80;
@@ -212,14 +210,16 @@ export default class LightningModalBody extends LightningElement {
             headerHeight: Math.floor(headerHeight),
             footerHeight: Math.floor(footerHeight),
             backdropHeight: Math.floor(backdropHeight),
-            paddingTop: shouldUseFullHeight ? PAD_TOP_FULL : PAD_TOP_DEFAULT,
-            paddingBottom: shouldUseFullHeight
-                ? PAD_BOTTOM_FULL
-                : PAD_BOTTOM_DEFAULT,
+            paddingTop: PAD_TOP_DEFAULT,
+            paddingBottom: PAD_BOTTOM_DEFAULT,
             modalBodyMinHeight: MODAL_BODY_MIN_HEIGHT,
-            // these last four values must first be calculated
+            // since size=full screen no longer relies on
+            // JS calculated values, minHeight value is only
+            // utilized for !size=full modals, and the value is
+            // always static at 'min-height: 80px'
+            minModalBodyHeightStyle: `${MODAL_BODY_MIN_HEIGHT}px`,
+            // these last three values must first be calculated
             // the first two values get set on modal body
-            minModalBodyHeightStyle: null,
             maxModalBodyHeightStyle: null,
             modalBodyUsableHeight: null,
             modalUsableHeight: null,
@@ -251,10 +251,7 @@ export default class LightningModalBody extends LightningElement {
             this.footerPresent = footerHeight !== 0;
             // now determine behavior: full screen or default
             const shouldUseFullHeight = sizeSetFull && isSmallScreenSize;
-            const updatedValues = this.updateValues(
-                shouldUseFullHeight,
-                values
-            );
+            const updatedValues = this.updateValues(values);
             // set updated values based on behavior
             this.setModalBodyHeight(updatedValues, shouldUseFullHeight);
         }

package/src/lightning/modalFooter/__docs__/modalFooter.md

@@ -6,7 +6,7 @@ Place the `lightning-modal-footer` component after the `lightning-modal-body` co
 
 This sample code shows the expected order of the modal components. The modal content is
 created in a separate component extended from `LightningModal`. See
-[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 This sample's `lightning-modal-footer` includes two `lightning-button` components,
 but you can also use `<button>` elements.
@@ -59,7 +59,7 @@ For example, specify the background color on the footer using the `sds-c-modal-f
 
 See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 
@@ -68,5 +68,5 @@ If you add buttons to the footer, you can use the accessibility attributes descr
 When the modal opens, focus goes to the first interactive element in the modal. If there are no links in the header or any interactive elements
 in the modal body, the first footer button gets initial focus.
 
-See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.
+See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.