@carbon/styles 0.13.0 → 0.14.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.13.0",
+  "version": "0.14.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.35.0",
+    "@carbon/colors": "^10.36.0-rc.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.40.0",
-    "@carbon/layout": "^10.35.0",
-    "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.50.0",
-    "@carbon/type": "^10.40.0",
+    "@carbon/grid": "^10.41.0-rc.0",
+    "@carbon/layout": "^10.36.0-rc.0",
+    "@carbon/motion": "^10.28.0-rc.0",
+    "@carbon/themes": "^10.51.0-rc.0",
+    "@carbon/type": "^10.41.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
+  "gitHead": "6f5bca3be0e19dc7590617c704a2834514b3176b"
 }

package/scss/components/button/_button.scss

@@ -102,9 +102,9 @@
       transparent,
       transparent,
       $link-primary,
-      $background-hover,
+      $layer-hover,
       currentColor,
-      $background-active
+      $layer-active
     );
 
     padding: $button-padding-ghost;
@@ -243,6 +243,7 @@
 
       &:active {
         border-color: $button-danger-active;
+        background-color: $button-danger-active;
         color: $text-on-color;
       }
 
@@ -334,7 +335,7 @@
 
   //expressive styles
   .#{$prefix}--btn--expressive {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
     min-height: 3rem;
   }

package/scss/components/button/_mixins.scss

@@ -20,10 +20,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   @include component-reset.reset;
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   position: relative;
   display: inline-flex;
+  width: max-content;
   max-width: rem(320px);
   min-height: $button-height;
   flex-shrink: 0;

package/scss/components/checkbox/_checkbox.scss

@@ -197,4 +197,11 @@
     // Add extra spacing when label is present
     margin: rem(1px) 0 0 rem(6px);
   }
+
+  //-----------------------------------------------
+  // InlineCheckbox
+  //-----------------------------------------------
+  .#{$prefix}--checkbox--inline {
+    position: relative;
+  }
 }

package/scss/components/content-switcher/_content-switcher.scss

@@ -52,15 +52,37 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration-fast-01 motion(standard, productive);
+    transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration-moderate-01 motion(standard, productive);
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -157,6 +179,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -177,6 +200,10 @@
       background-color: $layer-selected-disabled;
       color: $text-disabled;
     }
+
+    &::after {
+      transform: scaleY(1);
+    }
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected

package/scss/components/data-table/action/_data-table-action.scss

@@ -47,10 +47,17 @@
   }
 
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
+    height: 3rem;
+    padding: 0 3rem;
     // For toolbar animation with (esp.) persistent search box
     background-color: transparent;
   }
 
+  .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
+    width: 3rem;
+    height: 3rem;
+  }
+
   //-------------------------------------------------
   //DEPRECATED v10/v9 search behavior
   //-------------------------------------------------
@@ -78,6 +85,10 @@
     }
   }
 
+  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
+    width: 3rem;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
     cursor: pointer;
@@ -89,21 +100,6 @@
     padding: 0;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search-magnifier-icon {
-    left: 0;
-    width: $spacing-09;
-    height: $spacing-09;
-    padding: $spacing-05;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier-icon {
-    background-color: $layer;
-    cursor: not-allowed;
-    transition: background-color none;
-  }
-
   .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input {
     cursor: not-allowed;
   }
@@ -130,6 +126,68 @@
     background-color: $focus;
   }
 
+  //-------------------------------------------------
+  // Seach icon
+  //-------------------------------------------------v
+  // lg expandable icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  // lg persistent icon spacing
+  .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm)
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 1rem;
+  }
+
+  // sm expandable icon spacing
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm:not(.#{$prefix}--toolbar-search-container-active):not(.#{$prefix}--toolbar-search-container-persistent)
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  // sm persistent icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search-magnifier-icon {
+    width: $spacing-09;
+    height: $spacing-09;
+    padding: $spacing-05;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
+    .#{$prefix}--search-magnifier-icon {
+    background-color: $layer;
+    cursor: not-allowed;
+    transition: background-color none;
+  }
+
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:focus,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:active,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:hover {
+    border: none;
+    background-color: transparent;
+    outline: none;
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -162,17 +220,6 @@
     background-color: $field-hover;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:focus,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:active,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:hover {
-    border: none;
-    background-color: transparent;
-    outline: none;
-  }
-
   //-------------------------------------------------
   //SEARCH CLOSE BUTTON
   //-------------------------------------------------
@@ -459,6 +506,7 @@
   .#{$prefix}--table-toolbar--small,
   .#{$prefix}--table-toolbar--sm {
     height: rem(32px);
+    min-height: rem(32px);
 
     .#{$prefix}--toolbar-search-container-expandable,
     .#{$prefix}--toolbar-search-container-persistent {
@@ -534,6 +582,22 @@
 
       background-color: transparent;
     }
