@carbon/ibm-products-styles 2.71.0 → 2.72.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.71.0",
+  "version": "2.72.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -45,12 +45,11 @@
     "test": "jest --colors"
   },
   "devDependencies": {
-    "chalk": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^10.0.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.34.0",
+    "jest-config-ibm-cloud-cognitive": "^1.35.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.1",
@@ -67,5 +66,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "98ca4d24bcc54951cf99c2c892da24b5ea44e059"
+  "gitHead": "9574ac50c9027213234f5fb015b44af96cc6ad0c"
 }

package/scss/components/PageHeader/_page-header.scss

@@ -794,6 +794,7 @@ $duration: 1000ms;
 
   .#{$block-class}__content {
     padding: $spacing-06 0;
+    background-color: $layer;
   }
 
   .#{$block-class}__content__title-wrapper {
@@ -903,12 +904,13 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__tab-bar {
+    background-color: $layer;
     margin-inline-start: -$spacing-05;
   }
 
   .#{$block-class}__tab-bar--tablist {
     display: grid;
-    grid-gap: $spacing-10;
+    gap: $spacing-07;
     grid-template-columns: auto minmax(0, 1fr);
   }
 
@@ -966,6 +968,29 @@ $duration: 1000ms;
     padding: $spacing-05;
   }
 
+  .#{$block-class}--tag-overflow-container {
+    align-content: center;
+    text-align: end;
+    @include breakpoint(sm) {
+      transform: translateX(calc(-1 * #{$spacing-06}));
+    }
+    @include breakpoint(md) {
+      transform: translateX(calc(-1 * #{$spacing-03}));
+    }
+    @include breakpoint(lg) {
+      transform: translateX($spacing-08);
+    }
+  }
+
+  .#{$block-class}--tag-overflow-popover__hidden {
+    visibility: hidden;
+  }
+
+  .#{$block-class}--tag-overflow-container__has-no-hidden-items {
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX($spacing-07);
+  }
+
   .#{$block-class}__tag-item {
     flex-shrink: 0;
   }

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -100,12 +100,6 @@ $block-class-modal: #{$block-class}-modal;
     font-family: inherit;
   }
 
-  .#{$block-class-overflow}__show-all-tags-link.#{c4p-settings.$carbon-prefix}--link:visited {
-    display: inline-block;
-    margin: $spacing-03 0 $spacing-02; // to match the tags
-    color: $link-inverse;
-  }
-
   .#{c4p-settings.$carbon-prefix}--link:active,
   .#{c4p-settings.$carbon-prefix}--link:active:visited,
   .#{c4p-settings.$carbon-prefix}--link:active:visited:hover {
@@ -120,6 +114,18 @@ $block-class-modal: #{$block-class}-modal;
   .#{$block-class-overflow}__show-all-tags-link {
     color: $link-inverse;
     margin-block-start: $spacing-03;
+
+    &:hover {
+      color: $link-inverse-hover;
+    }
+
+    &:focus {
+      color: $focus-inverse;
+    }
+
+    &:visited {
+      color: $link-inverse;
+    }
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag

package/scss/components/TagSet/_tag-set.scss

@@ -102,12 +102,6 @@ $block-class-modal: #{$_block-class}-modal;
     text-align: start;
   }
 
-  .#{$block-class-overflow}__show-all-tags-link.#{$carbon-prefix}--link:visited {
-    display: inline-block;
-    margin: $spacing-03 0 $spacing-02; // to match the tags
-    color: $link-inverse;
-  }
-
   .#{$carbon-prefix}--link:active,
   .#{$carbon-prefix}--link:active:visited,
   .#{$carbon-prefix}--link:active:visited:hover {
@@ -122,6 +116,18 @@ $block-class-modal: #{$_block-class}-modal;
   .#{$block-class-overflow}__show-all-tags-link {
     color: $link-inverse;
     margin-block-start: $spacing-03;
+
+    &:hover {
+      color: $link-inverse-hover;
+    }
+
+    &:focus {
+      color: $focus-inverse;
+    }
+
+    &:visited {
+      color: $link-inverse;
+    }
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag