@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

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

@@ -5,12 +5,16 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // TODO: add any additional styles used by Datagrid.stories.js
 // helper class for the nested table
 
-$block-class: #{$pkg-prefix}--datagrid;
+$block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .sb-show-main.sb-main-centered {
   height: 100vh;
@@ -27,7 +31,7 @@ $block-class: #{$pkg-prefix}--datagrid;
 }
 
 .carbon-nested-table {
-  border-bottom: 1px solid $ui-03;
+  border-bottom: 1px solid $border-subtle-01;
 
   .#{$block-class}__virtual-scrollbar > div > div:last-child td {
     border-bottom: none;
@@ -39,7 +43,7 @@ $block-class: #{$pkg-prefix}--datagrid;
 }
 
 /* only for storybook purpose. */
-.#{$pkg-prefix}--side-panel.#{$pkg-prefix}--side-panel__container {
+.#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container {
   top: 0;
   height: 100%;
 }
@@ -60,29 +64,29 @@ $block-class: #{$pkg-prefix}--datagrid;
 }
 
 .#{$block-class}__side-panel-label-text {
-  @include carbon--type-style('label-02');
+  @include type.type-style('body-compact-01');
 
-  color: $text-02;
+  color: $text-secondary;
 }
 
 .#{$block-class}__side-panel-value {
-  @include carbon--type-style('body-short-01');
+  @include type.type-style('body-short-01');
 
   padding-left: $spacing-03;
 }
 
 .#{$block-class}__side-panel-section-header {
-  @include carbon--type-style('productive-heading-01');
+  @include type.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 {
+.#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container.#{c4p-settings.$pkg-prefix}--side-panel__container-right-placement {
   border: 0 none;
   box-shadow: none;
 }
 
-.#{$pkg-prefix}--side-panel__container
-  .#{$pkg-prefix}--side-panel__inner-content {
+.#{c4p-settings.$pkg-prefix}--side-panel__container
+  .#{c4p-settings.$pkg-prefix}--side-panel__inner-content {
   height: 100%;
 }

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

@@ -6,7 +6,11 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/components/button/tokens' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use './variables' as *;
 
 .#{$block-class}__table-toolbar > section {
   z-index: 2;
@@ -20,7 +24,7 @@
 }
 
 .#{$block-class}__grid-container::-webkit-scrollbar-thumb {
-  background-color: $text-03;
+  background-color: $text-placeholder;
 }
 
 .#{$block-class}__grid-container table {
@@ -29,11 +33,11 @@
 
   &.#{$block-class}__vertical-align-center {
     .#{$block-class}__head {
-      .#{$carbon-prefix}--table-header-label {
+      .#{c4p-settings.$carbon-prefix}--table-header-label {
         display: flex;
         height: 100%;
         align-items: center;
-        color: $text-01;
+        color: $text-primary;
       }
     }
 
@@ -43,8 +47,8 @@
       padding-bottom: 0;
     }
 
-    td.#{$carbon-prefix}--table-column-checkbox,
-    th.#{$carbon-prefix}--table-column-checkbox {
+    td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
+    th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
       /* stylelint-disable-next-line carbon/layout-token-use */
       padding-top: 0.6875rem;
 
@@ -56,7 +60,7 @@
     }
 
     .#{$block-class}__checkbox-cell {
-      th.#{$carbon-prefix}--table-column-checkbox {
+      th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
         display: flex;
         height: 100%;
         align-items: center;
@@ -65,17 +69,17 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--compact,
-      &.#{$carbon-prefix}--data-table--xs {
+      &.#{c4p-settings.$carbon-prefix}--data-table--compact,
+      &.#{c4p-settings.$carbon-prefix}--data-table--xs {
         .#{$block-class}__cell {
           padding-top: $spacing-01;
           padding-bottom: $spacing-01;
         }
       }
 
