From e6c26741c62c42a79e8447745c9cf8704455a40f Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Mon, 2 Sep 2024 12:53:39 +0300
Subject: [PATCH 1/5] feat: added addButtonPosition property

---
 src/components/Reactions/README.md            | 42 +++++++-------
 src/components/Reactions/Reactions.tsx        | 55 +++++++++++--------
 .../__stories__/Reactions.stories.tsx         | 19 +++++++
 3 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index b3971ec9..fec1f0d5 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -7,8 +7,7 @@ Component for user reactions (e.g. 👍, 😊, 😎 etc) as new GitHub comments
 ```typescript
 import React from 'react';
 
-import {PaletteOption} from '@gravity-ui/uikit';
-import {ReactionState, Reactions} from '@gravity-ui/components';
+import {Reactions, ReactionProps, ReactionState} from '@gravity-ui/components';
 
 const user = {
     spongeBob: {name: 'Sponge Bob'},
@@ -20,18 +19,18 @@ const currentUser = user.spongeBob;
 const option = {
     'thumbs-up': {content: '👍', value: 'thumbs-up'},
     cool: {content: '😎', value: 'cool'},
-} satisfies Record<string, PaletteOption>;
+} satisfies Record<string, ReactionProps>;
 
-const options = Object.values(option);
+const options: ReactionProps[] = Object.values(option);
 
-const YourComponent = () => {
+export const YourComponent = () => {
     // You can set up a mapping: reaction.value -> users reacted
     const [usersReacted, setUsersReacted] = React.useState({
         [option.cool.value]: [user.spongeBob],
     });
 
     // And then convert that mapping into an array of ReactionState
-    const reactions = React.useMemo(
+    const reactionsState = React.useMemo(
         () =>
             Object.entries(usersReacted).map(
                 ([value, users]): ReactionState => ({
@@ -44,7 +43,7 @@ const YourComponent = () => {
     );
 
     // You can then handle clicking on a reaction with changing the inital mapping,
-    // and the array of ReactionState will change accordingly
+    // and the reactionsState array will change accordingly
     const onToggle = React.useCallback(
         (value: string) => {
             if (!usersReacted[value]) {
@@ -74,9 +73,7 @@ const YourComponent = () => {
         [usersReacted],
     );
 
-    return (
-        <Reactions palette={{options}} reactions={reactions} onToggle={onToggle} />
-    );
+    return <Reactions reactions={options} reactionsState={reactionsState} onToggle={onToggle} />;
 };
 ```
 
@@ -86,18 +83,19 @@ For more code examples go to [Reactions.stories.tsx](https://github.com/gravity-
 
 **ReactionsProps** (main component props — Reactions' list):
 
-| Property         | Type                                        | Required | Default | Description                                                                                    |
-| :--------------- | :------------------------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
-| `className`      | `string`                                    |          |         | HTML `class` attribute                                                                         |
-| `onToggle`       | `(value: string) => void`                   |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
-| `paletteProps`   | `ReactionsPaletteProps`                     |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
-| `qa`             | `string`                                    |          |         | `qa` attribute for testing                                                                     |
-| `reactions`      | `PaletteOption[]`                           |  `true`  |         | List of all available reactions                                                                |
-| `reactionsState` | `ReactionState[]`                           |  `true`  |         | List of reactions that were used                                                               |
-| `readOnly`       | `boolean`                                   |          | `false` | readOnly state (usage example: only signed in users can react)                                 |
-| `renderTooltip`  | `(state: ReactionState) => React.ReactNode` |          |         | Reaction's tooltip with the list of reacted users for example                                  |
-| `size`           | `ButtonSize`                                |          | `m`     | Buttons's size                                                                                 |
-| `style`          | `React.CSSProperties`                       |          |         | HTML `style` attribute                                                                         |
+| Property            | Type                                        | Required | Default   | Description                                                                                    |
+| :------------------ | :------------------------------------------ | :------: | :-------- | :--------------------------------------------------------------------------------------------- |
+| `addButtonPosition` | `'left' or 'right' or 'none'`               |          | `'right'` | Position of the "Add reaction" button. Use 'none' to hide the button.                          |
+| `className`         | `string`                                    |          |           | HTML `class` attribute                                                                         |
+| `onToggle`          | `(value: string) => void`                   |          |           | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
+| `paletteProps`      | `ReactionsPaletteProps`                     |  `true`  |           | Notifications' palette props — it's a `Palette` component with available reactions to the user |
+| `qa`                | `string`                                    |          |           | `qa` attribute for testing                                                                     |
+| `reactions`         | `PaletteOption[]`                           |  `true`  |           | List of all available reactions                                                                |
+| `reactionsState`    | `ReactionState[]`                           |  `true`  |           | List of reactions that were used                                                               |
+| `readOnly`          | `boolean`                                   |          | `false`   | readOnly state (usage example: only signed in users can react)                                 |
+| `renderTooltip`     | `(state: ReactionState) => React.ReactNode` |          |           | Reaction's tooltip with the list of reacted users for example                                  |
+| `size`              | `ButtonSize`                                |          | `m`       | Buttons's size                                                                                 |
+| `style`             | `React.CSSProperties`                       |          |           | HTML `style` attribute                                                                         |
 
 **ReactionState** (single reaction props):
 
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 08e783e9..41b91b1a 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -46,6 +46,13 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
      * Reactions' readonly state (when a user is unable to react for some reason).
      */
     readOnly?: boolean;
+    /**
+     * Position of the "Add reaction" button.
+     * Use 'none' to hide the button.
+     *
+     * @default 'right'
+     */
+    addButtonPosition?: 'left' | 'right' | 'none';
     /**
      * If present, when a user hovers over the reaction, a popover appears with renderTooltip(state) content.
      * Can be used to display users who used this reaction.
@@ -74,6 +81,7 @@ export function Reactions({
     paletteProps,
     readOnly,
     qa,
+    addButtonPosition = 'right',
     renderTooltip,
     onToggle,
 }: ReactionsProps) {
@@ -122,6 +130,28 @@ export function Reactions({
         [paletteProps, reactions, paletteValue, size, onUpdatePalette],
     );
 
+    const addReactionButton = readOnly ? null : (
+        <Popover
+            content={paletteContent}
+            tooltipContentClassName={b('add-reaction-popover')}
+            openOnHover={false}
+            hasArrow={false}
+            focusTrap
+            autoFocus
+        >
+            <Button
+                className={b('reaction-button')}
+                size={size}
+                extraProps={{'aria-label': i18n('add-reaction')}}
+                view="flat-secondary"
+            >
+                <Button.Icon>
+                    <Icon data={FaceSmile} size={buttonSizeToIconSize[size]} />
+                </Button.Icon>
+            </Button>
+        </Popover>
+    );
+
     return (
         <ReactionsContextProvider
             value={{
@@ -130,6 +160,8 @@ export function Reactions({
             }}
         >
             <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
+                {addButtonPosition === 'left' ? addReactionButton : null}
+
                 {/* Reactions' list */}
                 {reactionsState.map((reaction) => {
                     const content = paletteOptionsMap[reaction.value]?.content ?? '?';
@@ -146,28 +178,7 @@ export function Reactions({
                     );
                 })}
 
-                {/* Add reaction button */}
-                {readOnly ? null : (
-                    <Popover
-                        content={paletteContent}
-                        tooltipContentClassName={b('add-reaction-popover')}
-                        openOnHover={false}
-                        hasArrow={false}
-                        focusTrap
-                        autoFocus
-                    >
-                        <Button
-                            className={b('reaction-button')}
-                            size={size}
-                            extraProps={{'aria-label': i18n('add-reaction')}}
-                            view="flat-secondary"
-                        >
-                            <Button.Icon>
-                                <Icon data={FaceSmile} size={buttonSizeToIconSize[size]} />
-                            </Button.Icon>
-                        </Button>
-                    </Popover>
-                )}
+                {addButtonPosition === 'right' ? addReactionButton : null}
             </Flex>
         </ReactionsContextProvider>
     );
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index 435b4b51..25d08c92 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -64,3 +64,22 @@ export const Size: StoryFn = () => {
         </Flex>
     );
 };
