@innovaccer/design-system 4.11.2 → 4.13.0

package/CHANGELOG.md

@@ -1,3 +1,104 @@
+## 4.13.0 (2025-09-22)
+
+### Highlights
+
+- feat(editableChipInput): add small variant support in editableChipInput component (cbb07d28)
+- feat(chipInput): add small variant support in chipInput component (48b9b85d)
+- feat(select): add small variant support in select component (4c72ae07)
+- feat(chip): add small variant support in chip component (e7829052)
+- feat(button): add small variant support in button component (38052c54)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(editableChipInput): add small variant support in editableChipInput component (cbb07d28)
+- feat(chipInput): add small variant support in chipInput component (48b9b85d)
+- feat(select): add small variant support in select component (4c72ae07)
+- feat(chip): add small variant support in chip component (e7829052)
+- feat(editableInput): add small variant support in editableInput component (6e720070)
+- feat(menu): add small variant support in menu component (f3bace0c)
+- feat(textField): add small variant support in textField component (6a76f7aa)
+- feat(metricInput): add small variant support in metric input component (3fa029f7)
+- feat(input): add small variant support in input component (77730a3f)
+- feat(textarea): add small variant support in textarea component (508e2872)
+- feat(badge): add hover event support in badge component (10831bd1)
+- feat(statusHint): add new small variant support in status hint (0216d7b0)
+- feat(tooltip): add small size support in tooltip component (e0b4da4d)
+- feat(message): add small variant support in message (8d523382)
+- feat(button): add small variant support in button component (38052c54)
+- feat(label): add small variant support in label component (d29c11a8)
+
+### Fixes
+
+NA
+
+### Improvements
+
+- chore: add AGENTS.md file (fbc14017)
+
+### Documentation
+
+NA
+
+---
+
+## 4.12.0 (2025-08-14)
+
+### Highlights
+
+- feat(table): add custom header cell renderer with sorting state support (9fb78957)
+- feat(verticalNav): add support for custom option renderer in vertical nav (fcbcb87f)
+- feat(select): add inline label support for small size select trigger (9f476ce7)
+- feat(table): add support for custom label in table header (404b440b)
+- feat(link): add story for icon support in link component (01d658b2)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(table): add custom header cell renderer with sorting state support (9fb78957)
+- feat(verticalNav): add support for custom option renderer in vertical nav (fcbcb87f)
+- feat(select): add inline label support for small size select trigger (9f476ce7)
+- feat(table): add support for custom label in table header (404b440b)
+- feat(link): add story for icon support in link component (01d658b2)
+
+### Fixes
+
+- fix(table): fix extra api call on sorting in infinite scroll (00f3a26b)
+- fix(table): fix visibility of background cell for pinned columns (29d91d9b)
+- fix(table): update spacing of checkbox for loading state (45109d69)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(icon): update appearance section for the Icon component (d9c04fa6)
+
+---
+
 ## 4.11.2 (2025-07-28)
 
 ### Highlights

package/css/dist/index.css

