@carbon/ibm-products 1.37.0 → 1.39.0

package/scss/components/AddSelect/_add-select.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.
@@ -8,7 +8,19 @@
 // Standard imports.
 @import '../../global/styles/project-settings';
 
+@import '../Tearsheet/index';
+@import '../CreateInfluencer/index';
+
+@import 'carbon-components/scss/components/accordion/accordion';
+@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/checkbox/checkbox';
+@import 'carbon-components/scss/components/dropdown/dropdown';
+@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+@import 'carbon-components/scss/components/radio-button/radio-button';
+@import 'carbon-components/scss/components/search/search';
 @import 'carbon-components/scss/components/structured-list/structured-list';
+@import 'carbon-components/scss/components/tag/tag';
 
 @mixin add-select {
   $block-class: #{$pkg-prefix}--add-select;
@@ -60,7 +72,9 @@
       justify-content: center;
     }
 
-    &-cell:hover .#{$block-class}__selections-hidden-hover {
+    &-cell:hover .#{$block-class}__selections-hidden-hover,
+    .#{$carbon-prefix}--structured-list-row:focus-within
+      .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
 
@@ -68,7 +82,7 @@
       visibility: hidden;
     }
 
-    &-row-selected#{$carbon-prefix}--structured-list-row {
+    &-row--selected.#{$carbon-prefix}--structured-list-row {
       border-bottom: 1px solid $selected-ui;
       background-color: $selected-ui;
     }
@@ -108,7 +122,7 @@
       border-left: 0.125rem solid transparent;
     }
 
-    &-row-meta-selected {
+    &-row-meta--selected {
       border-left: 0.125rem solid $interactive-04;
       background-color: $hover-row;
     }
@@ -130,13 +144,6 @@
     }
   }
 
-  .#{$block-class}
-    #{$carbon-prefix}--structured-list--selection
-    .#{$block-class}__selections-row-selected#{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
-    border-bottom: 1px solid $hover-selected-ui;
-    background-color: $hover-selected-ui;
-  }
-
   .#{$block-class}__sub-header {
     display: flex;
     align-items: flex-end;
@@ -147,13 +154,12 @@
     }
   }
 
-  .#{$block-class} #{$carbon-prefix}--structured-list-row {
-    border-bottom: 0;
-  }
-
+  .#{$block-class} .#{$carbon-prefix}--structured-list-row,
   .#{$block-class}
-    #{$carbon-prefix}--structured-list--selection
-    #{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
+    .#{$block-class}__selections.#{$carbon-prefix}--structured-list--selection
+    .#{$carbon-prefix}--structured-list-row:hover:not(
+      .#{$carbon-prefix}--structured-list-row--header-row
+    ):not(.#{$carbon-prefix}--structured-list-row--selected) {
     border-bottom: 0;
   }
 
@@ -224,7 +230,7 @@
       margin-left: $spacing-03;
     }
 
-    .#{$block-class}__selections-row#{$carbon-prefix}--structured-list-row {
+    .#{$block-class}__selections-row.#{$carbon-prefix}--structured-list-row {
       border-left: 0;
     }
 
@@ -237,7 +243,7 @@
       padding: 0 $spacing-03;
     }
 
-    .#{$block-class}__tag-container {
+    .#{$block-class}__tags {
       padding: 0 $spacing-03;
       margin-bottom: 0;
     }
@@ -246,7 +252,7 @@
       padding: 0;
     }
 
-    .#{$block-class}__selections#{$carbon-prefix}--structured-list {
+    .#{$block-class}__selections.#{$carbon-prefix}--structured-list {
       border-top: 0;
     }
   }
@@ -284,7 +290,7 @@
     }
   }
 
-  .#{$block-class}__tag-container {
+  .#{$block-class}__tags {
     display: flex;
     align-items: center;
     margin-top: $spacing-05;
@@ -375,7 +381,11 @@
 
   // overrides
 
-  .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
+  .#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {
+    left: auto;
+  }
+
+  .#{$block-class}__tags .#{$carbon-prefix}--tag {
     margin: 0;
   }
 
@@ -440,7 +450,7 @@
 
   .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
     max-width: 16rem;
-    margin-top: $layout-04;
+    margin-top: $spacing-09;
   }
 
   .#{$block-class} .#{$carbon-prefix}--accordion__arrow {
@@ -454,20 +464,20 @@
   }
 
   .#{$block-class}
