@carbon/ibm-products 2.1.1 → 2.1.2

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -124,6 +124,10 @@
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
   border-right: 1px solid $layer-accent-01;
   border-bottom: none;
 }

package/scss/components/HTTPErrors/_storybook-styles.scss

@@ -1,6 +1,20 @@
-//
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2023, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+$story-anchor: 'http-errors';
+div[id*='#{$story-anchor}'] .docs-story {
+  min-height: 50vh;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  transform: translateZ(0);
+}
+
+div[id*='#{$story-anchor}'] .docs-story > div:first-child {
+  overflow: auto;
+  width: 100%;
+}
+
+div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
+  min-height: 50vh;
+}

package/scss/components/NotificationsPanel/_storybook-styles.scss

@@ -9,7 +9,3 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
-
-.#{$storybook-block-class}--header {
-  @include theme(themes.$g100);
-}

package/scss/components/PageHeader/_storybook-styles.scss

@@ -15,15 +15,6 @@
 
 $story-class: 'page-header-stories';
 
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  max-height: 500px;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $layer-accent-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
 .#{$story-class}__content-switcher {
   justify-content: flex-start;
 }
@@ -66,15 +57,52 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-.#{$story-class}__app--whole-page-scroll {
+$story-anchor: 'page-header';
+div[id*='#{$story-anchor}'] .docs-story {
+  --story-height: 50vh;
+
+  min-height: var(--story-height);
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  transform: translateZ(0);
+}
+
+div[id*='#{$story-anchor}'] .docs-story > div:first-child {
   overflow: hidden;
+  width: 100%;
 }
 
-.#{$story-class}__content-container {
-  height: 100%;
-  padding: 0;
+div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
+  min-height: 50vh;
+}
+
+.#{$story-class}__viewport {
+  overflow: hidden;
+  height: 100vh;
 }
 
-.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
+.#{$story-class}__viewport--scroll {
   overflow-y: auto;
 }
+
+.#{$story-class}__viewport .#{$story-class}__content-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.#{$story-class}__viewport
+  .#{$story-class}__content-container--with-global-header {
+  height: calc(100% - #{$spacing-09});
+  margin-top: $spacing-09;
+}
+
+.#{$story-class}__viewport--scroll .#{$story-class}__content-container {
+  overflow-y: initial;
+}
+
+// cspell:disable-next-line
+.sbdocs .#{$story-class}__viewport {
+  max-height: 50vh;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $layer-accent-01;
+  color: $text-primary;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -146,12 +146,14 @@ $motion-duration: $duration-moderate-02;
     padding: $spacing-06 $spacing-07;
     border-bottom: 1px solid $border-subtle-01;
     margin: 0;
+    background-color: $layer;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header {
     padding: $spacing-05;
     border-bottom: 1px solid $border-subtle-01;
     margin: 0;
+    background-color: $layer;
   }
 
   .#{$block-class}__header-content {
@@ -265,11 +267,15 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__main {
     display: flex;
     flex-direction: row;
-    background-color: $layer;
+    background-color: $background;
     grid-column: 1 / -1;
     grid-row: 1 / -1;
   }
 
+  &.#{$block-class}--narrow .#{$block-class}__main {
+    background-color: $layer;
+  }
+
   .#{$block-class}__main .#{$block-class}__influencer {
     border-right: none;
     border-left: 1px solid $border-subtle-01;

package/scss/components/WebTerminal/_storybook-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -34,3 +34,18 @@ $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
     font-size: 14px;
   }
 }
+
+$story-anchor: 'web-terminal';
+div[id*='#{$story-anchor}'] .docs-story {
+  min-height: 50vh;
+  transform: translateZ(0);
+}
+
+div[id*='#{$story-anchor}'] .docs-story > div:first-child {
+  width: 100%;
+  overflow: hidden;
+}
+
+div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
+  min-height: 50vh;
+}

package/scss/global/styles/_display-box.scss

@@ -22,6 +22,7 @@ $indicator-height: $spacing-04;
   position: relative;
   display: inline-block;
   padding-top: $spacing-05; // space for the indicators
+  margin-top: $spacing-09; // provides space in docs
   color: $text-helper;
 }