@carbon/ibm-products 1.27.0 → 1.32.0

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

@@ -0,0 +1,211 @@
+/*
+* 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 '../../../global/styles/project-settings';
+@import './variables';
+
+$row-heights: (
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3rem,
+  xl: 4rem,
+);
+
+@each $size, $size-value in $row-heights {
+  .#{$block-class}
+    .#{$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{$carbon-prefix}--text-input,
+  .#{$block-class}
+    .#{$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{$carbon-prefix}--number
+    input[type='number'],
+  .#{$block-class}
+    .#{$block-class}__inline-edit--select.#{$block-class}__inline-edit--select-#{$size},
+  .#{$block-class}
+    .#{$block-class}__inline-edit--date.#{$block-class}__inline-edit--date-#{$size}
+    .#{$carbon-prefix}--date-picker__input {
+    height: $size-value;
+  }
+  .#{$block-class}
+    .#{$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{$carbon-prefix}--number__control-btn::before,
+  .#{$block-class}
+    .#{$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{$carbon-prefix}--number__control-btn::after {
+    height: calc($size-value - 0.25rem);
+  }
+  .#{$block-class}
+    .#{$block-class}__inline-edit--select.#{$block-class}__inline-edit--select-#{$size}.#{$carbon-prefix}--list-box {
+    max-height: none;
+  }
+}
+
+@mixin input-outline($color: $focus) {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  outline: $spacing-01 solid $color;
+  outline-offset: calc(-1 * #{$spacing-01});
+
+  @media screen and (prefers-contrast) {
+    outline-style: dotted;
+  }
+}
+
+.#{$block-class}__inline-edit-cell {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.#{$block-class} .#{$pkg-prefix}--inline-edit__after-input-elements {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__inline-edit--outer-cell-button {
+  width: 100%;
+  height: calc(100% + 2px); // account for borders
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: $spacing-05;
+  color: $text-02;
+  cursor: pointer;
+  outline: 0; // handled by active class
+  .#{$block-class}__label-icon {
+    padding-right: $spacing-05;
+  }
+  &.#{$block-class}__inline-edit-button--non-edit {
+    padding-left: 0;
+  }
+  .#{$block-class}__inline-edit-button-icon {
+    height: $spacing-05;
+    fill: $icon-02;
+  }
+  &.#{$block-class}__inline-edit-button--date {
+    @include carbon--font-family($name: mono);
+  }
+  &.#{$block-class}__inline-edit-button--selection {
+    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) {
+    .#{$block-class}__inline-edit-button-icon {
+      display: none;
+    }
+
+    /* stylelint-disable-next-line */
+    &:hover {
+      .#{$block-class}__inline-edit-button-icon {
+        display: block;
+      }
+    }
+  }
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button:not([data-disabled='true']):hover {
+  background-color: $hover-selected-ui;
+  color: $text-01;
+  .#{$block-class}__inline-edit-button-icon {
+    fill: $icon-01;
+  }
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button.#{$block-class}__inline-edit-button--active:not([data-disabled='true']) {
+  background-color: $active-ui;
+  color: $text-01;
+  cursor: text;
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button.#{$block-class}__inline-edit-button--active {
+  @include input-outline;
+}
+
+.#{$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) {
+  color: $disabled-02;
+  cursor: not-allowed;
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button
+  .#{$block-class}__inline-edit-button-label {
+  overflow: hidden;
+  padding-right: $spacing-05;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$block-class}__inline-edit-button
+  .#{$block-class}__inline-edit-button-label.#{$block-class}__inline-edit-button-label-with-icon {
+  padding-right: $spacing-09;
+}
+
+.#{$block-class}__inline-edit--outer-cell-button .#{$carbon-prefix}--text-input,
+.#{$block-class}__inline-edit--outer-cell-button
+  .#{$carbon-prefix}--number
+  input[type='number'] {
+  height: $spacing-09;
+}
+
+.#{$block-class}__inline-edit-button-icon {
+  position: absolute;
+  right: $spacing-05;
+}
+
+.#{$block-class}__table-with-inline-edit.#{$carbon-prefix}--data-table
+  .#{$block-class}__cell-inline-edit {
+  position: relative;
+  padding: 0;
+  .#{$block-class}__inline-edit-button--non-edit {
+    padding-left: $spacing-05;
+  }
+
+  .#{$carbon-prefix}--number input[type='number'] {
+    min-width: auto;
+    padding-right: $spacing-05;
+  }
+}
+
+.#{$block-class}__inline-edit--select
+  .#{$block-class}__inline-edit--select-item {
+  padding-bottom: $spacing-05;
+  padding-left: $spacing-05;
+}
+
+.#{$block-class}__inline-edit--select.#{$carbon-prefix}--dropdown,
+.#{$block-class}__inline-edit--date .#{$carbon-prefix}--date-picker__input {
+  width: inherit;
+  height: $spacing-09; // default row height
+  max-height: none;
+}
+
+.#{$block-class}__inline-edit--date .#{$carbon-prefix}--date-picker-container {
+  width: inherit;
+}
+
+.#{$block-class}__inline-edit--date.#{$carbon-prefix}--date-picker.#{$carbon-prefix}--date-picker--single
+  .#{$carbon-prefix}--date-picker__input {
+  overflow: hidden;
+  width: 100%;
+  max-width: none;
+  padding-right: $spacing-07;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -1,7 +1,7 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
+* (c) Copyright IBM Corp. 2020 - 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
@@ -15,3 +15,17 @@
     border-bottom: 1px solid $ui-03;
   }
 }
