@innovaccer/design-system 2.31.1 → 2.32.1

package/CHANGELOG.md

@@ -1,3 +1,98 @@
+## 2.32.1 (2024-05-08)
+
+### Highlights
+
+- feat(spacing): implement 6px token and replace hardcoded value (292e6e2e)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(listbox): add selected and activated type in listbox stories (46c24416)
+- feat(spacing): implement 6px token and replace hardcoded value (292e6e2e)
+- feat(select): add appendToBody and boundary element props support 
+
+### Fixes
+
+- fix(select): make title description optional in empty template (42ae0d79)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(spacing): add 6px token documentation (93d299e7)
+
+---
+
+## 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

@@ -163,6 +163,7 @@
   --spacing-xs: 1px;
   --spacing-s: 2px;
   --spacing-m: 4px;
+  --spacing-0-75: 6px;
   --spacing: 8px;
   --spacing-l: 12px;
   /* 8 * 2 */
@@ -273,19 +274,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 */
@@ -682,12 +681,12 @@ body {
 }
 
 .Label-requiredIndicator {
-  height: 6px;
-  width: 6px;
+  height: var(--spacing-0-75);
+  width: var(--spacing-0-75);
   border-radius: 50%;
   background: var(--alert);
   margin-left: var(--spacing-m);
-  margin-bottom: 6px;
+  margin-bottom: var(--spacing-0-75);
   display: inline-flex;
 }
 
@@ -870,7 +869,7 @@ body {
   bottom: 0;
   left: 0;
   z-index: 2;
-  opacity: 50%;
+  opacity: var(--opacity-10);
   background: var(--secondary-light);
 }
 
@@ -1126,7 +1125,7 @@ body {
     opacity: 0;
   }
   to {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
 }
 
@@ -1135,13 +1134,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 +1149,7 @@ body {
 
 @keyframes backdrop-close {
   from {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
   to {
     opacity: 0;
@@ -1158,7 +1157,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;
@@ -2530,7 +2529,7 @@ body {
   height: var(--spacing-2);
   padding: var(--spacing-s);
   margin-left: var(--spacing);
-  margin-top: 6px;
+  margin-top: var(--spacing-0-75);
   cursor: pointer;
   border-radius: 10px;
 }
@@ -2725,7 +2724,7 @@ body {
   align-items: center;
   margin-left: var(--spacing-l);
   margin-top: var(--spacing-l);
-  margin-bottom: 6px;
+  margin-bottom: var(--spacing-0-75);
 }
 
 .Dropdown-section--withClear {
@@ -2756,8 +2755,8 @@ body {
 
 .Option,
 .Option-loading {
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding-top: var(--spacing-0-75);
+  padding-bottom: var(--spacing-0-75);
   padding-left: var(--spacing-l);
   padding-right: var(--spacing);
 }
@@ -2773,8 +2772,8 @@ body {
 .OptionCheckbox {
   width: 100%;
   padding-left: var(--spacing-l);
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding-top: var(--spacing-0-75);
+  padding-bottom: var(--spacing-0-75);
 }
 
 .Option--active,
@@ -3449,7 +3448,7 @@ body {
     transform: translateY(20px);
   }
   to {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
 }
@@ -3460,14 +3459,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 +3477,7 @@ body {
 
 @keyframes fullscreenModal-close {
   from {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
   to {
@@ -3778,7 +3777,7 @@ body {
 } */
 
 .Grid-row--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
@@ -3870,20 +3869,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 +3892,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 +4168,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, 
@@ -4423,8 +4424,8 @@ body {
 
 .Input--regular {
   height: var(--font-height-l);
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding-top: var(--spacing-0-75);
+  padding-bottom: var(--spacing-0-75);
 }
 
 .Input--large {
@@ -4870,7 +4871,7 @@ body {
 /* Listbox type - disabled  */
 
 .Listbox-item--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
@@ -4912,7 +4913,7 @@ body {
 .Menu-Group-Label {
   display: flex;
   align-items: center;
-  padding-bottom: 6px;
+  padding-bottom: var(--spacing-0-75);
   padding-top: var(--spacing-l);
   padding-left: var(--spacing-2);
   padding-right: var(--spacing-l);
@@ -5409,7 +5410,7 @@ body {
 }
 
 .Navigation-horizontalPills--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
 
 .Navigation-footer {
@@ -5600,8 +5601,8 @@ body {
   font-size: var(--font-size-s);
   line-height: var(--font-height-s);
   text-transform: uppercase;
-  padding-right: 6px;
-  padding-left: 6px;
+  padding-right: var(--spacing-0-75);
+  padding-left: var(--spacing-0-75);
   padding-top: var(--spacing-s);
   padding-bottom: var(--spacing-s);
   border-radius: 20px;
@@ -5810,7 +5811,7 @@ body {
     opacity: 0;
   }
   80% {
-    opacity: 0.2;
+    opacity: var(--opacity-6);
   }
   100% {
     opacity: 1;
@@ -5822,7 +5823,7 @@ body {
     opacity: 0;
   }
   80% {
-    opacity: 0.2;
+    opacity: var(--opacity-6);
   }
   100% {
     opacity: 1;
@@ -6159,6 +6160,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 +6285,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 {
@@ -6673,7 +6678,7 @@ body {
   height: var(--spacing);
   width: var(--spacing);
   margin-right: var(--spacing);
-  margin-top: 6px;
+  margin-top: var(--spacing-0-75);
 }
 
 .StatusHint--alert {
@@ -6826,7 +6831,7 @@ body {
   width: 100%;
   background-color: var(--secondary-light);
   transition: background 120ms ease;
-  padding-right: 6px;
+  padding-right: var(--spacing-0-75);
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
@@ -6881,7 +6886,7 @@ body {
 .Switch-wrapper--checked {
   background-color: var(--primary);
   transition: background 120ms ease;
-  padding-left: 6px;
+  padding-left: var(--spacing-0-75);
   padding-right: 2px !important;
 }
 
@@ -7065,7 +7070,7 @@ body {
 }
 
 .Tab-pills--disabled {
-  opacity: 60%;
+  opacity: var(--opacity-10);
   cursor: not-allowed;
 }
 
@@ -7640,7 +7645,7 @@ body {
   text-transform: uppercase;
   padding-left: var(--spacing-2);
   padding-top: var(--spacing-l);
-  padding-bottom: 6px;
+  padding-bottom: var(--spacing-0-75);
   margin-top: var(--spacing);
 }
 
@@ -7753,7 +7758,7 @@ body {
 }
 
 .MenuItem-count--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
   color: var(--text);
 }