@carbon/ibm-products 1.12.0 → 1.15.0

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;
+}

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

@@ -0,0 +1,318 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020 - 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+.#{$block-class}__table-toolbar > section {
+  z-index: 2;
+  overflow: visible; // RowSizeDropdown depend on this
+}
+
+.#{$block-class}__full-height,
+.#{$block-class}__full-height table,
+.#{$block-class}__full-height tbody {
+  height: 100%;
+}
+
+.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
+
+.#{$block-class}__grid-container table {
+  /* Removes additional scroll introduced by Carbon table */
+  overflow: hidden;
+  &.#{$block-class}__vertical-align-center {
+    .#{$block-class}__head {
+      .#{$carbon-prefix}--table-header-label {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        color: $text-01;
+      }
+    }
+
+    .#{$block-class}__cell {
+      align-items: center;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    td.#{$carbon-prefix}--table-column-checkbox,
+    th.#{$carbon-prefix}--table-column-checkbox {
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding-top: 0.6875rem;
+      &.#{$block-class}__checkbox-cell {
+        display: flex;
+        align-items: center;
+        padding-top: 0;
+      }
+    }
+    .#{$block-class}__checkbox-cell {
+      th.#{$carbon-prefix}--table-column-checkbox {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        padding-top: 0;
+      }
+    }
+    &.#{$block-class}__variable-row-height {
+      &.#{$carbon-prefix}--data-table--compact,
+      &.#{$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 {
+        .#{$block-class}__cell {
+          /* stylelint-disable-next-line carbon/layout-token-use */
+          padding-top: rem(7px);
+          /* stylelint-disable-next-line carbon/layout-token-use */
+          padding-bottom: rem(6px);
+        }
+      }
+      &.#{$carbon-prefix}--data-table--tall,
+      &.#{$carbon-prefix}--data-table--lg,
+      &.#{$carbon-prefix}--data-table--xl {
+        .#{$block-class}__cell {
+          padding-top: $spacing-05;
+          padding-bottom: $spacing-05;
+        }
+      }
+    }
+  }
+  &.#{$block-class}__vertical-align-top {
+    &.#{$carbon-prefix}--data-table--tall,
+    &.#{$carbon-prefix}--data-table--lg,
+    &.#{$carbon-prefix}--data-table--xl {
+      .#{$block-class}__cell {
+        padding-top: $spacing-05;
+      }
+      .#{$carbon-prefix}--table-header-label {
+        padding-top: $spacing-05;
+      }
+      .#{$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 {
+        .#{$block-class}__cell {
+          padding-bottom: $spacing-05;
+        }
+        .#{$carbon-prefix}--table-header-label {
+          padding-bottom: $spacing-05;
+        }
+      }
+    }
+  }
+  &.#{$block-class}__variable-row-height {
+    tr.#{$block-class}__carbon-row {
+      height: auto;
+    }
+  }
+}
+
+.#{$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;
+  }
+
+  .#{$block-class}__table-simple {
+    display: flex;
+    overflow: hidden;
+    max-height: 100%;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__with-pagination tr:last-of-type > td {
+    border-bottom: none;
+  }
+
+  .#{$block-class}__head {
+    display: flex;
+  }
+  .#{$block-class}__head .header {
+    /* Each cell should grow equally */
+    width: 1%;
+    align-items: center;
+  }
+
+  .#{$block-class}__empty-state-body {
+    display: flex;
+    width: 100%;
+  }
+
+  .#{$block-class}__virtual-scrollbar {
+    //makes thin scrollbar in chrome and firefox
+    scrollbar-width: thin;
+  }
+
+  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
+    background-color: $text-03;
+  }
+
+  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    background-color: $ui-background;
+  }
+
+  .#{$block-class}__cell {
+    display: flex;
+    /* Each cell should grow equally */
+    width: 1%;
+  }
+
+  .#{$block-class}__defaultStringRenderer {
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class}__expanded-row {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+  }
+  .#{$block-class}__carbon-row {
+    /* stylelint-disable-next-line declaration-no-important */
+    flex: none !important;
+    .#{$block-class}__carbon-row:hover a {
+      /* stylelint-disable-next-line declaration-no-important */
+      color: $hover-primary-text !important;
+    }
+  }
+
+  .#{$carbon-prefix}--select-input {
+    -webkit-appearance: none; // could be fixed by post-css plugin
+  }
+
+  th.#{$carbon-prefix}--table-column-checkbox {
+    display: block;
+  }
+
+  td.#{$carbon-prefix}--table-column-checkbox,
+  th.#{$carbon-prefix}--table-column-checkbox {
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-right: $spacing-06 !important;
+  }
+}
+
+.#{$block-class}__resizer {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  width: $spacing-02;
+  height: 100%;
+  background: transparent;
+  touch-action: none;
+  transform: translateX(50%);
+}
+
+.#{$block-class}__resizer:hover {
+  background: transparent;
+}
+
+.#{$block-class}__sortableColumn:hover {
+  background-color: $hover-selected-ui;
+}
+.#{$block-class}__resizableColumn {
+  &.#{$block-class}__isResizing {
+    .#{$block-class}__resizer {
+      border-right: $spacing-01 solid $hover-secondary;
+    }
+  }
+  &.#{$block-class}__isSorted {
+    background-color: $hover-selected-ui;
+  }
+}
+
+.#{$block-class}__resizableColumn:hover {
+  background-color: $hover-selected-ui;
+  .#{$block-class}__resizer {
+    border-right: $spacing-01 solid $ui-04;
+    background-color: $hover-selected-ui;
+  }
+}
+
+.#{$block-class}__head-hidden-select-all {
+  padding-right: $spacing-08;
+}
+
+.#{$block-class}__simple-body {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  //makes thin scrollbar in chrome and firefox
+  scrollbar-width: thin;
+}
+
+.#{$block-class}__simple-body::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
+
+.#{$block-class}__simple-body::-webkit-scrollbar {
+  width: 6px;
+  background-color: $ui-background;
+}
+
+.#{$block-class}__sticky.#{$block-class}__table-simple {
+  /* stylelint-disable-next-line declaration-no-important */
+  min-width: 0 !important;
+}
+
+.#{$block-class}__sticky.#{$block-class}__simple-body {
+  overflow: auto;
+}
+
+.#{$block-class}__sticky.#{$block-class}__table-simple thead > div {
+  overflow: hidden;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 100% !important;
+}
+
+.#{block-class}__displayFlex {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+}
+
+.#{$block-class}__datagridLeftPanel {
+  display: flex;
+  width: 388px; // as per UX specs.
+  height: 100%;
+  background-color: $ui-01;
+}
+
+.#{$block-class}__datagridWithPanel {
+  position: relative;
+  display: flex;
+  overflow: auto;
+  width: 100%;
+  flex-direction: column;
+}

