BREAKING CHANGE(web-twig): Remove feature flag for the uniform `Modal…

…` variant #DS-1181 The uniform appearance of `Modal` is now default. The docked variant can be turned on using the `isDockedOnMobile` option. See the Modal: ModalDialog Uniform Appearance section in the web-twig package Migration Guide to version 3.
lmc-eu · Jun 10, 2024 · 3389643 · 3389643
1 parent 1788306
commit 3389643
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 112 deletions.
diff --git a/packages/web-twig/DEPRECATIONS-v3.md b/packages/web-twig/DEPRECATIONS-v3.md
@@ -137,15 +137,6 @@ non-scrollable by default. It will be possible to re-enable the inside scrolling
 
 Add `isScrollable` prop to the `ModalDialog` component.
 
-### ModalDialog Uniform Appearance
-
-The uniform `ModalDialog` appearance will replace current behavior in the next major release. Current mobile appearance will
-remain accessible via the `isDockedOnMobile` property.
-
-#### Migration Guide
-
-Add `isDockedOnMobile` prop to the `ModalDialog` component.
-
 ### Alert `danger` Icon
 
 The `warning` icon as a fallback for the `danger` color in the Alert component will be removed in favor of the `danger` icon.

diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig b/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig
@@ -17,14 +17,22 @@
             footerElement.classList.add(`ModalFooter--${event.target.value}`);
         };
 
-        const toggleDockOnMobile = (selector, dependingInputSelector) => {
-            const dependingInputElement = document.querySelector(dependingInputSelector);
-            const dependingLabelElement = dependingInputElement.closest('label');
-            const modalDialogElement = document.querySelector(selector);
-
-            modalDialogElement.classList.toggle('ModalDialog--dockOnMobile');
-            dependingInputElement.disabled = !dependingInputElement.disabled;
-            dependingLabelElement.classList.toggle('Checkbox--disabled');
+        const toggleDockOnMobile = (selector, dependingInputSelectors) => {
+            const dependingInputElements = document.querySelectorAll(dependingInputSelectors);
+
+            document.querySelector(selector).classList.toggle('ModalDialog--dockOnMobile');
+
+            dependingInputElements.forEach((element) => {
+                element.disabled = !element.disabled;
+
+                if (element.type == 'checkbox') {
+                    element.closest('label').classList.toggle('Checkbox--disabled');
+                }
+
+                if (element.type == 'radio') {
+                    element.closest('label').classList.toggle('Radio--disabled');
+                }
+            });
         }
 
         const toggleExpandOnMobile = (selector) => {
@@ -52,8 +60,4 @@
         {% include '@components/Modal/stories/ModalDisabledBackdropClick.twig' %}
     </DocsSection>
 
-    <DocsSection title="Feature Flag: Uniform Modal on Mobile">
-        {% include '@components/Modal/stories/ModalUniformModalOnMobile.twig' %}
-    </DocsSection>
-
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md
@@ -84,13 +84,23 @@ boundaries.
 
 👉 See the [Scrolling Long Content](#scrolling-long-content) section for more information on scroll control of Modals.
 
-### Expand on Mobile Screens
+### Docked Modals on Mobile Screens
 
-We recommend expanding the dialog on mobile screens using the `isExpandedOnMobile` option. If you omit the option, the
-dialog shrinks to fit the height of its content (if smaller than the viewport).
+On mobile screens, Modal can be docked to the bottom of the viewport using the `isDockedOnMobile` option.
 
 ```twig
-<ModalDialog isExpandedOnMobile>
+<ModalDialog isDockedOnMobile>
+  …
+</ModalDialog>
+```
+
+#### Expanded Variant
+
+We recommend expanding the docked dialog on mobile screens using the `isExpandedOnMobile` option.
+If you omit the option, the dialog shrinks to fit the height of its content (if smaller than the viewport).
+
+```twig
+<ModalDialog isDockedOnMobile isExpandedOnMobile>
   …
 </ModalDialog>
 ```
@@ -382,21 +392,6 @@ When you put it all together:
 </Modal>
 ```
 
-## Feature Flag: Uniform Appearance on All Breakpoints
-
-The uniform appearance of modal dialog on all breakpoints is disabled by default. To enable it, either set the
-`$modal-enable-uniform-dialog` Sass feature flag to `true` or use the `spirit-feature-modal-enable-uniform-dialog` CSS
-class on any parent of the modal.
-
-For more info, see main [README][readme-feature-flags].
-
-### ⚠️ DEPRECATION NOTICE
-
-The uniform dialog appearance will replace current behavior in the next major release. Current mobile appearance will
-remain accessible via the `isDockedOnMobile` property.
-
-[What are deprecations?][readme-deprecations]
-
 ## JavaScript Plugin
 
 For full functionality, you need to provide Spirit JavaScript:

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -17,26 +17,31 @@
             </p>
 
             <!-- Modal alignment demo: start -->
-            <form onchange="setModalAlignment(event, '#example-basic')" class="d-none d-tablet-block mb-600">
-                <div>Modal alignment (from tablet up):</div>
+            <form onchange="setModalAlignment(event, '#example-basic')" class="mb-600">
+                <div>Modal alignment:</div>
                 <Radio id="modal-alignment-top" marginRight="600" label="Top" value="top" name="modal-alignment" autocomplete="off" />
                 <Radio id="modal-alignment-center" marginRight="600" label="Center" value="center" name="modal-alignment" autocomplete="off" isChecked />
                 <Radio id="modal-alignment-bottom" marginRight="600" label="Bottom" value="bottom" name="modal-alignment" autocomplete="off" />
             </form>
             <!-- Modal alignment demo: end -->
 
             <!-- Footer alignment demo: start -->
-            <form onchange="setFooterAlignment(event, '#example-basic .ModalFooter')" class="d-none d-tablet-block">
+            <form onchange="setFooterAlignment(event, '#example-basic .ModalFooter')" class="d-none d-tablet-block mb-600">
                 <div>Footer alignment (from tablet up):</div>
                 <Radio id="footer-alignment-left" marginRight="space-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
                 <Radio id="footer-alignment-center" marginRight="space-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
                 <Radio id="footer-alignment-right" marginRight="space-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
             </form>
-            <form class="d-tablet-none">
-                <Checkbox id="expand-on-mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile('#example-basic .ModalDialog')" autocomplete="off" isChecked />
-            </form>
             <!-- Footer alignment demo: end -->
 
+            <!-- Modal features demo: start -->
+            <Stack hasSpacing elementType="form">
+                <Checkbox id="modal-docked" label="Dock on mobile" onChange="toggleDockOnMobile('#example-basic > .ModalDialog', '#modal-expanded')" autocomplete="off" />
+                <Checkbox id="modal-expanded" label="Expand on mobile (docked only)" onChange="toggleExpandOnMobile('#example-basic > .ModalDialog')" autocomplete="off" isChecked isDisabled />
+                <Checkbox id="modal-non-scrolling" label="Scrolling inside" onChange="toggleScrolling('#example-basic > .ModalDialog')" autocomplete="off" isChecked />
+            </Stack>
+            <!-- Modal features demo: end -->
+
             <!-- Content: end -->
 
         </ModalBody>

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalUniformModalOnMobile.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalUniformModalOnMobile.twig