@carbon/ibm-products 1.11.2 → 1.14.0

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

@@ -51,6 +51,53 @@
       display: block;
       color: $text-02;
     }
+
+    &-cell:hover .#{$block-class}__selections-dropdown {
+      visibility: visible;
+    }
+
+    &-dropdown {
+      visibility: hidden;
+    }
+
+    &-row-selected {
+      background: #e5e5e5;
+    }
+
+    &-row-selected .#{$block-class}__selections-dropdown {
+      visibility: visible;
+    }
+
+    &-checkbox {
+      display: flex;
+      align-items: center;
+    }
+
+    &-checkbox-label-wrapper {
+      display: flex;
+      margin-left: $spacing-03;
+    }
+
+    &-checkbox-label-text {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-checkbox-wrapper.#{$carbon-prefix}--form-item {
+      flex: 0;
+    }
+
+    &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
+      display: none;
+    }
+
+    &-cell-avatar {
+      margin-right: $spacing-03;
+    }
+
+    &-cell-icon {
+      margin-right: $spacing-03;
+    }
   }
 
   // sidebar
@@ -141,7 +188,7 @@
       display: flex;
     }
 
-    .bx--overflow-menu {
+    .#{$carbon-prefix}--overflow-menu {
       border-bottom: 1px solid $ui-04;
     }
   }
@@ -157,6 +204,43 @@
     }
   }
 
+  .#{$block-class}__global-filter {
+    position: absolute;
+    z-index: 6000;
+    right: 0;
+    width: 100%;
+    max-width: 40rem;
+    background: $ui-01;
+    transform: translate(0, 100%);
+
+    &-search {
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    &-content {
+      padding: $spacing-05;
+    }
+
+    &-opts {
+      display: grid;
+      grid-gap: $spacing-05 2rem;
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .#{$block-class}__global-filter-button-set
+    button.#{$block-class}__global-filter-button {
+    max-width: none;
+    flex: 1;
+  }
+
+  button.#{$block-class}__global-filter-toggle {
+    border-bottom-color: $ui-04;
+    background: $field-01;
+  }
+
   // overrides
 
   .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
@@ -184,7 +268,7 @@
 
   .#{$block-class}
     .#{$carbon-prefix}--modal-container--sm
-    .bx--modal-content
+    .#{$carbon-prefix}--modal-content
     p {
     padding-right: 0;
   }
@@ -218,7 +302,7 @@
   }
 
   .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
-    padding-left: $spacing-05;
+    padding-left: $spacing-03;
   }
 }
 

package/scss/components/CreateModal/_create-modal.scss