-    #{$carbon-prefix}--accordion--start
-    #{$carbon-prefix}--accordion__arrow {
+    .#{$carbon-prefix}--accordion--start
+    .#{$carbon-prefix}--accordion__arrow {
     margin: 0 0 0 $spacing-05;
   }
 
   .#{$block-class}
-    #{$carbon-prefix}--accordion--start
-    #{$carbon-prefix}--accordion__title {
+    .#{$carbon-prefix}--accordion--start
+    .#{$carbon-prefix}--accordion__title {
     margin: 0 $spacing-05 0 $spacing-03;
   }
 
   .#{$block-class}
-    #{$carbon-prefix}--accordion__item--active
-    #{$carbon-prefix}--accordion__content {
+    .#{$carbon-prefix}--accordion__item--active
+    .#{$carbon-prefix}--accordion__content {
     padding-top: 0;
     padding-bottom: 0;
     margin-top: $spacing-03;

package/scss/components/AddSelect/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.

package/scss/components/Datagrid/_datagrid.scss

@@ -36,7 +36,6 @@
 
   .#{$block-class}__datagridWrap-simple {
     display: flex;
-    overflow: hidden;
     width: 100%;
     flex-direction: column;
 

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

@@ -97,3 +97,7 @@ $block-class: #{$pkg-prefix}--datagrid;
 .#{$block-class}-story__hidden-column-id-snippet {
   padding-top: $spacing-07;
 }
+
+.#{$block-class}__mobile-toolbar-modal .#{$carbon-prefix}--dropdown__wrapper {
+  margin-bottom: $spacing-07;
+}

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

@@ -416,10 +416,20 @@
 }
 
 .#{$block-class}__carbon-row-expanded {
-  // Border applied to nested rows only on open chevron hover
-  &.#{$block-class}__carbon-row-expanded-hover-active
-    ~ .#{$block-class}__carbon-nested-row {
+  position: relative;
+  &.#{$block-class}__carbon-row-expanded-hover-active::before {
+    position: absolute;
+    z-index: 2;
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    top: var(--#{$block-class}--row-height);
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    left: calc(
+      var(--#{$block-class}--indicator-offset-amount) + #{$spacing-05}
+    );
+    width: 1px;
+    height: var(--#{$block-class}--indicator-height);
     border-left: 1px solid $interactive-01;
+    content: '';
   }
 }
 
@@ -473,7 +483,8 @@
 }
 
 .#{$block-class}
-  .#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
+  .#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)
+  ::before {
   position: absolute;
   left: 0;
   width: $spacing-02;
@@ -523,3 +534,35 @@
 .#{$block-class} .#{$pkg-prefix}--button-menu {
   height: $spacing-09;
 }
+
+.#{$carbon-prefix}--body--with-modal-open .#{$block-class}__grid-container {
+  overflow: hidden;
+  height: 100vh;
+}
+
+.#{$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger {
+  flex-shrink: 0;
+  background-color: $interactive-01;
+}
+
+.#{$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger svg {
+  fill: $ui-background;
+}
+
+.#{$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger:hover,
+.#{$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger.#{$carbon-prefix}--overflow-menu--open:hover,
+.#{$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger.#{$carbon-prefix}--overflow-menu--open {
+  background-color: $hover-primary;
+}
+
+.#{$block-class}__toolbar-options.#{$carbon-prefix}--overflow-menu-options::after {
+  background-color: transparent;
+}
+
+.#{$block-class}__mobile-toolbar-modal .#{$carbon-prefix}--modal-container {
+  position: absolute;
+}
+
+.#{$block-class} .#{$carbon-prefix}--modal {
+  width: 100%;
+}

package/scss/components/Datagrid/styles/_index.scss

@@ -15,6 +15,7 @@
 @import './useActionsColumn';
 @import './addons/CustomizeColumnsModal';
 @import './addons/RowSizeDropdown';
+@import './addons/FilterFlyout';
 @import './useSelectAllToggle';
 @import './useExpandedRow';
 @import './draggableElement';

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -108,7 +108,9 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(.#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+  &:not(
+      .#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
+    ) {
     .#{$block-class}__inline-edit-button-icon {
       display: none;
     }
@@ -132,7 +134,9 @@ $row-heights: (
 }
 
 .#{$block-class}__inline-edit--outer-cell-button
