@carbon/styles 1.8.0 → 1.10.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/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/list-box/_list-box.scss

@@ -146,6 +146,8 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__field {
     padding-right: rem(56px);
   }

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%;

package/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,44 @@
+@use '../breakpoint' as *;
+@use '../config';
+
+// Mixins that can be used to hide elements only at specific breakpoints.
+// Helpful for when you would like to hide elements outside of a Grid context
+@mixin hide-at-sm {
+  padding: 2rem 1rem;
+  background: #8a3ffc;
+  @include breakpoint-between('sm', 'md') {
+    display: none;
+  }
+}
+
+@mixin hide-at-md {
+  padding: 2rem 1rem;
+  background: #4589ff;
+  @include breakpoint-between('md', 'lg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-lg {
+  padding: 2rem 1rem;
+  background: #42be65;
+  @include breakpoint-between('lg', 'xlg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-xlg {
+  padding: 2rem 1rem;
+  background: #f1c21b;
+  @include breakpoint-between('xlg', 'max') {
+    display: none;
+  }
+}
+
+@mixin hide-at-max {
+  padding: 2rem 1rem;
+  background: #da1e28;
+  @include breakpoint-up('max') {
+    display: none;
+  }
+}

package/scss/utilities/_index.scss

@@ -10,6 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
+@forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';