@innovaccer/design-system 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,3 +1,110 @@
+## 4.2.0 (2025-1-30)
+
+### Highlights
+
+- feat(chatBubble): add new chat bubble component (25bf60e0)
+- feat(dateSeparator): add chat date separator component (5ec3f5f1)
+- feat(unreadMessage): add chat unread message separator component (c5fc0f16)
+- feat(newMessage): add chat new message separator component (b6ea6dd4)
+- feat(typingIndicator): add chat typing indicator component (c9f7ef4c)
+- feat(avatarGroup): add status indicator support in avatar group component (828bc9f8)
+- feat(avatarGroup): add presence support in avatar group component (377979d9)
+- feat(avatarSelection): add status & presence support in avatar selection (007425dd)
+- feat(avatarSelection): add figma code connect for avatar selection component (48c4baa3)
+- feat(avatarGroup): add figma code connect for avatar group component (5af38b76)
+- feat(chat): add figma code connect for chat ancillary component (20646dd8)
+- feat(typingIndicator): update size from regular to small in typing indicator component (f5322da4)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(chatBubble): add new chat bubble component (25bf60e0)
+- feat(dateSeparator): add chat date separator component (5ec3f5f1)
+- feat(unreadMessage): add chat unread message separator component (c5fc0f16)
+- feat(newMessage): add chat new message separator component (b6ea6dd4)
+- feat(typingIndicator): add chat typing indicator component (c9f7ef4c)
+- feat(avatarGroup): add status indicator support in avatar group component (828bc9f8)
+- feat(avatarGroup): add presence support in avatar group component (377979d9)
+- feat(avatarSelection): add status & presence support in avatar selection (007425dd)
+- feat(avatarSelection): add figma code connect for avatar selection component (48c4baa3)
+- feat(avatarGroup): add figma code connect for avatar group component (5af38b76)
+- feat(chat): add figma code connect for chat ancillary component (20646dd8)
+- feat(typingIndicator): update size from regular to small in typing indicator component (f5322da4)
+
+### Fixes
+
+- fix(css): update order of typography components css in final bundled css file (b29e3f2c)
+- fix(tooltip): update props order to accept classname in tooltip component (865a0240)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(avatarGroup): add presence & status section in avatar group (085ef5c7)
+- docs(chat): add chat ancillary components documentation (e27e6b32)
+- docs(chatBubble): add new chat bubble component documentation (4253816c)
+
+---
+
+## 4.1.0 (2025-1-17)
+
+### Highlights
+
+- feat(table): add vertical alignment support in table body cell (0dd117e4)
+- feat(avatarSelection): update stacking order and popover design of avatar selection (051093c9)
+- feat(avatarGroup): update popover design & stacking order of avatar group (143c9994)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(table): add vertical alignment support in table body cell (0dd117e4)
+- feat(avatarSelection): update stacking order and popover design of avatar selection (051093c9)
+- feat(avatarGroup): update popover design & stacking order of avatar group (143c9994)
+
+### Fixes
+
+- fix(table): remove loading state from static header (89642c47)
+- fix(table): fix horizontal scroll alignment issue between columns (93fb855d)
+- fix: update tsconfig to fix import error for module css (a8590122)
+- fix(docs): fix overlapping of image with table of content in input component (f324767c)
+- fix(radio): update props order to accept data-test properly in radio component (34f5b3cd)
+- chore: update typescript plugin for ts declaration file bundling (316a461e)
+
+### Improvements
+
+- test(daterangepicker): update test cases for date range picker component (7e2e6d91)
+- chore: update design system esm bundle path in docs script (5c435736)
+
+### Documentation
+
+- docs(avatarGroup): update images and guideline for avatar group component (90d518dd)
+
+---
+
 ## 4.0.0 (2024-12-25)
 
 ### Highlights

package/css/dist/index.css

@@ -534,6 +534,199 @@ body {
   background-clip: content-box;
 }
 
