@innovaccer/design-system 2.30.0 → 2.31.0

package/CHANGELOG.md

@@ -1,3 +1,82 @@
+## 2.31.0 (2024-04-15)
+
+### Highlights
+
+- feat(table): add persistent selection support in table (7c07d6ac)
+- feat(listbox): update list item states with updated opacity token (d426a36e)
+- feat(table): update states of table with new opacity tokens (4a23a7e5)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(table): add persistent selection support in table (7c07d6ac)
+- feat(listbox): update list item states with updated opacity token (d426a36e)
+- feat(table): update states of table with new opacity tokens (4a23a7e5)
+
+### Fixes
+
+- fix(editableDropdown): popover open issue with custom type on option selection (ba4fecff)
+- fix(tooltip): fix spelling mistakes in tooltip (777c9dd9)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(listbox): update the listbox state documentation (32ddf640)
+- docs(combobox): update option state documentation in combobox (81e55b64)
+- docs(opacity): add new opacity token guidelines (a533ce73)
+
+---
+
+## 2.30.1 (2024-04-03)
+
+### Highlights
+
+- feat(opacity): add new tokens for opacity (460fb565)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(opacity): add new tokens for opacity (460fb565)
+
+### Fixes
+
+- fix(table): global action button alignment (5a04afaa)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(docs): add menu component documentation (088a90e4)
+
+---
+
 ## 2.30.0 (2024-04-01)
 
 ### Highlights

package/css/dist/index.css

@@ -272,6 +272,20 @@
   --duration--moderate-02: 240ms;
   --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;
 }
 
 /* fallback */
@@ -3541,11 +3555,12 @@ body {
 
 .Grid--resource .Grid-row--body:active,
 .Grid--resource .Grid-row--body:active .Grid-cellGroup {
-  background: var(--warning-lightest) !important;
+  background: var(--secondary-lighter);
 }
 
 .Grid--resource .Grid-row--body:focus {
-  outline-color: var(--warning);
+  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
+  outline: none;
 }
 
 .Grid--pinned {
@@ -3657,6 +3672,8 @@ body {
   flex-shrink: 0;
   box-sizing: border-box;
   background: var(--white);
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+  transition-delay: var(--duration--fast-01);
 }
 
 .Grid-row--body {
@@ -3665,7 +3682,24 @@ body {
 
 .Grid-row--selected,
 .Grid-row--selected .Grid-cellGroup {
-  background: var(--warning-lightest) !important;
+  background: rgba(220, 236, 249, 0.48);
+  transition: var(--duration--fast-02) var(--standard-productive-curve);
+}
+
+.Grid-row--selected:hover,
+.Grid-row--selected .Grid-cellGroup:hover {
+  background: rgba(151, 197, 240, 0.48) !important;
+}
+
+.Grid-row--selected:active,
+.Grid-row--selected .Grid-cellGroup:active {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus,
+.Grid-row--selected .Grid-cellGroup:focus {
+  outline: none;
+  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
 }
 
 .Grid-rowWrapper:last-child .Grid-row--body {
@@ -3744,7 +3778,7 @@ body {
 } */
 
 .Grid-row--disabled {
-  opacity: 0.4;
+  opacity: var(--opacity-40);
   pointer-events: none;
 }
 
@@ -4783,11 +4817,24 @@ body {
 }
 
 .Listbox-item--option:active {
-  background: rgba(255, 245, 199, 0.6);
+  background: var(--secondary-lighter);
 }
 
 .Listbox-item--selected {
-  background: rgba(255, 245, 199, 0.6);
+  background: rgba(220, 236, 249, 0.48);
+}
+
+.Listbox-item--selected:hover {
+  background: rgba(151, 197, 240, 0.48);
+}
+
+.Listbox-item--selected:focus,
+.Listbox-item--selected:focus-visible {
+  outline: 3px auto rgba(0, 112, 221, 0.16);
+}
+
+.Listbox-item--selected:active {
+  background: var(--primary-lighter);
 }
 
 /* Listbox type - resource  */
@@ -4806,11 +4853,11 @@ body {
 }
 
 .Listbox-item--resource:active {
-  background: rgba(255, 245, 199, 0.6);
+  background: var(--secondary-lighter);
 }
 
 .Listbox-item--activated {
-  background: rgba(255, 245, 199, 0.6);
+  background: var(--primary-lightest);
 }
 
 /* Listbox type - description  */
@@ -4823,7 +4870,7 @@ body {
 /* Listbox type - disabled  */
 
 .Listbox-item--disabled {
-  opacity: 0.4;
+  opacity: var(--opacity-40);
   pointer-events: none;
 }
 
@@ -6878,6 +6925,24 @@ body {
   border-top: var(--border);
 }
 
+.Table-Header--Divider {
+  height: var(--spacing-xl);
+}
+
+.Table-Header-Label--hide {
+  -webkit-animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
+          animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+.Table-Header-Label--show {
+  -webkit-animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
+          animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
 /* tabs */
 
 .TabsWrapper {