+
+.#{$block-class} .#{$block-class}__expander-icon {
+  transition: transform $duration--fast-01 motion(entrance, productive);
+}
+
+.#{$block-class} .#{$block-class}__expander-icon--open {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}__expanded-row
+  .#{$block-class}__carbon-row-expanded
+  td:first-child {
+  border-bottom: none;
+}

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -12,14 +12,36 @@
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   right: 0;
-  box-shadow: -2px 1px 3px $overlay-01;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid $ui-03;
 }
 
 .#{$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}__left-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  left: 0;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid $ui-03;
+}
+
+.#{$block-class}__left-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  z-index: 1;
+  left: 0;
+}
+
+.#{$block-class}__left-sticky-column-cell.#{$block-class}__left-sticky-column-cell--with-extra-select-column,
+.#{$block-class}__left-sticky-column-header.#{$block-class}__left-sticky-column-header--with-extra-select-column {
+  left: $spacing-08;
 }
 
 .#{$block-class}__sticky-noShadow {
@@ -36,3 +58,9 @@
   /* stylelint-disable-next-line */
   right: 6px !important; // offset the vertical scroll bar in the table body
 }
+
+.#{$block-class}__select-all-toggle-on.#{$block-class}__select-all-sticky-left {
+  position: sticky;
+  z-index: 1;
+  left: 0;
+}

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

@@ -13,22 +13,30 @@
     position: inherit;
     display: flex;
     flex-flow: column;
-    /* stylelint-disable-next-line declaration-no-important */
-    padding-top: 0 !important;
+    padding: 0;
+    margin: 0;
   }
 }
 
-.#{$block-class}__customize-columns-checkbox {
+.#{$block-class}__customize-columns-checkbox-wrapper {
+  margin-bottom: 0;
+}
+.#{$block-class}__customize-columns-checkbox-wrapper {
   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;
+  height: $spacing-09;
   flex-flow: row;
-  margin-bottom: $spacing-06;
+  background-color: $field-02;
+}
+
+.#{$block-class}__customize-columns-modal--actions input[role='searchbox'] {
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: none;
 }
 
 .#{$block-class}__customize-columns-modal--actions > button {
@@ -36,7 +44,9 @@
 }
 
 .#{$block-class}__customize-columns-instructions {
+  padding-left: $spacing-05;
   margin-bottom: $spacing-06;
+
   @include carbon--type-style('body-long-01');
 
   color: $text-01;
@@ -46,3 +56,31 @@
   position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
   overflow: auto;
 }
+
+.#{$block-class}__customize-columns-select-all {
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer;
+}
+.#{$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover;
+}
+.#{$block-class}__customize-columns-select-all-selected {
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__customize-columns-select-all-selected:hover {
+  background-color: $hover-selected-ui;
+}
+
+.#{$block-class}
+  .#{$block-class}__customize-columns-modal
+  .#{$carbon-prefix}--modal-content {
+  margin-bottom: 0;
+}

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