-  .#{$block-class}__inline-edit-button.#{$block-class}__inline-edit-button--active:not([data-disabled='true']) {
+  .#{$block-class}__inline-edit-button.#{$block-class}__inline-edit-button--active:not(
+    [data-disabled='true']
+  ) {
   background-color: $active-ui;
   color: $text-01;
   cursor: text;
@@ -144,7 +148,9 @@ $row-heights: (
 }
 
 .#{$block-class}__inline-edit--outer-cell-button
-  .#{$block-class}__inline-edit-button--disabled:not(.#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+  .#{$block-class}__inline-edit-button--disabled:not(
+    .#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
+  ) {
   color: $disabled-02;
   cursor: not-allowed;
 }

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

@@ -0,0 +1,80 @@
+/*
+* 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.
+*/
+
+// stylelint-disable carbon/layout-token-use
+
+@import '../variables';
+
+$action-set-height: rem(64px);
+
+.#{$block-class}-filter-flyout__container {
+  position: relative;
+}
+
+.#{$block-class}-filter-flyout {
+  position: absolute;
+  top: $spacing-09;
+  right: 0;
+  display: none;
+  width: rem(642px);
+  background-color: $ui-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{$block-class}-filter-flyout--open {
+  display: grid;
+}
+
+.#{$block-class}-filter-flyout--batch {
+  min-height: rem(346px);
+  grid-template-rows: 1fr rem(48px);
+}
+
+.#{$block-class}-filter-flyout--instant {
+  min-height: rem(282px);
+  grid-template-rows: 1fr;
+}
+
+.#{$block-class}-filter-flyout__inner-container {
+  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+}
+
+.#{$block-class}-filter-flyout__inner-container::before {
+  position: absolute;
+  top: rem(-7px);
+  right: 1px;
+  display: block;
+  width: rem(46px);
+  height: rem(15px);
+  background-color: $ui-02;
+  content: '';
+}
+
+.#{$block-class}-filter-flyout__title {
+  display: block;
+  @include carbon--type-style('productive-heading-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{$block-class}-filter-flyout__filters {
+  display: grid;
+  gap: rem(16px) rem(32px);
+  grid-template-columns: 1fr 1fr;
+}
+
+// Carbon overrides
+.#{$block-class}-filter-flyout__trigger--open.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only {
+  position: relative;
+  background-color: $ui-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{$block-class}-filter-flyout .#{$carbon-prefix}--fieldset {
+  margin-bottom: 0;
+}

package/scss/components/InlineEditV1/_inline-edit-v1.scss

@@ -268,7 +268,9 @@
     }
 
     &.#{$block-class}--editing
-      .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
+      .#{$block-class}__toolbar--animation:not(
+        .#{$block-class}__toolbar--saveable
+      )
       .#{$block-class}__save {
       overflow: hidden;
       width: 0;

package/scss/components/MultiAddSelect/_index.scss

@@ -1 +1,8 @@
+//
+// Copyright IBM Corp. 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 './multi-add-select';

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -1 +1,8 @@
+//
+// Copyright IBM Corp. 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 '../AddSelect/add-select';

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.

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

@@ -152,7 +152,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       }
     }
 
-    .#{$block-class}__breadcrumb-row:not(.#{$block-class}__breadcrumb-row--has-action-bar) {
+    .#{$block-class}__breadcrumb-row:not(
+        .#{$block-class}__breadcrumb-row--has-action-bar
+      ) {
       // lifts up page title when there is no action bar
       min-height: $spacing-07;
     }
@@ -200,7 +202,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       transition: all $duration--moderate-01 ease-out;
     }
 
-    .#{$block-class}__breadcrumb-row--next-to-tabs:not(.#{$block-class}__has-page-actions-without-action-bar)::after,
+    .#{$block-class}__breadcrumb-row--next-to-tabs:not(
+        .#{$block-class}__has-page-actions-without-action-bar
+      )::after,
     .#{$block-class}__breadcrumb-row--has-action-bar::after {
       /* creates a full width box shadow without causing scroll */
       box-shadow: 25vw 1px 0 0 $ui-03, -25vw 1px 0 0 $ui-03;

package/scss/components/SingleAddSelect/_index.scss

@@ -1 +1,8 @@
+//
+// Copyright IBM Corp. 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 './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -1 +1,8 @@
+//
+// Copyright IBM Corp. 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 '../AddSelect/add-select';

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 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.

package/scss/components/_index-released-only.scss

@@ -23,6 +23,7 @@
 @import './HTTPErrors/index';
 @import './ImportModal/index';
 @import './InlineEditV1/index';
+@import './InlineEditV2/index';
 @import './NotificationsPanel/index';
 @import './PageHeader/index';
 @import './ProductiveCard/index';