Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Reactions): add addButtonPlacement property #215

Merged
merged 5 commits into from
Sep 5, 2024
Merged

feat(Reactions): add addButtonPlacement property #215

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6c2674
feat: added addButtonPosition property
Ruminat Sep 2, 2024
1cde64f
fix: fixed a typo
Ruminat Sep 2, 2024
02d994f
fix: changed left/right to start/end + added `hideAddButton` property
Ruminat Sep 2, 2024
14eeed5
fix: addButtonPosition -> addButtonPlacement
Ruminat Sep 2, 2024
6b80f7f
fix: removed `hideAddButton` property
Ruminat Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 21 additions & 23 deletions src/components/Reactions/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
## 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

```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'},
Expand All @@ -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 => ({
Expand All @@ -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]) {
Expand Down Expand Up @@ -74,9 +73,7 @@ const YourComponent = () => {
[usersReacted],
);

return (
<Reactions palette={{options}} reactions={reactions} onToggle={onToggle} />
);
return <Reactions reactions={options} reactionsState={reactionsState} onToggle={onToggle} />;
};
```

Expand All @@ -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):

Expand Down
55 changes: 33 additions & 22 deletions src/components/Reactions/Reactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's separate hiding and placement, also we use logical values (start/end) instead of physical ones (left/right)

Suggested change
addButtonPosition?: 'left' | 'right' | 'none';
addButtonPlacement?: 'start' | 'end';

none value is the same as readOnly, isn't it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Turned left/right to start/end
  • Moved none to a separate property hideAddButton

none value is the same as readOnly, isn't it?

Not quite. You can still toggle reactions, it's just the button that hides

/**
* 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 @@ -74,6 +81,7 @@ export function Reactions({
paletteProps,
readOnly,
qa,
addButtonPosition = 'right',
renderTooltip,
onToggle,
}: ReactionsProps) {
Expand Down Expand Up @@ -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={{
Expand All @@ -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 ?? '?';
Expand All @@ -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>
);
Expand Down
19 changes: 19 additions & 0 deletions src/components/Reactions/__stories__/Reactions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,22 @@ export const Size: StoryFn = () => {
</Flex>
);
};

export const AddButtonPosition: StoryFn = () => {
Ruminat marked this conversation as resolved.
Show resolved Hide resolved
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>
);
};
Loading