+
+export const AddButtonPosition: StoryFn = () => {
+    return (
+        <Flex direction="column" gap={4}>
+            <Flex direction="column" gap={2}>
+                <Text variant="subheader-1">Left</Text>
+                <Reactions {...useMockReactions()} addButtonPosition="left" />
+            </Flex>
+            <Flex direction="column" gap={2}>
+                <Text variant="subheader-1">Right</Text>
+                <Reactions {...useMockReactions()} addButtonPosition="right" />
+            </Flex>
+            <Flex direction="column" gap={2}>
+                <Text variant="subheader-1">None</Text>
+                <Reactions {...useMockReactions()} addButtonPosition="none" />
+            </Flex>
+        </Flex>
+    );
+};

From 1cde64f84c45361cb12535592a38da835853ddc3 Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Mon, 2 Sep 2024 13:40:55 +0300
Subject: [PATCH 2/5] fix: fixed a typo

---
 src/components/Reactions/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index fec1f0d5..dd6c93e8 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -1,6 +1,6 @@
 ## Reactions
 
-Component for user reactions (e.g. 👍, 😊, 😎 etc) as new GitHub comments for example.
+Component for user reactions (e.g. 👍, 😊, 😎 etc) as in GitHub comments for example.
 
 ### Usage example
 

From 02d994f2cfcaa8487db7fefef8b551f77d15f9da Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Mon, 2 Sep 2024 16:05:00 +0300
Subject: [PATCH 3/5] fix: changed left/right to start/end + added
 `hideAddButton` property

