@carbon/ibm-products 1.23.0 → 1.25.0

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

@@ -12,6 +12,10 @@
 
 $block-class: #{$pkg-prefix}--datagrid;
 
+.sb-show-main.sb-main-centered {
+  height: 100vh;
+}
+
 .sb-show-main.sb-main-centered #root {
   width: 100%;
   height: 100vh;
@@ -33,3 +37,52 @@ $block-class: #{$pkg-prefix}--datagrid;
 .#{$block-class}__panelContent {
   display: inline;
 }
+
+/* only for storybook purpose. */
+.#{$pkg-prefix}--side-panel.#{$pkg-prefix}--side-panel__container {
+  top: 0;
+  height: 100%;
+}
+
+.page-content-wrapper.side-panel-open {
+  .#{$block-class} {
+    padding-right: $spacing-05;
+  }
+}
+
+.#{$block-class}__side-panel-sections {
+  padding-bottom: $spacing-06;
+}
+
+.#{$block-class}__side-panel-section-inner {
+  display: flex;
+  padding: $spacing-01 0;
+}
+
+.#{$block-class}__side-panel-label-text {
+  @include carbon--type-style('label-02');
+
+  color: $text-02;
+}
+
+.#{$block-class}__side-panel-value {
+  @include carbon--type-style('body-short-01');
+
+  padding-left: $spacing-03;
+}
+
+.#{$block-class}__side-panel-section-header {
+  @include carbon--type-style('productive-heading-01');
+
+  padding-bottom: $spacing-02;
+}
+
+.#{$pkg-prefix}--side-panel.#{$pkg-prefix}--side-panel__container.#{$pkg-prefix}--side-panel__container-right-placement {
+  border: 0 none;
+  box-shadow: none;
+}
+
+.#{$pkg-prefix}--side-panel__container
+  .#{$pkg-prefix}--side-panel__inner-content {
+  height: 100%;
+}

package/scss/components/Datagrid/styles/datagrid.scss

@@ -144,26 +144,18 @@
 }
 .#{$block-class}__grid-container {
   display: block;
-  overflow: auto;
   width: 100%;
   padding-top: 0;
 
   .#{$carbon-prefix}--data-table-content {
     width: 100%;
     height: 100%;
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-    overflow-x: unset;
+    overflow-x: auto;
   }
 
   .#{$block-class}__table-simple {
-    display: flex;
-    overflow: auto;
+    overflow: hidden;
     max-height: 100%;
-    flex-direction: column;
-  }
-
-  .#{$block-class}__with-pagination tr:last-of-type > td {
-    border-bottom: none;
   }
 
   .#{$block-class}__head {
@@ -261,6 +253,10 @@
   flex: 1 1 auto;
 }
 
+.#{$block-class}__with-pagination table tr:last-of-type > td {
+  border-bottom: none;
+}
+
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;
@@ -359,7 +355,6 @@
 .#{$block-class}__datagridLeftPanel {
   display: flex;
   width: 388px; // as per UX specs.
-  height: 100%;
   background-color: $ui-01;
 }
 
@@ -370,9 +365,38 @@
 .#{$block-class}__datagridWithPanel {
   position: relative;
   display: flex;
-  overflow: auto;
   width: 100%;
+  height: 100%;
   flex-direction: column;
+
+  .#{$block-class}__grid-container {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__table-toolbar {
+    width: 100%;
+  }
+
+  .#{$block-class}__datagridLeftPanel {
+    flex: 0 0 auto;
+  }
+
+  .#{$carbon-prefix}--data-table-content {
+    flex: 1 1 0%;
+  }
+  .#{$block-class}__table-container {
+    overflow: hidden;
+  }
+}
+
+.#{$block-class}__table-container {
+  position: relative;
+  display: flex;
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
 }
 
 .#{$block-class}__carbon-row-expanded {
@@ -382,3 +406,60 @@
     border-left: 1px solid $interactive-01;
   }
 }
+
+.#{$block-class} .#{$carbon-prefix}--data-table-header {
+  background: transparent;
+}
+
+.#{$block-class}__dense-header {
+  display: flex;
+  flex-wrap: wrap;
+
+  .#{$carbon-prefix}--data-table-header {
+    flex: 1 1 auto;
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$block-class}__table-toolbar {
+    flex: 0 0 auto;
+  }
+  .#{$carbon-prefix}--table-toolbar {
+    background: transparent;
+  }
+
+  .#{$carbon-prefix}__table-container {
+    flex: 1 1 100%;
+  }
+
+  .#{$carbon-prefix}--table-toolbar {
+    padding-top: $spacing-07;
+  }
+
+  .#{$block-class}__toolbar-divider {
+    position: relative;
+  }
+
+  .#{$block-class}__toolbar-divider::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 1px;
+    height: $spacing-05;
+    border-left: 1px solid $ui-03;
+    content: '';
+    transform: translateY(-50%);
+  }
+}
+
+.#{$carbon-prefix}--data-table--selected {
+  position: relative;
+}
+
+.#{$carbon-prefix}--data-table--selected::before {
+  position: absolute;
+  left: 0;
+  width: $spacing-02;
+  height: 100%;
+  background-color: $interactive-01;
+  content: '';
+}

