fix: minor PR fixes

gravity-ui · Aug 2, 2024 · 942bacc · 942bacc
1 parent db1f96d
commit 942bacc
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 47 deletions.
diff --git a/src/components/Reactions/Reaction.tsx b/src/components/Reactions/Reaction.tsx
@@ -9,7 +9,7 @@ import {useReactionsPopup} from './hooks';
 
 export type ReactionProps = Pick<PaletteOption, 'value' | 'content' | 'title'>;
 
-export interface ReactionStateProps {
+export interface ReactionState {
     /**
      * Reaction's unique value (ID).
      */
@@ -31,7 +31,7 @@ export interface ReactionStateProps {
 }
 
 interface ReactionInnerProps extends Pick<PaletteOption, 'content'> {
-    reaction: ReactionStateProps;
+    reaction: ReactionState;
     size: ButtonSize;
     tooltipBehavior: 'tooltip' | 'popover';
     onClick?: (value: string) => void;
@@ -59,25 +59,24 @@ export function Reaction(props: ReactionInnerProps) {
     const {openedTooltip: currentHoveredReaction} = useReactionsContext();
 
     const button = (
-        <span
+        <Button
+            className={b('reaction-button', {size})}
+            ref={buttonRef}
+            size={size}
+            selected={selected}
+            view="outlined"
+            extraProps={{value}}
+            onClick={onClickCallback}
             onMouseEnter={props.tooltipBehavior === 'tooltip' ? onMouseEnter : undefined}
             onMouseLeave={props.tooltipBehavior === 'tooltip' ? onMouseLeave : undefined}
         >
-            <Button
-                className={b('reaction-button', {size})}
-                ref={buttonRef}
-                size={size}
-                selected={selected}
-                view="outlined"
-                extraProps={{value}}
-                onClick={onClickCallback}
-            >
-                <Button.Icon>{content}</Button.Icon>
-                {counter === undefined || counter === null ? null : (
-                    <span className={b('reaction-button-text', {size})}>{counter}</span>
-                )}
-            </Button>
-        </span>
+            <Button.Icon>
+                <span className={b('reaction-button-content', {size})}>{content}</span>
+            </Button.Icon>
+            {counter === undefined || counter === null ? null : (
+                <span className={b('reaction-button-content', {size, text: true})}>{counter}</span>
+            )}
+        </Button>
     );
 
     return tooltip ? (

diff --git a/src/components/Reactions/Reactions.scss b/src/components/Reactions/Reactions.scss
@@ -15,35 +15,38 @@ $block: '.#{variables.$ns}reactions';
         max-width: unset;
     }
 
-    &__reaction-button_size_xs {
+    &__reaction-button-content_size_xs {
         font-size: 12px;
     }
-    &__reaction-button_size_s {
-        font-size: 16px;
-    }
-    &__reaction-button_size_m {
-        font-size: 16px;
+    &__reaction-button-content_size_xs#{&}__reaction-button-content_text {
+        font-size: var(--g-text-caption-1-font-size);
     }
-    &__reaction-button_size_l {
+
+    &__reaction-button-content_size_s {
         font-size: 16px;
     }
-    &__reaction-button_size_xl {
-        font-size: 20px;
+    &__reaction-button-content_size_s#{&}__reaction-button-content_text {
+        font-size: var(--g-text-caption-2-font-size);
     }
 
-    &__reaction-button-text_size_xs {
-        font-size: var(--g-text-caption-1-font-size);
-    }
-    &__reaction-button-text_size_s {
-        font-size: var(--g-text-caption-2-font-size);
+    &__reaction-button-content_size_m {
+        font-size: 16px;
     }
-    &__reaction-button-text_size_m {
+    &__reaction-button-content_size_m#{&}__reaction-button-content_text {
         font-size: var(--g-text-body-1-font-size);
     }
-    &__reaction-button-text_size_l {
+
+    &__reaction-button-content_size_l {
+        font-size: 16px;
+    }
+    &__reaction-button-content_size_l#{&}__reaction-button-content_text {
         font-size: var(--g-text-subheader-1-font-size);
     }
-    &__reaction-button-text_size_xl {
+
+    &__reaction-button-content_size_xl {
+        font-size: 20px;
+    }
+    &__reaction-button-content_size_xl#{&}__reaction-button-content_text {
         font-size: var(--g-text-subheader-2-font-size);
     }
 }
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
@@ -16,8 +16,9 @@ import xor from 'lodash/xor';
 
 import {block} from '../utils/cn';
 
-import {Reaction, ReactionProps, ReactionStateProps} from './Reaction';
+import {Reaction, ReactionProps, ReactionState} from './Reaction';
 import {ReactionsContextProvider, ReactionsContextTooltipProps} from './context';
+import {i18n} from './i18n';
 
 import './Reactions.scss';
 
@@ -36,7 +37,7 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
     /**
      * Users' reactions.
      */
-    reactionsState: ReactionStateProps[];
+    reactionsState: ReactionState[];
     /**
      * Reactions' palette props.
      */
@@ -155,11 +156,13 @@ export function Reactions({
                         tooltipContentClassName={b('add-reaction-popover')}
                         openOnHover={false}
                         hasArrow={false}
+                        focusTrap
+                        autoFocus
                     >
                         <Button
                             className={b('reaction-button', {size, 'add-button': true})}
                             size={size}
-                            extraProps={{'aria-label': 'add-reaction'}}
+                            extraProps={{'aria-label': i18n('add-reaction')}}
                             view="flat"
                         >
                             <Button.Icon>

diff --git a/src/components/Reactions/__tests__/mock/mockHooks.tsx b/src/components/Reactions/__tests__/mock/mockHooks.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Flex, Text, User} from '@gravity-ui/uikit';
 
-import {ReactionStateProps} from '../../Reaction';
+import {ReactionState} from '../../Reaction';
 import {Reactions, ReactionsProps} from '../../Reactions';
 
 import {
@@ -41,7 +41,7 @@ const renderUsersReacted = (users: ReactionsMockUser[]) => {
     );
 };
 
-const getTooltip = (users: ReactionsMockUser[]): ReactionStateProps['tooltip'] =>
+const getTooltip = (users: ReactionsMockUser[]): ReactionState['tooltip'] =>
     renderUsersReacted(users);
 
 export function useMockReactions(): ReactionsProps {
@@ -57,7 +57,7 @@ export function useMockReactions(): ReactionsProps {
     const reactionsState = React.useMemo(
         () =>
             Object.entries(usersReacted).map(
-                ([value, users]): ReactionStateProps => ({
+                ([value, users]): ReactionState => ({
                     value,
                     counter: users.length,
                     tooltip: getTooltip(users),

diff --git a/src/components/Reactions/context.ts b/src/components/Reactions/context.ts
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {ReactionStateProps} from './Reaction';
+import type {ReactionState} from './Reaction';
 
 export interface ReactionsContextTooltipProps {
-    reaction: ReactionStateProps;
+    reaction: ReactionState;
     ref: React.RefObject<HTMLButtonElement>;
     open: boolean;
 }

diff --git a/src/components/Reactions/hooks.ts b/src/components/Reactions/hooks.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ReactionStateProps} from './Reaction';
+import type {ReactionState} from './Reaction';
 import {useReactionsContext} from './context';
 
 const DELAY = {
@@ -10,7 +10,7 @@ const DELAY = {
 } as const;
 
 export function useReactionsPopup(
-    reaction: ReactionStateProps,
+    reaction: ReactionState,
     ref: React.RefObject<HTMLButtonElement>,
 ) {
     const {value} = reaction;
@@ -68,9 +68,13 @@ export function useReactionsPopup(
         setDelayedClose(close, DELAY.closeTimeout);
     }, [clearOpenTimeout, close, setDelayedClose]);
 
-    const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = delayedOpenPopup;
+    const onMouseEnter: React.MouseEventHandler<
+        HTMLDivElement | HTMLButtonElement | HTMLAnchorElement
+    > = delayedOpenPopup;
 
-    const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = delayedClosePopup;
+    const onMouseLeave: React.MouseEventHandler<
+        HTMLDivElement | HTMLButtonElement | HTMLAnchorElement
+    > = delayedClosePopup;
 
     React.useEffect(() => {
         // When the tab gets focus we need to hide the popup,

diff --git a/src/components/Reactions/i18n/en.json b/src/components/Reactions/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "add-reaction": "Add reaction"
+}
diff --git a/src/components/Reactions/i18n/index.ts b/src/components/Reactions/i18n/index.ts
@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../utils/cn';
+
+import en from './en.json';
+import ru from './ru.json';
+
+export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}reactions`);
diff --git a/src/components/Reactions/i18n/ru.json b/src/components/Reactions/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "add-reaction": "Добавить реакцию"
+}