+
+    .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+      width: rem(32px);
+      //:after element is 2rem but w/o this trigger button is for some reason 28px
+      min-width: rem(32px);
+      height: rem(32px);
+    }
+
+    .#{$prefix}--toolbar-content {
+      height: rem(32px);
+    }
+
+    .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
+      width: 2rem;
+      height: 2rem;
+    }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
@@ -588,4 +652,10 @@
     overflow: hidden;
     height: rem(32px);
   }
+
+  // V11: remove --small selector block
+  .#{$prefix}--table-toolbar--small .#{$prefix}--batch-summary,
+  .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
+    min-height: 2rem;
+  }
 }

package/scss/components/dropdown/_dropdown.scss

@@ -70,15 +70,11 @@
     text-align: left;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl,
   .#{$prefix}--dropdown--lg {
     height: rem(48px);
     max-height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow,
   .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
     top: rem(16px);
   }
@@ -277,12 +273,6 @@
     padding-bottom: rem(7px);
   }
 
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown-link {
-    height: rem(48px);
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
-  }
-
   .#{$prefix}--dropdown--focused,
   .#{$prefix}--dropdown-link:focus {
     @include focus-outline('outline');
@@ -329,12 +319,6 @@
     transform: rotate(-180deg);
   }
 
-  .#{$prefix}--dropdown--open.#{$prefix}--dropdown--xl
-    .#{$prefix}--dropdown-list {
-    // 48px item height * 5.5 items shown
-    max-height: rem(264px);
-  }
-
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
     .#{$prefix}--dropdown-list {
     // 32px item height * 5.5 items shown

package/scss/components/list-box/_list-box.scss

@@ -92,8 +92,6 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl,
   .#{$prefix}--list-box--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -524,9 +522,6 @@ $list-box-menu-width: rem(300px);
     max-height: rem(220px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
     .#{$prefix}--list-box__menu {
     // 48px item height * 5.5 items shown
@@ -568,8 +563,6 @@ $list-box-menu-width: rem(300px);
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
     height: rem(48px);
   }
@@ -653,8 +646,6 @@ $list-box-menu-width: rem(300px);
     padding-bottom: rem(7px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
     height: rem(48px);
     padding-top: rem(15px);
@@ -803,11 +794,6 @@ $list-box-menu-width: rem(300px);
     bottom: 2rem;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
     .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--list-box--lg

package/scss/components/modal/_modal.scss

@@ -57,7 +57,8 @@
     .#{$prefix}--dropdown,
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--multi-select {
       background-color: $field-02;
     }
   }
@@ -67,6 +68,9 @@
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -90,16 +94,6 @@
       width: 84%;
       height: auto;
       max-height: 90%;
-
-      .#{$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 breakpoint(lg) {
@@ -112,30 +106,81 @@
     }
   }
 
-  .#{$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-primary;
+    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-secondary;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('productive-heading-03');
+
+    color: $text-primary;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $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 breakpoint(md) {
@@ -152,15 +197,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $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 breakpoint(md) {
@@ -170,46 +218,24 @@
     @include breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
-
-    @include breakpoint(xlg) {
-      width: 36%;
 
       .#{$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 breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include breakpoint(md) {
       width: 96%;
-
-      .#{$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 breakpoint(lg) {
@@ -222,49 +248,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-secondary;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-primary;
-  }
-
-  .#{$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-primary;
-    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;
@@ -310,6 +296,9 @@
     }
   }
 
+  // -----------------------------
+  // Modal footer
+  // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
     height: rem(64px);
@@ -333,6 +322,9 @@
     align-items: flex-start;
   }
 
+  // -----------------------------
+  // Modal close btn
+  // -----------------------------
   .#{$prefix}--modal-close {
     position: absolute;
     z-index: 2;

package/scss/components/pagination/_pagination.scss

@@ -81,12 +81,21 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input {
+    @include type-style('body-compact-01');
+
     width: auto;
     min-width: auto;
     height: 100%;
     line-height: rem(40px);
   }
 
+  // Extra specificity is needed to preserve padding
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input {
+    padding: 0 2.25rem 0 $spacing-05;
+  }
+
   .#{$prefix}--pagination--sm .#{$prefix}--select-input {
     line-height: rem(32px);
   }
@@ -95,16 +104,13 @@
     line-height: rem(48px);
   }
 
-  .#{$prefix}--pagination
-    .#{$prefix}--select--inline
-    .#{$prefix}--select-input {
-    padding: 0 2.25rem 0 $spacing-05;
-  }
-
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
     background: $layer-hover;
   }
 
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus,
   .#{$prefix}--pagination
     .#{$prefix}--select--inline
     .#{$prefix}--select-input:focus

package/scss/components/radio-button/_radio-button.scss

@@ -34,6 +34,7 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button-group {
     @include reset;
 
+    position: relative;
     display: flex;
     align-items: center;
   }
@@ -54,7 +55,7 @@ $radio-border-width: 1px !default;
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
-      line-height: carbon-mini-units(2.5);
+      line-height: 1.25;
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
@@ -69,7 +70,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: flex;
     align-items: center;

package/scss/components/text-area/_text-area.scss

@@ -102,4 +102,10 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }