Skip to content

Commit

Permalink
fix: changed left/right to start/end + added hideAddButton property
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ruminat
Ruminat committed Sep 2, 2024
1 parent 1cde64f commit 02d994f
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 25 deletions.
27 changes: 14 additions & 13 deletions src/components/Reactions/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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):

Expand Down
18 changes: 12 additions & 6 deletions src/components/Reactions/Reactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -81,7 +86,8 @@ export function Reactions({
paletteProps,
readOnly,
qa,
addButtonPosition = 'right',
addButtonPosition = 'end',
hideAddButton = false,
renderTooltip,
onToggle,
}: ReactionsProps) {
Expand Down Expand Up @@ -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) => {
Expand All @@ -178,7 +184,7 @@ export function Reactions({
);
})}

{addButtonPosition === 'right' ? addReactionButton : null}
{!hideAddButton && addButtonPosition === 'end' ? addReactionButton : null}
</Flex>
</ReactionsContextProvider>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/Reactions/__stories__/Reactions.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 02d994f

Please sign in to comment.