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;