package/scss/components/Datagrid/styles/useExpandedRow.scss

@@ -5,9 +5,3 @@
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
-
-@import './variables';
-
-.#{$block-class}__expanded-row-content {
-  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
-}

package/scss/components/EditFullPage/_edit-full-page.scss

@@ -0,0 +1,34 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditFullPage uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditFullPage
+
+// EditFullPage uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditFullPage
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-full-page {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--edit-full-page;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('edit-full-page') {
+  @include edit-full-page;
+}

package/scss/components/EditFullPage/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './edit-full-page';

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

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by EditFullPage.stories.js

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -0,0 +1,132 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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.
+@import '../../global/styles/project-settings';
+
+// Other Carbon settings.
+@import 'carbon-components/scss/globals/grid/grid';
+
+// EditTearsheet uses the following Carbon components:
+@import 'carbon-components/scss/components/toggle/toggle';
+@import 'carbon-components/scss/components/ui-shell/side-nav';
+
+// EditTearsheet uses the following IBM Products components:
+// TearsheetShell
+@import '../Tearsheet/tearsheet';
+@import '../CreateInfluencer/index';
+
+@mixin edit-tearsheet {
+  @keyframes form-content-entrance {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(-0.75rem);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  $block-class: #{$pkg-prefix}--tearsheet-edit;
+  $form-block-class: #{$pkg-prefix}--tearsheet-edit__form;
+  $section-block-class: #{$pkg-prefix}--tearsheet-edit__section;
+  $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-edit__section--divider;
+  $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-edit__form--fieldset;
+
+  .#{$block-class} {
+    --#{$block-class}--total-width: 0;
+  }
+
+  .#{$block-class} .#{$form-block-class}__form--hidden-form {
+    display: none;
+  }
+
+  .#{$block-class} .#{$form-block-class}__form--visible-form {
+    animation-duration: $duration--slow-01;
+    animation-fill-mode: forwards;
+    animation-name: form-content-entrance;
+    animation-timing-function: $carbon--standard-easing;
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion) {
+    .#{$block-class} .#{$form-block-class}__form--visible-form {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__content {
+    height: 100%;
+    padding: $spacing-06;
+    overflow-x: hidden;
+  }
+
+  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
+    padding: 0;
+    margin: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__form--heading {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--btn-set
+    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--disabled {
+    box-shadow: -0.0625rem 0 0 0 $button-separator;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
+    position: initial;
+    width: 100%;
+    max-width: 100%;
+    background-color: transparent;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav__link:hover {
+    cursor: pointer;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav__overlay-active {
+    display: none;
+  }
+
+  .#{$block-class} .#{$block-class}__form--title,
+  .#{$block-class} .#{$block-class}__section--title {
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__section--subtitle,
+  .#{$block-class} .#{$block-class}__form--subtitle {
+    @include carbon--type-style('productive-heading-01');
+
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__section--description,
+  .#{$block-class} .#{$block-class}__form--description {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--fieldset {
+    margin-bottom: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__form--fieldset > * {
+    margin-bottom: $spacing-05;
+  }
+}
+
+@include exports('edit-tearsheet') {
+  @include edit-tearsheet;
+}

package/scss/components/EditTearsheet/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './edit-tearsheet';

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

@@ -0,0 +1,55 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by EditTearsheet.stories.js
+
+$preview-block-class: #{$pkg-prefix}--tearsheet-edit-multi-form;
+
+.#{$preview-block-class}__description {
+  @include carbon--type-style('body-short-01');
+
+  padding-bottom: $spacing-04;
+}
+
+p.#{$preview-block-class}__description:last-of-type {
+  padding-bottom: $spacing-07;
+}
+
+.#{$preview-block-class}__heading {
+  @include carbon--font-weight('semibold');
+}
+
+.#{$preview-block-class}
+  .#{$pkg-prefix}--tearsheet__content
+  .#{$carbon-prefix}--form-item {
+  margin-bottom: $spacing-05;
+}
+
+.#{$prefix}--tile-group div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile {
+  width: 280px;
+  height: 240px;
+  margin-right: $spacing-05;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile
+  .#{$pkg-prefix}--empty-state__illustration.#{$pkg-prefix}--empty-state__illustration--lg {
+  min-width: 120px;
+  height: 120px;
+}
+
+.#{$pkg-prefix}--tearsheet-edit-multi-form--custom-tile-label {
+  position: absolute;
+  bottom: $spacing-05;
+  left: $spacing-05;
+}

package/scss/components/EditTearsheetNarrow/_edit-tearsheet-narrow.scss

