@carbon/styles 1.27.0-rc.0 → 1.28.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.27.0-rc.0",
+  "version": "1.28.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,19 +32,19 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.14.0-rc.0",
+    "@carbon/colors": "^11.14.0",
     "@carbon/feature-flags": "^0.13.0",
-    "@carbon/grid": "^11.13.0-rc.0",
-    "@carbon/layout": "^11.13.0-rc.0",
+    "@carbon/grid": "^11.13.0",
+    "@carbon/layout": "^11.13.0",
     "@carbon/motion": "^11.10.0",
-    "@carbon/themes": "^11.18.0-rc.0",
-    "@carbon/type": "^11.17.0-rc.0",
+    "@carbon/themes": "^11.18.0",
+    "@carbon/type": "^11.17.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.28.0-rc.0",
+    "@carbon/test-utils": "^10.28.0",
     "autoprefixer": "^10.4.7",
-    "browserslist-config-carbon": "^11.1.0",
+    "browserslist-config-carbon": "^11.2.0-rc.0",
     "css": "^3.0.0",
     "cssnano": "^6.0.0",
     "lodash.isequal": "^4.5.0",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "af6bbf9ea6a025c19a041ea352dfde798e1cd22f"
+  "gitHead": "419643a2b37523e0d4add7245c4762e51356e91b"
 }

package/scss/components/list/_list.scss

@@ -30,6 +30,10 @@
     list-style: none;
   }
 
+  .#{$prefix}--list--unordered:not(.#{$prefix}--list--nested) {
+    margin-left: $spacing-05;
+  }
+
   .#{$prefix}--list--expressive,
   .#{$prefix}--list--expressive .#{$prefix}--list--nested {
     @include type.type-style('body-02');

package/scss/components/tabs/_tabs.scss

@@ -230,6 +230,13 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
+    //-----------------------------
+    // Wrapper
+    //-----------------------------
+    .#{$prefix}--tabs__nav-item-label-wrapper {
+      display: flex;
+    }
+
     //-----------------------------
     // Item
     //-----------------------------
@@ -266,6 +273,19 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
         outline $duration-fast-01 motion(standard, productive);
     }
 
+    //-----------------------------
+    // Icon
+    //-----------------------------
+    .#{$prefix}--tabs__nav-item--icon {
+      display: flex;
+      align-items: center;
+      padding-left: $spacing-03;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
+      padding-left: $spacing-05;
+    }
+
     //-----------------------------
     // Link
     //-----------------------------
@@ -326,8 +346,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       overflow-x: visible;
     }
 
-    .#{$prefix}--tabs__nav-item--icon,
-    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
+    .#{$prefix}--tabs__nav-item--icon-only,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
       display: flex;
       width: $icon-tab-size;
       height: $icon-tab-size;
@@ -347,8 +367,16 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Item Hover
     //-----------------------------
-    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item:hover {
-      background-color: $layer-selected-hover;
+    &:not(.#{$prefix}--tabs--contained)
+      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):hover {
+      border-bottom: $tab-underline-color-hover;
+      color: $text-primary;
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled):hover {
+      background-color: $layer-accent-hover;
+      color: $text-primary;
     }
 
     //-----------------------------
@@ -407,14 +435,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       background-color: $background;
     }
 
-    //-----------------------------
-    //  Link Hover
-    //-----------------------------
-    .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
-      border-bottom: $tab-underline-color-hover;
-      color: $text-primary;
-    }
-
     //-----------------------------
     //  Item Disabled
     //-----------------------------

package/scss/components/treeview/_treeview.scss

@@ -30,6 +30,14 @@
     &:focus {
       outline: none;
     }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node {
+    margin-left: $spacing-03;
   }
 
   .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
@@ -105,6 +113,11 @@
     padding-left: $spacing-07;
   }
 
+  .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon
+    .#{$prefix}--tree-leaf-node {
+    padding-left: $spacing-06;
+  }
+
   .#{$prefix}--tree-node__label__details {
     display: flex;
     align-items: center;
@@ -124,6 +137,7 @@
     border: 0;
     margin-top: $spacing-02;
     margin-right: $spacing-02;
+    margin-left: -$spacing-02;
 
     &:hover {
       cursor: pointer;
@@ -150,9 +164,16 @@
     align-self: flex-start;
     margin-top: rem(1px);
     margin-right: $spacing-03;
+    margin-left: $spacing-03;
     fill: $icon-secondary;
   }
 
+  .#{$prefix}--tree-parent-node__toggle
+    + .#{$prefix}--tree-node__label__details
+    .#{$prefix}--tree-node__icon {
+    margin-left: $spacing-02;
+  }
+
   .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
     background-color: $layer-selected-01;
     color: $text-primary;