package/scss/components/Datagrid/styles/index.scss

@@ -0,0 +1,17 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020, 2021
+* 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 './useStickyColumn';
+@import './useActionsColumn';
+@import './addons/CustomizeColumnsModal';
+@import './addons/RowSizeDropdown';
+@import './useSelectAllToggle';

package/scss/components/Datagrid/styles/useActionsColumn.scss

@@ -0,0 +1,24 @@
+/*
+* 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}__actions-column-cell {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+.#{$block-class}__actions-column-content {
+  display: flex;
+  justify-content: center;
+}
+
+.#{$block-class}__actions-column-loading {
+  margin-bottom: $spacing-03;
+}

package/scss/components/Datagrid/styles/useColumnRightAlign.scss

@@ -0,0 +1,29 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+.#{$block-class}__right-align-header {
+  width: 100%;
+  text-align: right;
+}
+
+.#{$block-class}__right-align-header button {
+  text-align: right;
+}
+
+.#{$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 {
+  padding-right: 0;
+}

package/scss/components/Datagrid/styles/useNestedRows.scss

@@ -0,0 +1,17 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020 - 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+.#{$carbon-prefix}--data-table tr.#{$block-class}__carbon-nested-row {
+  border-left: 2px solid $interactive-01;
+
+  .#{$block-class}__cell {
+    border-bottom: 1px solid $ui-03;
+  }
+}

package/scss/components/Datagrid/styles/useNestedTable.scss

@@ -0,0 +1,28 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+// used for tables within a expandable row
+.#{block-class}__expanded-row .#{$carbon-prefix}--data-table-container {
+  width: calc(100% - #{$layout-03});
+  border-left: 2px solid $interactive-01;
+  margin-left: $layout-03;
+  overflow-x: hidden;
+
+  tr.#{$block-class}__carbon-nested-row {
+    border-left: none;
+  }
+}
+
+.#{block-class}__expanded-row .#{$carbon-prefix}--data-table-container th {
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-color: $ui-03;
+  background-color: $ui-03;
+}

package/scss/components/Datagrid/styles/useSelectAllToggle.scss

@@ -0,0 +1,28 @@
+/*
+* 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';
+
+th.#{$block-class}__select-all-toggle-on,
+td.#{$block-class}__select-all-toggle-on {
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 4.5rem !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  min-width: initial !important;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+th.#{$block-class}__select-all-toggle-on {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+th.#{$block-class}__select-all-toggle-on.button {
+  margin-left: $spacing-01;
+}