@carbon/styles 1.25.0 → 1.26.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.25.0",
+  "version": "1.26.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "47966b102beb1310c23bb0fc914a22f639dc08d6"
+  "gitHead": "14c6f7442f8915d508a0bada49bb05e0cac8464c"
 }

package/scss/components/checkbox/_checkbox.scss

@@ -94,19 +94,19 @@
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
-    border-radius: 1px;
+    border-radius: 2px;
     content: '';
   }
 
   // Create the appearance of the check in the `after` pseudo-element
   .#{$prefix}--checkbox-label::after {
     position: absolute;
-    top: rem(8px);
+    top: rem(7.5px);
     left: rem(7px);
     width: rem(9px);
     height: rem(5px);
-    border-bottom: 2px solid $icon-inverse;
-    border-left: 2px solid $icon-inverse;
+    border-bottom: 1.5px solid $icon-inverse;
+    border-left: 1.5px solid $icon-inverse;
     margin-top: rem(-3px) #{'/*rtl:0rem*/'};
     background: none;
     content: '';

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -53,6 +53,10 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper {
+    position: initial;
+  }
+
   .#{$prefix}--number-input--fluid input[type='number'] {
     min-height: rem(64px);
     padding: rem(32px) rem(80px) rem(13px) $spacing-05;
@@ -74,7 +78,6 @@
     border-bottom: 1px solid transparent;
   }
 
-  // Focus Overrides
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
     .#{$prefix}--number {
     @include focus-outline('outline');

package/scss/components/fluid-select/_fluid-select.scss

@@ -105,7 +105,7 @@
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper {
-    flex-direction: column;
+    display: block;
   }
 
   .#{$prefix}--select--fluid

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -96,6 +96,12 @@
     resize: none;
   }
 
+  // accounts for 2px of border when invalid
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid {
+    padding: 0 rem(14px) rem(13px);
+    margin-top: rem(30px);
+  }
+
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     .#{$prefix}--text-area__divider,
@@ -156,11 +162,10 @@
   }
 
   //invalid outline
+  // needs to be a border for some weirdness when in a modal
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]:not(:focus) {
-    @include focus-outline('invalid');
-
-    outline-offset: 0;
+    border: 2px solid $support-error;
   }
 
   // focus
@@ -168,10 +173,10 @@
     .#{$prefix}--text-area__wrapper[data-invalid]:focus-within,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper:focus-within {
     @include focus-outline('outline');
-
-    outline-offset: 0;
   }
 
+  // end weirdness
+
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     > .#{$prefix}--text-area--invalid:focus,

package/scss/components/modal/_modal.scss

@@ -71,6 +71,41 @@
     .#{$prefix}--number__rule-divider {
       background-color: $border-subtle-02;
     }
+
+    // Fluid inputs
+    .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
+    .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
+    .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
+    .#{$prefix}--search--fluid .#{$prefix}--search-input,
+    .#{$prefix}--select--fluid .#{$prefix}--select-input,
+    .#{$prefix}--text-area--fluid
+      .#{$prefix}--text-area__wrapper[data-invalid]
+      .#{$prefix}--text-area__divider
+      + .#{$prefix}--form-requirement,
+    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
+    .#{$prefix}--number-input--fluid input[type='number'],
+    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
+    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
+    .#{$prefix}--date-picker--fluid
+      .c#{$prefix}ds--date-picker-input__wrapper
+      .#{$prefix}--date-picker__input {
+      background-color: $field-01;
+    }
+
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:hover::before,
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:hover::after {
+      background-color: $field-hover;
+    }
+
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:focus::before,
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:focus::after {
+      border-left: 2px solid $focus;
+    }
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
@@ -144,6 +179,12 @@
     }
   }
 
+  // fluid form in modal
+  .#{$prefix}--modal-content .#{$prefix}--form--fluid {
+    margin-right: -$spacing-05;
+    margin-left: -$spacing-05;
+  }
+
   //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,
@@ -327,7 +368,8 @@
     max-width: none;
     height: rem(64px);
     flex: 0 1 50%;
-    padding-top: $spacing-05;
+    align-items: baseline;
+    padding-top: calc($spacing-05 - rem(2px));
     padding-bottom: $spacing-07;
     margin: 0;
   }

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

@@ -153,6 +153,63 @@ $radio-border-width: 1px !default;
     user-select: text;
   }
 
+  // invalid + warn
+  .#{$prefix}--radio-button-group--invalid
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $support-error;
+  }
+
+  .#{$prefix}--radio-button__validation-msg {
+    display: none;
+    align-items: flex-end;
+    margin-top: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon {
+    margin: 0 rem(1px) 0 rem(3px);
+    fill: $support-error;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon--warning path:first-of-type {
+    fill: #000000;
+  }
+
+  .#{$prefix}--radio-button__validation-msg .#{$prefix}--form__helper-text {
+    margin-top: 0;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg,
+  .#{$prefix}--radio-button-group--warning
+    + .#{$prefix}--radio-button__validation-msg {
+    display: flex;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--radio-button-group--warning
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+    margin-top: 0;
+    margin-left: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus

package/scss/components/tabs/_tabs.scss

@@ -299,10 +299,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       height: rem(48px);
       padding: $spacing-03 $spacing-05;
       border-bottom: 0;
+    }
+
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
+      .#{$prefix}--tabs__nav-item-label {
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
     }
 
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item-secondary-label {
+      @include type-style('label-01');
+
+      min-height: rem(16px);
+    }
+
+    &.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall
+      .#{$prefix}--tabs__nav-link {
+      height: rem(64px);
+    }
+
     //-----------------------------
     // Icon Item
     //-----------------------------
@@ -319,6 +334,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       align-items: center;
       justify-content: center;
       padding: 0;
+
+      .#{$prefix}--tabs__nav-item-label {
+        line-height: 0;
+      }
     }
 
     &.#{$prefix}--tabs__icon--lg {
@@ -363,11 +382,17 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       color: $text-primary;
     }
 
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
+      .#{$prefix}--tabs__nav-item--selected,
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
+      .#{$prefix}--tabs__nav-item--selected:hover {
+      // height - vertical padding
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+    }
+
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
       background-color: $layer;
-      // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
 
       .#{$prefix}--tabs__nav-link:focus,
       .#{$prefix}--tabs__nav-link:active {

package/scss/components/treeview/_treeview.scss

@@ -73,9 +73,6 @@
     min-height: rem(32px);
     flex: 1;
     align-items: center;
-    // (min-height 32px - single line text height 18px) / 2 = 7px
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
 
     &:hover {
       background-color: $layer-hover-01;
@@ -83,6 +80,12 @@
     }
   }
 
+  .cds--tree-node:not(.cds--tree-parent-node) .#{$prefix}--tree-node__label {
+    // (min-height 32px - single line text height 18px) / 2 = 7px
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
   .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
     color: $text-primary;
   }
@@ -113,12 +116,14 @@
 
   .#{$prefix}--tree-parent-node__toggle {
     display: flex;
+    width: rem(24px);
+    height: rem(24px);
     align-items: center;
     align-self: flex-start;
-    // increase 16px container height to 18px to match text bounding box
-    padding: rem(1px) 0;
+    padding-left: $spacing-02;
     border: 0;
-    margin-right: $spacing-03;
+    margin-top: $spacing-02;
+    margin-right: $spacing-02;
 
     &:hover {
       cursor: pointer;