@innovaccer/design-system 4.10.0 → 5.0.0-1

package/CHANGELOG.md

@@ -1,93 +1,3 @@
-## 4.10.0 (2025-06-25)
-
-### Highlights
-
-- feat(table): add highlight search term feature in table (591abcca)
-- fix(table): fix grid head and body sync issue on scroll event (e3255270)
-- fix(select): fix auto position update for select popover (42734e64)
-- fix(select): fix selection state of pre-selected option (f7aca262)
-
-### Breaking changes
-
-NA
-
-### Migration guide
-
-NA
-
-### Deprecations
-
-NA
-
-### Features
-
-- feat(table): add highlight search term feature in table (591abcca)
-
-### Fixes
-
-- fix(table): fix grid head and body sync issue on scroll event (e3255270)
-- fix(select): fix auto position update for select popover (42734e64)
-- fix(select): fix selection state of pre-selected option (f7aca262)
-
-### Improvements
-
-NA
-
-### Documentation
-
-NA
-
----
-
-## 4.9.0 (2025-06-16)
-
-### Highlights
-
-- feat(chatInput): add new chatInput component (f441d91b)
-- feat(table): update states of table component (a22f2008)
-- feat(table): implement  public data selection methods (fd4735d1)
-
-### Breaking changes
-
-NA
-
-### Migration guide
-
-NA
-
-### Deprecations
-
-NA
-
-### Features
-
-- feat(chatInput): add new chatInput component (f441d91b)
-- feat(table): update states of table component (a22f2008)
-- feat(table): implement  public data selection methods (fd4735d1)
-
-### Fixes
-
-- fix(table): update table filtering section in docs (794066c2)
-- fix(checkbox): improve DOM structure and spacing (6f1a21d1)
-- fix(verticalNav): add string type for pills in vertical nav component (939f67af)
-- fix(table): fix grid head & body sync issue on scroll in virtualized table (9ed6b109)
-- fix(table): fix grid head & body sync issue in pinned columns (04bf2b4b)
-- fix(table): fix blank state on sorting issue for virtualized table (69e0d813)
-- fix(table): update right padding for columns (1f00360a)
-- fix(table): fix grid head & body alignment issue in pinned virtualized table (1e97f9a9)
-- fix(table): update expanded state of nested row for virtualized table (ff0cc553)
-- fix(typography): fix default props appearance issue (40872de4)
-
-### Improvements
-
-- feat(verticalNav): update stories structure for vertical nav (370e1954)
-
-### Documentation
-
-NA
-
----
-
 ## 4.8.0 (2025-05-01)
 
 ### Highlights

package/css/src/components/checkbox.module.css