-      &.#{$carbon-prefix}--data-table--short,
-      &.#{$carbon-prefix}--data-table--sm,
-      &.#{$carbon-prefix}--data-table--md {
+      &.#{c4p-settings.$carbon-prefix}--data-table--short,
+      &.#{c4p-settings.$carbon-prefix}--data-table--sm,
+      &.#{c4p-settings.$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
           /* stylelint-disable-next-line carbon/layout-token-use */
           padding-top: rem(7px);
@@ -84,9 +88,9 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--tall,
-      &.#{$carbon-prefix}--data-table--lg,
-      &.#{$carbon-prefix}--data-table--xl {
+      &.#{c4p-settings.$carbon-prefix}--data-table--tall,
+      &.#{c4p-settings.$carbon-prefix}--data-table--lg,
+      &.#{c4p-settings.$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
           padding-top: $spacing-05;
           padding-bottom: $spacing-05;
@@ -96,32 +100,32 @@
   }
 
   &.#{$block-class}__vertical-align-top {
-    &.#{$carbon-prefix}--data-table--tall,
-    &.#{$carbon-prefix}--data-table--lg,
-    &.#{$carbon-prefix}--data-table--xl {
+    &.#{c4p-settings.$carbon-prefix}--data-table--tall,
+    &.#{c4p-settings.$carbon-prefix}--data-table--lg,
+    &.#{c4p-settings.$carbon-prefix}--data-table--xl {
       .#{$block-class}__cell {
         padding-top: $spacing-05;
       }
 
-      .#{$carbon-prefix}--table-header-label {
+      .#{c4p-settings.$carbon-prefix}--table-header-label {
         padding-top: $spacing-05;
       }
 
-      .#{$carbon-prefix}--table-column-checkbox {
+      .#{c4p-settings.$carbon-prefix}--table-column-checkbox {
         /* stylelint-disable-next-line carbon/layout-token-use */
         padding-top: rem(13px);
       }
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--tall,
-      &.#{$carbon-prefix}--data-table--lg,
-      &.#{$carbon-prefix}--data-table--xl {
+      &.#{c4p-settings.$carbon-prefix}--data-table--tall,
+      &.#{c4p-settings.$carbon-prefix}--data-table--lg,
+      &.#{c4p-settings.$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
           padding-bottom: $spacing-05;
         }
 
-        .#{$carbon-prefix}--table-header-label {
+        .#{c4p-settings.$carbon-prefix}--table-header-label {
           padding-bottom: $spacing-05;
         }
       }
@@ -135,30 +139,27 @@
   }
 }
 .#{$block-class}__grid-container::-webkit-scrollbar-thumb {
-  background-color: $text-03;
+  background-color: $text-placeholder;
 }
 
 .#{$block-class}__grid-container::-webkit-scrollbar {
   width: 6px;
-  background-color: $ui-background;
+  background-color: $background;
 }
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
   padding-top: 0;
 
-  .#{$carbon-prefix}--data-table-content {
+  .#{c4p-settings.$carbon-prefix}--data-table-content {
     width: 100%;
     height: 100%;
     overflow-x: auto;
   }
 
-  table.#{$block-class}__table-simple {
-    display: flex;
-    overflow: auto;
+  .#{$block-class}__table-simple {
+    overflow: hidden;
     max-height: 100%;
-    flex-direction: column;
-    background-color: $ui-01;
   }
 
   .#{$block-class}__head {
@@ -177,12 +178,12 @@
   }
 
   .#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
-    background-color: $text-03;
+    background-color: $text-placeholder;
   }
 
   .#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
     width: 6px;
-    background-color: $ui-background;
+    background-color: $background;
   }
 
   .#{$block-class}__cell {
@@ -219,20 +220,20 @@
 
     .#{$block-class}__carbon-row:hover a {
       /* stylelint-disable-next-line declaration-no-important */
-      color: $hover-primary-text !important;
+      color: $link-primary-hover !important;
     }
   }
 
