feat(ChatButton): add,utilize chat button tokens for quick action but…

…ton (#15923) * feat(ChatButton): add,utilize chat button tokens for quick action button * test(ChatButton): update snapshots for new tokens * fix(ChatButton): fix issue with selected on hover
carbon-design-system · Mar 11, 2024 · 23c0998 · 23c0998
1 parent fd90309
commit 23c0998
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 6 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -77,6 +77,12 @@ Array [
   "chatBubbleAgent",
   "chatBubbleAgentBorder",
   "chatBubbleUser",
+  "chatButton",
+  "chatButtonActive",
+  "chatButtonHover",
+  "chatButtonSelected",
+  "chatButtonTextHover",
+  "chatButtonTextSelected",
   "chatHeaderBackground",
   "chatPromptBackground",
   "chatPromptBorderEnd",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -163,6 +163,12 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-avatar-user",
         "chat-shell-background",
         "chat-header-background",
+        "chat-button",
+        "chat-button-hover",
+        "chat-button-text-hover",
+        "chat-button-active",
+        "chat-button-selected",
+        "chat-button-text-selected",
         "highlight",
         "overlay",
         "toggle-off",

diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss
@@ -31,12 +31,21 @@
   // Quick action button
   .#{$prefix}--chat-btn--quick-action {
     align-items: center;
-    border: 1px solid $link-primary;
+    border: 1px solid $chat-button;
+    background: transparent;
+    color: $chat-button;
   }
 
   .#{$prefix}--chat-btn--quick-action:hover:not(:active):not([disabled]) {
     border-color: transparent;
-    background: $background-hover;
+    background: $chat-button-hover;
+    color: $chat-button-text-hover;
+  }
+
+  .#{$prefix}--chat-btn--quick-action:active {
+    border-color: transparent;
+    background: $chat-button-active;
+    color: $chat-button-text-hover;
   }
 
   .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus {
@@ -59,12 +68,17 @@
   .#{$prefix}--chat-btn--quick-action--selected[disabled],
   .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover {
     border-color: transparent;
-    background: $background-selected;
-    color: $text-secondary;
+    background: $chat-button-selected;
+    color: $chat-button-text-selected;
   }
 
-  .#{$prefix}--chat-btn--quick-action--selected:hover {
-    color: $text-secondary;
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--chat-btn--quick-action--selected:not(
+      [disabled]
+    ):hover,
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--chat-btn--quick-action--selected:not(
+      [disabled]
+    ):active {
+    color: $chat-button-text-selected;
   }
 
   .#{$prefix}--chat-btn.#{$prefix}--skeleton {

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -256,6 +256,14 @@ export const chatAvatarUser = blue60;
 export const chatShellBackground = white;
 export const chatHeaderBackground = white;
 
+// Chat button tokens
+export const chatButton = linkPrimary;
+export const chatButtonHover = backgroundHover;
+export const chatButtonTextHover = linkPrimaryHover;
+export const chatButtonActive = backgroundActive;
+export const chatButtonSelected = backgroundSelected;
+export const chatButtonTextSelected = textSecondary;
+
 export {
   // Type
   caption01,

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -262,6 +262,14 @@ export const chatAvatarUser = blue50;
 export const chatShellBackground = gray90;
 export const chatHeaderBackground = gray90;
 
+// Chat button tokens
+export const chatButton = linkPrimary;
+export const chatButtonHover = backgroundHover;
+export const chatButtonTextHover = linkPrimaryHover;
+export const chatButtonActive = backgroundActive;
+export const chatButtonSelected = backgroundSelected;
+export const chatButtonTextSelected = textSecondary;
+
 export {
   // Type
   caption01,

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -263,6 +263,14 @@ export const chatAvatarUser = blue50;
 export const chatShellBackground = gray90;
 export const chatHeaderBackground = gray90;
 
+// Chat button tokens
+export const chatButton = linkPrimary;
+export const chatButtonHover = backgroundHover;
+export const chatButtonTextHover = linkPrimaryHover;
+export const chatButtonActive = backgroundActive;
+export const chatButtonSelected = backgroundSelected;
+export const chatButtonTextSelected = textSecondary;
+
 export {
   // Type
   caption01,

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -274,6 +274,12 @@ Array [
   "chat-avatar-user",
   "chat-shell-background",
   "chat-header-background",
+  "chat-button",
+  "chat-button-hover",
+  "chat-button-text-hover",
+  "chat-button-active",
+  "chat-button-selected",
+  "chat-button-text-selected",
   "highlight",
   "overlay",
   "toggle-off",

diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1069,6 +1069,30 @@ test('metadata', () => {
           "name": "chat-header-background",
           "type": "color",
         },
+        Object {
+          "name": "chat-button",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-button-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-button-text-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-button-active",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-button-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "chat-button-text-selected",
+          "type": "color",
+        },
         Object {
           "name": "highlight",
           "type": "color",

diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -385,6 +385,13 @@ export const ai = TokenGroup.create({
     'chat-avatar-user',
     'chat-shell-background',
     'chat-header-background',
+    // Chat button tokens
+    'chat-button',
+    'chat-button-hover',
+    'chat-button-text-hover',
+    'chat-button-active',
+    'chat-button-selected',
+    'chat-button-text-selected',
   ],
 });
 

diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
@@ -256,6 +256,14 @@ export const chatAvatarUser = blue60;
 export const chatShellBackground = white;
 export const chatHeaderBackground = white;
 
+// Chat button tokens
+export const chatButton = linkPrimary;
+export const chatButtonHover = backgroundHover;
+export const chatButtonTextHover = linkPrimaryHover;
+export const chatButtonActive = backgroundActive;
+export const chatButtonSelected = backgroundSelected;
+export const chatButtonTextSelected = textSecondary;
+
 // Type
 export {
   caption01,