feat(modal): introduce size variants (#4657)

Refs #4607.
carbon-design-system · Nov 14, 2019 · 3994637 · 3994637
1 parent 1a2d21b
commit 3994637
Show file tree

Hide file tree

Showing 9 changed files with 443 additions and 144 deletions.
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -71,8 +71,9 @@
 
   .#{$prefix}--modal-container {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: auto;
     background-color: $ui-01;
     width: 100%;
     height: 100%;
@@ -83,31 +84,138 @@
     transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
-      width: 50%;
-      max-width: 768px;
+      width: 84%;
       max-height: 90%;
       height: auto;
+
+      .#{$prefix}--modal-header,
+      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content__regular-content {
+        padding-right: 20%;
+      }
     }
 
     @include carbon--breakpoint(lg) {
-      max-height: 80%;
+      width: 60%;
+      max-height: 84%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 48%;
     }
   }
 
   .#{$prefix}--modal-header,
   .#{$prefix}--modal-content {
-    padding-right: 25%;
-    padding-left: 1rem;
+    padding-left: $carbon--spacing-05;
   }
 
   .#{$prefix}--modal-header,
-  .#{$prefix}--modal-footer {
-    flex-shrink: 0;
+  .#{$prefix}--modal-content,
+  .#{$prefix}--modal-content__regular-content {
+    padding-right: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--modal-content--with-form {
+    padding-right: $carbon--spacing-05;
+
+    @include carbon--breakpoint(md) {
+      padding-right: $carbon--spacing-05; // Override for `.#{$prefix}--modal-content`
+    }
+  }
+
+  .#{$prefix}--modal-container--xs {
+    .#{$prefix}--modal-header,
+    .#{$prefix}--modal-content,
+    .#{$prefix}--modal-content__regular-content,
+    .#{$prefix}--modal-content--with-form {
+      padding-right: $carbon--spacing-05;
+    }
+
+    @include carbon--breakpoint(md) {
+      width: 48%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 32%;
+      max-height: 48%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 24%;
+    }
+  }
+
+  .#{$prefix}--modal-container--sm {
+    .#{$prefix}--modal-header,
+    .#{$prefix}--modal-content,
+    .#{$prefix}--modal-content__regular-content,
+    .#{$prefix}--modal-content--with-form {
+      padding-right: $carbon--spacing-05;
+    }
+
+    @include carbon--breakpoint(md) {
+      width: 60%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 42%;
+      max-height: 72%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 36%;
+
+      .#{$prefix}--modal-header,
+      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content__regular-content {
+        padding-right: 20%;
+      }
+
+      .#{$prefix}--modal-content--with-form {
+        padding-right: $carbon--spacing-05; // Override for `.#{$prefix}--modal-content`
+      }
+    }
+  }
+
+  .#{$prefix}--modal-container--lg {
+    .#{$prefix}--modal-header,
+    .#{$prefix}--modal-content,
+    .#{$prefix}--modal-content__regular-content,
+    .#{$prefix}--modal-content--with-form {
+      padding-right: $carbon--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 {
+        padding-right: $carbon--spacing-05; // Override for `.#{$prefix}--modal-content`
+      }
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 84%;
+      max-height: 96%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 72%;
+    }
   }
 
   .#{$prefix}--modal-header {
-    padding-top: 1rem;
+    padding-top: $carbon--spacing-05;
     margin-bottom: $carbon--spacing-03;
+
+    grid-row: 1/1;
+    grid-column: 1/-1;
   }
 
   .#{$prefix}--modal-header__label {
@@ -126,6 +234,9 @@
   .#{$prefix}--modal-content {
     @include type-style('body-long-01');
 
+    grid-row: 2/-2;
+    grid-column: 1/-1;
+
     overflow-y: auto;
     margin-bottom: $carbon--spacing-08;
     color: $text-01;
@@ -140,8 +251,28 @@
     }
   }
 
