fix: extended reactions button adjustments (#3172)

### 🎯 Goal

Hide extended reactions button in case `reactionOptions` does not
contain any relevant options to display.

Author: arnautov-anton

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 (
     <div
       aria-label={t('aria/Reaction list')}
@@ -126,20 +131,22 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
               ),
             )}
           </ul>
-          <Button
-            appearance='outline'
-            aria-label={t('aria/Open Reaction Selector')}
-            circular
-            className='str-chat__reaction-selector__add-button'
-            data-testid='reaction-selector-add-button'
-            onClick={() => {
-              setExtendedListOpen(true);
-            }}
-            size='sm'
-            variant='secondary'
-          >
-            <IconPlus />
-          </Button>
+          {hasExtendedReactions && (
+            <Button
+              appearance='outline'
+              aria-label={t('aria/Open Reaction Selector')}
+              circular
+              className='str-chat__reaction-selector__add-button'
+              data-testid='reaction-selector-add-button'
+              onClick={() => {
+                setExtendedListOpen(true);
+              }}
+              size='sm'
+              variant='secondary'
+            >
+              <IconPlus />
+            </Button>
+          )}
         </>
       ) : (
         <ReactionSelectorExtendedList

src/components/Reactions/__tests__/ReactionSelector.test.tsx

@@ -165,12 +165,14 @@ describe('ReactionSelector', () => {
   });
 
   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' }),

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;