Merge branch 'main' into accordion-spacing-fix

carbon-design-system · Oct 4, 2021 · 6ea0730 · 6ea0730
2 parents ed00f26 + 2da12d0
commit 6ea0730
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 109 deletions.
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -66,6 +66,9 @@
     transition: transform $duration--moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -89,17 +92,6 @@
       width: 84%;
       height: auto;
       max-height: 90%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include carbon--breakpoint(lg) {
@@ -112,30 +104,82 @@
     }
   }
 
-  .#{$prefix}--modal-header,
+  // -----------------------------
+  // Modal content
+  // -----------------------------
   .#{$prefix}--modal-content {
+    @include type-style('body-long-01');
+
+    position: relative;
+    // Required to accommodate focus outline's negative offset:
+    padding-top: $spacing-03;
+    // anything besides text/p spans full width, with just 16px padding
+    padding-right: $spacing-05;
     padding-left: $spacing-05;
+    margin-bottom: $spacing-09;
+    color: $text-01;
+
+    font-weight: 400;
+    grid-column: 1/-1;
+    grid-row: 2/-2;
+    overflow-y: auto;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-content,
+  //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
+  // text/p gets 20% right padding
+  .#{$prefix}--modal-content p,
   .#{$prefix}--modal-content__regular-content {
-    padding-right: $spacing-05;
+    padding-right: 20%;
+    @include type-style('body-long-01');
   }
 
+  //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
+  // anything besides text/p spans full width, with just 16px padding
   .#{$prefix}--modal-content--with-form {
     padding-right: $spacing-05;
   }
 
+  // -----------------------------
+  // Modal header
+  // -----------------------------
+  .#{$prefix}--modal-header {
+    padding-top: $spacing-05;
+    padding-right: $spacing-09;
+    padding-left: $spacing-05;
+    margin-bottom: $spacing-03;
+    grid-column: 1/-1;
+    grid-row: 1/1;
+  }
+
+  .#{$prefix}--modal-header__label {
+    @include type-style('label-01');
+
+    margin-bottom: $spacing-02;
+    color: $text-02;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('productive-heading-03');
+
+    color: $text-01;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
+    //text always spans full width in xs modals
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include carbon--breakpoint(md) {
@@ -152,15 +196,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
+    //text spans full width in sm modals below 1056
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include carbon--breakpoint(md) {
@@ -170,48 +217,24 @@
     @include carbon--breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
 
-    @include carbon--breakpoint(xlg) {
-      width: 36%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
+    }
 
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
+    @include carbon--breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include carbon--breakpoint(md) {
       width: 96%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include carbon--breakpoint(lg) {
@@ -224,50 +247,9 @@
     }
   }
 
-  .#{$prefix}--modal-header {
-    padding-top: $spacing-05;
-    padding-right: $spacing-09;
-    margin-bottom: $spacing-03;
-    grid-column: 1/-1;
-    grid-row: 1/1;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include type-style('label-01');
-
-    margin-bottom: $spacing-02;
-    color: $text-02;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-01;
-  }
-
-  .#{$prefix}--modal-content {
-    @include type-style('body-long-01');
-
-    position: relative;
-    // Required to accommodate focus outline's negative offset:
-    padding-top: $spacing-03;
-    margin-bottom: $spacing-09;
-    color: $text-01;
-
-    font-weight: 400;
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    overflow-y: auto;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--modal-content > p {
-    @include type-style('body-long-01');
-  }
-
+  // -----------------------------
+  // Modal overflow
+  // -----------------------------
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-bottom: $spacing-07;
@@ -314,6 +296,9 @@
     }
   }
 
+  // -----------------------------
+  // Modal footer
+  // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
     height: rem(64px);
@@ -337,6 +322,9 @@
     align-items: flex-start;
   }
 
+  // -----------------------------
+  // Modal close btn
+  // -----------------------------
   .#{$prefix}--modal-close {
     position: absolute;
     z-index: 2;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3772,9 +3772,7 @@ Map {
         "type": "bool",
       },
       "focusTrap": [Function],
-      "hasForm": Object {
-        "type": "bool",
-      },
+      "hasForm": [Function],
       "hasScrollingContent": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -64,10 +64,13 @@ export default class Modal extends Component {
     ),
 
     /**
-     * Provide whether the modal content has a form element.
-     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     * Deprecated: Used to determine whether the modal content has a form element to adjust spacing,
+     * but now spacing styles account for all types of elements
      */
-    hasForm: PropTypes.bool,
+    hasForm: deprecate(
+      PropTypes.bool,
+      `\nThe prop \`hasForm\` for Modal has been deprecated, as the feature of \`hasForm\` runs by default.`
+    ),
 
     /**
      * Specify whether the modal contains scrolling content
@@ -400,7 +403,7 @@ export default class Modal extends Component {
     });
 
     const contentClasses = classNames(`${prefix}--modal-content`, {
-      [`${prefix}--modal-content--with-form`]: hasForm,
+      [`${prefix}--modal-content--with-form`]: hasForm, //TO-DO: deprecate & remove this with v11
       [`${prefix}--modal-scroll-content`]: hasScrollingContent,
     });