-  .#{$prefix}--modal-content > * {
-    @include type-style('body-long-01');
+  .#{$prefix}--modal-content {
+    > * {
+      @include type-style('body-long-01');
+    }
+  }
+
+  .#{$prefix}--modal-content--overflow-indicator {
+    grid-row: 2/-2;
+    grid-column: 1/-1;
+    width: 100%;
+    height: rem(32px);
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: $carbon--spacing-08;
+    background-image: linear-gradient(to bottom, transparent, $ui-01);
+  }
+
+  .#{$prefix}--modal-content:focus
+    ~ .#{$prefix}--modal-content--overflow-indicator {
+    width: calc(100% - 4px);
+    margin: 0 2px 2px 2px;
   }
 
   .#{$prefix}--modal-footer {
@@ -150,13 +281,16 @@
     height: 4rem;
     background-color: $modal-footer-background-color;
 
+    grid-row: -1/-1;
+    grid-column: 1/-1;
+
     button.#{$prefix}--btn {
       max-width: none;
       flex: 1;
       height: 4rem;
       margin: 0;
-      padding-top: 1rem;
-      padding-bottom: 2rem;
+      padding-top: $carbon--spacing-05;
+      padding-bottom: $carbon--spacing-07;
     }
   }
 

diff --git a/packages/components/src/components/modal/modal.config.js b/packages/components/src/components/modal/modal.config.js
@@ -29,6 +29,45 @@ module.exports = {
         classCloseButton: `${prefix}--btn--secondary`,
       },
     },
+    {
+      name: 'xs',
+      label: 'Transactional Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'sm',
+      label: 'Transactional Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'lg',
+      label: 'Transactional Modal (Large)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'lg',
+      },
+    },
     {
       name: 'nofooter',
       label: 'Passive Modal',
@@ -42,6 +81,45 @@ module.exports = {
         classCloseButton: `${prefix}--btn--secondary`,
       },
     },
+    {
+      name: 'nofooter-xs',
+      label: 'Passive Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'nofooter-sm',
+      label: 'Passive Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'nofooter-lg',
+      label: 'Passive Modal (Large)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'lg',
+      },
+    },
     {
       name: 'danger',
       label: 'Danger Modal',

diff --git a/packages/components/src/components/modal/modal.hbs b/packages/components/src/components/modal/modal.hbs
@@ -10,7 +10,7 @@
 
 <div data-modal id="modal-{{idSuffix}}" class="{{@root.prefix}}--modal {{classModalSupplemental}}" role="dialog"
   aria-modal="true" aria-labelledby="modal-{{idSuffix}}-label" aria-describedby="modal-{{idSuffix}}-heading" tabindex="-1">
-  <div class="{{@root.prefix}}--modal-container">
+  <div class="{{@root.prefix}}--modal-container{{#if size}} {{@root.prefix}}--modal-container--{{size}}{{/if}}">
     <div class="{{@root.prefix}}--modal-header">
       <p class="{{@root.prefix}}--modal-header__label {{@root.prefix}}--type-delta" id="modal-{{idSuffix}}-label">Optional label</p>
       <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">Modal heading</p>
@@ -20,7 +20,8 @@
     </div>
 
     <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->
-    <div class="{{@root.prefix}}--modal-content" {{#if hasScrollingContent}}tabindex="0"{{/if}}>
+
+    <div class="{{@root.prefix}}--modal-content{{#if hasInput}} {{@root.prefix}}--modal-content--with-form{{/if}}" {{#if hasScrollingContent}}tabindex="0"{{/if}}>
       {{#if hasInput}}
       <div class="{{@root.prefix}}--form-item">
         <label for="text-input-{{idSuffix}}" class="{{@root.prefix}}--label">Text Input label</label>
@@ -71,9 +72,10 @@
         tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
         facilisi.
         Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-        {{/if}}
+      {{/if}}
       {{/if}}
     </div>
+    <div class="{{@root.prefix}}--modal-content--overflow-indicator"></div>
 
     {{#if hasFooter}}
     <div class="{{@root.prefix}}--modal-footer">