@carbon/ibm-products 1.22.0 → 1.24.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;
@@ -29,3 +33,56 @@ $block-class: #{$pkg-prefix}--datagrid;
     border-bottom: none;
   }
 }
+
+.#{$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,16 +355,48 @@
 .#{$block-class}__datagridLeftPanel {
   display: flex;
   width: 388px; // as per UX specs.
-  height: 100%;
   background-color: $ui-01;
 }
 
+.#{$block-class}__leftPanel-position {
+  display: inherit;
+}
+
 .#{$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 {
@@ -378,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/index.scss

@@ -16,4 +16,5 @@
 @import './addons/CustomizeColumnsModal';
 @import './addons/RowSizeDropdown';
 @import './useSelectAllToggle';
+@import './useExpandedRow';
 @import './draggableElement';

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

@@ -0,0 +1,7 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/

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/InlineEdit/_inline-edit.scss

@@ -20,6 +20,7 @@
 
 // cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
 @mixin input-outline($color: $focus) {
+  /* stylelint-disable-next-line carbon/theme-token-use */
   outline: $spacing-01 solid $color;
   outline-offset: calc(-1 * $spacing-01);
 
@@ -31,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;
 }
 
@@ -110,6 +110,7 @@
         100% - var(--#{$block-class}--toolbar-width) - $spacing-05
       );
       min-height: var(--#{$block-class}--size);
+      /* stylelint-disable-next-line carbon/layout-token-use */
       margin-right: var(--#{$block-class}--toolbar-width);
       // room for toolbar
       margin-left: $spacing-05;
@@ -258,32 +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;
-      // stylelint-disable-next-line carbon/layout-token-use
-      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/OptionsTile/_options-tile.scss

@@ -112,6 +112,7 @@
   }
 
   .#{$block-class}__summary--warn svg path[fill='none'] {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     fill: $carbon__black-100;
   }