Feat(web-twig): Add disabled backdrop click option to Modal component

- After adding `backdropCloseDisabled="true"` prop to Modal component, the backdrop click no longer close modal
lmc-eu · Oct 2, 2023 · 7b4420d · 7b4420d
1 parent 5e9d08a
commit 7b4420d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig b/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig
@@ -14,4 +14,8 @@
         {% include '@components/Modal/stories/ModalStacking.twig' %}
     </DocsSection>
 
+    <DocsSection title="Disabled Backdrop Click">
+        {% include '@components/Modal/stories/ModalDisabledBackdrop.twig' %}
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.twig b/packages/web-twig/src/Resources/components/Modal/Modal.twig
@@ -2,13 +2,16 @@
 {%- set props = props | default([]) -%}
 {%- set _id = props.id -%}
 {%- set _titleId = props.titleId | default(null) -%}
+{%- set _backdropCloseDisabled = props.backdropCloseDisabled | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Modal' -%}
 
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 {%- set _ariaLabelledbyAttr = _titleId ? 'aria-labelledby="' ~ _titleId | escape('html_attr') ~ '"' : null -%}
+{%- set _dataBackdropCloseDisabledAttr = 
+    _backdropCloseDisabled ? 'data-spirit-backdrop-close-disabled="' ~ _backdropCloseDisabled | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -21,6 +24,7 @@
     {{ classProp(_classNames) }}
     {{ _idAttr | raw }}
     {{ _ariaLabelledbyAttr | raw }}
+    {{ _dataBackdropCloseDisabledAttr | raw }}
 >
     {% block content %}{% endblock %}
 </dialog>
diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md
@@ -26,10 +26,11 @@ accessible name for the dialog.
 
 ### API
 
-| Name      | Type     | Default | Required | Description                        |
-| --------- | -------- | ------- | -------- | ---------------------------------- |
-| `id`      | `string` | —       | ✔        | Modal ID                           |
-| `titleId` | `string` | `null`  | ✕        | ID of the title inside ModalHeader |
+| Name                    | Type     | Default | Required | Description                                       |
+| ----------------------- | -------- | ------- | -------- | ------------------------------------------------- |
+| `backdropCloseDisabled` | `bool`   | `false` | ✕        | Disable modal close when clicking on the backdrop |
+| `id`                    | `string` | —       | ✔        | Modal ID                                          |
+| `titleId`               | `string` | `null`  | ✕        | ID of the title inside ModalHeader                |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend the component's descriptiveness and accessibility. Also, UNSAFE styling props are available,

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdrop.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdrop.twig
@@ -0,0 +1,33 @@
+<Button data-spirit-toggle="modal" data-spirit-target="#example_disabled_backdrop_click">
+    Open Modal
+</Button>
+
+<Modal id="example_disabled_backdrop_click" titleId="example_disabled_backdrop_click_title" backdropCloseDisabled="true">
+    <ModalDialog>
+        <ModalHeader modalId="example_disabled_backdrop_click" titleId="example_disabled_backdrop_click_title">
+            Modal Title
+        </ModalHeader>
+        <ModalBody>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                provident unde. Eveniet, iste, molestiae?
+            </p>
+        </ModalBody>
+        <ModalFooter>
+            <Button
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example_disabled_backdrop_click"
+            >
+                Primary action
+            </Button>
+            <Button
+                color="secondary"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example_disabled_backdrop_click"
+            >
+                Secondary action
+            </Button>
+        </ModalFooter>
+    </ModalDialog>
+</Modal>