@innovaccer/design-system 2.36.2 → 2.37.1

package/CHANGELOG.md

@@ -1,3 +1,101 @@
+## 2.37.1 (2024-07-04)
+
+### Highlights
+
+- feat(icon): update material symbols font file (8e51ba0f)
+- fix(select): ensure popover toggles correctly on cursor click (84228b0c)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(icon): update material symbols font file (8e51ba0f)
+
+### Fixes
+
+- fix(select): ensure popover toggles correctly on cursor click (84228b0c)
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
+## 2.37.0 (2024-07-02)
+
+### Highlights
+
+- feat(select): add support for custom trigger in select (4e85e268)
+- feat(avatar): add disabled state in avatar component (008691a9)
+- feat(avatargroup): add disabled state in avatar group component (773ba954)
+- feat(avatarselection): add disabled state in avatar selection component (402946cc)
+- feat(chip): update chip states (b9a46789)
+- feat(ActionCard): update states and spacing in action card (e42e0eb8)
+- feat(selectionCard): update states and spacing in selection card (8ea2982c)
+- feat(message): update warning appearance background color (b7716cd7)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(avatar): add disabled state in avatar component (008691a9)
+- feat(avatargroup): add disabled state in avatar group component (773ba954)
+- feat(avatarselection): add disabled state in avatar selection component (402946cc)
+- feat(select): add support for custom trigger in select (4e85e268)
+- feat(chip): update chip states (b9a46789)
+- feat(ActionCard): update states and spacing in action card (e42e0eb8)
+- feat(selectionCard): update states and spacing in selection card (8ea2982c)
+- feat(message): update warning appearance background color (b7716cd7)
+
+### Fixes
+
+- fix(docs): remove interaction tab from avatar documentation (4a80dede)
+- fix(cypress): update link visit function for breadcrumb (9a3da237)
+
+### Improvements
+
+- feat(stepper): update the stories for steppers (3e95e3a4)
+- feat(table): update table filter story (c9c64c31)
+
+### Documentation
+
+- docs(interactive-cards): update states and spacing documentation (826b0c6a)
+- docs(states): update documentation of states in foundations (f5d53f2d)
+- docs(inlineEditable): update documentation of inline editable field (0ce2dfbf)
+- docs(chip): update chip state images (b1a9db6b)
+- docs(page-header): update stepper section in page header (69599cb2)
+- docs(stepper): update stepper page documentation (5b17adae)
+- docs(avatar): update documentation of avatar component (b9749949)
+- docs(avatarGroup): add documentation of avatar group and selection (b5e78996)
+- docs(AIResponse): update images in AI Response examples (f2b7c50c)
+- docs(select): add custom trigger documentation (8a8e5964)
+
+---
+
 ## 2.36.2 (2024-06-13)
 
 ### Highlights

package/css/dist/index.css

@@ -864,31 +864,34 @@ body {
 }
 
 .ActionCard {
-  cursor: pointer;
   border-radius: var(--spacing-m);
   width: 100%;
+}
+
+.ActionCard--default {
+  cursor: pointer;
   border: var(--spacing-xs) solid var(--secondary-dark);
 }
 