-  .#{$carbon-prefix}--select-input {
+  .#{c4p-settings.$carbon-prefix}--select-input {
     -webkit-appearance: none; // could be fixed by post-css plugin
   }
 
-  th.#{$carbon-prefix}--table-column-checkbox {
+  th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
     display: block;
   }
 
-  td.#{$carbon-prefix}--table-column-checkbox,
-  th.#{$carbon-prefix}--table-column-checkbox {
+  td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
+  th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
     /* stylelint-disable-next-line declaration-no-important */
     padding-right: $spacing-06 !important;
   }
@@ -242,7 +243,7 @@
   display: table;
   height: 100%;
 
-  .#{$pkg-prefix}--empty-state {
+  .#{c4p-settings.$pkg-prefix}--empty-state {
     max-width: 280px;
   }
 }
@@ -285,27 +286,26 @@
 }
 
 .#{$block-class}__sortableColumn:hover {
-  background-color: $hover-selected-ui;
+  background-color: $background-selected-hover;
 }
 
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
-      border-right: $spacing-01 solid $hover-secondary;
+      border-right: $spacing-01 solid $button-secondary-hover;
     }
   }
 
   &.#{$block-class}__isSorted {
-    background-color: $hover-selected-ui;
+    background-color: $background-selected-hover;
   }
 }
 
 .#{$block-class}__resizableColumn:hover {
-  background-color: $hover-selected-ui;
-
+  background-color: $background-selected-hover;
   .#{$block-class}__resizer {
-    border-right: $spacing-01 solid $ui-04;
-    background-color: $hover-selected-ui;
+    border-right: $spacing-01 solid $border-strong-01;
+    background-color: $background-selected-hover;
   }
 }
 
@@ -323,12 +323,12 @@
 }
 
 .#{$block-class}__simple-body::-webkit-scrollbar-thumb {
-  background-color: $text-03;
+  background-color: $text-placeholder;
 }
 
 .#{$block-class}__simple-body::-webkit-scrollbar {
   width: 6px;
-  background-color: $ui-background;
+  background-color: $background;
 }
 
 .#{$block-class}__sticky.#{$block-class}__table-simple {
@@ -336,6 +336,14 @@
   min-width: 0 !important;
 }
 
+.#{$block-class}__table-simple::-webkit-scrollbar {
+  width: 6px;
+  background-color: $background;
+}
+
+.#{$block-class}__table-simple::-webkit-scrollbar-thumb {
+  background-color: $text-placeholder;
+}
 .#{$block-class}__sticky.#{$block-class}__simple-body {
   overflow: auto;
 }
@@ -346,7 +354,7 @@
   width: 100% !important;
 }
 
-.#{block-class}__displayFlex {
+.#{$block-class}__displayFlex {
   position: relative;
   display: flex;
   width: 100%;
@@ -357,7 +365,7 @@
 .#{$block-class}__datagridLeftPanel {
   display: flex;
   width: 388px; // as per UX specs.
-  background-color: $ui-01;
+  background-color: $layer-01;
 }
 
 .#{$block-class}__leftPanel-position {
@@ -385,7 +393,7 @@
     flex: 0 0 auto;
   }
 
-  .#{$carbon-prefix}--data-table-content {
+  .#{c4p-settings.$carbon-prefix}--data-table-content {
     flex: 1 1 0%;
   }
   .#{$block-class}__table-container {
@@ -405,11 +413,11 @@
   // Border applied to nested rows only on open chevron hover
   &.#{$block-class}__carbon-row-expanded-hover-active
     ~ .#{$block-class}__carbon-nested-row {
-    border-left: 1px solid $interactive-01;
+    border-left: 1px solid $button-primary;
   }
 }
 
-.#{$block-class} .#{$carbon-prefix}--data-table-header {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table-header {
   background: transparent;
 }
 
@@ -417,7 +425,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  .#{$carbon-prefix}--data-table-header {
+  .#{c4p-settings.$carbon-prefix}--data-table-header {
     flex: 1 1 auto;
     padding-bottom: $spacing-05;
   }
