@carbon/ibm-products-styles 2.60.0 → 2.61.0-rc.0

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -234,6 +234,8 @@ $draghandle-btn-class: #{$block-class}__handle;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    margin-block-start: $spacing-05;
+    padding-block-end: $spacing-05;
   }
 
   // THEME

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -27,6 +27,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
 
 .#{$block-class} {
   &__element-stepped-media {
+    padding: 0 $spacing-05;
     /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
     block-size: to-rem(128px);
     margin-block-end: $spacing-05;

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -94,4 +94,29 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &__icon-idea {
     margin-block-end: $spacing-03;
   }
+
+  li {
+    display: block;
+    max-inline-size: 100%;
+    white-space: nowrap;
+  }
+
+  button,
+  &__navLinkLabels-tooltip {
+    max-inline-size: 100%;
+
+    .#{c4p-settings.$carbon-prefix}--tooltip-content {
+      color: $text-primary;
+      margin-inline-start: calc($spacing-02 + $spacing-01);
+      max-inline-size: 100%;
+    }
+  }
+
+  &__navLinkLabels-text {
+    display: inline-block;
+    overflow: hidden;
+    max-inline-size: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -29,31 +29,6 @@ $one-grid-column: calc(100% / 16);
 .#{$block-class} {
   $block: &;
 
-  .#{$carousel} {
-    display: flex;
-    flex-direction: column;
-    min-block-size: 100%;
-
-    &__elements-container {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
-    &__elements {
-      flex: 1;
-    }
-  }
-
-  position: fixed;
-  z-index: 6001;
-  inset-block-start: 0;
-  inset-inline: 0;
-
-  #{$block}--auto-height-container {
-    flex: 1;
-  }
-
   &--body {
     overflow: hidden auto;
     flex-grow: 1;
@@ -62,17 +37,8 @@ $one-grid-column: calc(100% / 16);
     background-color: $background;
   }
 
-  &--body-grid {
-    padding: 0 !important;
-    block-size: 100%;
-  }
-
-  &--body-row {
-    block-size: 100%;
-  }
-
   &--progress {
-    margin: $spacing-07 $spacing-05 $spacing-04;
+    margin-block-end: $spacing-04;
   }
 
   &__carousel {
@@ -83,32 +49,6 @@ $one-grid-column: calc(100% / 16);
     }
   }
 
-  &--container {
-    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-use
-    background-color: $background;
-    max-inline-size: 82rem;
-    min-inline-size: 47rem;
-  }
-
-  &--media-container {
-    overflow: hidden;
-  }
-
-  &--media {
-    block-size: 100%;
-    inline-size: 100%;
-
-    margin-inline-end: calc($spacing-08 * -1);
-    @include breakpoint-down(xlg) {
-      margin-inline-end: calc($spacing-07 * -1);
-    }
-  }
-
-  &--stepped-animated-media {
-    overflow: hidden;
-    block-size: 100%;
-  }
-
   &--internal-body {
     padding: 0 !important;
     margin: 0 !important;
@@ -120,18 +60,32 @@ $one-grid-column: calc(100% / 16);
     background-color: $background;
     margin-block-end: 0 !important;
     min-block-size: $spacing-09;
+    padding-block-start: $spacing-06;
+    padding-inline-start: $spacing-07 !important;
 
     &:empty {
       min-block-size: 0;
     }
 
-    h2 {
-      @include type.type-style('productive-heading-04');
+    .#{$block-class}--titleContainer {
+      margin-block-end: $spacing-05;
 
-      padding: 0 $spacing-05 $spacing-06;
+      h2 {
+        @include type.type-style('productive-heading-04');
 
-      &:empty {
-        padding: 0;
+        margin-block-end: $spacing-03;
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      h3 {
+        @include type.type-style('productive-heading-03');
+
+        &:empty {
+          padding: 0;
+        }
       }
     }
 
@@ -143,13 +97,6 @@ $one-grid-column: calc(100% / 16);
         margin-block-start: 0;
       }
     }
-    > #{$block}--close-icon {
-      position: absolute !important;
-      z-index: 1;
-      inline-size: $spacing-09;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-    }
   }
 
   // FOOTER
@@ -174,6 +121,12 @@ $one-grid-column: calc(100% / 16);
       max-inline-size: none;
       padding-inline-start: $spacing-07 !important;
     }
+    .#{c4p-settings.$carbon-prefix}--inline-loading {
+      position: absolute;
+      inline-size: $spacing-07;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
   }
 
   &--footer-controls {
@@ -183,25 +136,11 @@ $one-grid-column: calc(100% / 16);
     margin-inline-start: auto;
   }
 
-  // MODAL (settings exclusive of "FULL SCREEN")
-  &--modal {
-    #{$block}--content {
-      margin-block-start: 0;
-    }
-
-    #{$block}--internal-header {
-      &:has(> :nth-child(2)) {
-        min-block-size: initial;
-      }
-    }
-
-    &:has(> :nth-child(1)) {
-      min-block-size: initial;
-    }
-  }
-
   // FULL SCREEN (settings exclusive of "MODAL")
   &--full-screen {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
     #{$block}--container {
       display: flex;
       flex-direction: column;
@@ -211,53 +150,6 @@ $one-grid-column: calc(100% / 16);
       max-inline-size: 100vw;
     }
 