-.ActionCard:hover {
-  box-shadow: var(--shadow-m);
+.ActionCard--default:hover {
+  box-shadow: var(--shadow-l);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.ActionCard:focus,
-.ActionCard:focus-visible {
+.ActionCard--default:focus,
+.ActionCard--default:focus-visible {
   outline: none;
-  border: var(--spacing-xs) solid var(--secondary-light);
+  border: var(--spacing-xs) solid var(--secondary-dark);
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.ActionCard:active {
-  box-shadow: var(--shadow-l);
+.ActionCard--default:active {
+  box-shadow: var(--shadow-m);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .ActionCard--disabled {
-  pointer-events: none;
+  cursor: not-allowed;
   position: relative;
   border: var(--spacing-xs) solid var(--secondary-lighter);
 }
@@ -901,7 +904,7 @@ body {
   left: 0;
   z-index: 2;
   opacity: var(--opacity-10);
-  background: var(--secondary-light);
+  background: var(--secondary-lightest);
 }
 
 /* Avatar */
@@ -916,9 +919,16 @@ body {
   text-transform: uppercase;
   border-radius: 50%;
   cursor: default;
+  position: relative;
 }
 
-.Avatar--wrapper {
+.Avatar--default:focus,
+.Avatar--default:focus-visible {
+  outline: 3px solid var(--primary-shadow);
+  outline-offset: 3px;
+}
+
+.Avatar-wrapper--square {
   padding: var(--spacing-xs);
   box-sizing: border-box;
 }
@@ -939,10 +949,26 @@ body {
   width: var(--spacing-xl);
 }
 
-.Avatar--disabled {
+.Avatar--noInitials {
   cursor: default;
 }
 
+.Avatar--disabled {
+  cursor: not-allowed;
+}
+
+.Avatar--disabled::after {
+  opacity: var(--opacity-20);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  content: '';
+  background-color: var(--white);
+}
+
 .Avatar--primary {
   background: var(--primary);
 }
@@ -1006,6 +1032,7 @@ body {
 
 .AvatarGroup-item {
   border-radius: 50%;
+  position: relative;
 }
 
 .AvatarGroup-item--regular {
@@ -1037,6 +1064,13 @@ body {
 
 .AvatarCount-wrapper {
   border-radius: 50%;
+  position: relative;
+}
+
+.AvatarCount-wrapper:focus,
+.AvatarCount-wrapper:focus-visible {
+  outline: 3px solid var(--primary-shadow);
+  outline-offset: 3px;
 }
 
 /* Selection avatar group */
@@ -1067,7 +1101,7 @@ body {
   outline-offset: var(--spacing-xs);
 }
 
-.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item {
+.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item--active {
   transform: translateY(-8px);
 }
 
@@ -2338,10 +2372,11 @@ body {
 }
 
 .Chip-action--disabled {
-  background: var(--secondary-lighter);
+  background: var(--secondary-light);
+  opacity: var(--opacity-12);
   border: 0px;
   outline: none;
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .Chip--selection {
@@ -2366,17 +2401,19 @@ body {
 }
 
 .Chip-selection--disabled {
-  background: var(--secondary-lightest);
-  border-color: var(--secondary-lighter);
+  background: var(--white);
+  border-color: var(--secondary);
+  opacity: var(--opacity-12);
+  cursor: not-allowed;
 }
 
 .Chip-selection--selected {
-  background: var(--primary-lightest);
+  background: rgba(220, 236, 249, 0.48);
   border-color: var(--primary-lighter);
 }
 
 .Chip-selection--selected:hover {
-  background: var(--primary-lighter);
+  background: rgba(151, 197, 240, 0.48);
   border-color: var(--primary-light);
 }
 
@@ -2404,7 +2441,7 @@ body {
 }
 
 .Chip-selection--selectedDisabled {
-  background: var(--primary-lightest);
+  background: rgba(220, 236, 249, 0.48);
   border-color: var(--primary-lighter);
 }
 
@@ -2430,6 +2467,8 @@ body {
 
 .Chip-input--disabled {
   background: var(--secondary-lighter);
+  opacity: var(--opacity-12);
+  cursor: not-allowed;
   border: 0px;
 }
 
@@ -5057,7 +5096,7 @@ body {
 
 .Message--warning {
   border-color: var(--accent1);
-  background-color: rgba(255, 245, 199, 0.4);
+  background-color: rgba(253, 230, 206, 0.4);
 }
 
 .Message-icon {
@@ -6267,7 +6306,8 @@ body {
   padding-left: var(--spacing);
 }
 
-.Select-trigger-text {
+.Select-trigger--text,
+.Select-option--text {
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
@@ -6328,32 +6368,45 @@ body {
   background-color: var(--secondary-dark);
 }
 
+.Select-option {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
 .Selection-card {
-  cursor: pointer;
   border-radius: var(--spacing-m);
   position: relative;
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Selection-card:hover {
+.Selection-card--default {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+}
+
+.Selection-card--default:hover {
   box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Selection-card:focus,
-.Selection-card:focus-visible {
+.Selection-card--default:focus,
+.Selection-card--default:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
 }
 
-.Selection-card:active {
+.Selection-card--default:active {
   box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Selection-card--disabled {
-  pointer-events: none;
+  cursor: not-allowed;
+  outline: none;
+}
+
+.Selection-card--default-disabled {
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
 }
 
@@ -6378,7 +6431,6 @@ body {
 }
 
 .Selection-card--selected-disabled {
-  pointer-events: none;
   box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
 }
 
@@ -6395,12 +6447,12 @@ body {
   border-radius: var(--spacing-m);
 }
 
-.Selection-card:active .Selection-card-overlay {
+.Selection-card--default:active .Selection-card-overlay {
   background-color: var(--primary);
   opacity: var(--opacity-3);
 }
 
-.Selection-card--disabled .Selection-card-overlay {
+.Selection-card--default-disabled .Selection-card-overlay {
   background-color: var(--secondary-lightest);
   opacity: var(--opacity-10);
 }
@@ -8237,6 +8289,10 @@ body {
   cursor: pointer;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .d-none {
   display: none !important;
 }