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} @@ -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 = () => ( Primary +
+
+ Primary + Primary + Primary

Kinds

@@ -82,6 +87,13 @@ export const Default = () => ( Danger +
+
+ Primary + Secondary + Tertiary + Ghost + Danger

Quick action

@@ -98,6 +110,18 @@ export const Default = () => ( Disabled +
+
+ Quick action + + Selected and Enabled + + + Selected and Disabled + + + Disabled +
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); }