diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index 78ea3c863..0fe47ee2d 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -86,6 +86,11 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
);
}, [reactionOptions]);
+ const hasExtendedReactions =
+ !Array.isArray(reactionOptions) &&
+ reactionOptions.extended &&
+ Object.keys(reactionOptions.extended).length > 0;
+
return (
{
),
)}
-
+ {hasExtendedReactions && (
+
+ )}
>
) : (
{
});
it('should render the add button for extended reactions', () => {
- const { getByTestId } = renderComponent();
+ const { getByTestId } = renderComponent({
+ reactionOptions: extendedReactionOptions,
+ });
expect(getByTestId('reaction-selector-add-button')).toBeInTheDocument();
});
it('should provide an accessible name for the add button', () => {
- renderComponent();
+ renderComponent({ reactionOptions: extendedReactionOptions });
expect(
screen.getByRole('button', { name: 'Open Reaction Selector' }),
diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss
index df671db19..54edc0fcc 100644
--- a/src/components/Reactions/styling/ReactionSelector.scss
+++ b/src/components/Reactions/styling/ReactionSelector.scss
@@ -3,14 +3,13 @@
.str-chat__reaction-selector {
display: flex;
- padding-inline-start: var(--str-chat__spacing-xxs, 0);
- padding-inline-end: var(--str-chat__spacing-xs, 0);
- padding-block: var(--str-chat__spacing-xxs, 0);
+ padding-inline: var(--str-chat__spacing-xxs);
+ padding-block: var(--str-chat__spacing-xxs);
align-items: center;
gap: var(--str-chat__spacing-xs);
- border-radius: var(--str-chat__radius-4xl, 32px);
- background: var(--str-chat__background-core-elevation-2, #fff);
+ border-radius: var(--str-chat__radius-4xl);
+ background: var(--str-chat__background-core-elevation-2);
box-shadow: var(--str-chat__box-shadow-3);
@@ -35,12 +34,16 @@
}
}
+ &:has(.str-chat__reaction-selector__add-button) {
+ padding-inline-end: var(--str-chat__spacing-xs);
+ }
+
.str-chat__reaction-selector-list {
list-style: none;
- margin: var(--str-chat__spacing-none, 0);
- padding: var(--str-chat__spacing-none, 0);
+ margin: var(--str-chat__spacing-none);
+ padding: var(--str-chat__spacing-none);
display: flex;
- gap: var(--str-chat__space-2, 2px);
+ gap: var(--str-chat__space-2);
.str-chat__reaction-selector-list__item {
display: flex;