@@ -19,11 +19,11 @@
     background-color: $ui-background;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-close {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-close {
     display: none;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-container {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-container {
     @include carbon--breakpoint(md) {
       max-height: 95%;
     }
@@ -32,14 +32,16 @@
     }
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-header {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-header {
     padding-right: 20%;
     padding-bottom: $spacing-03;
     border-bottom: 1px solid $ui-03;
     margin-bottom: 0;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-footer .bx--btn {
+  .#{$pkg-prefix}--create-modal
+    .#{$carbon-prefix}--modal-footer
+    .#{$carbon-prefix}--btn {
     max-width: none;
   }
 
@@ -63,7 +65,7 @@
     margin: $spacing-03 0 $spacing-05 0;
   }
 
-  .#{$pkg-prefix}--create-modal__form .bx--fieldset {
+  .#{$pkg-prefix}--create-modal__form .#{$carbon-prefix}--fieldset {
     min-width: 100%;
     margin-bottom: 0;
   }

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

@@ -15,31 +15,32 @@
 @import 'carbon-components/scss/components/tooltip/tooltip';
 @import 'carbon-components/scss/components/modal/modal';
 
-.bx--number {
+.#{$carbon-prefix}--number {
   min-width: 100%;
 }
 
-.bx--number__control-btn::before {
+.#{$carbon-prefix}--number__control-btn::before {
   background-color: transparent;
 }
 
-.bx--number__control-btn::after {
+.#{$carbon-prefix}--number__control-btn::after {
   background-color: transparent;
 }
 
-.bx--date-picker {
+.#{$carbon-prefix}--date-picker {
   min-width: 100%;
 }
 
-.bx--date-picker-container {
+.#{$carbon-prefix}--date-picker-container {
   min-width: 100%;
 }
 
-.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
+.#{$carbon-prefix}--date-picker.#{$carbon-prefix}--date-picker--single
+  .#{$carbon-prefix}--date-picker__input {
   min-width: 100%;
 }
 
-.bx--list-box__menu-icon {
+.#{$carbon-prefix}--list-box__menu-icon {
   top: $spacing-03;
 }
 

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -22,8 +22,12 @@
 @mixin data-spreadsheet {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--data-spreadsheet;
+  $body-cell-background: $field-01;
+  $header-cell-background: $ui-03;
 
   .#{$block-class} {
+    --#{$block-class}--total-width: 0;
+
     display: inline-block;
     border-spacing: 0;
 
@@ -36,7 +40,7 @@
     }
 
     .#{$block-class}__tr {
-      :last-child {
+      :last-child .#{$block-class}__body--td {
         .#{$block-class}__td {
           border-bottom: 0;
         }
@@ -45,22 +49,35 @@
 
     .#{$block-class}__th,
     .#{$block-class}__td {
-      // height: 2.25rem; // update to be controlled by cellSize prop later
+      @include carbon--type-style('body-short-01');
+
+      width: 100%;
+      height: 100%;
       padding: 0 $spacing-03;
       border: 0;
       margin: 0;
       color: $text-01;
     }
-    .#{$block-class}__th:last-child,
-    .#{$block-class}__td:last-child {
+
+    [role="'columnheader'"]:last-child,
+    [role="'gridcell'"]:last-child {
       border-right: 1px solid $text-03;
     }
     .#{$block-class}__th,
     .#{$block-class}__td-th.#{$block-class}__td {
       @include set-header-borders();
 
-      background-color: $ui-01;
+      height: 100%;
+      background-color: $header-cell-background;
       cursor: pointer;
+
+      &:hover,
+      &:focus {
+        background-color: $hover-selected-ui;
+      }
+    }
+    .#{$block-class}__th--select-all {
+      min-width: calc(#{$spacing-10} - #{$spacing-02});
     }
     .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');
@@ -73,8 +90,9 @@
     .#{$block-class}__td {
       @include set-body-borders();
 
+      overflow: hidden;
       margin: 0;
-      background-color: $ui-background;
+      background-color: $body-cell-background;
       cursor: cell;
       text-align: left;
     }
@@ -85,23 +103,65 @@
       text-align: left;
     }
     .#{$block-class}__cell-editor {
+      @include carbon--type-style('body-short-01');
+
       position: absolute;
       z-index: 4;
       display: none;
-      padding: 0 $spacing-03;
-      background-color: $ui-background;
+      overflow: hidden;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
+      margin: 0;
+      background-color: $body-cell-background;
       resize: none;
       &.#{$carbon-prefix}--text-area {
         min-width: initial;
         min-height: initial;
       }
+      &.#{$block-class}__cell-editor--active {
+        outline: $spacing-01 solid $interactive-01;
+        outline-offset: -2px;
+      }
+    }
+    .#{$block-class}__cell-editor-ruler {
+      @include carbon--type-style('body-short-01');
+
+      position: absolute;
+      overflow: hidden;
+      width: fit-content;
+      max-width: var(--#{$block-class}--total-width);
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
+      visibility: hidden;
+
+      &:focus {
+        outline: $spacing-01 solid $interactive-01;
+      }
     }
     .#{$block-class}__active-cell--highlight {
+      @include carbon--type-style('body-short-01');
+      @include set-body-borders();
+
       position: absolute;
       z-index: 3;
       display: none;