@@ -60,8 +60,7 @@
     max-height: 38.5rem;
     background-color: $ui-background;
     color: $text-01;
-    transition: transform $duration--fast-02;
-    transition-timing-function: carbon--motion(standard);
+    transition: transform $duration--fast-02 carbon--motion(standard);
 
     .#{$block-class}__header-container {
       position: sticky;
@@ -123,8 +122,8 @@
       background-color: $ui-background;
       cursor: pointer;
       text-align: left;
-      transition: background-color $duration--moderate-02;
-      transition-timing-function: carbon--motion(standard);
+      transition: background-color $duration--moderate-02
+        carbon--motion(standard);
       .#{$block-class}__notification-title {
         margin-bottom: $spacing-02;
         color: $text-04;
@@ -228,8 +227,8 @@
       margin: 0 auto;
       background-color: $ui-02;
       content: '';
-      transition: background-color $duration--moderate-02;
-      transition-timing-function: carbon--motion(standard);
+      transition: background-color $duration--moderate-02
+        carbon--motion(standard);
     }
     .#{$block-class}__notification-today:hover
       + .#{$block-class}__notification-today:not(:first-of-type):before,

package/scss/components/ProductiveCard/_productive-card.scss

@@ -49,6 +49,45 @@
     .#{$block-class}__actions-header {
       margin-top: calc(-1 * #{$spacing-02});
       margin-right: $spacing-03;
+
+      .bx--btn {
+        &:hover {
+          + .#{$block-class}__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm {
+            &::before {
+              opacity: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .#{$block-class}__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc($spacing-01 + $spacing-03);
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-left: calc($spacing-01 + $spacing-03);
+
+      &::before {
+        position: absolute;
+        left: 0;
+        width: 0.05rem;
+        height: $spacing-06;
+        background-color: $hover-ui;
+        content: '';
+        opacity: 1;
+      }
+
+      &:hover {
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+
+    .#{$block-class}__actions-header-ghost-button--only.bx--btn--ghost.bx--btn--sm {
+      &::before {
+        opacity: 0;
+      }
     }
 
     .#{$block-class}__title-lg .#{$block-class}__actions-header,

package/scss/components/RemoveModal/_remove-modal.scss

@@ -25,10 +25,6 @@
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
-
   .#{$block-class}__body {
     padding-right: 20%;
     margin-bottom: $spacing-05;

package/scss/components/SidePanel/_side-panel.scss

@@ -137,8 +137,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     box-sizing: border-box;
     background-color: $ui-01;
     color: $text-01;
-    transition: transform $duration--moderate-02;
-    transition-timing-function: carbon--motion(standard);
+    transition: transform $duration--moderate-02 carbon--motion(standard);
     @each $size, $size_value in $side-panel-sizes {
       &.#{$block-class}__container--#{$size} {
         @include setPanelSize($size_value);
@@ -242,6 +241,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       background-color: $ui-01;
       opacity: var(--#{$block-class}--subtitle-opacity);
       transform: translateY(var(--#{$block-class}--title-y-position));
+      word-break: break-word;
     }
     .#{$block-class}__label-text {
       @include carbon--type-style('label-01');
@@ -383,8 +383,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       padding: 0 $spacing-05;
       margin-bottom: $spacing-03;
       background-color: $ui-01;
-      transition: transform $duration--moderate-01;
-      transition-timing-function: carbon--motion(standard);
+      transition: transform $duration--moderate-01 carbon--motion(standard);
       .#{$block-class}__action-toolbar-button {
         min-width: 2rem;
         &.#{$block-class}__action-toolbar-icon-only-button {
@@ -520,8 +519,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     width: 100%;
     height: 100%;
     background-color: $overlay-01;
-    transition: background-color $duration--moderate-02;
-    transition-timing-function: carbon--motion(standard);
+    transition: background-color $duration--moderate-02 carbon--motion(standard);
   }
 }
 

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

@@ -33,3 +33,4 @@
 @import './TagSet/index';
 @import './Tearsheet/index';
 @import './UserProfileImage/index';
+@import './WebTerminal/index';