@innovaccer/design-system 2.31.1 → 2.32.0

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+## 2.32.0 (2024-05-01)
+
+### Highlights
+
+- feat(opacity): update values of opacity with tokens in components (e9701951)
+- feat(storybook): update storybook structure in alphabetical order (81c5261a)
+- feat(docs): update storybook preview link in markdown (5c367b4c)
+- feat(menu): add overflow behavior in option items (4b2f4239)
+- feat(combobox): add overflow behavior for option items (ef09ab38)
+- feat(avatarSelection): add overflow behavior for popover options (0d0bed91)
+- feat(select): add overflow behavior in option item and trigger (999ff9d3)
+- docs(node): node 20 migration (e3737cd8)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(opacity): update values of opacity with tokens in components (e9701951)
+- feat(storybook): update storybook structure in alphabetical order (81c5261a)
+- feat(docs): update storybook preview link in markdown (5c367b4c)
+- feat(menu): add overflow behavior in option items (4b2f4239)
+- feat(combobox): add overflow behavior for option items (ef09ab38)
+- feat(avatarSelection): add overflow behavior for popover options (0d0bed91)
+- feat(select): add overflow behavior in option item and trigger (999ff9d3)
+- docs(node): node 20 migration (e3737cd8)
+
+### Fixes
+
+- fix(tooltip): tooltip not appearing on consecutive list hover (670e3a4e)
+- fix: update material symbols link on codesandbox (ad7c15a7)
+- fix(grid): update style for pinned columns (d68c7300)
+- fix(dropdown): fix width of error template in dropdown (5fd99771)
+- docs(node): fix cypress test cases (f6fd95c7)
+
+### Improvements
+
+- chore: add launch config for jest test case debugging in VS Code (9bcc8016)
+- chore: update jest config to exclude type definition files from coverage (589c2b58)
+- test(accessibility): add test cases for accessibility utils (6f27cee8)
+- fix: update name of overflow stories of select, menu, combobox (e2ab96d9)
+
+### Documentation
+
+- docs(combobox): update image for overflow behavior of option item (619cf381)
+
+---
+
 ## 2.31.1 (2024-04-19)
 
 ### Highlights

package/css/dist/index.css

@@ -273,19 +273,17 @@
   --duration--slow-01: 400ms;
   --duration--slow-02: 720ms;
 
-  /**** Opacity ****/
-  --opacity-0: 0;
-  --opacity-4: 0.04;
-  --opacity-8: 0.08;
-  --opacity-12: 0.12;
-  --opacity-16: 0.16;
-  --opacity-24: 0.24;
-  --opacity-32: 0.32;
-  --opacity-40: 0.4;
-  --opacity-48: 0.48;
-  --opacity-64: 0.64;
-  --opacity-80: 0.8;
-  --opacity-100: 1;
+  /* Opacity */
+  --opacity-1: 0.04;
+  --opacity-2: 0.08;
+  --opacity-3: 0.12;
+  --opacity-4: 0.16;
+  --opacity-6: 0.24;
+  --opacity-8: 0.32;
+  --opacity-10: 0.4;
+  --opacity-12: 0.48;
+  --opacity-16: 0.64;
+  --opacity-20: 0.8;
 }
 
 /* fallback */
@@ -870,7 +868,7 @@ body {
   bottom: 0;
   left: 0;
   z-index: 2;
-  opacity: 50%;
+  opacity: var(--opacity-10);
   background: var(--secondary-light);
 }
 
@@ -1126,7 +1124,7 @@ body {
     opacity: 0;
   }
   to {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
 }
 
@@ -1135,13 +1133,13 @@ body {
     opacity: 0;
   }
   to {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
 }
 
 @-webkit-keyframes backdrop-close {
   from {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
   to {
     opacity: 0;
@@ -1150,7 +1148,7 @@ body {
 
 @keyframes backdrop-close {
   from {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
   to {
     opacity: 0;
@@ -1158,7 +1156,7 @@ body {
 }
 
 .Backdrop {
-  background-color: rgba(47, 47, 47, 0.6);
+  background-color: rgba(47, 47, 47, 0.64);
   height: 100vh;
   width: 100vw;
   position: fixed;
@@ -3449,7 +3447,7 @@ body {
     transform: translateY(20px);
   }
   to {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
 }
@@ -3460,14 +3458,14 @@ body {
     transform: translateY(20px);
   }
   to {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
 }
 
 @-webkit-keyframes fullscreenModal-close {
   from {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
   to {
@@ -3478,7 +3476,7 @@ body {
 
 @keyframes fullscreenModal-close {
   from {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
   to {
@@ -3778,7 +3776,7 @@ body {
 } */
 
 .Grid-row--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
@@ -3870,20 +3868,21 @@ body {
 
 .Grid-cellGroup--pinned-left {
   left: 0;
-  border-right: var(--border);
+  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),
-      var(--secondary) 25%,
+      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),
-      var(--secondary) 25%,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
       rgba(213, 213, 213, 0.1) 25%,
       rgba(213, 213, 213, 0.1)
     )
@@ -3892,20 +3891,21 @@ body {
 
 .Grid-cellGroup--pinned-right {
   right: 0;
-  border-left: var(--border);
+  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),
-      var(--secondary) 25%,
+      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),
-      var(--secondary) 25%,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
       rgba(213, 213, 213, 0.1) 25%,
       rgba(213, 213, 213, 0.1)
     )
@@ -4167,7 +4167,7 @@ body {
 }
 
 .HorizontalNav-pills--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
 
 /* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, 
@@ -4870,7 +4870,7 @@ body {
 /* Listbox type - disabled  */
 
 .Listbox-item--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
@@ -5409,7 +5409,7 @@ body {
 }
 
 .Navigation-horizontalPills--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
 
 .Navigation-footer {
@@ -5810,7 +5810,7 @@ body {
     opacity: 0;
   }
   80% {
-    opacity: 0.2;
+    opacity: var(--opacity-6);
   }
   100% {
     opacity: 1;
@@ -5822,7 +5822,7 @@ body {
     opacity: 0;
   }
   80% {
-    opacity: 0.2;
+    opacity: var(--opacity-6);
   }
   100% {
     opacity: 1;
@@ -6159,6 +6159,10 @@ body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 100%;
+  margin: 0;
+  font-size: var(--font-size);
+  line-height: var(--font-height);
 }
 
 .Select-trigger--regular {
@@ -6280,27 +6284,27 @@ body {
 
 .Selection-card:active .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 10%;
+  opacity: var(--opacity-3);
 }
 
 .Selection-card--disabled .Selection-card-overlay {
   background-color: var(--secondary-lightest);
-  opacity: 50%;
+  opacity: var(--opacity-10);
 }
 
 .Selection-card--selected .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 4%;
+  opacity: var(--opacity-1);
 }
 
 .Selection-card--selected:active .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 4%;
+  opacity: var(--opacity-1);
 }
 
 .Selection-card--selected-disabled .Selection-card-overlay {
   background-color: var(--primary-lightest);
-  opacity: 50%;
+  opacity: var(--opacity-10);
 }
 
 @-webkit-keyframes sidesheet-open {
@@ -7065,7 +7069,7 @@ body {
 }
 
 .Tab-pills--disabled {
-  opacity: 60%;
+  opacity: var(--opacity-10);
   cursor: not-allowed;
 }
 
@@ -7753,7 +7757,7 @@ body {
 }
 
 .MenuItem-count--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
   color: var(--text);
 }