@@ -679,6 +679,9 @@ body {
 .Label {
   display: inline-flex;
 }
+.Label--small {
+  font-size: var(--font-size-s);
+}
 
 .Label--withInput {
   margin-bottom: var(--spacing-10);
@@ -699,6 +702,10 @@ body {
   margin-left: var(--spacing-10);
 }
 
+.Label-optionalText--small {
+  font-size: var(--font-size-s);
+}
+
 .Label--disabled {
   color: var(--text-disabled);
 }
@@ -1407,6 +1414,8 @@ body {
   padding-left: var(--spacing-20);
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
 }
 
 .Button--tinySquare {
@@ -2427,7 +2436,6 @@ body {
   box-sizing: border-box;
   border-radius: var(--border-radius-30);
   padding-right: var(--spacing-20);
-  padding-left: var(--spacing-20);
   padding-top: var(--spacing-05);
   padding-bottom: var(--spacing-05);
   width: -moz-fit-content;
@@ -2438,10 +2446,18 @@ body {
   align-items: center;
   flex-direction: row;
   cursor: default;
-  height: var(--spacing-60);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
+.Chip-size--regular {
+  height: var(--spacing-60);
+  padding-left: var(--spacing-20);
+}
+.Chip-size--small {
+  height: 20px;
+  padding-left: var(--spacing-15);
+}
+
 .Chip-wrapper {
   display: inline-flex;
   align-items: center;
@@ -2456,6 +2472,7 @@ body {
 .Chip-icon--right {
   display: flex;
   align-items: center;
+  justify-content: center;
   border-radius: var(--border-radius-full);
   margin-left: var(--spacing-05);
 }
@@ -2643,13 +2660,21 @@ body {
   display: flex;
   border-radius: var(--border-radius-10);
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
-  padding-left: 10px;
-  padding-right: 10px;
   background: var(--white);
   cursor: text;
   flex: 100%;
 }
 
+.ChipInput--regular {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.ChipInput--small {
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
+}
+
 .ChipInput:focus,
 .ChipInput:focus-visible {
   outline: var(--spacing-2-5) var(--primary);
@@ -2704,11 +2729,23 @@ body {
   min-width: 15%;
   flex: 0px;
   box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+}
+
+.ChipInput-input--small {
+  height: 20px;
+  margin-top: var(--spacing-05);
+  margin-bottom: var(--spacing-05);
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
+.ChipInput-input--regular {
   height: var(--spacing-60);
   margin-top: var(--spacing-10);
   margin-bottom: var(--spacing-10);
-  font-family: var(--font-family);
-  font-size: var(--font-size);
 }
 
 .ChipInput:hover .ChipInput-input {
@@ -2720,14 +2757,22 @@ body {
 }
 
 .ChipInput-icon {
-  height: var(--spacing-40);
-  padding: var(--spacing-05);
-  margin-left: var(--spacing-20);
-  margin-top: var(--spacing-15);
   cursor: pointer;
   border-radius: var(--border-radius-full);
 }
 
+.ChipInput-icon--small {
+  margin-left: var(--spacing-15);
+  margin-top: var(--spacing-15);
+  height: var(--spacing-30);
+}
+
+.ChipInput-icon--regular {
+  height: var(--spacing-40);
+  margin-left: var(--spacing-20);
+  margin-top: var(--spacing-20);
+}
+
 .ChipInput-icon:hover {
   background-color: var(--secondary);
 }
@@ -3762,8 +3807,6 @@ body {
   border: var(--border-width-2-5) solid transparent;
   box-sizing: border-box;
   white-space: nowrap;
-  padding-left: var(--spacing-30);
-  padding-right: var(--spacing-30);
   display: flex;
   align-items: center;
 }
@@ -3771,11 +3814,18 @@ body {
 .EditableInput-default--regular {
   min-width: var(--spacing-640);
   height: var(--spacing-80);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
 }
 
 .EditableInput-default--tiny {
   min-width: var(--spacing-240);
   height: var(--spacing-60);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .EditableInput-Input--tiny {
@@ -5028,6 +5078,8 @@ body {
   height: var(--font-height-m);
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .Input--regular {
@@ -5131,6 +5183,12 @@ body {
   font-size: var(--font-size-m);
 }
 
+.Input-input--tiny {
+  line-height: var(--font-height-s);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Input-icon {
   display: flex;
   align-content: center;
@@ -5199,6 +5257,7 @@ body {
   font-weight: var(--font-weight-medium);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
+  border-bottom: var(--border-width-2-5) solid transparent;
 }
 
 .Link:focus-visible {
@@ -5527,6 +5586,13 @@ body {
   box-sizing: border-box;
 }
 
+.Menu-Item--tight {
+  padding: var(--spacing-10) var(--spacing-20);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+}
+
 .Menu-Group-Label {
   display: flex;
   align-items: center;
@@ -5551,6 +5617,10 @@ body {
   box-sizing: border-box;
 }
 
+.Message--small {
+  padding: var(--spacing-20);
+}
+
 .Message--alert {
   border-color: var(--alert);
   background-color: rgba(217, 55, 55, 0.04);
@@ -5571,11 +5641,16 @@ body {
   background-color: rgba(240, 125, 0, 0.04);
 }
 
-.Message-icon {
+.Message-icon--regular {
   margin-right: var(--spacing-40);
   padding-top: var(--spacing-05);
 }
 
+.Message-icon--small {
+  margin-right: var(--spacing-20);
+  padding-top: var(--spacing-05) !important;
+}
+
 .Message-icon--withTitle {
   padding-top: var(--spacing-10);
 }
@@ -5584,10 +5659,22 @@ body {
   color: var(--accent1);
 }
 
-.Message-heading {
+.Message-heading--regular {
   margin-bottom: var(--spacing-10);
 }
 
+.Message-heading--small {
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  margin-bottom: var(--spacing-05);
+}
+
+.Message-text--small {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Message-heading--alert,
 .Message-text--alert {
   color: var(--alert-darker) !important;
@@ -5611,9 +5698,16 @@ body {
 .Message-actions {
   display: flex;
   align-items: center;
+}
+
+.Message-actions--regular {
   margin-top: var(--spacing-30);
 }
 
+.Message-actions--small {
+  margin-top: var(--spacing-10);
+}
+
 .Meta {
   display: flex;
   flex-direction: row;
@@ -5712,8 +5806,8 @@ body {
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-10);
   background: var(--white);
+  overflow: hidden;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -5727,6 +5821,11 @@ body {
   padding-left: var(--spacing-40);
 }
 
+.MetricInput--small {
+  height: var(--spacing-60);
+  padding-left: var(--spacing-20);
+}
+
 .MetricInput:hover {
   background: var(--secondary-lightest);
   cursor: text;
@@ -5791,6 +5890,17 @@ body {
   font-size: var(--font-size-m);
 }
 
+.MetricInput-input--regular {
+  line-height: var(--font-height);
+  font-size: var(--font-size);
+}
+
+.MetricInput-input--small {
+  line-height: var(--font-height-s);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .MetricInput-input::-moz-placeholder {
   color: var(--inverse-lighter);
 }
@@ -5821,6 +5931,10 @@ body {
   line-height: var(--font-height-m);
 }
 
+.MetricInput-icon--small {
+  margin-right: var(--spacing-10);
+}
+
 .MetricInput-input::-webkit-inner-spin-button,
 .MetricInput-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -5829,16 +5943,55 @@ body {
   margin: 0;
 }
 
-.MetricInput-arrowIcon--large {
-  height: var(--spacing-40);
-  width: var(--spacing-40);
-  border-radius: var(--border-radius-05);
+.MetricInput-arrowIcons {
+  border-left: var(--border);
+  box-sizing: border-box;
+  border-radius: 0;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.MetricInput-arrowIcon--regular {
-  height: var(--spacing-30);
-  width: var(--spacing-30);
-  border-radius: var(--border-radius-05);
+.MetricInput-arrowButton {
+  height: 50%;
+  border: none;
+  background: var(--secondary-light);
+  color: var(--inverse);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+}
+
+.MetricInput-arrowButton:hover {
+  background: var(--secondary);
+}
+
+.MetricInput-arrowButton:active {
+  background: var(--secondary-dark);
+}
+
+.MetricInput-arrowButton:focus {
+  outline: 0;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.MetricInput-arrowIcons--small,
+.MetricInput-arrowIcons--regular {
+  width: 20px;
+}
+
+.MetricInput-arrowIcons--large {
+  width: var(--spacing-60);
 }
 
 @keyframes modal-open {
@@ -6793,7 +6946,7 @@ body {
 
 .Select-trigger--small {
   height: var(--spacing-60);
-  padding-right: var(--spacing-20);
+  padding-right: var(--spacing-10);
   padding-left: var(--spacing-20);
 }
 
@@ -6864,6 +7017,27 @@ body {
   width: 100%;
 }
 
+.Select-trigger--textSmall {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
+.Select-option--tight {
+  padding: var(--spacing-10) var(--spacing-20);
+}
+
+.Select-input--tiny {
+  padding-right: var(--spacing-10);
+  height: var(--spacing-60);
+}
+
+.Select-option--textTight {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Selection-card {
   border-radius: var(--border-radius-10);
   position: relative;
@@ -7259,6 +7433,7 @@ body {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
+  align-items: center;
 }
 
 .StatusHint-icon {
@@ -7266,8 +7441,6 @@ body {
   border-radius: var(--border-radius-full);
   height: var(--spacing-20);
   width: var(--spacing-20);
-  margin-right: var(--spacing-20);
-  margin-top: var(--spacing-15);
 }
 
 .StatusHint--alert {
@@ -7755,6 +7928,12 @@ body {
   resize: both;
 }
 
+.Textarea--small {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+}
+
 /* toast */
 
 .Toast {
@@ -7984,6 +8163,10 @@ body {
   transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
 }
 
+.Tooltip--small {
+  line-height: var(--font-height-s);
+}
+
 .Tooltip-text {
   word-break: break-word;
   -webkit-hyphens: auto;