From 3e59e69a7feafcaac2c7f640d1bd80c6f8e2859b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 22 Feb 2024 07:50:11 -0500
Subject: [PATCH] fix(ChatButton): adjust padding when icon is not present
 (#15778)

* fix(ChatButton): adjust padding when icon is not present

* test(snapshot): update snapshots
---
 .../__snapshots__/PublicAPI-test.js.snap      | 13 ++++++++++
 .../src/components/ChatButton/ChatButton.js   |  9 +++++++
 .../ChatButton/ChatButton.stories.js          | 24 +++++++++++++++++++
 .../components/chat-button/_chat-button.scss  |  4 ++++
 4 files changed, 50 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index f8a2a04f1178..1432eab99574 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9716,6 +9716,19 @@ Map {
         ],
         "type": "oneOf",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "size": Object {
         "args": Array [
           Array [
diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js
index 6f181e854ecb..6448fd2fa67d 100644
--- a/packages/react/src/components/ChatButton/ChatButton.js
+++ b/packages/react/src/components/ChatButton/ChatButton.js
@@ -19,6 +19,7 @@ const ChatButton = React.forwardRef(function ChatButton(
     isQuickAction,
     isSelected,
     kind,
+    renderIcon,
     size,
     ...other
   },
@@ -27,6 +28,7 @@ const ChatButton = React.forwardRef(function ChatButton(
   const prefix = usePrefix();
   const classNames = classnames(className, {
     [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--with-icon`]: renderIcon,
     [`${prefix}--chat-btn--quick-action`]: isQuickAction,
     [`${prefix}--chat-btn--quick-action--selected`]: isSelected,
   });
@@ -48,6 +50,7 @@ const ChatButton = React.forwardRef(function ChatButton(
       kind={kind}
       ref={ref}
       size={size}
+      renderIcon={renderIcon}
       {...other}>
       {children}
     </Button>
@@ -91,6 +94,12 @@ ChatButton.propTypes = {
     'tertiary',
   ]),
 
+  /**
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:
    */
diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js
index 8f2d940cb18d..28c31a8c15fd 100644
--- a/packages/react/src/components/ChatButton/ChatButton.stories.js
+++ b/packages/react/src/components/ChatButton/ChatButton.stories.js
@@ -63,6 +63,11 @@ export const Default = () => (
       <ChatButton size="lg" renderIcon={Add}>
         Primary
       </ChatButton>
+      <br />
+      <br />
+      <ChatButton size="sm">Primary</ChatButton>
+      <ChatButton size="md">Primary</ChatButton>
+      <ChatButton size="lg">Primary</ChatButton>
     </div>
     <div className="test-button-kinds">
       <h3>Kinds</h3>
@@ -82,6 +87,13 @@ export const Default = () => (
       <ChatButton kind="danger" renderIcon={Add}>
         Danger
       </ChatButton>
+      <br />
+      <br />
+      <ChatButton kind="primary">Primary</ChatButton>
+      <ChatButton kind="secondary">Secondary</ChatButton>
+      <ChatButton kind="tertiary">Tertiary</ChatButton>
+      <ChatButton kind="ghost">Ghost</ChatButton>
+      <ChatButton kind="danger">Danger</ChatButton>
     </div>
     <div className="test-button-quick-action">
       <h3>Quick action</h3>
@@ -98,6 +110,18 @@ export const Default = () => (
       <ChatButton disabled isQuickAction renderIcon={Add}>
         Disabled
       </ChatButton>
+      <br />
+      <br />
+      <ChatButton isQuickAction>Quick action</ChatButton>
+      <ChatButton isSelected isQuickAction>
+        Selected and Enabled
+      </ChatButton>
+      <ChatButton disabled isSelected isQuickAction>
+        Selected and Disabled
+      </ChatButton>
+      <ChatButton disabled isQuickAction>
+        Disabled
+      </ChatButton>
     </div>
 
     <div className="test-button-skeleton">
diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss
index 29395c0ea7be..6c3a33b3e88b 100644
--- a/packages/styles/scss/components/chat-button/_chat-button.scss
+++ b/packages/styles/scss/components/chat-button/_chat-button.scss
@@ -16,6 +16,10 @@
     border-radius: convert.to-rem(24px);
   }
 
+  .#{$prefix}--chat-btn:not(.#{$prefix}--chat-btn--with-icon) {
+    padding-inline-end: convert.to-rem(15px);
+  }
+
   .#{$prefix}--chat-btn.#{$prefix}--btn--md {
     border-radius: convert.to-rem(20px);
   }