@innovaccer/design-system 4.7.0 → 4.9.0

package/CHANGELOG.md

@@ -1,3 +1,89 @@
+## 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
+
+- feat(aibutton): update appearance with sparkle variant in AI Button component (f8b613b4)
+- fix(select): update disabled state for select trigger cross icon (c1dbad7f)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(aibutton): update appearance with sparkle variant in AI Button component (f8b613b4)
+
+### Fixes
+
+- fix(select): update disabled state for select trigger cross icon (c1dbad7f)
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 4.7.0 (2025-04-21)
 
 ### Highlights

package/css/dist/index.css

@@ -2121,6 +2121,98 @@ body {
   flex: 0 0 auto;
 }
 
+.ChatInput {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: var(--border-width-2-5) solid var(--secondary);
+  padding: var(--spacing-20);
+  border-radius: var(--border-radius-10);
+  background: var(--white);
+  max-width: 100%;
+  min-width: var(--spacing-640);
+  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  max-height: var(--spacing-440);
+  position: relative;
+  box-sizing: border-box;
+  line-height: var(--font-height-m);
+}
+
+.ChatInput--expanded {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.ChatInput--disabled {
+  background: var(--secondary-lightest);
+  cursor: not-allowed;
+}
+
+.ChatInput:hover {
+  background: var(--secondary-lighter);
+}
+
+.ChatInput:focus-within,
+.ChatInput:focus,
+.ChatInput:focus-visible {
+  outline: none;
+  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.ChatInput-textarea {
+  flex: 1;
+  /* height: 100%; */
+  height: var(--spacing-60);
+  width: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  transition-delay: var(--duration--slow-01);
+  transition: width var(--duration--slow-01) var(--standard-productive-curve);
+  box-sizing: border-box;
+  cursor: auto;
+  padding: var(--spacing-05) 0;
+  background: none;
+  word-break: break-all;
+  overflow-y: scroll;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-height);
+  font-size: var(--font-size);
+}
+
+.ChatInput-textarea::-moz-placeholder {
+  color: var(--inverse-lighter);
+}
+
+.ChatInput-textarea::placeholder {
+  color: var(--inverse-lighter);
+}
+
+.ChatInput textarea:disabled::-moz-placeholder {
+  color: var(--inverse-lightest);
+}
+
+.ChatInput textarea:disabled::placeholder {
+  color: var(--inverse-lightest);
+}
+
+.ChatInput-actions {
+  display: flex;
+  flex-shrink: 0;
+  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  margin-left: var(--spacing-20);
+  align-items: center;
+}
+
+.ChatInput-actions--expanded {
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: var(--spacing-20);
+  margin-left: 0;
+}
+
 .Chat-UnreadMessage {
   border-radius: var(--border-radius-40);
   padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);
@@ -2167,7 +2259,6 @@ body {
 }
 
 .Checkbox-labelWrapper {
-  padding-left: var(--spacing-20);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -2185,6 +2276,7 @@ body {
 .Checkbox-outerWrapper {
   position: relative;
   margin-top: var(--spacing-05);
+  margin-right: var(--spacing-20);
 }
 
 .Checkbox-outerWrapper--regular {
@@ -3961,15 +4053,6 @@ body {
   padding: var(--spacing-40) var(--spacing-60);
 }
 
-/** Grid **/
-
-.Grid-wrapper {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-}
-
 .Grid {
   display: flex;
   flex-direction: column;
@@ -3979,20 +4062,11 @@ body {
   background: var(--white);
 }
 
-.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) rgba(213, 213, 213, 0.16);
-  outline: none;
+.Grid-wrapper {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
 }
 
 .Grid--pinned {
@@ -4095,42 +4169,6 @@ body {
   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: rgba(220, 236, 249, 0.48);
-  transition: var(--duration--fast-02) var(--standard-productive-curve);
-}
-
-.Grid-row--selected:hover,
-.Grid-row--selected .Grid-cellGroup:hover {
-  background: rgba(151, 197, 240, 0.48) !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) rgba(0, 112, 221, 0.16);
-}
-
 .Grid-rowWrapper:last-child .Grid-row--body {
   border-bottom: 0;
 }
@@ -4167,6 +4205,7 @@ body {
   box-sizing: border-box;
   padding-left: var(--spacing-30);
   padding-right: var(--spacing-30);
+  flex-grow: 1;
 }
 
 .Grid-cell--body {
@@ -4202,15 +4241,6 @@ body {
   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);
 }
@@ -4225,6 +4255,15 @@ body {
   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;
@@ -4286,7 +4325,7 @@ body {
 .Grid-cellGroup {
   display: flex;
   box-sizing: border-box;
-  background: var(--white);
+  height: 100%;
 }
 
 .Grid-cellGroup--pinned {
@@ -4296,48 +4335,10 @@ body {
 
 .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);
-  -o-border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 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);
-  -o-border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
-     border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
-    )
-    1 100%;
 }
 
 .Grid .Checkbox-wrapper {
@@ -4354,13 +4355,11 @@ body {
 }
 
 .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;
 }
@@ -4370,6 +4369,9 @@ body {
   text-align: center;
 }
 
+.GridCell--default {
+}
+
 .GridCell--metaList {
   display: flex;
   flex-direction: column;
@@ -4495,6 +4497,194 @@ body {
   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) rgba(213, 213, 213, 0.16);
+  outline: none;
+}
+
+/* Selected States */
+
+.Grid-row--selected {
+  background: rgba(220, 236, 249, 0.48);
+}
+
+.Grid-row--selected:hover {
+  background: rgba(151, 197, 240, 0.48) !important;
+}
+
+.Grid-row--selected:active {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
+}
+
+/* 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) rgba(213, 213, 213, 0.16);
+  outline: none;
+}
+
+/* Pinned Columns Selected State */
+
+.Grid-row--selected .Grid-cellWrapper--pinned {
+  background: rgba(220, 236, 249, 0.48);
+}
+
+.Grid-row--selected:hover .Grid-cellWrapper--pinned {
+  background: rgba(151, 197, 240, 0.48) !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) rgba(0, 112, 221, 0.16);
+}
+
+/* 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;
+  -o-border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 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;
+  -o-border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 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;
+  -o-border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 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;
+  -o-border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+}
+
 .HorizontalNav {
   display: flex;
 }
@@ -6642,7 +6832,6 @@ body {
      -moz-user-select: none;
           user-select: none;
   cursor: pointer;
-  color: var(--inverse);
   border-radius: var(--border-radius-full);
   padding: var(--spacing-05);
 }
@@ -8056,6 +8245,7 @@ body {
 
 .MenuItem-count {
   margin-right: var(--spacing-10);
+  flex-shrink: 0;
 }
 
 .MenuItem-count--disabled {
@@ -8074,62 +8264,47 @@ body {
   line-height: var(--font-height-s);
   display: flex;
   align-items: center;
-}
-
-.AIButton:disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.AIButton:focus {
-  outline: 0;
-}
-
-/* Primary Button */
-
-.AIButton--primary {
-  background: var(--primary);
-  color: var(--white);
-}
-
-.AIButton--primary:hover {
-  background: var(--primary-dark);
-}
-
-.AIButton--primary:active {
-  background: var(--primary-darker);
-}
-
-.AIButton--primary:disabled {
-  background: var(--primary-lighter);
-}
-
-.AIButton--primary:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
-/* Basic Button */
-
-.AIButton--basic {
-  background: var(--secondary-light);
   color: var(--inverse);
+  background: linear-gradient(
+    277deg,
+    rgba(227, 28, 121, 0.15) 0%,
+    rgba(231, 56, 79, 0.24) 28%,
+    rgba(240, 125, 0, 0.15) 100%
+  );
 }
 
-.AIButton--basic:hover {
-  background: var(--secondary);
+.AIButton:hover {
+  background: linear-gradient(
+    277deg,
+    rgba(227, 28, 121, 0.2) 0%,
+    rgba(231, 56, 79, 0.32) 28%,
+    rgba(240, 125, 0, 0.2) 100%
+  );
 }
 
-.AIButton--basic:active {
-  background: var(--secondary-dark);
+.AIButton:active {
+  background: linear-gradient(
+    277deg,
+    rgba(227, 28, 121, 0.31) 0%,
+    rgba(231, 56, 79, 0.48) 28%,
+    rgba(240, 125, 0, 0.31) 100%
+  );
 }
 
-.AIButton--basic:disabled {
-  background: var(--secondary-lighter);
-  color: var(--inverse-lightest);
+.AIButton:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-10);
+  background: linear-gradient(
+    277deg,
+    rgba(227, 28, 121, 0.15) 0%,
+    rgba(231, 56, 79, 0.24) 28%,
+    rgba(240, 125, 0, 0.15) 100%
+  );
 }
 
-.AIButton--basic:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.AIButton:focus {
+  outline: 0;
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 /* Button Icon */