=== Background goal
The Dialog component should be updated to accept slots for header subtitle and footer text to cover the following use cases:
**Abstract Wikipedia**
| {F35848062} | {F35887875} |
| Header subtitle | Footer text |
**Other use cases in production**
| {F36456769} |
| Footer text above the buttons |
In other use cases, a checkbox is placed near the next or main button to check permanent actions like “Don’t show this again” or “Remember me”
{F36456779}
==== Development Considerations
Initially we considered allowing more open-ended customization of the Dialog title and header via Vue's `<slot>` feature. For now we are not going to introduce this, handling things with a new property instead. If additional customization abilities are needed we can consider adding a `<slot>` for the Dialog title in the future.
==== Open questions
- Footer text:
- It will be placed above buttons in order to follow the right reading order and ensure that screen readers work correctly.
- Footer text size will be 14px size and `color-subtle` on both desktop and mobile. On desktop the body and footer texts will be the same size (unless we increase the base font to 16px). On mobile, as we use 16px base font the body text will be 16px and the footer text will be 14px, so the difference between both texts will be more obvious.
- Removed dividers property by default (dividers will be visible just when scrolling).
- Header (bottom) and Footer (top) paddings: used `32px` as separation between Header, Body and Footer. This padding will be `16px `when scrolling so we save space in the header and footer
- Header subtitle will be collapsed when scrolling to save space.
- A permanent action could appear in the footer section (e.g. checkbox with "Don't show again" or a button to configure the dialog properties)
==== Proposal
| {F36563602} | {F36563601} | {F36563603} |
| A subtitle could appear below the title. | Footer text could appear above the buttons. | A permanent action could appear in the footer section next to the buttons. |
==== Design spec
| [[ https://www.figma.com/file/8FOPeZwE4NKQsHnl2cRu29/Dialog---T284838?node-id=114%3A331&t=8CHpXBC9ECACznFZ-11 | Component spec sheet ]] |
==== Acceptance Criteria
[-] Create a new Figma spec version for Dialog component with header subtitle and footer text and add it in this task
[] Implement Codex demo Dialog component with `subtitle` and `footer` properties
[] Update the [[ https://design.wikimedia.org/style-guide/components/dialogs.html | DSG page ]] with the new paddings and use cases