---
 src/components/Reactions/README.md            | 27 ++++++++++---------
 src/components/Reactions/Reactions.tsx        | 18 ++++++++-----
 .../__stories__/Reactions.stories.tsx         | 12 ++++-----
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index dd6c93e8..94711f1a 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -83,19 +83,20 @@ For more code examples go to [Reactions.stories.tsx](https://github.com/gravity-
 
 **ReactionsProps** (main component props — Reactions' list):
 
-| Property            | Type                                        | Required | Default   | Description                                                                                    |
-| :------------------ | :------------------------------------------ | :------: | :-------- | :--------------------------------------------------------------------------------------------- |
-| `addButtonPosition` | `'left' or 'right' or 'none'`               |          | `'right'` | Position of the "Add reaction" button. Use 'none' to hide the button.                          |
-| `className`         | `string`                                    |          |           | HTML `class` attribute                                                                         |
-| `onToggle`          | `(value: string) => void`                   |          |           | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
-| `paletteProps`      | `ReactionsPaletteProps`                     |  `true`  |           | Notifications' palette props — it's a `Palette` component with available reactions to the user |
-| `qa`                | `string`                                    |          |           | `qa` attribute for testing                                                                     |
-| `reactions`         | `PaletteOption[]`                           |  `true`  |           | List of all available reactions                                                                |
-| `reactionsState`    | `ReactionState[]`                           |  `true`  |           | List of reactions that were used                                                               |
-| `readOnly`          | `boolean`                                   |          | `false`   | readOnly state (usage example: only signed in users can react)                                 |
-| `renderTooltip`     | `(state: ReactionState) => React.ReactNode` |          |           | Reaction's tooltip with the list of reacted users for example                                  |
-| `size`              | `ButtonSize`                                |          | `m`       | Buttons's size                                                                                 |
-| `style`             | `React.CSSProperties`                       |          |           | HTML `style` attribute                                                                         |
+| Property            | Type                                        | Required | Default | Description                                                                                    |
+| :------------------ | :------------------------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
+| `addButtonPosition` | `'start' or 'end'`                          |          | `'end'` | Position of the "Add reaction" button.                                                         |
+| `className`         | `string`                                    |          |         | HTML `class` attribute                                                                         |
+| `hideAddButton`     | `boolean`                                   |          | `false` | Should we hide the "Add reaction" button.                                                      |
+| `onToggle`          | `(value: string) => void`                   |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
+| `paletteProps`      | `ReactionsPaletteProps`                     |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
+| `qa`                | `string`                                    |          |         | `qa` attribute for testing                                                                     |
+| `reactions`         | `PaletteOption[]`                           |  `true`  |         | List of all available reactions                                                                |
+| `reactionsState`    | `ReactionState[]`                           |  `true`  |         | List of reactions that were used                                                               |
+| `readOnly`          | `boolean`                                   |          | `false` | readOnly state (usage example: only signed in users can react)                                 |
+| `renderTooltip`     | `(state: ReactionState) => React.ReactNode` |          |         | Reaction's tooltip with the list of reacted users for example                                  |
+| `size`              | `ButtonSize`                                |          | `m`     | Buttons's size                                                                                 |
+| `style`             | `React.CSSProperties`                       |          |         | HTML `style` attribute                                                                         |
 
 **ReactionState** (single reaction props):
 
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 41b91b1a..39415d25 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -48,11 +48,16 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
     readOnly?: boolean;
     /**
      * Position of the "Add reaction" button.
-     * Use 'none' to hide the button.
      *
-     * @default 'right'
+     * @default 'end'
      */
-    addButtonPosition?: 'left' | 'right' | 'none';
+    addButtonPosition?: 'start' | 'end';
+    /**
+     * Should we hide the "Add reaction" button.
+     *
+     * @default false
+     */
+    hideAddButton?: boolean;
     /**
      * If present, when a user hovers over the reaction, a popover appears with renderTooltip(state) content.
      * Can be used to display users who used this reaction.
@@ -81,7 +86,8 @@ export function Reactions({
     paletteProps,
     readOnly,
     qa,
-    addButtonPosition = 'right',
+    addButtonPosition = 'end',
+    hideAddButton = false,
     renderTooltip,
     onToggle,
 }: ReactionsProps) {
@@ -160,7 +166,7 @@ export function Reactions({
             }}
         >
             <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
-                {addButtonPosition === 'left' ? addReactionButton : null}
+                {!hideAddButton && addButtonPosition === 'start' ? addReactionButton : null}
 
                 {/* Reactions' list */}
                 {reactionsState.map((reaction) => {
@@ -178,7 +184,7 @@ export function Reactions({
                     );
                 })}
 
-                {addButtonPosition === 'right' ? addReactionButton : null}
+                {!hideAddButton && addButtonPosition === 'end' ? addReactionButton : null}
             </Flex>
         </ReactionsContextProvider>
     );
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index 25d08c92..dc605be2 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -69,16 +69,16 @@ export const AddButtonPosition: StoryFn = () => {
     return (
         <Flex direction="column" gap={4}>
             <Flex direction="column" gap={2}>
-                <Text variant="subheader-1">Left</Text>
-                <Reactions {...useMockReactions()} addButtonPosition="left" />
+                <Text variant="subheader-1">Start</Text>
+                <Reactions {...useMockReactions()} addButtonPosition="start" />
             </Flex>
             <Flex direction="column" gap={2}>
-                <Text variant="subheader-1">Right</Text>
-                <Reactions {...useMockReactions()} addButtonPosition="right" />
+                <Text variant="subheader-1">End</Text>
+                <Reactions {...useMockReactions()} addButtonPosition="end" />
             </Flex>
             <Flex direction="column" gap={2}>
-                <Text variant="subheader-1">None</Text>
-                <Reactions {...useMockReactions()} addButtonPosition="none" />
+                <Text variant="subheader-1">Hide</Text>
+                <Reactions {...useMockReactions()} hideAddButton={true} />
             </Flex>
         </Flex>
     );

From 14eeed5590880d4a0435a0b3be577ffa40eb2598 Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Mon, 2 Sep 2024 16:09:25 +0300
Subject: [PATCH 4/5] fix: addButtonPosition -> addButtonPlacement

---
 src/components/Reactions/README.md            | 28 +++++++++----------
 src/components/Reactions/Reactions.tsx        |  8 +++---
 .../__stories__/Reactions.stories.tsx         |  6 ++--
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index 94711f1a..bff5943f 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -83,20 +83,20 @@ For more code examples go to [Reactions.stories.tsx](https://github.com/gravity-
 
 **ReactionsProps** (main component props — Reactions' list):
 
-| Property            | Type                                        | Required | Default | Description                                                                                    |
-| :------------------ | :------------------------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
-| `addButtonPosition` | `'start' or 'end'`                          |          | `'end'` | Position of the "Add reaction" button.                                                         |
-| `className`         | `string`                                    |          |         | HTML `class` attribute                                                                         |
-| `hideAddButton`     | `boolean`                                   |          | `false` | Should we hide the "Add reaction" button.                                                      |
-| `onToggle`          | `(value: string) => void`                   |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
-| `paletteProps`      | `ReactionsPaletteProps`                     |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
-| `qa`                | `string`                                    |          |         | `qa` attribute for testing                                                                     |
-| `reactions`         | `PaletteOption[]`                           |  `true`  |         | List of all available reactions                                                                |
-| `reactionsState`    | `ReactionState[]`                           |  `true`  |         | List of reactions that were used                                                               |
-| `readOnly`          | `boolean`                                   |          | `false` | readOnly state (usage example: only signed in users can react)                                 |
-| `renderTooltip`     | `(state: ReactionState) => React.ReactNode` |          |         | Reaction's tooltip with the list of reacted users for example                                  |
-| `size`              | `ButtonSize`                                |          | `m`     | Buttons's size                                                                                 |
-| `style`             | `React.CSSProperties`                       |          |         | HTML `style` attribute                                                                         |
+| Property             | Type                                        | Required | Default | Description                                                                                    |
+| :------------------- | :------------------------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
+| `addButtonPlacement` | `'start' or 'end'`                          |          | `'end'` | Position of the "Add reaction" button.                                                         |
+| `className`          | `string`                                    |          |         | HTML `class` attribute                                                                         |
+| `hideAddButton`      | `boolean`                                   |          | `false` | Should we hide the "Add reaction" button.                                                      |
+| `onToggle`           | `(value: string) => void`                   |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
+| `paletteProps`       | `ReactionsPaletteProps`                     |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
+| `qa`                 | `string`                                    |          |         | `qa` attribute for testing                                                                     |
+| `reactions`          | `PaletteOption[]`                           |  `true`  |         | List of all available reactions                                                                |
+| `reactionsState`     | `ReactionState[]`                           |  `true`  |         | List of reactions that were used                                                               |
+| `readOnly`           | `boolean`                                   |          | `false` | readOnly state (usage example: only signed in users can react)                                 |
+| `renderTooltip`      | `(state: ReactionState) => React.ReactNode` |          |         | Reaction's tooltip with the list of reacted users for example                                  |
+| `size`               | `ButtonSize`                                |          | `m`     | Buttons's size                                                                                 |
+| `style`              | `React.CSSProperties`                       |          |         | HTML `style` attribute                                                                         |
 
 **ReactionState** (single reaction props):
 
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 39415d25..1def2b20 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -51,7 +51,7 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
      *
      * @default 'end'
      */
-    addButtonPosition?: 'start' | 'end';
+    addButtonPlacement?: 'start' | 'end';
     /**
      * Should we hide the "Add reaction" button.
      *
@@ -86,7 +86,7 @@ export function Reactions({
     paletteProps,
     readOnly,
     qa,
-    addButtonPosition = 'end',
+    addButtonPlacement = 'end',
     hideAddButton = false,
     renderTooltip,
     onToggle,
@@ -166,7 +166,7 @@ export function Reactions({
             }}
         >
             <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
-                {!hideAddButton && addButtonPosition === 'start' ? addReactionButton : null}
+                {!hideAddButton && addButtonPlacement === 'start' ? addReactionButton : null}
 
                 {/* Reactions' list */}
                 {reactionsState.map((reaction) => {
@@ -184,7 +184,7 @@ export function Reactions({
                     );
                 })}
 
-                {!hideAddButton && addButtonPosition === 'end' ? addReactionButton : null}
+                {!hideAddButton && addButtonPlacement === 'end' ? addReactionButton : null}
             </Flex>
         </ReactionsContextProvider>
     );
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index dc605be2..0551eec0 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -65,16 +65,16 @@ export const Size: StoryFn = () => {
     );
 };
 
-export const AddButtonPosition: StoryFn = () => {
+export const AddButtonPlacement: StoryFn = () => {
     return (
         <Flex direction="column" gap={4}>
             <Flex direction="column" gap={2}>
                 <Text variant="subheader-1">Start</Text>
-                <Reactions {...useMockReactions()} addButtonPosition="start" />
+                <Reactions {...useMockReactions()} addButtonPlacement="start" />
             </Flex>
             <Flex direction="column" gap={2}>
                 <Text variant="subheader-1">End</Text>
-                <Reactions {...useMockReactions()} addButtonPosition="end" />
+                <Reactions {...useMockReactions()} addButtonPlacement="end" />
             </Flex>
             <Flex direction="column" gap={2}>
                 <Text variant="subheader-1">Hide</Text>

From 6b80f7fb21e8f23e781ba43be93ebdf170d4a74a Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Thu, 5 Sep 2024 14:11:26 +0300
Subject: [PATCH 5/5] fix: removed `hideAddButton` property

---
 src/components/Reactions/README.md                    |  1 -
 src/components/Reactions/Reactions.tsx                | 11 ++---------
 .../Reactions/__stories__/Reactions.stories.tsx       |  4 ----
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index bff5943f..4e78ed46 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -87,7 +87,6 @@ For more code examples go to [Reactions.stories.tsx](https://github.com/gravity-
 | :------------------- | :------------------------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
 | `addButtonPlacement` | `'start' or 'end'`                          |          | `'end'` | Position of the "Add reaction" button.                                                         |
 | `className`          | `string`                                    |          |         | HTML `class` attribute                                                                         |
-| `hideAddButton`      | `boolean`                                   |          | `false` | Should we hide the "Add reaction" button.                                                      |
 | `onToggle`           | `(value: string) => void`                   |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
 | `paletteProps`       | `ReactionsPaletteProps`                     |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
 | `qa`                 | `string`                                    |          |         | `qa` attribute for testing                                                                     |
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 1def2b20..8453ad5a 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -52,12 +52,6 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
      * @default 'end'
      */
     addButtonPlacement?: 'start' | 'end';
-    /**
-     * Should we hide the "Add reaction" button.
-     *
-     * @default false
-     */
-    hideAddButton?: boolean;
     /**
      * If present, when a user hovers over the reaction, a popover appears with renderTooltip(state) content.
      * Can be used to display users who used this reaction.
@@ -87,7 +81,6 @@ export function Reactions({
     readOnly,
     qa,
     addButtonPlacement = 'end',
-    hideAddButton = false,
     renderTooltip,
     onToggle,
 }: ReactionsProps) {
@@ -166,7 +159,7 @@ export function Reactions({
             }}
         >
             <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
-                {!hideAddButton && addButtonPlacement === 'start' ? addReactionButton : null}
+                {addButtonPlacement === 'start' ? addReactionButton : null}
 
                 {/* Reactions' list */}
                 {reactionsState.map((reaction) => {
@@ -184,7 +177,7 @@ export function Reactions({
                     );
                 })}
 
-                {!hideAddButton && addButtonPlacement === 'end' ? addReactionButton : null}
+                {addButtonPlacement === 'end' ? addReactionButton : null}
             </Flex>
         </ReactionsContextProvider>
     );
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index 0551eec0..c1f9bb12 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -76,10 +76,6 @@ export const AddButtonPlacement: StoryFn = () => {
                 <Text variant="subheader-1">End</Text>
                 <Reactions {...useMockReactions()} addButtonPlacement="end" />
             </Flex>
-            <Flex direction="column" gap={2}>
-                <Text variant="subheader-1">Hide</Text>
-                <Reactions {...useMockReactions()} hideAddButton={true} />
-            </Flex>
         </Flex>
     );
 };