diff --git a/src/pages/components/modal/images/modal-style-1.png b/src/pages/components/modal/images/modal-style-1.png index 4c04b3e51f9..12a9c29ddaa 100644 Binary files a/src/pages/components/modal/images/modal-style-1.png and b/src/pages/components/modal/images/modal-style-1.png differ diff --git a/src/pages/components/modal/images/modal-style-2.png b/src/pages/components/modal/images/modal-style-2.png index fb68d380971..ae4b1865763 100644 Binary files a/src/pages/components/modal/images/modal-style-2.png and b/src/pages/components/modal/images/modal-style-2.png differ diff --git a/src/pages/components/modal/images/modal-style-3.png b/src/pages/components/modal/images/modal-style-3.png index 88fca010b8d..f982a7f1767 100644 Binary files a/src/pages/components/modal/images/modal-style-3.png and b/src/pages/components/modal/images/modal-style-3.png differ diff --git a/src/pages/components/modal/images/modal-style-4.png b/src/pages/components/modal/images/modal-style-4.png index 01c05ceab10..5cbf3f77a5a 100644 Binary files a/src/pages/components/modal/images/modal-style-4.png and b/src/pages/components/modal/images/modal-style-4.png differ diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index 1b08261e951..c4d6be8d0b7 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -36,51 +36,138 @@ Modal titles and labels should be set in sentence case. Keep all titles and labe | `.bx--modal-close__icon` | height, width | 16 x 16 | – | | `.bx--modal-header__label` | margin-bottom | 4 / 0.25 | `$spacing-02` | | `.bx--modal-header` | padding top, padding left | 16 / 1 | `$spacing-05` | -| `.bx--modal-header` | margin-bottom | 8 / 0.5 | `$spacing-03` | -| `.bx--modal-content` | width | 75% | – | +| `.bx--modal-header` | margin-bottom | 16 / 1 | `$spacing-05` | | `.bx--modal-content` | padding-left | 16 / 1 | `$spacing-05` | +| `.bx--modal-content` | padding-right | 20% | – | | `.bx--modal-content` | margin-bottom | 48 / 3 | `$spacing-09` | -| `.bx--btn--primary` | width | 50% | – | -| `.bx--btn--secondary` | width | 50% | – | -
+ + -![Structure and spacing measurements for passive modal](images/modal-style-1.png) +![Structure and spacing measurements for a passive modal](images/modal-style-1.png) -
+ + Structure and spacing measurements for a passive modal | px / rem -
+ + -![Structure and spacing measurements for transactional modal elements](images/modal-style-2.png) +![Structure and spacing measurements for a transactional modal](images/modal-style-2.png) -
+ + Structure and spacing measurements for a transactional modal | px / rem -
+### Margin-right -![Structure and spacing measurements for input modal elements](images/modal-style-4.png) +Modals that are 36% width and larger have a `margin-right: 20%` (margin percentage is based off the width of the modal window). If the modal is smaller than 36% then it has a fixed `margin-right: 16px/1rem`. Body copy, including titles, in a modal alway follows the 20% margin-right rule. However, inputs and other components may still expanded the full width of modal window. -
+ + + +![Margin-right for modals less than 36% and greater than 36%](images/modal-style-3.png) + + + - Structure and spacing measurements for a input modal | px / rem + Margin-right for modals less than 36% (left) and greater than 36% (right). -### Mobile + + +## Sizes + +There are four modal sizes: **xs, small, default, large**. Each modal size has a responsive width that changes based on the browser size. As the browser decreases, the modal width percentage increases thus maintaining a proper ratio between the modal and browser. Modal widths are defined as percentages of the browser but will still align to columns on the 2x grid. + + + + +![Modal sizes](images/modal-usage-sizes.png) + + + + + + + +### XS + +| Breakpoint | Percentage width | Column span | Margin-right | +| ---------- | ---------------- | ----------- | ------------ | +| 1584 | 24% | 4 of 16 | 16px / 1rem | +| 1312 | 24% | 4 of 16 | 16px / 1rem | +| 1056 | 32% | 5 of 16 | 16px / 1rem | +| 672 | 48% | 4 of 8 | 16px / 1rem | +| 320 | 100% | 4 of 4 | 16px / 1rem | -Modals should be full screen on mobile. +### Small + +| Breakpoint | Percentage width | Column span | Margin-right | +| ---------- | ---------------- | ----------- | ------------ | +| 1584 | 36% | 6 of 16 | 20% | +| 1312 | 36% | 6 of 16 | 20% | +| 1056 | 42% | 7 of 16 | 16px / 1rem | +| 672 | 60% | 5 of 8 | 16px / 1rem | +| 320 | 100% | 4 of 4 | 16px / 1rem | + +### Default + +| Breakpoint | Percentage width | Column span | Margin-right | +| ---------- | ---------------- | ----------- | ------------ | +| 1584 | 48% | 8 of 16 | 20% | +| 1312 | 48% | 8 of 16 | 20% | +| 1056 | 60% | 10 of 16 | 20% | +| 672 | 84% | 7 of 8 | 20% | +| 320 | 100% | 4 of 4 | 16px / 1rem | + +### Large + +| Breakpoint | Percentage width | Column span | Margin-right | +| ---------- | ---------------- | ----------- | ------------ | +| 1584 | 72% | 12 of 16 | 20% | +| 1312 | 72% | 12 of 16 | 20% | +| 1056 | 84% | 14 of 16 | 20% | +| 672 | 96% | 8 of 8 | 20% | +| 320 | 100% | 4 of 4 | 16px / 1rem | + +### Max sizes + +Each modal size has a max height and width in order to maintain a proper window ratio. + +| Modal size | Max-height | Max-width | +| ----------- | ---------- | --------- | +| **XS** | 48% | 420px | +| **Small** | 72% | 576px | +| **Default** | 84% | 768px | +| **Large** | 96% | – | + + + + +### Mobile -
+On mobile devices, at the smaller break points the max-height does not apply. The height may either be 100% of the screen or maintain the height defined by the content while sticking to the bottom of the mobile screen. -![Modal on mobile](images/modal-style-3.png) + + -
+![Modal sizes](images/modal-style-4.png) -Example of a modal on a mobile screen + + diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index c014d6077a5..90ca2a83f1a 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -14,8 +14,8 @@ Modals focus the user’s attention exclusively on one task or piece of informat General guidance Anatomy -Modal sizes Variations +Modal sizes @@ -61,65 +61,6 @@ The modal is composed of three distinct zones: A header, the body, and a footer. 5. **Overlay**: Screen overlay that obscures the on-page content. -## Modal sizes - -There are four preset modal sizes: **xs, small, default, large**. They have responsive widths that change based on the screen size. Modal widths are defined as screen percentages that will complement columns on the 2x grid. See the modal spec for specifics. - -Choose a size best for the amount of modal content you have. Modals with short messages should use a xs or small modal to avoid long single lines; for complex components, like data table the default or large modal will be more accommodating. - - - - -![Modal sizes](images/modal-usage-sizes.png) - - - - -#### Title as message - -For short, direct messages the title can include the whole message to add visual clarity to an otherwise repetitive title and body message. When using this style, no other body copy may be included. - - - - -![Modal sizes](images/modal-usage-title.png) - - - - -### Max heights - -Each modal size has a max height in order to maintain a proper window ratio. If your modal has too much scrolling due to a max height consider using the next modal size up. If the large modal height is still not enough space then this is an indicator that a full page may be needed instead. - - - - - - -![Modal sizes](images/modal-usage-max-heights.png) - - - - -#### Scrolling behavior - -When the modal content is longer than the modal height then the body section should scroll vertically with the header and footer remaining fixed in place. The content should visibly fade at the end of the modal body area to indicate there is additional content out of view. Modal content should never scroll horizontally; instead, use a larger size modal. - - - - -![One button modal example](images/modal-usage-scrolling.png) - - - - ## Variations There are four main variations of modal. @@ -249,6 +190,63 @@ There are three buttons in the progress modal footer: Cancel, Previous, Next. Ea +## Modal sizes + +There are four responsive [modal sizes](/components/modal/style#sizes): **xs, small, default, large**. Choose a size that works best for the amount of modal content you have. Modals with short messages should use a xs or small modal to avoid long single lines; for complex components, like data table the default or large modal will be more accommodating. + + + + +![Modal sizes](images/modal-usage-sizes.png) + + + + +#### Title as message + +For short, direct messages the title can include the whole message to add visual clarity to an otherwise repetitive title and body message. When using this style, no other body copy may be included. + + + + +![Modal sizes](images/modal-usage-title.png) + + + + +### Max heights + +Each modal size has a [max height](/components/modal/style#max-sizes) in order to maintain a proper window ratio. If your modal has too much scrolling due to a max height consider using the next modal size up. If the large modal height is still not enough space then this is an indicator that a full page may be needed instead. + + + + + + +![Modal sizes](images/modal-usage-max-heights.png) + + + + +#### Scrolling behavior + +When the modal content is longer than the modal height then the body section should scroll vertically with the header and footer remaining fixed in place. The content should visibly fade at the end of the modal body area to indicate there is additional content out of view. Modal content should never scroll horizontally; instead, use a larger size modal. + + + + +![One button modal example](images/modal-usage-scrolling.png) + + + + ## Related #### Patterns: