@carbon/ibm-products 1.11.2 → 1.14.0

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

package/scss/components/Datagrid/styles/useSortableColumns.scss

@@ -0,0 +1,55 @@
+/*
+* 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}__sortableColumn {
+  .#{$carbon-prefix}--table-header-label .header-title {
+    display: inline-block;
+    width: auto;
+  }
+  .#{$carbon-prefix}--table-header-label {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .#{$carbon-prefix}--table-header-label button:focus,
+  .#{$carbon-prefix}--table-header-label button:active,
+  .#{$carbon-prefix}--table-header-label button:focus svg {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-01 !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    outline: none !important;
+  }
+  .#{$carbon-prefix}--table-header-label button {
+    width: 100%;
+    min-width: 100%;
+    min-height: 0;
+    padding: 0;
+    border: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    box-shadow: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-01 !important;
+    font: inherit;
+  }
+  .#{$carbon-prefix}--table-header-label button svg {
+    fill: $text-01;
+    visibility: hidden;
+  }
+}
+
+.#{$block-class}__sortableColumn:hover,
+.#{$block-class}__sortableColumn.#{$block-class}__isSorted {
+  .#{$carbon-prefix}--table-header-label svg {
+    visibility: visible;
+  }
+}

package/scss/components/Datagrid/styles/useStickyColumn.scss

@@ -0,0 +1,38 @@
+/*
+* 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}__right-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  right: 0;
+  box-shadow: -2px 1px 3px $overlay-01;
+}
+
+.#{$block-class}__right-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  right: 0;
+  box-shadow: -2px 1px 3px $overlay-01;
+}
+
+.#{$block-class}__sticky-noShadow {
+  box-shadow: none;
+}
+
+.#{$block-class}__sticky-column-noShadow {
+  .#{$block-class}__right-sticky-column-cell {
+    box-shadow: none;
+  }
+}
+
+.#{$block-class}__right-sticky-column-offset-scroll {
+  /* stylelint-disable-next-line */
+  right: 6px !important; // offset the vertical scroll bar in the table body
+}

package/scss/components/ExportModal/_export-modal.scss

@@ -21,15 +21,15 @@
 @mixin export-modal {
   $block-class: #{$pkg-prefix}--export-modal;
 
-  .#{$block-class} .bx--modal-footer .bx--btn {
+  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
     max-width: none;
   }
 
-  .#{$block-class}.#{$carbon-prefix}--modal .bx--modal-content {
+  .#{$block-class}.#{$carbon-prefix}--modal .#{$carbon-prefix}--modal-content {
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .bx--modal-close {
+  .#{$block-class} .#{$carbon-prefix}--modal-close {
     display: none;
   }
 

package/scss/components/HTTPErrors/_http-errors.scss

@@ -18,14 +18,15 @@
   $block-class: #{$pkg-prefix}--http-errors;
 
   .#{$block-class} .#{$block-class}__content {
-    @include carbon--breakpoint(sm) {
-      position: fixed;
-      z-index: 2;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -150%);
-    }
+    position: fixed;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -75%);
     @include carbon--breakpoint(md) {
+      transform: translate(-50%, -100%);
+    }
+    @include carbon--breakpoint(lg) {
       transform: translate(-50%, -50%);
     }
   }
@@ -54,15 +55,14 @@
     margin-bottom: $spacing-02;
   }
   .#{$block-class} .#{$block-class}__image {
-    @include carbon--breakpoint(sm) {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      transform: translate(-50%, -40%);
-    }
-    @include carbon--breakpoint(md) {
-      transform: translate(-50%, -50%);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 100%;
+    @include carbon--breakpoint-down(md) {
+      left: 10%;
+      transform: scale(1.5);
     }
   }
 }

package/scss/components/InlineEdit/_inline-edit.scss

@@ -265,7 +265,6 @@
       svg {
         transition: width $duration--moderate-02 motion(standard, productive);
         @media (prefers-reduced-motion: reduce) {
-          // stylelint-disable-next-line carbon/motion-token-use
           transition: none;
         }
       }

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -13,15 +13,6 @@
   justify-content: space-between;
 }
 
-.modified-tabs .modified-tabs__tab .bx--btn {
-  // transform: translateY(8px);
-}
-
-.modified-tabs .bx--tabs__nav {
-  /* overflow cannot be tweaked to fix tooltip */
-  // overflow: visible;
-}
-
 .modified-tabs__tab-new,
 .modified-tabs__tab {
   position: relative;
@@ -47,7 +38,6 @@
   transition: background-color $duration--fast-02 motion(standard, productive);
   // stylelint-disable-next-line max-nesting-depth
   @media (prefers-reduced-motion: reduce) {
-    // stylelint-disable-next-line carbon/motion-token-use
     transition: none;
   }
 }

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -75,7 +75,8 @@
         align-items: center;
         justify-content: space-between;
       }
-      .#{$block-class}__do-not-disturb-toggle .bx--toggle__switch {
+      .#{$block-class}__do-not-disturb-toggle
+        .#{$carbon-prefix}--toggle__switch {
         margin-top: $spacing-02;
       }
       .#{$block-class}__dismiss-button {
@@ -186,7 +187,6 @@
           .#{$carbon-prefix}--btn__icon {
             transition: transform $duration--moderate-02 ease;
             @media (prefers-reduced-motion: reduce) {
-              // stylelint-disable-next-line carbon/motion-token-use
               transition: none;
             }
           }
@@ -280,7 +280,7 @@
         padding: 0;
         color: $text-01;
       }
-      .#{$block-class}__settings-button .bx--btn__icon {
+      .#{$block-class}__settings-button .#{$carbon-prefix}--btn__icon {
         margin: 0;
       }
     }

package/scss/components/OptionsTile/_options-tile.scss

@@ -210,7 +210,6 @@
   @media (prefers-reduced-motion: reduce) {
     .#{$block-class}__summary,
     .#{$block-class}__chevron {
-      // stylelint-disable-next-line carbon/motion-token-use
       transition: none;
     }
   }