Fix styling when unread chat messages exceeds 9 (and remove ControlBa…

…rButtonBadgeIcon as a customizable icon) (#1582)

change/@internal-react-composites-9a25d301-f1a0-4bbe-a7e8-bfaf267c9172.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove customization for unread messages button icon. Fix styling when unread messages exceeds 9 messages",
+  "packageName": "@internal/react-composites",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -652,7 +652,6 @@ export const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.E
 // @beta
 export type CallWithChatCompositeIcons = {
     ChevronLeft?: JSX.Element;
-    ControlBarButtonBadgeIcon?: JSX.Element;
     ControlBarChatButtonActive?: JSX.Element;
     ControlBarChatButtonInactive?: JSX.Element;
     ControlBarPeopleButton?: JSX.Element;
@@ -1404,7 +1403,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     VideoTileMicOff: JSX.Element;
     LocalCameraSwitch?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
-    ControlBarButtonBadgeIcon?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;
     ControlBarPeopleButton?: JSX.Element | undefined;

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

@@ -444,7 +444,6 @@ export const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.E
 // @beta
 export type CallWithChatCompositeIcons = {
     ChevronLeft?: JSX.Element;
-    ControlBarButtonBadgeIcon?: JSX.Element;
     ControlBarChatButtonActive?: JSX.Element;
     ControlBarChatButtonInactive?: JSX.Element;
     ControlBarPeopleButton?: JSX.Element;
@@ -802,7 +801,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     VideoTileMicOff: JSX.Element;
     LocalCameraSwitch?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
-    ControlBarButtonBadgeIcon?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;
     ControlBarPeopleButton?: JSX.Element | undefined;

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.tsx

@@ -187,7 +187,8 @@ const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles =>
   label: {
     // Override styling from ControlBarButton so that label doesn't introduce a new block.
     display: 'inline',
-    fontSize: theme.fonts.medium.fontSize
+    fontSize: theme.fonts.medium.fontSize,
+    marginLeft: '0.625rem'
   },
   splitButtonMenuButton: {
     border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,

packages/react-composites/src/composites/CallWithChatComposite/NotificationIcon.tsx

@@ -3,7 +3,6 @@
 
 import React from 'react';
 import { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';
-import { CallWithChatCompositeIcon } from '../common/icons';
 
 /**
  * @private
@@ -32,39 +31,38 @@ export const NotificationIcon = (props: NotificationIconProps): JSX.Element => {
   };
 
   return (
-    <Stack horizontalAlign="center" verticalAlign="center" styles={notificationIconContainerStyles}>
-      <CallWithChatCompositeIcon styles={notificationIconStyles(theme)} iconName="ControlBarButtonBadgeIcon" />
-      {renderNumber(chatMessagesCount)}
+    <Stack horizontalAlign="center" verticalAlign="center" styles={notificationIconContainerStyles(theme)}>
+      <Stack>{renderNumber(chatMessagesCount)}</Stack>
     </Stack>
   );
 };
 
+const notificationIconPaddingREM = 0.225;
+const notificationSizeREM = 1;
+
 const notificationIconContainerStyles = memoizeFunction(
-  (): IIconStyles => ({
+  (theme: ITheme): IIconStyles => ({
     root: {
+      borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.
+      height: `${notificationSizeREM}rem`,
+      minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)
+      background: theme.palette.themePrimary,
+      border: `0.0625rem solid ${theme.palette.white}`,
+      padding: `${notificationIconPaddingREM}rem`,
+
       // positioning to place the badge within the button appropriately.
       position: 'absolute',
-      top: '-0.5rem',
-      right: '-0.5rem'
-    }
-  })
-);
-
-const notificationIconStyles = memoizeFunction(
-  (theme: ITheme): IIconStyles => ({
-    root: {
-      color: theme.palette.themePrimary
+      top: `-${0.5 - notificationIconPaddingREM / 2}rem`,
+      left: `${0.5 + notificationIconPaddingREM / 2}rem`
     }
   })
 );
 
 const notificationTextStyles = memoizeFunction(
   (theme: ITheme): IStackStyles => ({
     root: {
-      position: 'absolute',
-      top: '0.1rem',
       color: theme.palette.white,
-      fontSize: theme.fonts.smallPlus.fontSize
+      fontSize: theme.fonts.xSmall.fontSize
     }
   })
 );

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

@@ -26,8 +26,6 @@ import { DEFAULT_COMPONENT_ICONS } from '@internal/react-components';
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { FontIcon, IIconProps, mergeStyles, Text } from '@fluentui/react';
-/* @conditional-compile-remove(call-with-chat-composite) */
-import { Circle20Filled } from '@fluentui/react-icons';
 /* @conditional-compile-remove(file-sharing) */
 import { Attach20Regular } from '@fluentui/react-icons';
 
@@ -66,8 +64,6 @@ export const COMPOSITE_ONLY_ICONS: CompositeIcons = {
   LocalPreviewPlaceholder: <VideoOff20Filled />,
   /* @conditional-compile-remove(local-camera-switcher) */
   LocalCameraSwitch: <CameraSwitch24Regular />,
-  /* @conditional-compile-remove(call-with-chat-composite)*/
-  ControlBarButtonBadgeIcon: <Circle20Filled />,
   /* @conditional-compile-remove(call-with-chat-composite) */
   ControlBarChatButtonActive: <Chat20Filled />,
   /* @conditional-compile-remove(call-with-chat-composite) */
@@ -214,7 +210,6 @@ export const CallCompositeIcon = (props: CompositeIconProps<CallCompositeIcons>)
 export type CallWithChatCompositeIcons = {
   // CallWithChat Specific Icons
   ChevronLeft?: JSX.Element;
-  ControlBarButtonBadgeIcon?: JSX.Element;
   ControlBarChatButtonActive?: JSX.Element;
   ControlBarChatButtonInactive?: JSX.Element;
   ControlBarPeopleButton?: JSX.Element;