docs(modal): update style tab (#751)

* docs(modal): style tab updates * docs(modal): more style updates * fix(modal): reordered anchor links * Update src/pages/components/modal/style.mdx Co-Authored-By: Connor <connor@ibm.com> Co-authored-by: Connor <connor@ibm.com>
carbon-design-system · Jan 8, 2020 · fa1c927 · fa1c927 · vercel · Jan 8, 2020
1 parent 34c4b35
commit fa1c927
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 80 deletions.
diff --git a/src/pages/components/modal/images/modal-style-1.png b/src/pages/components/modal/images/modal-style-1.png
diff --git a/src/pages/components/modal/images/modal-style-2.png b/src/pages/components/modal/images/modal-style-2.png
diff --git a/src/pages/components/modal/images/modal-style-3.png b/src/pages/components/modal/images/modal-style-3.png
diff --git a/src/pages/components/modal/images/modal-style-4.png b/src/pages/components/modal/images/modal-style-4.png
diff --git 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%      | –             |
 
-<div className="image--fixed">
+<Row>
+<Column colLg={12}>
 
-![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)
 
-</div>
+</Column>
+</Row>
 
 <Caption>
   Structure and spacing measurements for a passive modal | px / rem
 </Caption>
 
-<div className="image--fixed">
+<Row>
+<Column colLg={12}>
 
-![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)
 
-</div>
+</Column>
+</Row>
 
 <Caption>
   Structure and spacing measurements for a transactional modal | px / rem
 </Caption>
 
-<div className="image--fixed">
+### 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.
 
-</div>
+<Row>
+<Column colLg={12}>
+
+![Margin-right for modals less than 36% and greater than 36%](images/modal-style-3.png)
+
+</Column>
+</Row>
 
 <Caption>
-  Structure and spacing measurements for a input modal | px / rem
+  Margin-right for modals less than 36% (left) and greater than 36% (right).
 </Caption>
 
-### Mobile
+<!--
+### Buttons widths
+
+| Number of buttons    | Percentage of modal     | Positioning    |
+| -------------------- | ----------------------- | -------------- | 
+| 1                    | 50%                     | Flush right    |
+| 2                    | 50% each                | Full bleed     |
+| 3                    | 25% each                | Flush right    |
+-->
+
+## 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.
+
+<Row>
+<Column colLg={8}>
+
+![Modal sizes](images/modal-usage-sizes.png)
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={8}>
+
+### 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%        | –         |
+
+</Column>
+</Row>
+
+### Mobile
 
-<div className="image--fixed">
+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)
+<Row>
+<Column colLg={8}>
 
-</div>
+![Modal sizes](images/modal-style-4.png)
 
-<Caption>Example of a modal on a mobile screen</Caption>
+</Column>
+</Row>
diff --git 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
 
 <AnchorLink>General guidance</AnchorLink>
 <AnchorLink>Anatomy</AnchorLink>
-<AnchorLink>Modal sizes</AnchorLink>
 <AnchorLink>Variations</AnchorLink>
+<AnchorLink>Modal sizes</AnchorLink>
 
 </AnchorLinks>
 
@@ -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.
-
-<Row>
-<Column colLg={8}>
-
-![Modal sizes](images/modal-usage-sizes.png)
-
-</Column>
-</Row>
-
-#### 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.
-
-<Row>
-<Column colLg={8}>
-
-![Modal sizes](images/modal-usage-title.png)
-
-</Column>
-</Row>
-
-### 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 size | Max height |
-| ---------- | ---------- |
-| XS         | 48% |
-| Small | 72% |
-| Default | 84% |
-| Large | 96% |
--->
-
-<Row>
-<Column colLg={8}>
-
-![Modal sizes](images/modal-usage-max-heights.png)
-
-</Column>
-</Row>
-
-#### 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.
-
-<Row>
-<Column colLg={8}>
-
-![One button modal example](images/modal-usage-scrolling.png)
-
-</Column>
-</Row>
-
 ## 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
 </Column>
 </Row>
 
+## 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.
+
+<Row>
+<Column colLg={8}>
+
+![Modal sizes](images/modal-usage-sizes.png)
+
+</Column>
+</Row>
+
+#### 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.
+
+<Row>
+<Column colLg={8}>
+
+![Modal sizes](images/modal-usage-title.png)
+
+</Column>
+</Row>
+
+### 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 size | Max height |
+| ---------- | ---------- |
+| XS         | 48% |
+| Small | 72% |
+| Default | 84% |
+| Large | 96% |
+-->
+
+<Row>
+<Column colLg={8}>
+
+![Modal sizes](images/modal-usage-max-heights.png)
+
+</Column>
+</Row>
+
+#### 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.
+
+<Row>
+<Column colLg={8}>
+
+![One button modal example](images/modal-usage-scrolling.png)
+
+</Column>
+</Row>
+
 ## Related
 
 #### Patterns: