@innovaccer/design-system 4.17.0 → 4.18.0

package/CHANGELOG.md

@@ -1,3 +1,84 @@
+## 4.18.0 (2025-12-29)
+
+### Highlights
+
+- feat(grid): add grid component (1698445c)
+- feat(flex): add flex component (3ae8b0d4)
+- feat(table): add single select filter option in table header (e810b7c8)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(grid): add grid component (1698445c)
+- feat(flex): add flex component (3ae8b0d4)
+- feat(table): add single select filter option in table header (e810b7c8)
+
+### Fixes
+
+- fix(pagination): update table pagination while searching and page change (5b7e1bb6)
+- fix(combobox): fix onchange handler call on initial render (159bf17b)
+
+### Improvements
+
+- feat(table): add filter pattern story (11c1a616)
+- feat(table): add filtertype prop and update stories (a745f210)
+- feat(table): add test cases (6079f23f)
+
+### Documentation
+
+- docs(avatar): update avatar docs usage (8302d34a)
+
+---
+
+## 4.17.1 (2025-12-11)
+
+### Highlights
+
+- fix(avatar): update avatar fallback appearance and text color (f20339b8)
+- docs(Avatars): update the docs for the avatar and avatarGroups (9e3b9273)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+NA
+
+### Fixes
+
+- fix(avatar): update avatar fallback appearance and text color (f20339b8)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(Avatars): update the docs for the avatar and avatarGroups (9e3b9273)
+- docs(avatar): update docs for avatar and avatarGroups (c7dc4be9)
+
+---
+
 ## 4.17.0 (2025-12-10)
 
 ### Highlights

package/css/dist/index.css

