@carbon/ibm-products 2.7.0 → 2.8.1

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

@@ -15,7 +15,7 @@
 @use '@carbon/react/scss/components/tooltip';
 @use '@carbon/react/scss/components/modal';
 @use '@carbon/styles/scss/spacing';
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 .#{c4p-settings.$carbon-prefix}--number {
   min-width: 100%;

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

@@ -5,9 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
 $story-prefix: create-side-panel-stories__;
@@ -27,3 +28,5 @@ $story-prefix: create-side-panel-stories__;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/type';
 @use '@carbon/type/scss/font-family';
 @use '@carbon/styles/scss/spacing' as *;

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/spacing' as *;
 
 $story-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow--story;

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

@@ -5,8 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$story-anchor: 'data-spreadsheet';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'DataSpreadsheet';
+
+$story-anchor: 'DataSpreadsheet';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }

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

@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing' as *;
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // TODO: add any additional styles used by Datagrid.stories.js
 // helper class for the nested table
@@ -128,8 +128,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   }
 }
 
-$story-anchor: 'datagrid';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'Datagrid';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }

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%;
@@ -637,3 +655,77 @@
   .#{c4p-settings.$carbon-prefix}--btn__icon {
   margin-top: 0;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(#{$spacing-03} * -1);
+  width: 1rem;
+  height: 100%;
+  margin: 0;
+  -moz-appearance: initial;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus {
+  outline: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: var(--#{$block-class}--header-height);
+  background-color: $focus;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator {
+  position: absolute;
+  z-index: 2;
+  right: calc(#{$spacing-03} * -1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  margin: 0;
+  background-color: $focus;
+  transform: translate(-50%, 0);
+}
+
+.#{$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: calc(var(--#{$block-class}--row-height) - 20px);
+  right: $spacing-02;
+  width: 1px;
+  height: calc(
+    var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
+  );
+  background-color: $layer-active-01;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  -webkit-appearance: none;
+  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 '../../global/styles/project-settings' 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/EditTearsheet/_storybook-styles.scss

@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/type/scss/font-family';
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // TODO: add any additional styles used by EditTearsheet.stories.js
 

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

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

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

@@ -8,7 +8,7 @@
 @use '@carbon/colors/' as *;
 @use '@carbon/type/' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // make the root full width to get a better idea of how the cards
 // look in a real grid situation

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

@@ -7,7 +7,7 @@
 
 // shared card styles can be found in the Card folder
 @use '../Card/storybook-styles' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--card;

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

@@ -6,7 +6,7 @@
 //
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
 

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -360,7 +360,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__title-row {
-    margin-top: $spacing-01; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
+    --title-row-margin-top: #{$spacing-01}; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
+
+    margin-top: var(--title-row-margin-top);
     margin-bottom: 0;
     transform: translateY(
       $spacing-01
@@ -416,8 +418,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__breadcrumb-row--has-breadcrumbs
     + .#{$block-class}__title-row--sticky {
-    // top: 0;
-    top: var(--#{$block-class}--breadcrumb-top); //2
+    // stylelint-disable-next-line carbon/layout-token-use
+    top: calc(
+      var(--#{$block-class}--breadcrumb-top) - var(--title-row-margin-top)
+    );
   }
 
   .#{$block-class}__title-column {

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/components/Tearsheet/_storybook-styles.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/spacing' as *;
 
 .tearsheet-stories__dummy-content-block {

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

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './tooltip-trigger';

package/scss/components/TooltipTrigger/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './tooltip-trigger';

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

package/scss/components/TooltipTrigger/_tooltip-trigger.scss

@@ -0,0 +1,29 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}

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

@@ -11,7 +11,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
-@use '../../global/styles/project-settings' as c4p-settings;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
 

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

@@ -37,6 +37,7 @@
 @use './TagSet/index-with-carbon' as *;
 @use './Tearsheet/index-with-carbon' as *;
 @use './Toolbar/index-with-carbon' as *;
+@use './TooltipTrigger/index-with-carbon' as *;
 @use './WebTerminal/index-with-carbon' as *;
 @use './UserProfileImage/index-with-carbon' as *;
 @use './EditSidePanel/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -38,6 +38,7 @@
 @use './TagSet';
 @use './Tearsheet';
 @use './Toolbar';
+@use './TooltipTrigger';
 @use './WebTerminal';
 @use './UserProfileImage';
 @use './EditSidePanel';

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;
+}