@carbon/ibm-products 1.32.1 → 1.33.0

package/css/index-full-carbon.css

@@ -19131,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);
@@ -19968,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
@@ -20464,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 {
@@ -20480,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 {
@@ -20496,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 {
@@ -20512,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 {
@@ -20528,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%;
@@ -20553,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%;
@@ -20569,6 +20573,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 }
 .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);
@@ -20678,11 +20683,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   white-space: nowrap;
 }
 
-.bx--data-table .c4p--datagrid__carbon-row-hover-active td {
+.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%;