Merge pull request #2800 from robintown/reactions-button

Update icon and label of reactions button

locales/en-GB/app.json

@@ -12,7 +12,6 @@
     "no": "No",
     "pick_reaction": "Pick reaction",
     "raise_hand": "Raise hand",
-    "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
     "show_less": "Show less",
@@ -62,6 +61,7 @@
     "preferences": "Preferences",
     "profile": "Profile",
     "reaction": "Reaction",
+    "reactions": "Reactions",
     "settings": "Settings",
     "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",

src/button/ReactionToggleButton.test.tsx

@@ -53,7 +53,7 @@ test("Can open menu", async () => {
   const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   expect(container).toMatchSnapshot();
 });
 
@@ -64,7 +64,7 @@ test("Can raise hand", async () => {
   const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.raise_hand"));
   expect(room.testSentEvents).toEqual([
     [
@@ -90,7 +90,7 @@ test("Can lower hand", async () => {
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
   const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.lower_hand"));
   expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
   expect(container).toMatchSnapshot();
@@ -103,7 +103,7 @@ test("Can react with emoji", async () => {
   const { getByLabelText, getByText } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   await user.click(getByText("🐶"));
   expect(room.testSentEvents).toEqual([
     [
@@ -128,7 +128,7 @@ test("Can fully expand emoji picker", async () => {
   const { getByText, container, getByLabelText } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.show_more"));
   expect(container).toMatchSnapshot();
   await user.click(getByText("🦗"));
@@ -156,7 +156,7 @@ test("Can close search", async () => {
   const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.show_more"));
   await user.click(getByLabelText("action.show_less"));
   expect(container).toMatchSnapshot();

src/button/ReactionToggleButton.tsx

@@ -8,9 +8,9 @@ Please see LICENSE in the repository root for full details.
 import { Button as CpdButton, Tooltip, Alert } from "@vector-im/compound-web";
 import {
   RaisedHandSolidIcon,
-  ReactionIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  ReactionSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ComponentPropsWithoutRef,
@@ -47,15 +47,14 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <Tooltip label={t("action.raise_hand_or_send_reaction")}>
+    <Tooltip label={t("common.reactions")}>
       <CpdButton
         className={classNames(raised && styles.raisedButton)}
         aria-expanded={open}
         aria-haspopup
-        aria-label={t("action.raise_hand_or_send_reaction")}
         kind={raised || open ? "primary" : "secondary"}
         iconOnly
-        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
+        Icon={raised ? RaisedHandSolidIcon : ReactionSolidIcon}
         {...props}
       />
     </Tooltip>

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`Can close search 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r9l:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -26,10 +25,9 @@ exports[`Can close search 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        clip-rule="evenodd"
-      />
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      <path
+        fill-rule="evenodd"
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
       />
     </svg>
   </button>
@@ -45,7 +43,6 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r6c:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -62,10 +59,9 @@ exports[`Can fully expand emoji picker 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        clip-rule="evenodd"
-      />
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      <path
+        fill-rule="evenodd"
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
       />
     </svg>
   </button>
@@ -78,7 +74,6 @@ exports[`Can lower hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r36:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -111,7 +106,6 @@ exports[`Can open menu 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r0:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -128,10 +122,9 @@ exports[`Can open menu 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        clip-rule="evenodd"
-      />
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      <path
+        fill-rule="evenodd"
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
       />
     </svg>
   </button>
@@ -144,7 +137,6 @@ exports[`Can raise hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r1j:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="secondary"
@@ -161,10 +153,9 @@ exports[`Can raise hand 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        clip-rule="evenodd"
-      />
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      <path
+        fill-rule="evenodd"
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
       />
     </svg>
   </button>