@carbon/styles 1.9.0-rc.0 → 1.11.0-rc.0

package/scss/__tests__/type-test.js

@@ -53,6 +53,7 @@ describe('@carbon/styles/scss/type', () => {
       Array [
         "label-01",
         "helper-text-01",
+        "helper-text-02",
         "body-short-01",
         "body-short-02",
         "body-long-01",

package/scss/_zone.scss

@@ -36,6 +36,9 @@ $-components: (
 
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
+    background: var(--cds-background);
+    color: var(--cds-text-primary);
+
     @each $key, $value in $theme {
       @if type-of($value) == color {
         @include custom-property.declaration($key, $value);

package/scss/components/checkbox/_checkbox.scss

@@ -121,8 +121,7 @@
   // Update properties for checked checkbox
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before {
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before {
     border: none;
     border-width: 1px;
     background-color: $icon-primary;
@@ -135,8 +134,7 @@
   }
 
   // Indeterminate symbol
-  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::after {
+  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after {
     top: rem(11px);
     width: rem(8px);
     border-bottom: 2px solid $icon-inverse;
@@ -155,8 +153,7 @@
   .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before,
   // Indeterminate
-  .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
+  .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before {
     outline: 2px solid $focus;
     outline-offset: 1px;
   }
@@ -179,8 +176,7 @@
   .#{$prefix}--checkbox:checked:disabled + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox:indeterminate:disabled
     + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'][data-contained-checkbox-disabled='true']::before {
+  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before {
     background-color: $icon-disabled;
   }
 

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

@@ -8,6 +8,7 @@
 @use 'mixins' as *;
 @use 'vars' as *;
 @use '../../config' as *;
+@use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -52,6 +53,14 @@
     @include type-style('body-compact-01');
 
     color: $text-secondary;
+
+    @include breakpoint(md) {
+      max-width: 50ch;
+    }
+
+    @include breakpoint(lg) {
+      max-width: 80ch;
+    }
   }
 
   //----------------------------------------------------------------------------

package/scss/components/form/_form.scss

@@ -12,6 +12,7 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
+@use '../..//utilities/button-reset';
 
 /// @type Number
 /// @access public
@@ -51,12 +52,44 @@ $input-label-weight: 400 !default;
     margin-bottom: 0;
   }
 
-  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
-    // When tooltip trigger is put in form label the trigger button should fit in the size of label
-    // https://github.com/IBM/carbon-components-react/issues/115
+  .#{$prefix}--label + .#{$prefix}--tooltip {
+    position: relative;
+    top: 0.2rem;
+    left: 0.5rem;
+  }
+
+  .#{$prefix}--label + .#{$prefix}--tooltip .#{$prefix}--tooltip__trigger {
+    @include button-reset.reset();
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
     @include type-style('label-01');
   }
 
+  .#{$prefix}--label
+    + .#{$prefix}--tooltip
+    .#{$prefix}--tooltip__trigger:focus {
+    outline: 1px solid $focus;
+  }
+
+  .#{$prefix}--label + .#{$prefix}--tooltip .#{$prefix}--tooltip__trigger svg {
+    fill: $icon-secondary;
+  }
+
+  .#{$prefix}--label
+    + .#{$prefix}--tooltip
+    .#{$prefix}--tooltip__trigger
+    svg
+    :hover {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--label + .#{$prefix}--toggletip {
+    top: 0.2rem;
+    left: 0.5rem;
+  }
+
   // Skeleton State
   .#{$prefix}--label.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/multiselect/_multiselect.scss

@@ -84,7 +84,7 @@
     padding-left: 0;
   }
 
-  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover:not(.#{$prefix}--multi-select--filterable)
     .#{$prefix}--text-input {
     background-color: $field;
   }

package/scss/type/_index.scss

@@ -21,6 +21,7 @@
   $caption-01,
   $label-01,
   $helper-text-01,
+  $helper-text-02,
   $body-short-01,
   $body-short-02,
   $body-long-01,

package/scss/utilities/_button-reset.scss

@@ -20,6 +20,7 @@
   appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
 
   @if ($width == true) {
     width: 100%;