@carbon/styles 1.2.0 → 1.4.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.2.0",
+  "version": "1.4.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -27,24 +27,24 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.1.0",
+    "@carbon/colors": "^11.2.0-rc.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^11.1.0",
-    "@carbon/layout": "^11.1.0",
-    "@carbon/motion": "^11.0.0",
-    "@carbon/themes": "^11.2.0",
-    "@carbon/type": "^11.2.0",
+    "@carbon/grid": "^11.2.0-rc.0",
+    "@carbon/layout": "^11.2.0-rc.0",
+    "@carbon/motion": "^11.1.0-rc.0",
+    "@carbon/themes": "^11.3.0-rc.0",
+    "@carbon/type": "^11.3.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.23.0",
+    "@carbon/test-utils": "^10.24.0-rc.0",
     "css": "^3.0.0",
-    "sass": "^1.45.0"
+    "sass": "^1.51.0"
   },
   "sideEffects": [
     "index.scss",
     "scss/**/*.scss",
     "scss/**/*.css"
   ],
-  "gitHead": "28cf6f75d268e3103a23a3ce1d50127189703964"
+  "gitHead": "b5930a4a638221e39b1dbce9c6b79e41dc340f68"
 }

package/scss/__tests__/type-test.js

@@ -27,19 +27,27 @@ describe('@carbon/styles/scss/type', () => {
           reset: meta.mixin-exists('reset', 'type'),
           type-style: meta.mixin-exists('type-style', 'type'),
           font-family: meta.mixin-exists('font-family', 'type'),
+          font-weight: meta.mixin-exists('font-family', 'type'),
           default-type: meta.mixin-exists('default-type', 'type'),
           type-classes: meta.mixin-exists('type-classes', 'type'),
         ),
+        functions: (
+          font-weight: meta.function-exists('font-family', 'type'),
+        ),
       ));
     `);
 
     const { value: api } = get('api');
+    expect(api.functions).toEqual({
+      'font-weight': true,
+    });
     expect(api.mixins).toEqual({
       reset: true,
       'type-style': true,
       'font-family': true,
       'default-type': true,
       'type-classes': true,
+      'font-weight': true,
     });
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
@@ -73,6 +81,8 @@ describe('@carbon/styles/scss/type', () => {
         "display-02",
         "display-03",
         "display-04",
+        "font-families",
+        "font-weights",
         "tokens",
       ]
     `);

package/scss/components/breadcrumb/_css.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'breadcrumb';
+
+@include breadcrumb.breadcrumb;

package/scss/components/breadcrumb/_index.scss

@@ -6,6 +6,5 @@
 //
 
 @forward 'breadcrumb';
-@use 'breadcrumb';
-
-@include breadcrumb.breadcrumb;
+@use 'css';
+@use '../link';

package/scss/components/checkbox/_checkbox.scss

@@ -123,8 +123,8 @@
   .#{$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 {
+    border: none;
     border-width: 1px;
-    border-color: $icon-primary;
     background-color: $icon-primary;
   }
 

package/scss/components/copy-button/_copy-button.scss

@@ -67,6 +67,10 @@
       display: block;
     }
 
+    &.#{$prefix}--copy-btn--animating::before {
+      border: none;
+    }
+
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
       .#{$prefix}--copy-btn__feedback {

package/scss/components/modal/_modal.scss

@@ -108,6 +108,10 @@
     @include breakpoint(xlg) {
       width: 48%;
     }
+
+    .#{$prefix}--modal-container-body {
+      display: contents;
+    }
   }
 
   // -----------------------------

package/scss/components/progress-bar/_progress-bar.scss

@@ -20,14 +20,23 @@
   .#{$prefix}--progress-bar__label {
     @include type-style('body-compact-01');
 
-    display: block;
+    display: flex;
+    min-width: rem(48px);
+    justify-content: space-between;
     margin-bottom: $spacing-03;
     color: $text-primary;
   }
 
+  .#{$prefix}--progress-bar__label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--progress-bar__track {
     position: relative;
     width: 100%;
+    min-width: rem(48px);
     height: rem(8px);
     background-color: $layer;
   }
@@ -44,7 +53,8 @@
     display: block;
     width: 100%;
     height: 100%;
-    background-color: $interactive;
+    background-color: currentColor;
+    color: $interactive;
     transform: scaleX(0);
     transform-origin: 0 center #{'/*rtl:100% center*/'};
     transition: transform $duration-fast-02 motion(standard, productive);
@@ -74,10 +84,47 @@
   .#{$prefix}--progress-bar__helper-text {
     @include type-style('helper-text-01');
 
-    margin-top: $spacing-02;
+    margin-top: $spacing-03;
     color: $text-secondary;
   }
 
+  .#{$prefix}--progress-bar__status-icon {
+    flex-shrink: 0;
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__status-icon {
+    color: $support-success;
+  }
+
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__status-icon,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__helper-text {
+    color: $support-error;
+  }
+
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar {
+    transform: scaleX(1);
+  }
+
+  .#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__track,
+  .#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__track {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__label {
+    flex-shrink: 1;
+    justify-content: flex-start;
+    margin-right: 0;
+  }
+
   @keyframes progress-bar-indeterminate {
     0% {
       background-position-x: 25%;
@@ -100,6 +147,11 @@
     margin-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__track {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
     @include visually-hidden;
   }

package/scss/components/structured-list/_structured-list.scss

@@ -83,7 +83,7 @@
     display: table-row;
     border-bottom: 1px solid $border-subtle;
     transition: background-color motion.$duration-fast-02
-      motion(standard, productive);
+      motion.motion(standard, productive);
   }
 
   .#{$prefix}--structured-list--selection
@@ -162,7 +162,8 @@
       border-top: 1px solid $border-subtle;
     }
 
-    transition: color motion.$duration-fast-02 motion(standard, productive);
+    transition: color motion.$duration-fast-02
+      motion.motion(standard, productive);
   }
 
   .#{$prefix}--structured-list-content--nowrap {
@@ -172,7 +173,7 @@
   .#{$prefix}--structured-list-svg {
     display: inline-block;
     fill: transparent;
-    transition: all motion.$duration-fast-02 motion(standard, productive);
+    transition: all motion.$duration-fast-02 motion.motion(standard, productive);
     vertical-align: middle;
   }
 

package/scss/components/tile/_tile.scss

@@ -91,6 +91,7 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
+    padding: $spacing-05;
     background-color: $layer;
     color: $text-disabled;
   }

package/scss/components/toggle/_toggle.scss

@@ -113,6 +113,8 @@
       position: absolute;
       top: rem(6px);
       right: rem(5px);
+      width: rem(6px);
+      height: rem(5px);
       fill: $support-success;
       visibility: hidden;
     }

package/scss/type/_index.scss

@@ -13,6 +13,7 @@
   font-family,
   default-type,
   type-classes,
+  font-weight,
 
   // Variables
   $caption-01,
@@ -46,6 +47,8 @@
   $display-02,
   $display-03,
   $display-04,
+  $font-families, 
+  $font-weights,
   $tokens;
 
 @use '@carbon/type';