@@ -425,15 +433,15 @@
   .#{$block-class}__table-toolbar {
     flex: 0 0 auto;
   }
-  .#{$carbon-prefix}--table-toolbar {
+  .#{c4p-settings.$carbon-prefix}--table-toolbar {
     background: transparent;
   }
 
-  .#{$carbon-prefix}__table-container {
+  .#{c4p-settings.$carbon-prefix}__table-container {
     flex: 1 1 100%;
   }
 
-  .#{$carbon-prefix}--table-toolbar {
+  .#{c4p-settings.$carbon-prefix}--table-toolbar {
     padding-top: $spacing-07;
   }
 
@@ -447,61 +455,62 @@
     left: 0;
     width: 1px;
     height: $spacing-05;
-    border-left: 1px solid $ui-03;
+    border-left: 1px solid $border-subtle-01;
     content: '';
     transform: translateY(-50%);
   }
 }
 
 .#{$block-class}
-  .#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
   position: relative;
 }
 
 .#{$block-class}
-  .#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
   left: 0;
   width: $spacing-02;
   height: 100%;
-  background-color: $interactive-01;
+  background-color: $background-brand;
   content: '';
 }
 
-.#{$pkg-prefix}--datagrid__table-toolbar
-  .#{$carbon-prefix}--batch-summary__para {
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$carbon-prefix}--batch-summary__para {
   white-space: nowrap;
 }
 
-.#{$pkg-prefix}--datagrid__table-toolbar
-  .#{$carbon-prefix}--batch-actions
-  .#{$carbon-prefix}--batch-actions--active {
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$carbon-prefix}--batch-actions
+  .#{c4p-settings.$carbon-prefix}--batch-actions--active {
   overflow-x: hidden;
 }
 
-.#{$pkg-prefix}--datagrid__table-toolbar
-  .#{$pkg-prefix}--datagrid__button-menu--icon-only.#{$pkg-prefix}--button-menu {
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu {
   display: flex;
   min-width: $spacing-08;
   justify-content: center;
   margin-right: $spacing-04;
 }
 
-.#{$pkg-prefix}--datagrid__table-toolbar
-  .#{$pkg-prefix}--datagrid__button-menu {
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu {
   min-width: calc(#{$spacing-12} + #{$spacing-03});
 }
 
-.#{$pkg-prefix}--datagrid__table-toolbar
-  .#{$pkg-prefix}--datagrid__button-menu--icon-only.#{$pkg-prefix}--button-menu
-  .#{$pkg-prefix}--button-menu__trigger {
+.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
+  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu
+  .#{c4p-settings.$pkg-prefix}--button-menu__trigger {
   display: flex;
   width: 100%;
   min-width: $spacing-09;
   justify-content: center;
   padding: 0;
   margin: 0;
-  .#{$carbon-prefix}--btn__icon {
+
+  .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;
   }
 }

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -1,50 +1,52 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2021
+* (c) Copyright IBM Corp. 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
-@import './variables';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use './variables';
 
-.#{$block-class}__draggable-handleStyle {
+.#{variables.$block-class}__draggable-handleStyle {
   display: flex;
   align-items: center;
   margin-right: $spacing-03;
   cursor: grab;
 }
 
-.#{$block-class}__draggable-handleStyle.disabled {
+.#{variables.$block-class}__draggable-handleStyle.disabled {
   pointer-events: none;
 }
 
-svg.#{$block-class}__draggable-handleStyle.disable {
-  fill: $disabled-02;
+svg.#{variables.$block-class}__draggable-handleStyle.disable {
+  fill: $icon-disabled;
 }
 
-.#{$block-class}__draggable-handleHolder {
+.#{variables.$block-class}__draggable-handleHolder {
   display: flex;
   height: $spacing-07;
   padding-left: $spacing-02;
   margin-bottom: $spacing-03;
