Skip to content

Commit

Permalink
fix(ChatButton): adjust padding when icon is not present (#15778)
Browse files Browse the repository at this point in the history
* fix(ChatButton): adjust padding when icon is not present

* test(snapshot): update snapshots
  • Loading branch information
tw15egan authored Feb 22, 2024
1 parent b642ef8 commit 3e59e69
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
Expand Down
9 changes: 9 additions & 0 deletions packages/react/src/components/ChatButton/ChatButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const ChatButton = React.forwardRef(function ChatButton(
isQuickAction,
isSelected,
kind,
renderIcon,
size,
...other
},
Expand All @@ -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,
});
Expand All @@ -48,6 +50,7 @@ const ChatButton = React.forwardRef(function ChatButton(
kind={kind}
ref={ref}
size={size}
renderIcon={renderIcon}
{...other}>
{children}
</Button>
Expand Down Expand Up @@ -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:
*/
Expand Down
24 changes: 24 additions & 0 deletions packages/react/src/components/ChatButton/ChatButton.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
4 changes: 4 additions & 0 deletions packages/styles/scss/components/chat-button/_chat-button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down

0 comments on commit 3e59e69

Please sign in to comment.