EZP-30294: Added Modals component to UI Guidelines

[inakijv]

Question	Answer
JIRA Ticket	EZP-30294
Versions	2.2

[inakijv]

Ping @damianz5 two things you may check:

• It was difficult to get the backdrop modal given the Mkdocs context. I added a small .js script for it (see ez-guidelines-modals.js);
• I have tried different options for "freezing" modals background (overflow: hidden) while keeping modals position as in the app, but solutions I have tested out needed a previous overflow: auto; CSS property for body, for instance, changing the behavior of Mkdocs' side menu bars. So, right now background is still scrollable.

[DominikaK]

Suggested change

	<div>We use modals as component for displaying specific information directly related to the content item currently checked and that needs an interaction from the user.</div>
	<div>We use modals as components for displaying specific information directly related to the content item currently checked which needs interaction from the user.</div>

[DominikaK]

Suggested change

<div class="mgt-minus-3 mgb-5">Right below you have a modal (we have removed interaction from it). This is a modal use case that contains the three standard elements that we usually add to it: `modal-header`, `modal-body`, and `modal-footer`. All of our modals include `modal-header`s with dismiss actions as standard best practice, and often (but not always) they also have explicit dismiss action buttons.</div>

<div class="mgt-minus-3 mgb-5">Right below you have a modal (with interaction removed). This use case contains the three standard elements that we usually add to it: `modal-header`, `modal-body`, and `modal-footer`. All of our modals include a `modal-header` with dismiss actions as standard best practice. Often (but not always) they also have explicit dismiss action buttons.</div>

[DominikaK]

Suggested change

	The objective of this component is to showcase `modal`s structures. Content inside them is representative, but not an accurate representation of a real use case.
	The objective of this component is to showcase `modal` structures. Content inside them is representative, but not an accurate representation of a real use case.

[DominikaK]

Suggested change

	!!! info
	!!! note

(we do not use "info" boxes throughout our doc)

[DominikaK]

Suggested change

	Remember when combining two buttons together to emphasize the preferred primary action button. We add class `font-weight-bold` for the primary button. Check more in [Buttons - Set of two buttons](http://127.0.0.1:8000/guidelines/components/buttons/#set-of-two-buttons).
	Remember when combining two buttons together to emphasize the preferred primary action button. We add class `font-weight-bold` for the primary button. Check more in [Buttons - Set of two buttons](buttons.md#set-of-two-buttons).

[DominikaK]

Suggested change

	<div class="mgt-minus-3 mgb-5">Removing and deleting content are important actions in our application. Whereas in the first one the content item will be stil retrievable in the Trash, in the second one the content item will be completely erased. Given the significant effects that these actions can have, their purpose have to be highlighted with a specific group of modals.</div>
	<div class="mgt-minus-3 mgb-5">Removing and deleting content are important actions in our application. Whereas in the former case the Content item is later retrievable from the Trash, in the second case the Content item is completely erased. Given the significant effects that these actions can have, their purpose have to be highlighted with a specific group of modals.</div>

[DominikaK]

Suggested change

	All Send to Trash modals should have the same styling in order to help users quickly identify what is the modal's message about. We don't add `.modal-title` to the header and we position `.modal-footer` set of two buttons to the right.
	All Send to Trash modals should have the same styling in order to help users quickly identify what the modal's message is about. We don't add `.modal-title` to the header and we position `.modal-footer` set of two buttons to the right.

[DominikaK]

Suggested change

	##<div class="mgt-3 header-line">Modals with header</div>
	##<div class="mgt-3 header-line">Modals with headers</div>

[DominikaK]

Suggested change

	<div class="mgt-minus-3">We recommend to use them when you have to display listed information in tables and you want users to interact with the information contained within that specific table through action buttons (either the whole row or specific buttons). Hence, there is no need to add more interaction buttons, like in `.modal-footer`.</div>
	<div class="mgt-minus-3">We recommend using them when you have to display listed information in tables and you want users to interact with the information contained within that specific table through action buttons (either the whole row or specific buttons). Hence, there is no need to add more interaction buttons, like in `.modal-footer`.</div>

[DominikaK]

Suggested change

	##<div class="mgt-3 header-line">Modals with header and footer</div>
	##<div class="mgt-3 header-line">Modals with headers and footers</div>

[inakijv]

Added Doc review. Thank you @DominikaK!