@@ -21,6 +21,7 @@
 }
 
 .Checkbox-labelWrapper {
+  padding-left: var(--spacing-20);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -38,7 +39,6 @@
 .Checkbox-outerWrapper {
   position: relative;
   margin-top: var(--spacing-05);
-  margin-right: var(--spacing-20);
 }
 
 .Checkbox-outerWrapper--regular {

package/css/src/components/grid.module.css

@@ -1,3 +1,12 @@
+/** Grid **/
+
+.Grid-wrapper {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
 .Grid {
   display: flex;
   flex-direction: column;
@@ -7,11 +16,20 @@
   background: var(--white);
 }
 
-.Grid-wrapper {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  height: 100%;
+.Grid--resource .Grid-row--body:hover,
+.Grid--resource .Grid-row--body:hover .Grid-cellGroup {
+  cursor: pointer;
+  background: var(--secondary-lightest);
+}
+
+.Grid--resource .Grid-row--body:active,
+.Grid--resource .Grid-row--body:active .Grid-cellGroup {
+  background: var(--secondary-lighter);
+}
+
+.Grid--resource .Grid-row--body:focus {
+  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
+  outline: none;
 }
 
 .Grid--pinned {
@@ -113,6 +131,42 @@
   border-bottom: var(--border);
 }
 
+.Grid-row {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: var(--white);
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+  transition-delay: var(--duration--fast-01);
+}
+
+.Grid-row--body {
+  border-color: var(--secondary-light);
+}
+
+.Grid-row--selected,
+.Grid-row--selected .Grid-cellGroup {
+  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+}
+
+.Grid-row--selected:hover,
+.Grid-row--selected .Grid-cellGroup:hover {
+  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
+}
+
+.Grid-row--selected:active,
+.Grid-row--selected .Grid-cellGroup:active {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus,
+.Grid-row--selected .Grid-cellGroup:focus {
+  outline: none;
+  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
+}
+
 .Grid-rowWrapper:last-child .Grid-row--body {
   border-bottom: 0;
 }
@@ -149,7 +203,6 @@
   box-sizing: border-box;
   padding-left: var(--spacing-30);
   padding-right: var(--spacing-30);
-  flex-grow: 1;
 }
 
 .Grid-cell--body {
@@ -185,6 +238,15 @@
   border-left: none;
 }
 
+/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
+    border-right: var(--border);
+} */
+
+.Grid-row--disabled {
+  opacity: var(--opacity-10);
+  pointer-events: none;
+}
+
 .Grid-cell--head.Grid-cell--selected {
   background: var(--primary-light);
 }
@@ -199,15 +261,6 @@
   overflow: visible !important;
 }
 
-.Grid-cell--separator {
-  border-left: var(--border);
-  border-color: var(--secondary-light);
-}
-
-.Grid-cell--selected {
-  background: var(--primary-lightest);
-}
-
 .Grid-sortingIcons {
   display: flex;
   align-items: center;
@@ -269,7 +322,7 @@
 .Grid-cellGroup {
   display: flex;
   box-sizing: border-box;
-  height: 100%;
+  background: var(--white);
 }
 
 .Grid-cellGroup--pinned {
@@ -279,10 +332,32 @@
 
 .Grid-cellGroup--pinned-left {
   left: 0;
+  border-style: inset;
+  border-right: var(--spacing-2-5) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right-width: var(--border-width-10);
+  border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
 }
 
 .Grid-cellGroup--pinned-right {
   right: 0;
+  border-style: inset;
+  border-left: var(--border-width-2-5) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left-width: var(--border-width-10);
+  border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
 }
 
 .Grid .Checkbox-wrapper {
@@ -299,11 +374,13 @@
 }
 
 .GridCell--align-left {
+  /* flex-direction: row; */
   justify-content: flex-start;
   text-align: left;
 }
 
 .GridCell--align-right {
+  /* flex-direction: row-reverse; */
   justify-content: flex-end;
   text-align: right;
 }
@@ -313,9 +390,6 @@
   text-align: center;
 }
 
-.GridCell--default {
-}
-
 .GridCell--metaList {
   display: flex;
   flex-direction: column;
@@ -354,7 +428,7 @@
   align-items: center;
 }
 
-.GridCell-metaSeparator {
+.GridCell-metaList .Text::before {
   content: '';
   display: inline-flex;
   align-items: center;
@@ -362,21 +436,12 @@
   width: var(--spacing-10);
   height: var(--spacing-10);
   border-radius: var(--border-radius-full);
-  background: var(--inverse-lightest);
+  background: var(--secondary);
   margin: 0 var(--spacing-20);
 }
 
-.GridCell-mark--default {
-  background: var(--warning-light);
-  border-radius: var(--border-radius-05);
-}
-
-.GridCell-mark--metaList {
-  font-size: var(--font-size-s);
-  line-height: var(--font-height-normal);
-  color: var(--text-subtle);
-  background: var(--warning-light);
-  border-radius: var(--border-radius-05);
+.GridCell-metaList .Text:first-child::before {
+  display: none;
 }
 
 .GridCell--metaList ul li:first-child {
@@ -449,159 +514,3 @@
   margin-left: auto;
   margin-bottom: var(--spacing-40);
 }
-
-/* Grid row */
-
-.Grid-row--disabled {
-  opacity: var(--opacity-10);
-  pointer-events: none;
-}
-
-.Grid-row {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  background: var(--white);
-}
-
-.Grid-row--body {
-  border-color: var(--secondary-light);
-}
-
-.Grid--resource .Grid-row--body:hover {
-  cursor: pointer;
-  background: var(--secondary-lightest);
-}
-
-.Grid--resource .Grid-row--body:active {
-  background: var(--secondary-lighter);
-}
-
-.Grid--resource .Grid-row--body:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
-  outline: none;
-}
-
-/* Selected States */
-
-.Grid-row--selected {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
-}
-
-.Grid-row--selected:hover {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
-}
-
-.Grid-row--selected:active {
-  background: var(--primary-lighter) !important;
-}
-
-.Grid-row--selected:focus {
-  outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
-}
-
-/* Activated States */
-
-.Grid-row--activated {
-  background: var(--primary-lightest);
-}
-
-/* Pinned Columns Default State */
-
-.Grid--resource .Grid-row--body:hover .Grid-cellWrapper--pinned {
-  cursor: pointer;
-  background: var(--secondary-lightest);
-}
-
-.Grid--resource .Grid-row--body:active .Grid-cellWrapper--pinned {
-  background: var(--secondary-lighter);
-}
-
-.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
-  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
-  outline: none;
-}
-
-/* Pinned Columns Selected State */
-
-.Grid-row--selected .Grid-cellWrapper--pinned {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
-}
-
-.Grid-row--selected:hover .Grid-cellWrapper--pinned {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
-}
-
-.Grid-row--selected:active .Grid-cellWrapper--pinned {
-  background: var(--primary-lighter) !important;
-}
-
-.Grid-row--selected:focus .Grid-cellWrapper--pinned {
-  outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
-}
-
-/* Grid header */
-.Grid-row--head .Grid-cellGroup--pinned {
-  background: var(--white);
-}
-
-.Grid-row--head .Grid-cellGroup--pinned-left {
-  border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
-  border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
-}
-
-.Grid-row--head .Grid-cellGroup--pinned-right {
-  border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
-  border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
-}
-
-/* Pinned Column Border */
-
-.Grid-cellWrapper--pinned-left {
-  border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
-  border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
-}
-
-.Grid-cellWrapper--pinned-right {
-  border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
-  border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
-}

package/css/src/components/verticalNav.module.css

@@ -127,7 +127,6 @@
 
 .MenuItem-count {
   margin-right: var(--spacing-10);
-  flex-shrink: 0;
 }
 
 .MenuItem-count--disabled {

package/css/src/utils/utility.css

@@ -31,10 +31,6 @@
   white-space: nowrap;
 }
 
-.white-space-pre {
-  white-space: pre;
-}
-
 .bottom-0 {
   bottom: 0;
 }