-  background: $ui-02;
-  &.#{$block-class}__draggable-handleHolder-isOver {
+  background: $layer-02;
+  &.#{variables.$block-class}__draggable-handleHolder-isOver {
     border: 2px dashed $focus;
     background-color: $highlight;
   }
 }
 
-.#{$block-class}__draggable-handleHolder-droppable {
+.#{variables.$block-class}__draggable-handleHolder-droppable {
   display: flex;
   width: 100%;
 }
 
-.#{$block-class}__draggable-handleHolder--grabbed {
+.#{variables.$block-class}__draggable-handleHolder--grabbed {
   background-color: $highlight;
-  color: $text-01;
+  color: $text-primary;
 }
 
-.#{$block-class}__shared-ui--assistive-text {
+.#{variables.$block-class}__shared-ui--assistive-text {
   // hide the assistive text. can not use display: none which will also hide from ARIA
   position: absolute;
   overflow: hidden;

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

@@ -5,16 +5,16 @@
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
-@import './datagrid';
-@import './useNestedRows';
-@import './useNestedTable';
-@import './useSortableColumns';
-@import './useColumnRightAlign';
-@import './useColumnCenterAlign';
-@import './useStickyColumn';
-@import './useActionsColumn';
-@import './addons/CustomizeColumnsModal';
-@import './addons/RowSizeDropdown';
-@import './useSelectAllToggle';
-@import './useExpandedRow';
-@import './draggableElement';
+@use './datagrid';
+@use './useNestedRows';
+@use './useNestedTable';
+@use './useSortableColumns';
+@use './useColumnRightAlign';
+@use './useColumnCenterAlign';
+@use './useStickyColumn';
+@use './useActionsColumn';
+@use './addons/CustomizeColumnsModal';
+@use './addons/RowSizeDropdown';
+@use './useSelectAllToggle';
+@use './useExpandedRow';
+@use './draggableElement';

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -6,19 +6,20 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '@carbon/styles/scss/spacing' as *;
+@use './variables';
 
-.#{$block-class}__actions-column-cell {
+.#{variables.$block-class}__actions-column-cell {
   display: flex;
   flex-flow: column;
   justify-content: center;
 }
 
-.#{$block-class}__actions-column-content {
+.#{variables.$block-class}__actions-column-content {
   display: flex;
   justify-content: center;
 }
 
-.#{$block-class}__actions-column-loading {
+.#{variables.$block-class}__actions-column-loading {
   margin-bottom: $spacing-03;
 }

package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss

@@ -6,8 +6,9 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use '../../../global/styles/project-settings';
 
+$block-class: #{project-settings.$pkg-prefix}--datagrid;
 .#{$block-class}__center-align-header {
   width: 100%;
   text-align: center;

package/scss/components/Datagrid/styles/_useColumnRightAlign.scss

@@ -6,24 +6,24 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@import './variables';
+@use './variables';
 
-.#{$block-class}__right-align-header {
+.#{variables.$block-class}__right-align-header {
   width: 100%;
   text-align: right;
 }
 
-.#{$block-class}__right-align-header button {
+.#{variables.$block-class}__right-align-header button {
   text-align: right;
 }
 
-.#{$block-class}__right-align-cell-renderer {
+.#{variables.$block-class}__right-align-cell-renderer {
   width: 100%;
   /* stylelint-disable-next-line carbon/layout-token-use */
   padding-right: 23px;
   text-align: right;
 }
 
-.#{$block-class}__right-align-cell-renderer.sortDisabled {
+.#{variables.$block-class}__right-align-cell-renderer.sortDisabled {
   padding-right: 0;
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -1,7 +1,14 @@
-/*
-* 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.
-*/
+//
+// Copyright IBM Corp. 2021, 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.
+//
+
+@use '../../../global/styles/project-settings';
+@use '@carbon/styles/scss/spacing' as *;
+
+$block-class: #{project-settings.$pkg-prefix}--datagrid;
+.#{$block-class}__expanded-row-content {
+  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
+}