Skip to content

Commit

Permalink
Feat(web-twig): Make the preferred height and max height of `ModalDia…
Browse files Browse the repository at this point in the history 
…log` customizable #DS-723

New API options:

- `maxHeightFromTabletUp`
- `preferredHeightOnMobile`
- `preferredHeightFromTabletUp`
  • Loading branch information
@adamkudrna
adamkudrna committed Jun 15, 2023
1 parent c70b276 commit 1ccba92
Show file tree
Hide file tree
Showing 8 changed files with 248 additions and 167 deletions.
5 changes: 4 additions & 1 deletion packages/web-twig/src/Resources/components/Modal/Modal.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@
{# Modal Basic #}
{% include '@components/Modal/stories/ModalBasic.twig' %}

{# Modal with Long Content #}
{% include '@components/Modal/stories/ModalScrollingLongContent.twig' %}

{# Modal with Vertical Body Padding #}
{% include '@components/Modal/stories/ModalVerticalBodyPadding.twig' %}

{# Modal Stacked #}
{% include '@components/Modal/stories/ModalStacked.twig' %}
{% include '@components/Modal/stories/ModalStacking.twig' %}

{# Modal Simple #}
{% include '@components/Modal/stories/ModalSimple.twig' %}
Expand Down
18 changes: 17 additions & 1 deletion packages/web-twig/src/Resources/components/Modal/ModalDialog.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
{%- set props = props | default([]) -%}
{%- set _elementType = props.elementType | default('article') -%}
{%- set _isExpandedOnMobile = props.isExpandedOnMobile ?? true -%}
{%- set _maxHeightFromTabletUp = props.maxHeightFromTabletUp | default(null) -%}
{%- set _preferredHeightOnMobile = props.preferredHeightOnMobile | default(null) -%}
{%- set _preferredHeightFromTabletUp = props.preferredHeightFromTabletUp | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'ModalDialog' -%}
Expand All @@ -22,11 +25,24 @@
'target'
] : [] -%}

{%- set _style = '' -%}
{%- if _maxHeightFromTabletUp -%}
{% set _style = _style ~ '--modal-max-height-tablet: ' ~ _maxHeightFromTabletUp ~ ';' %}
{%- endif -%}
{%- if _preferredHeightOnMobile -%}
{% set _style = _style ~ '--modal-preferred-height-mobile: ' ~ _preferredHeightOnMobile ~ ';' %}
{%- endif -%}
{%- if _preferredHeightFromTabletUp -%}
{% set _style = _style ~ '--modal-preferred-height-tablet: ' ~ _preferredHeightFromTabletUp ~ ';' %}
{%- endif -%}

{# Attributes #}
{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps | join() ~ '"' -%}

<{{ _elementType }}
{{ mainProps(props, _allowedAttributes) }}
{{ styleProp(_styleProps) }}
{{ classProp(_classNames) }}
{{ _styleAttr | raw }}
>
{% block content %}{% endblock %}
</{{ _elementType }}>
11 changes: 7 additions & 4 deletions packages/web-twig/src/Resources/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,13 @@ footer of the dialog.

#### API

| Prop name | Type | Default | Required | Description |
| -------------------- | --------- | --------- | -------- | ------------------------------------------ |
| `elementType` | `string` | `article` | no | HTML tag to render |
| `isExpandedOnMobile` | `boolean` | `true` | no | If the ModalDialog should expand on mobile |
| Prop name | Type | Default | Required | Description |
| ----------------------------- | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------ |
| `elementType` | `string` | `article` | no | HTML tag to render |
| `isExpandedOnMobile` | `boolean` | `true` | no | If the ModalDialog should expand on mobile. Overrides any height defined by `preferredHeightOnMobile`. |
| `maxHeightFromTabletUp` | `string` | `null` | no | Max height of the modal. Accepts any valid CSS value. |
| `preferredHeightOnMobile` | `string` | `null` | no | Preferred height of the modal on mobile. Accepts any valid CSS value. |
| `preferredHeightFromTabletUp` | `string` | `null` | no | Preferred height of the modal on tablet and larger. Accepts any valid CSS value. |

On top of the API options, you can add `data-*` or `aria-*` attributes to
further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,
Expand Down
181 changes: 40 additions & 141 deletions packages/web-twig/src/Resources/components/Modal/stories/ModalBasic.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

<h2 class="docs-Heading">Modal</h2>

<Button data-toggle="modal" data-target="#example_1">
<Button data-toggle="modal" data-target="#example_basic">
Open Modal
</Button>

<ModalComposed id="example_1" titleId="example_1_title">
<ModalComposed id="example_basic" titleId="example_basic_title">
<ModalDialog>
<ModalHeader modalId="example_1" titleId="example_1_title">
<ModalHeader modalId="example_basic" titleId="example_basic_title">
Modal Title
</ModalHeader>
<ModalBody>
Expand All @@ -23,14 +23,14 @@
<!-- Footer alignment demo: start -->
<script>
const setFooterAlignment = (event) => {
const footerElement = document.querySelector('#example_1 .ModalFooter');
const footerElement = document.querySelector('#example_basic .ModalFooter');
footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
footerElement.classList.add(`ModalFooter--${event.target.value}`);
};
const toggleExpandOnMobile = () => {
document.querySelector('#example_1 .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
};
</script>
<form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
Expand All @@ -49,184 +49,83 @@
<ModalFooter description="Optional description">
<Button
data-dismiss="modal"
data-target="#example_1"
data-target="#example_basic"
>
Primary action
</Button>
<Button
color="secondary"
data-dismiss="modal"
data-target="#example_1"
data-target="#example_basic"
>
Secondary action
</Button>
</ModalFooter>
</ModalDialog>
</ModalComposed>

<Button data-toggle="modal" data-target="#example_2">
Open Modal with Long Content
<Button data-toggle="modal" data-target="#example_form">
Open Modal with a Form
</Button>

<ModalComposed id="example_2" titleId="example_2_title">
<ModalDialog>
<ModalHeader modalId="example_2" titleId="example_2_title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
<ModalComposed id="example_form" titleId="example_form_title">
<ModalDialog elementType="form" method="dialog">
<ModalHeader modalId="example_form" titleId="example_form_title">
Modal with a Form
</ModalHeader>
<ModalBody>

<!-- Content: start -->
<TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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?
The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
</p>
<!-- Content: end -->

</ModalBody>
<ModalFooter>
<Button
data-dismiss="modal"
data-target="#example_2"
>
Primary action
</Button>
<Button
color="secondary"
data-dismiss="modal"
data-target="#example_2"
>
Secondary action
</Button>
</ModalFooter>
</ModalDialog>
</ModalComposed>

<Button data-toggle="modal" data-target="#example_scroll_view">
Open Modal with ScrollView
</Button>

<ModalComposed id="example_scroll_view" titleId="example_scroll_view_title">
<ModalDialog>
<ModalHeader modalId="example_scroll_view" titleId="example_scroll_view_title">
Modal with ScrollView
</ModalHeader>
<ScrollView data-toggle="scrollView" indicators="borders">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- Content: end -->

</ModalBody>
</ScrollView>
<ModalFooter>
<Button
data-dismiss="modal"
data-target="#example_scroll_view"
>
<Button type="submit">
Primary action
</Button>
<Button
color="secondary"
data-dismiss="modal"
data-target="#example_scroll_view"
data-target="#example_form"
>
Secondary action
</Button>
</ModalFooter>
</ModalDialog>
</ModalComposed>

<Button data-toggle="modal" data-target="#example_3">
Open Modal with a Form
<Button data-toggle="modal" data-target="#example_custom_height">
Open Modal with Custom Height
</Button>

<ModalComposed id="example_3" titleId="example_3_title">
<ModalDialog elementType="form" method="dialog">
<ModalHeader modalId="example_3" titleId="example_3_title">
Modal with a Form
<ModalComposed id="example_custom_height" titleId="example_custom_height_title">
<ModalDialog
elementType="form"
isExpandedOnMobile={false}
maxHeightFromTabletUp="700px"
method="dialog"
preferredHeightOnMobile="400px"
preferredHeightFromTabletUp="500px"
>
<ModalHeader modalId="example_custom_height" titleId="example_custom_height_title">
Modal with Custom Height
</ModalHeader>
<ModalBody>

<!-- Content: start -->
<TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
<p>
The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
<p class="d-tablet-none">
This modal has a custom height of <code>400px</code>.
<br /><br />
The max height cannot be customized on mobile though.
</p>
<p class="d-none d-tablet-block">
This modal has a custom height of <code>500px</code>.
<br /><br />
The max height of this modal is <code>700px</code>.
</p>
<!-- Content: end -->

Expand All @@ -238,7 +137,7 @@
<Button
color="secondary"
data-dismiss="modal"
data-target="#example_3"
data-target="#example_custom_height"
>
Secondary action
</Button>
Expand Down
Loading

0 comments on commit 1ccba92

Please sign in to comment.