diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md index db51511e87..60a1b960a5 100644 --- a/packages/web/src/scss/components/Modal/README.md +++ b/packages/web/src/scss/components/Modal/README.md @@ -60,6 +60,9 @@ This is useful for Modals with dynamic content, e.g. a list of items that can be ``` +👉 Please note the preferred height options are ignored when scrolling inside ModalDialog is +[turned off](#disable-scrolling-inside-modaldialog). + 👉 Please note the custom height values are considered **preferred:** Modal will not expand beyond the viewport height. ### Custom Max Height @@ -82,7 +85,7 @@ You can use the custom property `--modal-max-height-tablet` to override the max ``` -👉 Please note the max height is ignored when scrolling inside ModalDialog is [turned off](#non-scrolling-modal-dialog). +👉 Please note the max height is ignored when scrolling inside ModalDialog is [turned off](#disable-scrolling-inside-modaldialog). 👉 Please note the max height on mobile screens is currently not customizable. Let us know if you need this feature! 🙏 @@ -282,12 +285,12 @@ scrolling, e.g.: ``` -### Non-Scrolling Modal Dialog +### Disable Scrolling Inside ModalDialog -Scrolling inside ModalDialog can be turned off by adding the `ModalDialog--nonScrolling` modifier class: +Scrolling inside ModalDialog can be turned off by adding the `ModalDialog--nonScrollable` modifier class: ```html -
+
``` @@ -295,7 +298,13 @@ Scrolling inside ModalDialog can be turned off by adding the `ModalDialog--nonSc This way, the ModalBody will expand to fit the height of its content and the whole ModalDialog will scroll in case the content is longer than user's viewport. -👉 Please note that this modifier class can produce unexpected results when used with ScrollView. +👉 Please note that this modifier class can produce unexpected results when used in combination with ScrollView. + +#### ⚠️ DEPRECATION NOTICE + +The `.ModalDialog--nonScrollable` modifier will be removed in the next major release and the ModalDialog will be made +non-scrollable by default. It will be possible to re-enable the inside scrolling by adding the +`.ModalDialog--scrollable` modifier class (which will remain the recommended default usage). ## Stacking Modals diff --git a/packages/web/src/scss/components/Modal/_ModalDialog.scss b/packages/web/src/scss/components/Modal/_ModalDialog.scss index 629f677739..cbbf30c771 100644 --- a/packages/web/src/scss/components/Modal/_ModalDialog.scss +++ b/packages/web/src/scss/components/Modal/_ModalDialog.scss @@ -6,6 +6,7 @@ // 5. Unfortunately, the open state cannot be part of the parent `-docked-modal-dialog()` mixin because it's not // possible to generate selector for the feature class scenario. // 6. Override bottom padding of parent `.Modal` in the docked variant. +// 7. Override the min-height of the expanded docked variant. @use 'sass:map'; @use '../../settings/feature-flags'; @@ -53,13 +54,12 @@ width: theme.$dialog-uniform-width; max-width: calc(100% - #{theme.$padding-x}); height: theme.$dialog-uniform-height; - max-height: theme.$dialog-uniform-max-height; + min-height: unset; // 7. @deprecated Can be removed once the uniform modal dialog has been made default. border-radius: theme.$dialog-border-radius; } @include breakpoint.up(map.get(theme.$breakpoints, tablet)) { - height: theme.$dialog-uniform-height; - max-height: theme.$dialog-uniform-max-height-tablet; + height: theme.$dialog-uniform-height-tablet; } @include breakpoint.up(map.get(theme.$breakpoints, desktop)) { @@ -67,6 +67,16 @@ } } +@mixin -scrollable-uniform-modal-dialog($from-breakpoint) { + @if $from-breakpoint == 0 { + max-height: theme.$dialog-uniform-max-height; + } + + @include breakpoint.up(map.get(theme.$breakpoints, tablet)) { + max-height: theme.$dialog-uniform-max-height-tablet; + } +} + @mixin -docked-modal-dialog() { @include breakpoint.down(map.get(theme.$breakpoints, tablet)) { --modal-top: auto; @@ -77,7 +87,6 @@ width: theme.$dialog-width; max-width: none; height: theme.$dialog-docked-height; - max-height: theme.$dialog-docked-expanded-height; border-radius: theme.$dialog-border-radius theme.$dialog-border-radius 0 0; } } @@ -91,24 +100,21 @@ @mixin -expand-docked-modal-dialog() { @include breakpoint.down(map.get(theme.$breakpoints, tablet)) { - height: theme.$dialog-docked-expanded-height; + min-height: theme.$dialog-docked-expanded-height; } } -@mixin -non-scrolling-modal-dialog() { - max-height: none; -} - -@mixin -non-scrolling-docked-modal-dialog() { +@mixin -scrollable-docked-modal-dialog() { @include breakpoint.down(map.get(theme.$breakpoints, tablet)) { - height: theme.$dialog-docked-height; + max-height: theme.$dialog-docked-expanded-height; } } -@mixin -non-scrolling-docked-expanded-modal-dialog() { - @include breakpoint.down(map.get(theme.$breakpoints, tablet)) { - min-height: theme.$dialog-docked-expanded-height; - } +// @deprecated The non-scrollable modal dialog is deprecated and will be removed in the next major release. +// Migration: In CSS, make the modal dialog non-scrollable by default so scrolling inside is turned on by a modifier class. +@mixin -non-scrollable-modal-dialog() { + height: auto; + max-height: none; } .ModalDialog { @@ -118,9 +124,12 @@ // Migration: Remove the feature flag and make the uniform dialog the default. @if feature-flags.$modal-enable-uniform-dialog { @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile)); + @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile)); } @else { @include -docked-modal-dialog(); + @include -scrollable-docked-modal-dialog(); @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, tablet)); + @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, tablet)); [open] > & { @include -open-docked-modal-dialog(); @@ -128,10 +137,6 @@ } } -.ModalDialog--nonScrolling { - @include -non-scrolling-modal-dialog(); -} - // @deprecated The "uniform" dialog variant is deprecated and will be removed in the next major release. // Migration: Remove the feature flag and make the uniform dialog the default. @if feature-flags.$modal-enable-uniform-dialog { @@ -147,26 +152,18 @@ @include -expand-docked-modal-dialog(); } - .ModalDialog--dockOnMobile.ModalDialog--nonScrolling { - @include -non-scrolling-modal-dialog(); - @include -non-scrolling-docked-modal-dialog(); - } - - // stylelint-disable-next-line selector-max-class -- Only target the expanded docked variant. - .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile.ModalDialog--nonScrolling { - @include -non-scrolling-docked-expanded-modal-dialog(); + .ModalDialog--nonScrollable { + @include -non-scrollable-modal-dialog(); } } @else { .spirit-feature-modal-enable-uniform-dialog .ModalDialog { @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile)); + @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile)); } .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile { @include -docked-modal-dialog(); - } - - .spirit-feature-modal-enable-uniform-dialog .ModalDialog--nonScrolling { - @include -non-scrolling-modal-dialog(); + @include -scrollable-docked-modal-dialog(); } .spirit-feature-modal-enable-uniform-dialog [open] > .ModalDialog--dockOnMobile { @@ -178,16 +175,12 @@ .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile { @include -expand-docked-modal-dialog(); } + // stylelint-enable selector-max-class - .ModalDialog--nonScrolling, - .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile.ModalDialog--nonScrolling { - @include -non-scrolling-docked-modal-dialog(); - } - - .ModalDialog--expandOnMobile.ModalDialog--nonScrolling, - .spirit-feature-modal-enable-uniform-dialog - .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile.ModalDialog--nonScrolling { - @include -non-scrolling-docked-expanded-modal-dialog(); + // @deprecated The non-scrollable modal dialog is deprecated and will be removed in the next major release. + // Migration: In CSS, make the modal dialog non-scrollable by default so scrolling inside is turned on by a modifier class. + .ModalDialog--nonScrollable, + .spirit-feature-modal-enable-uniform-dialog .ModalDialog--nonScrollable { + @include -non-scrollable-modal-dialog(); } - // stylelint-enable selector-max-class } diff --git a/packages/web/src/scss/components/Modal/_theme.scss b/packages/web/src/scss/components/Modal/_theme.scss index 49c143a03a..929519ff58 100644 --- a/packages/web/src/scss/components/Modal/_theme.scss +++ b/packages/web/src/scss/components/Modal/_theme.scss @@ -28,6 +28,7 @@ $dialog-shadow: tokens.$shadow-300; // Migration: Rename the variables containing the `uniform` keyword to remove it. $dialog-uniform-width: 640px; $dialog-uniform-height: var(--modal-preferred-height-mobile, min-content); +$dialog-uniform-height-tablet: var(--modal-preferred-height-tablet, min-content); $dialog-uniform-max-height: min(var(--modal-max-height-mobile, 600px), calc(100dvh - #{2 * $padding-y})); $dialog-uniform-max-height-tablet: min(var(--modal-max-height-tablet, 600px), calc(100dvh - #{2 * $padding-y})); diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html index 864c4ff38a..54617ff63e 100644 --- a/packages/web/src/scss/components/Modal/index.html +++ b/packages/web/src/scss/components/Modal/index.html @@ -29,7 +29,7 @@ } const toggleScrolling = (selector) => { - document.querySelector(selector).classList.toggle('ModalDialog--nonScrolling'); + document.querySelector(selector).classList.toggle('ModalDialog--nonScrollable'); } @@ -580,14 +580,14 @@

aria-controls="example-non-scrolling-modal" aria-expanded="false" > - Open Non-Scrolling Modal + Open Modal with Disabled Scrolling Inside -
+
@@ -991,9 +991,9 @@

Modal Title