[Calling] Send reaction button component (#3997)

Author: Mohtasim

packages/communication-react/review/beta/communication-react.api.md

@@ -532,6 +532,7 @@ export type CallCompositeIcons = {
     RaiseHandContextualMenuItem?: JSX.Element;
     ReactionContextualMenuItem?: JSX.Element;
     LowerHandContextualMenuItem?: JSX.Element;
+    ReactionButtonIcon?: JSX.Element;
     ErrorBarCallCameraAccessDenied?: JSX.Element;
     ErrorBarCallCameraAlreadyInUse?: JSX.Element;
     ErrorBarCallLocalVideoFreeze?: JSX.Element;
@@ -2455,6 +2456,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     RaiseHandContextualMenuItem: JSX.Element;
     ReactionContextualMenuItem?: JSX.Element | undefined;
     LowerHandContextualMenuItem: JSX.Element;
+    ReactionButtonIcon: JSX.Element;
     ErrorBarCallCameraAccessDenied: JSX.Element;
     ErrorBarCallCameraAlreadyInUse: JSX.Element;
     ErrorBarCallLocalVideoFreeze: JSX.Element;

packages/react-components/src/components/ReactionButton.tsx

@@ -125,13 +125,11 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => {
 const reactionButtonStyles = (theme: Theme): IButtonStyles => ({
   rootChecked: {
     background: theme.palette.themePrimary,
-    color: DefaultPalette.white,
-    ':focus::after': { outlineColor: `${DefaultPalette.white}` }
+    color: DefaultPalette.white
   },
   rootCheckedHovered: {
     background: theme.palette.themePrimary,
-    color: DefaultPalette.white,
-    ':focus::after': { outlineColor: `${DefaultPalette.white}` }
+    color: DefaultPalette.white
   },
   labelChecked: { color: DefaultPalette.white }
 });

packages/react-components/src/localization/locales/en-US/strings.json

@@ -124,9 +124,9 @@
     "tooltipOffContent": "Raise Hand"
   },
   "reactionButton": {
-    "label": "Send a reaction",
+    "label": "React",
     "tooltipDisabledContent": "Reaction action is disabled",
-    "tooltipContent": "Reaction action"
+    "tooltipContent": "Send a reaction"
   },
   "messageThread": {
     "yesterday": "Yesterday",

packages/react-composites/review/beta/react-composites.api.md

@@ -350,6 +350,7 @@ export type CallCompositeIcons = {
     RaiseHandContextualMenuItem?: JSX.Element;
     ReactionContextualMenuItem?: JSX.Element;
     LowerHandContextualMenuItem?: JSX.Element;
+    ReactionButtonIcon?: JSX.Element;
     ErrorBarCallCameraAccessDenied?: JSX.Element;
     ErrorBarCallCameraAlreadyInUse?: JSX.Element;
     ErrorBarCallLocalVideoFreeze?: JSX.Element;
@@ -1411,6 +1412,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     RaiseHandContextualMenuItem: JSX.Element;
     ReactionContextualMenuItem?: JSX.Element | undefined;
     LowerHandContextualMenuItem: JSX.Element;
+    ReactionButtonIcon: JSX.Element;
     ErrorBarCallCameraAccessDenied: JSX.Element;
     ErrorBarCallCameraAlreadyInUse: JSX.Element;
     ErrorBarCallLocalVideoFreeze: JSX.Element;

packages/react-composites/src/composites/common/icons.tsx

@@ -195,6 +195,8 @@ export type CallCompositeIcons = {
   /* @conditional-compile-remove(reaction) */
   ReactionContextualMenuItem?: JSX.Element;
   LowerHandContextualMenuItem?: JSX.Element;
+  /* @conditional-compile-remove(reaction) */
+  ReactionButtonIcon?: JSX.Element;
   ErrorBarCallCameraAccessDenied?: JSX.Element;
   ErrorBarCallCameraAlreadyInUse?: JSX.Element;
   ErrorBarCallLocalVideoFreeze?: JSX.Element;