@@ -1070,6 +1070,8 @@ body {
 .AvatarCount-wrapper {
   border-radius: var(--border-radius-full);
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .AvatarCount-wrapper:focus,
@@ -4284,6 +4286,124 @@ body {
   padding-bottom: var(--spacing-05);
 }
 
+/* Flex component */
+.Flex {
+  display: flex;
+}
+
+/* Direction variants */
+.Flex--row {
+  flex-direction: row;
+}
+
+.Flex--column {
+  flex-direction: column;
+}
+
+.Flex--rowReverse {
+  flex-direction: row-reverse;
+}
+
+.Flex--columnReverse {
+  flex-direction: column-reverse;
+}
+
+/* Justify content variants */
+.Flex--justifyStart {
+  justify-content: flex-start;
+}
+
+.Flex--justifyEnd {
+  justify-content: flex-end;
+}
+
+.Flex--justifyCenter {
+  justify-content: center;
+}
+
+.Flex--justifyBetween {
+  justify-content: space-between;
+}
+
+.Flex--justifyAround {
+  justify-content: space-around;
+}
+
+.Flex--justifyEvenly {
+  justify-content: space-evenly;
+}
+
+/* Align items variants */
+.Flex--alignStart {
+  align-items: flex-start;
+}
+
+.Flex--alignEnd {
+  align-items: flex-end;
+}
+
+.Flex--alignCenter {
+  align-items: center;
+}
+
+.Flex--alignBaseline {
+  align-items: baseline;
+}
+
+.Flex--alignStretch {
+  align-items: stretch;
+}
+
+/* Wrap variants */
+.Flex--wrap {
+  flex-wrap: wrap;
+}
+
+.Flex--nowrap {
+  flex-wrap: nowrap;
+}
+
+.Flex--wrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+/* Gap variants */
+.Flex--gap0 {
+  gap: 0;
+}
+
+.Flex--gap2 {
+  gap: var(--spacing-05);
+}
+
+.Flex--gap4 {
+  gap: var(--spacing-10);
+}
+
+.Flex--gap8 {
+  gap: var(--spacing-20);
+}
+
+.Flex--gap12 {
+  gap: var(--spacing-30);
+}
+
+.Flex--gap16 {
+  gap: var(--spacing-40);
+}
+
+.Flex--gap24 {
+  gap: var(--spacing-60);
+}
+
+.Flex--gap32 {
+  gap: var(--spacing-80);
+}
+
+.Flex--gap48 {
+  gap: var(--spacing-120);
+}
+
 @keyframes fullscreenModal-open {
   from {
     opacity: 0;
@@ -5814,6 +5934,416 @@ body {
   color: var(--primary);
 }
 
+/* MdsGrid */
+.MdsGrid {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Gap variations */
+.MdsGrid-gap--spacing-10 {
+  gap: var(--spacing-10);
+}
+
+.MdsGrid-gap--spacing-20 {
+  gap: var(--spacing-20);
+}
+
+.MdsGrid-gap--spacing-30 {
+  gap: var(--spacing-30);
+}
+
+.MdsGrid-gap--spacing-40 {
+  gap: var(--spacing-40);
+}
+
+.MdsGrid-gap--spacing-60 {
+  gap: var(--spacing-60);
+}
+
+.MdsGrid-gap--spacing-80 {
+  gap: var(--spacing-80);
+}
+
+.MdsGrid-gap--spacing-120 {
+  gap: var(--spacing-120);
+}
+
+.MdsGrid-gap--spacing-160 {
+  gap: var(--spacing-160);
+}
+
+/* Column gap variations */
+.MdsGrid-columnGap--spacing-10 {
+  -moz-column-gap: var(--spacing-10);
+       column-gap: var(--spacing-10);
+}
+
+.MdsGrid-columnGap--spacing-20 {
+  -moz-column-gap: var(--spacing-20);
+       column-gap: var(--spacing-20);
+}
+
+.MdsGrid-columnGap--spacing-30 {
+  -moz-column-gap: var(--spacing-30);
+       column-gap: var(--spacing-30);
+}
+
+.MdsGrid-columnGap--spacing-40 {
+  -moz-column-gap: var(--spacing-40);
+       column-gap: var(--spacing-40);
+}
+
+.MdsGrid-columnGap--spacing-60 {
+  -moz-column-gap: var(--spacing-60);
+       column-gap: var(--spacing-60);
+}
+
+.MdsGrid-columnGap--spacing-80 {
+  -moz-column-gap: var(--spacing-80);
+       column-gap: var(--spacing-80);
+}
+
+.MdsGrid-columnGap--spacing-120 {
+  -moz-column-gap: var(--spacing-120);
+       column-gap: var(--spacing-120);
+}
+
+.MdsGrid-columnGap--spacing-160 {
+  -moz-column-gap: var(--spacing-160);
+       column-gap: var(--spacing-160);
+}
+
+/* Row gap variations */
+.MdsGrid-rowGap--spacing-10 {
+  row-gap: var(--spacing-10);
+}
+
+.MdsGrid-rowGap--spacing-20 {
+  row-gap: var(--spacing-20);
+}
+
+.MdsGrid-rowGap--spacing-30 {
+  row-gap: var(--spacing-30);
+}
+
+.MdsGrid-rowGap--spacing-40 {
+  row-gap: var(--spacing-40);
+}
+
+.MdsGrid-rowGap--spacing-60 {
+  row-gap: var(--spacing-60);
+}
+
+.MdsGrid-rowGap--spacing-80 {
+  row-gap: var(--spacing-80);
+}
+
+.MdsGrid-rowGap--spacing-120 {
+  row-gap: var(--spacing-120);
+}
+
+.MdsGrid-rowGap--spacing-160 {
+  row-gap: var(--spacing-160);
+}
+
+/* Justify items variations */
+.MdsGrid-justifyItems--start {
+  justify-items: start;
+}
+
+.MdsGrid-justifyItems--end {
+  justify-items: end;
+}
+
+.MdsGrid-justifyItems--center {
+  justify-items: center;
+}
+
+.MdsGrid-justifyItems--stretch {
+  justify-items: stretch;
+}
+
+/* Align items variations */
+.MdsGrid-alignItems--start {
+  align-items: start;
+}
+
+.MdsGrid-alignItems--end {
+  align-items: end;
+}
+
+.MdsGrid-alignItems--center {
+  align-items: center;
+}
+
+.MdsGrid-alignItems--stretch {
+  align-items: stretch;
+}
+
+/* Auto flow variations */
+.MdsGrid-autoFlow--row {
+  grid-auto-flow: row;
+}
+
+.MdsGrid-autoFlow--column {
+  grid-auto-flow: column;
+}
+
+.MdsGrid-autoFlow--row\ dense {
+  grid-auto-flow: row dense;
+}
+
+.MdsGrid-autoFlow--column\ dense {
+  grid-auto-flow: column dense;
+}
+
+/* Template columns variations */
+.MdsGrid-templateColumns--repeat\(1\,\ 1fr\) {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(2\,\ 1fr\) {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(3\,\ 1fr\) {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(4\,\ 1fr\) {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(12\,\ 1fr\) {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.MdsGrid-templateColumns--1fr\ 1fr\ 1fr {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.MdsGrid-templateColumns--1fr\ 2fr {
+  grid-template-columns: 1fr 2fr;
+}
+
+.MdsGrid-templateColumns--2fr\ 1fr {
+  grid-template-columns: 2fr 1fr;
+}
+
+.MdsGrid-templateColumns--2fr\ 1fr\ 1fr {
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.MdsGrid-templateColumns--200px\ 1fr\ 2fr {
+  grid-template-columns: 200px 1fr 2fr;
+}
+
+/* Template rows variations */
+.MdsGrid-templateRows--auto\ auto\ auto {
+  grid-template-rows: auto auto auto;
+}
+
+.MdsGrid-templateRows--100px\ 200px {
+  grid-template-rows: 100px 200px;
+}
+
+.MdsGrid-templateRows--1fr\ 2fr {
+  grid-template-rows: 1fr 2fr;
+}
+
+.MdsGrid-templateRows--auto\ 1fr {
+  grid-template-rows: auto 1fr;
+}
+
+/* MdsGridItem */
+.MdsGridItem {
+  box-sizing: border-box;
+}
+
+/* Justify self variations */
+.MdsGridItem-justifySelf--start {
+  justify-self: start;
+}
+
+.MdsGridItem-justifySelf--end {
+  justify-self: end;
+}
+
+.MdsGridItem-justifySelf--center {
+  justify-self: center;
+}
+
+.MdsGridItem-justifySelf--stretch {
+  justify-self: stretch;
+}
+
+/* Align self variations */
+.MdsGridItem-alignSelf--start {
+  align-self: start;
+}
+
+.MdsGridItem-alignSelf--end {
+  align-self: end;
+}
+
+.MdsGridItem-alignSelf--center {
+  align-self: center;
+}
+
+.MdsGridItem-alignSelf--stretch {
+  align-self: stretch;
+}
+
+/* Column span variations */
+.MdsGridItem-columnSpan--1 {
+  grid-column: span 1;
+}
+
+.MdsGridItem-columnSpan--2 {
+  grid-column: span 2;
+}
+
+.MdsGridItem-columnSpan--3 {
+  grid-column: span 3;
+}
+
+.MdsGridItem-columnSpan--4 {
+  grid-column: span 4;
+}
+
+.MdsGridItem-columnSpan--5 {
+  grid-column: span 5;
+}
+
+.MdsGridItem-columnSpan--6 {
+  grid-column: span 6;
+}
+
+.MdsGridItem-columnSpan--7 {
+  grid-column: span 7;
+}
+
+.MdsGridItem-columnSpan--8 {
+  grid-column: span 8;
+}
+
+.MdsGridItem-columnSpan--9 {
+  grid-column: span 9;
+}
+
+.MdsGridItem-columnSpan--10 {
+  grid-column: span 10;
+}
+
+.MdsGridItem-columnSpan--11 {
+  grid-column: span 11;
+}
+
+.MdsGridItem-columnSpan--12 {
+  grid-column: span 12;
+}
+
+/* Row span variations */
+.MdsGridItem-rowSpan--1 {
+  grid-row: span 1;
+}
+
+.MdsGridItem-rowSpan--2 {
+  grid-row: span 2;
+}
+
+.MdsGridItem-rowSpan--3 {
+  grid-row: span 3;
+}
+
+.MdsGridItem-rowSpan--4 {
+  grid-row: span 4;
+}
+
+.MdsGridItem-rowSpan--5 {
+  grid-row: span 5;
+}
+
+.MdsGridItem-rowSpan--6 {
+  grid-row: span 6;
+}
+
+/* Column start variations */
+.MdsGridItem-columnStart--1 {
+  grid-column-start: 1;
+}
+
+.MdsGridItem-columnStart--2 {
+  grid-column-start: 2;
+}
+
+.MdsGridItem-columnStart--3 {
+  grid-column-start: 3;
+}
+
+.MdsGridItem-columnStart--4 {
+  grid-column-start: 4;
+}
+
+.MdsGridItem-columnStart--5 {
+  grid-column-start: 5;
+}
+
+.MdsGridItem-columnStart--6 {
+  grid-column-start: 6;
+}
+
+.MdsGridItem-columnStart--7 {
+  grid-column-start: 7;
+}
+
+.MdsGridItem-columnStart--8 {
+  grid-column-start: 8;
+}
+
+.MdsGridItem-columnStart--9 {
+  grid-column-start: 9;
+}
+
+.MdsGridItem-columnStart--10 {
+  grid-column-start: 10;
+}
+
+.MdsGridItem-columnStart--11 {
+  grid-column-start: 11;
+}
+
+.MdsGridItem-columnStart--12 {
+  grid-column-start: 12;
+}
+
+/* Row start variations */
+.MdsGridItem-rowStart--1 {
+  grid-row-start: 1;
+}
+
+.MdsGridItem-rowStart--2 {
+  grid-row-start: 2;
+}
+
+.MdsGridItem-rowStart--3 {
+  grid-row-start: 3;
+}
+
+.MdsGridItem-rowStart--4 {
+  grid-row-start: 4;
+}
+
+.MdsGridItem-rowStart--5 {
+  grid-row-start: 5;
+}
+
+.MdsGridItem-rowStart--6 {
+  grid-row-start: 6;
+}
+
 .Menu {
   overflow-y: auto !important;
   padding-top: var(--spacing-10);
@@ -7974,8 +8504,10 @@ body {
 
 .Table-grid {
   height: 100%;
+  min-height: 0;
   overflow: hidden;
   z-index: 1;
+  flex: 1 1 auto;
 }
 
 .Table-pagination {