+      overflow: hidden;
+      // Could be fixed by using border-right but the fact that
+      // this element is positioned absolute prevents that from working
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding-right: calc(#{$spacing-03} - 1px);
+      padding-bottom: $spacing-01;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding-left: calc(#{$spacing-03} - #{$spacing-01});
       border: $spacing-01 solid $interactive-01;
-      background-color: transparent;
+      background-color: $body-cell-background;
+      color: $text-01;
+      text-align: left;
+
+      &[data-active-row-index='header'],
+      &[data-active-column-index='header'] {
+        background-color: transparent;
+      }
 
       &:focus {
         border: $spacing-01 solid $interactive-01;
@@ -128,7 +188,7 @@
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
-      background-color: $ui-03;
+      background-color: $hover-selected-ui;
     }
   }
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -0,0 +1,66 @@
+//
+// 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';
+
+@import './styles/datagrid';
+@import './styles/useNestedRows';
+//@import './styles/useNestedTable';
+@import './styles/useSortableColumns';
+@import './styles/useColumnRightAlign';
+@import './styles/useStickyColumn';
+@import './styles/useActionsColumn';
+@import './styles/addons/CustomizeColumnsModal';
+@import './styles/addons/RowSizeDropdown';
+@import './styles/useSelectAllToggle';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// Datagrid uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by Datagrid
+
+// Datagrid uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by Datagrid
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin datagrid {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--datagrid;
+
+  .#{$block-class}__datagridWrap {
+    display: block;
+    width: 100%;
+    :global(.#{$carbon-prefix}--checkbox) {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__datagridWrap-simple {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+
+    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+    :global {
+      .#{$carbon-prefix}--pagination {
+        // newer version of carbon pagination has scroll which doesn't make any sense, removing it
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        overflow-x: unset;
+      }
+    }
+  }
+}
+
+@include exports('datagrid') {
+  @include datagrid;
+}

package/scss/components/Datagrid/_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 './datagrid';

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

@@ -0,0 +1,26 @@
+//
+// 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 Datagrid.stories.js
+// helper class for the nested table
+
+$block-class: #{$pkg-prefix}--datagrid;
+
+.sb-show-main.sb-main-centered #root {
+  width: 100%;
+  padding: 0;
+}
+
+.carbon-nested-table {
+  border-bottom: 1px solid $ui-03;
+
+  .#{$block-class}__virtual-scrollbar > div > div:last-child td {
+    border-bottom: none;
+  }
+}

package/scss/components/Datagrid/styles/_variables.scss

@@ -0,0 +1,9 @@
+//
+// 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';
+
+$block-class: #{$pkg-prefix}--datagrid;

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

@@ -0,0 +1,48 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import '../variables';
+
+.#{$block-class}__customize-columns-modal {
+  .#{$carbon-prefix}--modal-content {
+    position: inherit;
+    display: flex;
+    flex-flow: column;
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-top: 0 !important;
+  }
+}
+
+.#{$block-class}__customize-columns-checkbox {
+  display: flex;
+  justify-content: center;
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-bottom: 0 !important; // reset the bottom provided by carbon
+}
+
+.#{$block-class}__customize-columns-modal--actions {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: $spacing-06;
+}
+
+.#{$block-class}__customize-columns-modal--actions > button {
+  margin-left: $spacing-05;
+}
+
+.#{$block-class}__customize-columns-instructions {
+  margin-bottom: $spacing-06;
+  @include carbon--type-style('body-long-01');
+
+  color: $text-01;
+}
+
+.#{$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}

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

@@ -0,0 +1,23 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import '../variables';
+
+.#{$block-class}__row-size-dropdown {
+  position: absolute;
+  padding: $spacing-05;
+  background-color: $ui-background;
+
+  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+}
+
+.#{$block-class}__row-size-button--open {
+  background-color: $ui-background;
+
+  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+}