@carbon/ibm-products 2.10.1 → 2.11.0

package/README.md

@@ -169,6 +169,13 @@ pkg.feature['Component.feature'] = true;
 pkg.setAllFeatures(true);
 ```
 
+The default values for component and feature flag settings can be found by
+running the following command.
+
+```bash
+node node_modules/@carbon/ibm-products/flags.js
+```
+
 **Note:** The above settings must happen before a component first renders or a
 feature is first used.
 

package/css/index-full-carbon.css

@@ -2049,6 +2049,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
   max-width: 14.5rem;
   flex: 0 1 25%;
 }
@@ -5163,7 +5164,8 @@ c4p--card__icon:active {
 .c4p--filter-summary {
   display: flex;
   width: 100%;
-  height: rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(48px);
   align-items: center;
   padding: 0.5rem;
   border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -11315,10 +11317,10 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: 0.125rem;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--short .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--md .c4p--datagrid__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);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-top: to-rem(7px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-bottom: to-rem(6px);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-top: 1rem;
@@ -11331,8 +11333,8 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-top: 1rem;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--tall .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-column-checkbox {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding-top: rem(13px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-top: to-rem(13px);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-bottom: 1rem;
@@ -11463,6 +11465,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover td {
+  border-bottom: none;
   background: transparent;
 }
 
@@ -11474,6 +11477,10 @@ button.c4p--add-select__global-filter-toggle--open {
   flex: 1 1 auto;
 }
 
+.c4p--datagrid__empty-state .c4p--datagrid__empty-state-cell {
+  border-bottom: none;
+}
+
 .c4p--datagrid__resizer {
   position: absolute;
   z-index: 1;
@@ -12220,6 +12227,7 @@ button.c4p--add-select__global-filter-toggle--open {
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
+/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
 .c4p--datagrid-filter-flyout__container {
   position: relative;
 }
@@ -12229,8 +12237,10 @@ button.c4p--add-select__global-filter-toggle--open {
   top: 3rem;
   right: 0;
   display: none;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   width: 40.125rem;
   background-color: var(--cds-layer-02, #ffffff);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -12239,11 +12249,14 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid-filter-flyout--batch {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   min-height: 21.625rem;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   grid-template-rows: 1fr 3rem;
 }
 
 .c4p--datagrid-filter-flyout--instant {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   min-height: 17.625rem;
   grid-template-rows: 1fr;
 }
@@ -12254,10 +12267,13 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid-filter-flyout__inner-container::before {
   position: absolute;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   top: -0.4375rem;
   right: 1px;
   display: block;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   width: 2.875rem;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   height: 0.9375rem;
   background-color: var(--cds-layer-02, #ffffff);
   content: "";
@@ -12274,6 +12290,7 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid-filter-flyout__filters {
   display: grid;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   gap: 1rem 2rem;
   grid-template-columns: 1fr 1fr;
 }
@@ -12288,6 +12305,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
   position: relative;
   background-color: var(--cds-layer-02, #ffffff);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -12304,7 +12322,8 @@ button.c4p--add-select__global-filter-toggle--open {
 */
 .c4p--datagrid-filter-panel__container {
   position: relative;
-  width: rem(320px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(320px);
   height: clamp(var(--filter-panel-min-height), 100%, 100vh);
   border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -12319,7 +12338,8 @@ button.c4p--add-select__global-filter-toggle--open {
   top: -1px;
   left: 0;
   display: block;
-  width: rem(47px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(47px);
   height: 1px;
   background-color: var(--cds-layer-01, #f4f4f4);
   content: "";
@@ -12386,7 +12406,8 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 1;
   bottom: 0;
-  height: rem(64px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(64px);
   margin-top: auto;
 }
 
@@ -12483,6 +12504,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   width: 2rem;
   height: 2rem;
   min-height: 2rem;
+  align-items: center;
   justify-content: center;
   padding: 0;
 }
@@ -12490,11 +12512,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-layer-selected-inverse, #161616);
 }
 
+.c4p--datagrid .cds--data-table tbody tr:hover + .c4p--datagrid__expanded-row,
+.c4p--datagrid .c4p--datagrid__expanded-row:hover,
+.c4p--datagrid .c4p--datagrid__expandable-row--hover td {
+  background: var(--cds-layer-hover);
+}
+
 .c4p--datagrid__draggable-handleStyle {
   display: flex;
   align-items: center;
   margin-right: 0.5rem;
-  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleStyle.disabled {
@@ -12505,32 +12532,55 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-icon-on-color-disabled, #8d8d8d);
 }
 
+.c4p--datagrid__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.c4p--datagrid__draggable-underlay-item {
+  width: 100%;
+  height: 3rem;
+  border: 2px dashed var(--cds-focus, #0f62fe);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: #edf5ff;
+}
+
 .c4p--datagrid__draggable-handleHolder {
+  position: relative;
   display: flex;
   height: 3rem;
   border-bottom: 1px solid var(--cds-layer-active);
   background-color: var(--cds-layer);
+  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleHolder:hover {
   background-color: var(--cds-layer-hover);
 }
 
-.c4p--datagrid__draggable-handleHolder-selected {
-  display: flex;
-  height: 3rem;
-  border-bottom: 1px solid var(--cds-layer-active);
+.c4p--datagrid__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+  outline: none;
+}
+
+.c4p--datagrid__draggable-handleHolder--selected {
   background-color: var(--cds-layer-selected);
 }
 
-.c4p--datagrid__draggable-handleHolder-selected:hover {
-  background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
+.c4p--datagrid__draggable-handleHolder--dragging {
+  z-index: 2;
+  background-color: var(--cds-highlight, #d0e2ff);
+  color: var(--cds-text-primary, #161616);
+  outline: none;
 }
 
-.c4p--datagrid__draggable-handleHolder-isOver {
-  border: 2px dashed var(--cds-focus, #0f62fe);
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  background-color: #edf5ff;
+.c4p--datagrid__draggable-handleHolder:active,
+.c4p--datagrid__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.c4p--datagrid__draggable-handleHolder-selected:hover {
+  background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
 }
 
 .c4p--datagrid__draggable-handleHolder-droppable {
@@ -12548,11 +12598,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-.c4p--datagrid__draggable-handleHolder-grabbed {
-  background-color: var(--cds-highlight, #d0e2ff);
-  color: var(--cds-text-primary, #161616);
-}
-
 .c4p--datagrid__draggable-handleHolder--sticky {
   color: var(--cds-text-on-color-disabled, #8d8d8d);
 }
@@ -15312,6 +15357,7 @@ a.cds--side-nav__link--current::before {
 .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
   max-width: 14.5rem;
   flex: 0 1 25%;
 }