@innovaccer/design-system 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+## 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

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;
@@ -829,13 +1022,13 @@ body {
   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);
 }
@@ -1727,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 {
@@ -1861,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;
@@ -4211,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;
 }
@@ -4749,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;
@@ -6927,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;
@@ -7266,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 {