+/* Text */
+.Text {
+  margin: 0;
+  line-height: var(--font-height);
+}
+
+.Text--small {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-normal);
+}
+
+.Text--regular {
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+}
+
+.Text--large {
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Text--default {
+  color: var(--text);
+}
+
+.Text--subtle {
+  color: var(--text-subtle);
+}
+
+.Text--disabled {
+  color: var(--text-disabled);
+}
+
+.Text--destructive {
+  color: var(--text-destructive);
+}
+
+.Text--white {
+  color: var(--text-white);
+}
+
+.Text--success {
+  color: var(--text-success);
+}
+
+.Text--link {
+  color: var(--text-link);
+}
+
+.Text--medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.Text--strong {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Heading */
+.Heading {
+  margin: 0;
+}
+
+.Heading--s {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Heading--m {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-l);
+  line-height: var(--font-height-l);
+}
+
+.Heading--l {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xl);
+  line-height: var(--font-height-xl);
+}
+
+.Heading--xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-xxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--xxl {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xxxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--default {
+  color: var(--text);
+}
+
+.Heading--subtle {
+  color: var(--text-subtle);
+}
+
+.Heading--disabled {
+  color: var(--text-disabled);
+}
+
+.Heading--white {
+  color: var(--text-white);
+}
+
+/* Label */
+.Label {
+  display: inline-flex;
+}
+
+.Label--withInput {
+  margin-bottom: var(--spacing-m);
+}
+
+.Label--optional {
+  align-items: center;
+}
+
+.Label-text {
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+  word-break: break-all;
+}
+
+.Label-optionalText {
+  line-height: var(--font-height-s);
+  margin-left: var(--spacing-m);
+}
+
+.Label--disabled {
+  color: var(--text-disabled);
+}
+
+.Label-requiredIndicator {
+  height: var(--spacing-0-75);
+  width: var(--spacing-0-75);
+  border-radius: 50%;
+  background: var(--alert);
+  margin-left: var(--spacing-m);
+  margin-bottom: var(--spacing-0-75);
+  display: inline-flex;
+}
+
+/* Caption */
+.Caption {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.Caption--withInput {
+  margin-top: var(--spacing-m);
+}
+
+.Caption-icon {
+  display: flex;
+  align-content: center;
+  margin-right: var(--spacing-m);
+}
+
+.Caption--hidden {
+  display: none;
+}
+
+/* Subheading */
+.Subheading {
+  margin: 0;
+  font-weight: var(--font-weight-bolder);
+  font-size: var(--spacing-l);
+  line-height: var(--font-height-m);
+  letter-spacing: var(--letter-spacing);
+  text-transform: uppercase;
+}
+
+.Subheading--default {
+  color: var(--text);
+}
+
+.Subheading--subtle {
+  color: var(--text-subtle);
+}
+
+.Subheading--disabled {
+  color: var(--text-disabled);
+}
+
+.Subheading--white {
+  color: var(--text-white);
+}
+
 .ActionButton {
   display: flex;
   flex-shrink: 0;
@@ -747,15 +940,14 @@ body {
 .AvatarGroup-item {
   border-radius: 50%;
   position: relative;
+  margin-right: calc(var(--spacing-s) * -1);
 }
 
 .AvatarGroup-item--regular {
-  margin-right: calc(var(--spacing-m) * -1);
   height: var(--spacing-3);
 }
 
 .AvatarGroup-item--tiny {
-  margin-right: calc(var(--spacing-s) * -1);
   height: var(--spacing-xl);
 }
 
@@ -782,6 +974,37 @@ body {
   outline-offset: 3px;
 }
 
+.AvatarGroup-inputWrapper {
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.AvatarGroup-inputWrapper:focus-within {
+  border-bottom: var(--spacing-xs) solid var(--primary);
+}
+
+.AvatarGroup-input {
+  min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0;
+  height: calc(var(--spacing-3) + var(--spacing-m)) !important;
+}
+
+.AvatarGroup-input,
+.AvatarGroup-input:focus-within {
+  border: unset !important;
+  box-shadow: none !important;
+}
+
+.AvatarGroup-input:hover {
+  background-color: var(--secondary-lightest);
+}
+
+.AvatarGroup-listItem--disabled {
+  cursor: not-allowed;
+  pointer-events: auto !important;
+}
+
 /* Selection avatar group */
 .SelectionAvatarGroup {
   box-sizing: border-box;
@@ -792,20 +1015,20 @@ body {
 /* Selection Avatar List */
 
 .SelectionAvatarGroup-item {
-  margin-right: calc(var(--spacing-m) * -1);
+  margin-right: calc(var(--spacing-s) * -1);
   border-radius: 50%;
   display: flex;
   transition: transform var(--duration--fast-01) var(--standard-productive-curve);
   position: relative;
 }
 
-.SelectionAvatarGroup-item:focus,
-.SelectionAvatarGroup-item:focus-visible {
+.SelectionAvatarGroup-item--active:focus,
+.SelectionAvatarGroup-item--active:focus-visible {
   outline: 3px solid var(--primary-shadow);
   outline-offset: 3px;
 }
 
-.SelectionAvatarGroup-item:active {
+.SelectionAvatarGroup-item--active:active {
   outline: var(--spacing-s) solid #00509f;
   outline-offset: var(--spacing-xs);
 }
@@ -1697,27 +1920,6 @@ body {
   background: var(--primary-light);
 }
 
-/* Caption */
-.Caption {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.Caption--withInput {
-  margin-top: var(--spacing-m);
-}
-
-.Caption-icon {
-  display: flex;
-  align-content: center;
-  margin-right: var(--spacing-m);
-}
-
-.Caption--hidden {
-  display: none;
-}
-
 /* badge */
 
 .Card {
@@ -1831,6 +2033,86 @@ body {
   display: block;
 }
 
+.ChatBubble-box--outgoing {
+  background-color: var(--primary-lightest);
+  border-radius: var(--spacing);
+  padding: var(--spacing) var(--spacing-l);
+}
+
+.ChatBubble-separator {
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  border-radius: 50%;
+  margin: 0 var(--spacing);
+  background: var(--inverse-lightest);
+}
+
+.ChatBubble-box--noSuccess {
+  margin-right: calc(var(--spacing-2) + var(--spacing-m));
+}
+
+.ChatBubble-box {
+  width: 100%;
+}
+
+.ChatBubble-actionBar--outgoing {
+  width: -moz-max-content;
+  width: max-content;
+  margin-right: var(--spacing-m);
+  margin-top: var(--spacing-0-75);
+}
+
+.ChatBubble-actionBar--incoming {
+  width: -moz-max-content;
+  width: max-content;
+  margin-left: var(--spacing-m);
+  margin-top: var(--spacing-0-75);
+}
+
+.ChatBubble-box--incoming {
+  background-color: var(--secondary-lightest);
+  border-radius: var(--spacing);
+  padding: var(--spacing) var(--spacing-l);
+}
+
+.ChatBubble-metaData--incoming {
+  margin-left: calc(var(--spacing-3) + var(--spacing));
+}
+
+.ChatBubble-boxWrapper {
+  flex: 0 0 auto;
+  display: flex;
+  max-width: 70%;
+}
+
+.ChatBubble-actionBarWrapper {
+  flex: 0 0 auto;
+}
+
+.Chat-UnreadMessage {
+  border-radius: var(--spacing-2);
+  padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary);
+  cursor: pointer;
+}
+
+.NewMessage-Divider--left {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-right: var(--spacing-2);
+}
+
+.NewMessage-Divider--right {
+  flex: 1;
+  height: var(--spacing-xs);
+  background-color: var(--primary);
+  margin-left: var(--spacing-2);
+}
+
 .Checkbox {
   display: flex;
   -webkit-user-select: none;
@@ -4181,57 +4463,6 @@ body {
   margin-bottom: var(--spacing-2);
 }
 
-/* Heading */
-.Heading {
-  margin: 0;
-}
-
-.Heading--s {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-m);
-  line-height: var(--font-height-m);
-}
-
-.Heading--m {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-l);
-  line-height: var(--font-height-l);
-}
-
-.Heading--l {
-  font-weight: var(--font-weight-normal);
-  font-size: var(--font-size-xl);
-  line-height: var(--font-height-xl);
-}
-
-.Heading--xl {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-xxl);
-  line-height: var(--font-height-xxl);
-}
-
-.Heading--xxl {
-  font-weight: var(--font-weight-normal);
-  font-size: var(--font-size-xxxl);
-  line-height: var(--font-height-xxl);
-}
-
-.Heading--default {
-  color: var(--text);
-}
-
-.Heading--subtle {
-  color: var(--text-subtle);
-}
-
-.Heading--disabled {
-  color: var(--text-disabled);
-}
-
-.Heading--white {
-  color: var(--text-white);
-}
-
 .HorizontalNav {
   display: flex;
 }
@@ -4719,44 +4950,6 @@ body {
   outline: none;
 }
 
-/* Label */
-.Label {
-  display: inline-flex;
-}
-
-.Label--withInput {
-  margin-bottom: var(--spacing-m);
-}
-
-.Label--optional {
-  align-items: center;
-}
-
-.Label-text {
-  line-height: var(--font-height-s);
-  font-weight: var(--font-weight-medium);
-  word-break: break-all;
-}
-
-.Label-optionalText {
-  line-height: var(--font-height-s);
-  margin-left: var(--spacing-m);
-}
-
-.Label--disabled {
-  color: var(--text-disabled);
-}
-
-.Label-requiredIndicator {
-  height: var(--spacing-0-75);
-  width: var(--spacing-0-75);
-  border-radius: 50%;
-  background: var(--alert);
-  margin-left: var(--spacing-m);
-  margin-bottom: var(--spacing-0-75);
-  display: inline-flex;
-}
-
 .Legend {
   display: flex;
   flex-direction: row;
@@ -6897,32 +7090,6 @@ body {
   transition: var(--duration--fast-02) var(--standard-productive-curve);
 }
 
-/* Subheading */
-.Subheading {
-  margin: 0;
-  font-weight: var(--font-weight-bolder);
-  font-size: var(--spacing-l);
-  line-height: var(--font-height-m);
-  letter-spacing: var(--letter-spacing);
-  text-transform: uppercase;
-}
-
-.Subheading--default {
-  color: var(--text);
-}
-
-.Subheading--subtle {
-  color: var(--text-subtle);
-}
-
-.Subheading--disabled {
-  color: var(--text-disabled);
-}
-
-.Subheading--white {
-  color: var(--text-white);
-}
-
 .Switch {
   display: inline-flex;
   position: relative;
@@ -7236,63 +7403,6 @@ body {
   box-sizing: border-box;
 }
 
-/* Text */
-.Text {
-  margin: 0;
-  line-height: var(--font-height);
-}
-
-.Text--small {
-  font-size: var(--font-size-s);
-  line-height: var(--font-height-normal);
-}
-
-.Text--regular {
-  font-size: var(--font-size);
-  line-height: var(--font-height);
-}
-
-.Text--large {
-  font-size: var(--font-size-m);
-  line-height: var(--font-height-m);
-}
-
-.Text--default {
-  color: var(--text);
-}
-
-.Text--subtle {
-  color: var(--text-subtle);
-}
-
-.Text--disabled {
-  color: var(--text-disabled);
-}
-
-.Text--destructive {
-  color: var(--text-destructive);
-}
-
-.Text--white {
-  color: var(--text-white);
-}
-
-.Text--success {
-  color: var(--text-success);
-}
-
-.Text--link {
-  color: var(--text-link);
-}
-
-.Text--medium {
-  font-weight: var(--font-weight-medium);
-}
-
-.Text--strong {
-  font-weight: var(--font-weight-bold);
-}
-
 /* Textarea */
 
 .Textarea {
@@ -8214,6 +8324,10 @@ body {
   cursor: default;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .d-none {
   display: none !important;
 }