From 02d994f2cfcaa8487db7fefef8b551f77d15f9da Mon Sep 17 00:00:00 2001 From: Vlad Furman Date: Mon, 2 Sep 2024 16:05:00 +0300 Subject: [PATCH] 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, 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({ }} > - {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} ); 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 ( - Left - + Start + - Right - + End + - None - + Hide + );