fix(ChatButton): add in selected but not disabled state

carbon-design-system · Feb 5, 2024 · a76d783 · a76d783
1 parent a62b674
commit a76d783
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js
@@ -43,7 +43,7 @@ const ChatButton = React.forwardRef(function ChatButton(
 
   return (
     <Button
-      disabled={isSelected ? isSelected : disabled}
+      disabled={disabled}
       className={classNames}
       kind={kind}
       ref={ref}

diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js
@@ -90,10 +90,13 @@ export const Default = () => (
         Quick action
       </ChatButton>
       <ChatButton disabled isQuickAction renderIcon={Add}>
-        Quick action
+        Disabled
       </ChatButton>
       <ChatButton isSelected isQuickAction renderIcon={Add}>
-        Quick action
+        Selected
+      </ChatButton>
+      <ChatButton disabled isSelected isQuickAction renderIcon={Add}>
+        Selected and Disabled
       </ChatButton>
     </div>
 

diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss
@@ -14,6 +14,7 @@
 @mixin chat-button {
   .#{$prefix}--chat-btn {
     border-radius: convert.to-rem(24px);
+    // transition: box-shadow 1s;
   }
 
   .#{$prefix}--chat-btn.#{$prefix}--btn--md {
@@ -35,18 +36,33 @@
     background: $background-hover;
   }
 
-  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus,
-  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus {
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus {
     border-color: $focus;
     box-shadow: inset 0 0 0 1px $focus;
   }
 
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 1px $focus-inset;
+  }
+
   .#{$prefix}--chat-btn--quick-action[disabled],
   .#{$prefix}--chat-btn--quick-action[disabled]:hover {
     border-color: button.$button-disabled;
     color: button.$button-disabled;
   }
 
+  .#{$prefix}--chat-btn--quick-action--selected {
+    border-color: transparent;
+    background: $background-selected;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--chat-btn--quick-action--selected:hover {
+    color: $text-secondary;
+    cursor: default;
+  }
+
   .#{$prefix}--chat-btn--quick-action--selected[disabled],
   .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover {
     background: button.$button-disabled;