@carbon/ibm-products 1.32.0 → 1.33.0

package/css/index-full-carbon.css

@@ -18938,6 +18938,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--options-tile__heading {
+  overflow: hidden;
   grid-column: 2;
 }
 
@@ -18946,7 +18947,10 @@ button.c4p--add-select__global-filter-toggle--open {
   font-weight: var(--cds-productive-heading-01-font-weight, 600);
   line-height: var(--cds-productive-heading-01-line-height, 1.28572);
   letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+  overflow: hidden;
   color: var(--cds-text-01, #161616);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c4p--options-tile__summary {
@@ -19127,8 +19131,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit .c4p--inline-edit__input {
   display: inline-block;
   overflow: hidden;
-  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
-  max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
+  width: calc(
+        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
+      );
+  max-width: calc(
+        100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
+      );
   min-height: var(--c4p--inline-edit--size);
   /* stylelint-disable-next-line carbon/layout-token-use */
   margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -19964,11 +19972,6 @@ button.c4p--add-select__global-filter-toggle--open {
   height: var(--cds-spacing-09, 3rem);
 }
 
-.c4p--datagrid .c4p--datagrid__table-grid-active {
-  border: 2px solid var(--cds-inverse-link, #78a9ff);
-  outline: 0;
-}
-
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20460,7 +20463,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
-  height: 1.25rem;
+  height: calc(1.5rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
@@ -20476,7 +20479,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
-  height: 1.75rem;
+  height: calc(2rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
@@ -20492,7 +20495,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
-  height: 2.25rem;
+  height: calc(2.5rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
@@ -20508,7 +20511,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
-  height: 2.75rem;
+  height: calc(3rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
@@ -20524,13 +20527,17 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
-  height: 3.75rem;
+  height: calc(4rem - 0.25rem);
 }
 
 .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
   max-height: none;
 }
 
+.c4p--datagrid {
+  --c4p--datagrid--grid-header-height: 0;
+}
+
 .c4p--datagrid__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -20549,6 +20556,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
   position: relative;
+  z-index: 2;
   display: flex;
   width: 100%;
   height: 100%;
@@ -20560,10 +20568,12 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   outline: 0;
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
+  height: var(--cds-spacing-05, 1rem);
   padding-right: var(--cds-spacing-05, 1rem);
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
   padding-left: 0;
+  cursor: default;
 }
 .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
   height: var(--cds-spacing-05, 1rem);
@@ -20673,6 +20683,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   white-space: nowrap;
 }
 
+.c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-hover-active td {
+  border-top-color: var(--cds-hover-ui, #e5e5e5);
+  background-color: var(--cds-hover-ui, #e5e5e5);
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
+  background-color: var(--cds-inverse-link, #78a9ff);
+  content: "";
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
+  background-color: var(--cds-inverse-link, #78a9ff);
+  content: "";
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active .bx--data-table-content::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: var(--c4p--datagrid--grid-width);
+  height: 2px;
+  background-color: var(--cds-inverse-link, #78a9ff);
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
+  height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
+  outline: 2px solid var(--cds-inverse-link, #78a9ff);
+  outline-offset: -2px;
+}
+
+.c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
+  padding-top: var(--cds-spacing-01, 0.125rem);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .bx--form-requirement,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .bx--form-requirement {
+  position: absolute;
+  z-index: 3;
+  top: calc(100% - var(--cds-spacing-01, 0.125rem));
+  width: 100%;
+  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-03, 0.5rem);
+  margin: 0;
+  background-color: var(--cds-ui-01, #f4f4f4);
+  outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-danger-02, #da1e28);
+  outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box[data-invalid]:focus-within ~ .bx--form-requirement {
+  outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box__invalid-icon,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input__invalid-icon,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
+  z-index: 4;
+  top: calc(100% + var(--cds-spacing-04, 0.75rem) + var(--cds-spacing-01, 0.125rem));
+  right: var(--cds-spacing-03, 0.5rem);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
+  top: calc(100% + var(--cds-spacing-02, 0.25rem) + var(--cds-spacing-01, 0.125rem));
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
+  position: absolute;
+  top: 0;
+  left: var(--cds-spacing-01, 0.125rem);
+  width: calc(100% - (var(--cds-spacing-01, 0.125rem) * 2));
+  height: var(--cds-spacing-01, 0.125rem);
+  background-color: var(--cds-ui-01, #f4f4f4);
+  content: "";
+}
+
+.c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
+  position: absolute;
+  top: var(--cds-spacing-01, 0.125rem);
+  left: var(--cds-spacing-03, 0.5rem);
+  width: calc(100% - (var(--cds-spacing-03, 0.5rem) * 2));
+  height: 1px;
+  background-color: var(--cds-ui-03, #e0e0e0);
+  content: "";
+}
+
+.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
+  background-color: var(--cds-ui-03, #e0e0e0);
+}
+.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
+  background-color: transparent;
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input:focus,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__control-btn:focus {
+  outline-color: var(--cds-support-01, #da1e28);
+}
+
+.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
+  background-color: var(--cds-support-01, #da1e28);
+}
+
 .c4p--datagrid__datagridWrap {
   display: block;
   width: 100%;
@@ -27452,6 +27581,10 @@ button.bx--dropdown-text:focus {
   background-color: transparent;
 }
 
+.bx--multi-select:not(.bx--list-box--expanded) .bx--list-box__menu {
+  visibility: hidden;
+}
+
 .bx--inline-notification {
   position: relative;
   display: flex;