@innovaccer/design-system 5.0.0-13 → 5.0.0-15

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+## 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 {
@@ -5028,6 +5037,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 +5142,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 +5216,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 {
@@ -5551,6 +5569,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 +5593,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 +5611,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 +5650,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 +5758,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 +5773,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 +5842,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 +5883,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 +5895,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 {
@@ -7259,6 +7364,7 @@ body {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
+  align-items: center;
 }
 
 .StatusHint-icon {
@@ -7266,8 +7372,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 +7859,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 +8094,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;