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

* fix(ChatButton): adjust padding when icon is not present * test(snapshot): update snapshots
carbon-design-system · Feb 22, 2024 · 3e59e69 · 3e59e69
1 parent b642ef8
commit 3e59e69
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }