@carbon/ibm-products 2.8.0 → 2.9.0

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/breakpoint';
 @use './variables' as *;
 
 .#{$block-class}__table-toolbar > section {
@@ -163,6 +164,23 @@
   width: 100%;
   padding-top: 0;
 
+  .#{c4p-settings.$carbon-prefix}--data-table-header__description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--data-table-header__title {
+    overflow: hidden;
+    max-width: 80ch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include breakpoint.breakpoint(md) {
+      max-width: 55ch;
+    }
+  }
+
   .#{c4p-settings.$carbon-prefix}--data-table-content {
     width: 100%;
     height: 100%;
@@ -646,6 +664,7 @@
   width: 1rem;
   height: 100%;
   margin: 0;
+  -moz-appearance: initial;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
@@ -655,12 +674,14 @@
   outline: 0;
 }
 
-.#{$block-class} .#{$block-class}__col-resizer-range:focus::before {
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::before {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 2px;
-  height: 100%;
+  height: var(--#{$block-class}--header-height);
   background-color: $focus;
   content: '';
   transform: translate(-50%, -50%);
@@ -680,11 +701,13 @@
   transform: translate(-50%, 0);
 }
 
-.#{$block-class} .#{$block-class}__col-resizer-range:focus::after {
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
-  top: var(--#{$block-class}--row-height);
-  right: $spacing-03;
+  top: calc(var(--#{$block-class}--row-height) - 20px);
+  right: $spacing-02;
   width: 1px;
   height: calc(
     var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
@@ -702,3 +725,7 @@
   appearance: none;
   background: transparent;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-moz-range-thumb {
+  visibility: hidden;
+}

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

@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'ALIAS_STORY_STYLE_CONFIG' as *;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '../../global/decorators/side-panel-decorator' as *;
 
-$block-class: #{$pkg-prefix}--edit-side-panel;
+$block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
 $story-prefix: edit-side-panel-stories__;
 
 .#{$story-prefix}example-container {
@@ -19,11 +20,13 @@ $story-prefix: edit-side-panel-stories__;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
+.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
   margin-bottom: 0;
 }
 
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);

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

@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// @use 'ALIAS_STORY_STYLE_CONFIG';
+// @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // TODO: add any additional styles used by EditTearsheetNarrow.stories.js

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

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/themes/scss/themes';
 @use '@carbon/styles/scss/type';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $story-prefix: side-panel-stories__;
 
@@ -43,3 +44,9 @@ $story-prefix: side-panel-stories__;
 .#{$story-prefix}header {
   @include theme(themes.$g100);
 }
+
+.#{$story-prefix}grid {
+  height: 100%;
+}
+
+@include side-panel-decorator($story-prefix);

package/scss/global/decorators/_side-panel-decorator.scss

@@ -0,0 +1,18 @@
+@mixin side-panel-decorator($prefix) {
+  .#{$prefix}container {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+  }
+
+  .#{$prefix}content {
+    flex-grow: 1;
+  }
+
+  .#{$prefix}toggle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/scss/global/js/utils/_story-as-full-page.scss

@@ -0,0 +1,6 @@
+.story-helper__full-page {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+}