-    // e.g. "IBM Cloud Pak | Product"
-    // ..."IBM Cloud Pak"
-    #{$block}--header {
-      @include type.type-style('body-long-01');
-      /* stylelint-disable-next-line carbon/theme-use */
-      background-color: $gray-100;
-
-      block-size: $spacing-09;
-      border-block-end: 1px solid $border-subtle-01;
-      /* stylelint-disable-next-line carbon/theme-use */
-      color: $gray-10;
-      /* stylelint-disable-next-line carbon/type-use */
-      font-weight: normal !important; // overrides type style above
-      /* stylelint-disable-next-line carbon/type-use */
-      line-height: $spacing-09 !important;
-      padding-inline-start: $spacing-05;
-
-      b {
-        /* stylelint-disable-next-line carbon/type-use */
-        font-weight: 600;
-      }
-    }
-
-    #{$block}--internal-header {
-      > h2 {
-        padding: $spacing-05 $spacing-08 0;
-      }
-
-      #{$block}--progress {
-        margin: $spacing-10 $spacing-08 $spacing-04;
-
-        @include breakpoint-down(xlg) {
-          margin-inline-start: $spacing-07;
-        }
-      }
-
-      &--has-title {
-        #{$block}--progress {
-          margin-block-start: $spacing-06;
-        }
-      }
-
-      &:has(> :nth-child(1)) {
-        min-block-size: initial;
-      }
-    }
-
     #{$block}--footer {
       #{$block}--skip-btn {
         padding-inline-start: $spacing-08 !important;

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -169,6 +169,8 @@ $block-size: 38.5rem;
     text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
+      @include type.type-style('heading-01');
+
       color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('regular');

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

@@ -109,6 +109,7 @@ $duration: 1000ms;
     z-index: $z-index-header-minus;
     display: inline-block; /* cause top/bottom margin to reserve space */
     background-color: $background;
+    border-block-end: 1px solid $border-subtle-00;
     color: $text-primary;
     inline-size: 100%;
     /* stylelint-disable-next-line carbon/layout-use */
@@ -124,6 +125,10 @@ $duration: 1000ms;
     --#{$block-class}--navigation-buffer-top: $spacing-06;
   }
 
+  &.#{$block-class}--without-background {
+    border-block-end: none;
+  }
+
   &.#{$block-class}--has-navigation-tags-only {
     --#{$block-class}--navigation-buffer-top: $spacing-04;
   }

package/scss/components/_index-with-carbon.scss

@@ -52,8 +52,6 @@
 @use './BigNumbers/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
-@use './InterstitialScreenView/index-with-carbon' as *;
-@use './InterstitialScreenViewModule/index-with-carbon' as *;
 @use './Coachmark/index-with-carbon' as *;
 @use './CoachmarkBeacon/index-with-carbon' as *;
 @use './CoachmarkButton/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -65,8 +65,6 @@
 @use './BigNumbers';
 @use './TruncatedList';
 @use './InterstitialScreen';
-@use './InterstitialScreenView';
-@use './InterstitialScreenViewModule';
 @use './DelimitedList';
 @use './Decorator';
 @use './DecoratorLink';

package/scss/components/InterstitialScreenView/_carbon-imports.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Import any Carbon component styles used from InterstitialScreenView in this file.
-// InterstitialScreenView uses the following Carbon components:

package/scss/components/InterstitialScreenView/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// 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 './carbon-imports';
-@use './interstitial-screen-view';

package/scss/components/InterstitialScreenView/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// 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 './interstitial-screen-view';

package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss

@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// InterstitialScreenView uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InterstitialScreenView
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view;
-
-.#{$block-class} {
-  block-size: 100%;
-}

package/scss/components/InterstitialScreenViewModule/_carbon-imports.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Import any Carbon component styles used from InterstitialScreenViewModule in this file.
-// InterstitialScreenViewModule uses the following Carbon components:

package/scss/components/InterstitialScreenViewModule/_index-with-carbon.scss

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// 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 './carbon-imports';
-@use './interstitial-screen-view-module';

package/scss/components/InterstitialScreenViewModule/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// 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 './interstitial-screen-view-module';

package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss

@@ -1,59 +0,0 @@
-//
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/* stylelint-disable max-nesting-depth */
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// InterstitialScreenViewModule uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InterstitialScreenViewModule
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-
-$interstitial-block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;
-$block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view-module;
-
-.#{$block-class} {
-  margin: $spacing-07;
-
-  &--heading {
-    @include type.type-style('heading-05');
-
-    margin-block-end: $spacing-07;
-  }
-
-  &--body {
-    @include type.type-style('body-01');
-  }
-}
-.#{$interstitial-block-class} {
-  &--modal {
-    .#{$block-class} {
-      margin: $spacing-11 $spacing-07;
-    }
-  }
-
-  &--full-screen {
-    .#{$block-class} {
-      margin: $spacing-12 $spacing-08;
-
-      @include breakpoint-down(xlg) {
-        margin: $spacing-12 $spacing-07;
-      }
-    }
-  }
-}