@@ -0,0 +1,34 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// EditTearsheetNarrow uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditTearsheetNarrow
+
+// EditTearsheetNarrow uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditTearsheetNarrow
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-tearsheet-narrow {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--edit-tearsheet-narrow;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('edit-tearsheet-narrow') {
+  @include edit-tearsheet-narrow;
+}

package/scss/components/EditTearsheetNarrow/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './edit-tearsheet-narrow';

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

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by EditTearsheetNarrow.stories.js

package/scss/components/EmptyStates/_empty-state.scss

@@ -21,20 +21,30 @@
   .#{$block-class} {
     color: $text-01;
 
-    .#{$block-class}__header,
-    .#{$block-class}__subtitle {
-      padding-bottom: $spacing-02;
+    .#{$block-class}__header {
+      @include carbon--type-style('productive-heading-03');
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-bottom: calc($spacing-01 + $spacing-02);
       margin: 0;
     }
+    .#{$block-class}__subtitle {
+      @include carbon--type-style('body-long-01');
+
+      padding-bottom: $spacing-05;
+    }
     .#{$block-class}__header--small {
-      @include carbon--type-style('productive-heading-03');
+      @include carbon--type-style('body-short-02');
+
+      padding-bottom: $spacing-03;
     }
     .#{$block-class}__subtitle--small {
-      @include carbon--type-style('body-short-01');
+      @include carbon--type-style('caption-01');
     }
   }
 
   .#{$block-class}__illustration {
+    height: auto;
+    margin-bottom: $spacing-05;
     &.#{$block-class}__illustration--lg {
       min-width: $spacing-11;
       max-width: $spacing-11;
@@ -45,12 +55,9 @@
     }
   }
 
-  .#{$block-class}__action-button,
-  .#{$block-class}__link {
-    margin-top: $spacing-06;
-  }
   .#{$block-class} .#{$block-class}__action-button {
     display: block;
+    margin-bottom: $spacing-05;
   }
   .#{$block-class} .#{$block-class}__link {
     display: block;

package/scss/components/InlineEdit/_inline-edit.scss

@@ -32,14 +32,13 @@
 @mixin input-button-defaults($block-class) {
   display: inline-flex;
   width: var(--#{$block-class}--size);
+  max-width: var(--#{$block-class}--size);
   height: 100%;
   min-height: initial;
   max-height: var(--#{$block-class}--size);
+  align-items: center;
+  justify-content: center;
 
-  // stylelint-disable-next-line carbon/layout-token-use
-  padding: calc(
-    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size)) - #{$spacing-01}
-  );
   border: 2px solid transparent;
 }
 
@@ -260,31 +259,20 @@
     &.#{$block-class}--editing
       .#{$block-class}__toolbar--animation
       .#{$block-class}__save {
-      margin-right: 0;
+      overflow: visible;
+      width: var(--#{$block-class}--edit-size);
       transition: all $duration--moderate-02 motion(standard, productive);
       transition-property: margin, padding;
-
-      svg {
-        transition: width $duration--moderate-02 motion(standard, productive);
-        @media (prefers-reduced-motion: reduce) {
-          transition: none;
-        }
-      }
     }
 
     &.#{$block-class}--editing
       .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
       .#{$block-class}__save {
-      padding-right: 0;
-      padding-left: 0;
+      overflow: hidden;
+      width: 0;
+      padding: 0;
       border-right: 0;
       border-left: 0;
-      margin-right: calc(-1 * var(--#{$block-class}--size));
-
-      svg {
-        overflow: hidden;
-        width: 0;
-      }
     }
 
     &.#{$block-class}.#{$block-class} .#{$block-class}__edit {

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

@@ -185,6 +185,7 @@
           padding: 0;
 
           .#{$carbon-prefix}--btn__icon {
+            // stylelint-disable-next-line carbon/motion-easing-use
             transition: transform $duration--moderate-02 ease;
             @media (prefers-reduced-motion: reduce) {
               transition: none;

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

@@ -92,7 +92,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     $animation: background-and-shadow-appear;
   }
 
-  /* stylelint-disable-next-line carbon/motion-token-use */
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: $animation $duration linear paused forwards;
   // Added separately for clarity
   animation-delay: calc(
@@ -196,6 +196,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       content: '';
       opacity: 0;
       transform: translateX(-50%) scaleX(1);
+      // stylelint-disable-next-line carbon/motion-easing-use
       transition: all $duration--moderate-01 ease-out;
     }
 
@@ -432,6 +433,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title {
       @include carbon--type-style('productive-heading-04');
 
+      min-height: $spacing-08;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

package/scss/components/StatusIcon/_status-icon.scss

@@ -119,7 +119,7 @@ $block-class: #{$pkg-prefix}--status-icon;
           @media (prefers-reduced-motion: reduce) {
             animation: none;
           }
-          // stylelint-disable-next-line carbon/motion-token-use
+          // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
           fill: --clr($icon, $theme);