Skip to content

Commit

Permalink
Fix(web-twig): Dropdown can now be placed inside a non-scrollable `…
Browse files Browse the repository at this point in the history 
…Modal` #DS-939
  • Loading branch information
@adamkudrna
adamkudrna committed Apr 16, 2024
1 parent 641f5a4 commit a4e569c
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 9 deletions.
7 changes: 7 additions & 0 deletions packages/web-twig/src/Resources/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,13 @@ the state of the form and closing the dialog.
</ModalDialog>
```

### Dropdowns in Modal

Dropdowns can be safely used inside **non-scrollable** Modals so that the Dropdown popover is not clipped by the Modal's
boundaries.

👉 See the [Scrolling Long Content](#scrolling-long-content) section for more information on scroll control of Modals.

### Expand on Mobile Screens

We recommend expanding the dialog on mobile screens using the `isExpandedOnMobile` option. If you omit the option, the
Expand Down
6 changes: 3 additions & 3 deletions packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
<!-- 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>
<Radio id="modal-alignment-top" UNSAFE_className="mr-600" label="Top" value="top" name="modal-alignment" autocomplete="off" />
<Radio id="modal-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="modal-alignment" autocomplete="off" isChecked />
<Radio id="modal-alignment-bottom" UNSAFE_className="mr-600" label="Bottom" value="bottom" name="modal-alignment" autocomplete="off" />
<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 -->

Expand Down
53 changes: 53 additions & 0 deletions packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,3 +199,56 @@
</ModalFooter>
</ModalDialog>
</Modal>

<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown">
Open Non-Scrolling Modal with Dropdown
</Button>

<Modal id="example-dropdown" titleId="example-dropdown-title">
<ModalDialog isScrollable={ false }>
<ModalHeader modalId="example-dropdown" titleId="example-dropdown-title">
Modal Title
</ModalHeader>
<ModalBody>

<!-- Content: start -->
<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>
<DropdownWrapper>
<Button
color="secondary"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdown-in-modal"
data-spirit-autoclose="true"
>
Dropdown
</Button>
<Dropdown id="dropdown-in-modal">
<Item elementType="a" href="#" label="Action" />
<Item elementType="a" href="#" label="Another action" />
<Item elementType="a" href="#" label="Something else here" />
</Dropdown>
</DropdownWrapper>
<!-- Content: end -->

</ModalBody>
<ModalFooter description="Optional description">
<Button
data-spirit-dismiss="modal"
data-spirit-target="#example-dropdown"
>
Primary action
</Button>
<Button
color="secondary"
data-spirit-dismiss="modal"
data-spirit-target="#example-dropdown"
>
Secondary action
</Button>
</ModalFooter>
</ModalDialog>
</Modal>
12 changes: 6 additions & 6 deletions packages/web-twig/src/Resources/components/Modal/stories/ModalUniformModalOnMobile.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@
<!-- Modal alignment demo: start -->
<form onchange="setModalAlignment(event, '#example-uniform')" class="mb-600">
<div>Modal alignment:</div>
<Radio id="modal-uniform-alignment-top" UNSAFE_className="mr-600" label="Top" value="top" name="modal-alignment" autocomplete="off" />
<Radio id="modal-uniform-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="modal-alignment" autocomplete="off" isChecked />
<Radio id="modal-uniform-alignment-bottom" UNSAFE_className="mr-600" label="Bottom" value="bottom" name="modal-alignment" autocomplete="off" />
<Radio id="modal-uniform-alignment-top" marginRight="600" label="Top" value="top" name="modal-alignment" autocomplete="off" />
<Radio id="modal-uniform-alignment-center" marginRight="600" label="Center" value="center" name="modal-alignment" autocomplete="off" isChecked />
<Radio id="modal-uniform-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-uniform .ModalFooter')" class="d-none d-tablet-block mb-600">
<div>Footer alignment (from tablet up):</div>
<Radio id="footer-uniform-alignment-left" UNSAFE_className="mr-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
<Radio id="footer-uniform-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
<Radio id="footer-uniform-alignment-right" UNSAFE_className="mr-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
<Radio id="footer-uniform-alignment-left" marginRight="600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
<Radio id="footer-uniform-alignment-center" marginRight="600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
<Radio id="footer-uniform-alignment-right" marginRight="600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
</form>
<!-- Footer alignment demo: end -->

Expand Down

0 comments on commit a4e569c

Please sign in to comment.