Fix control bar button label styling. Fix screenshare button hover and checked styling.

change/@internal-react-components-3fcd47f5-2110-43b7-be7f-55d8b54ca073.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update screenshare button background when active",
+  "packageName": "@internal/react-components",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-90f8fc03-9c00-426e-a0d9-44028a8259ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Moved code",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@internal-storybook-b2ea3718-169c-4e83-a350-a8e3d343a8ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update jest snapshots",
+  "packageName": "@internal/storybook",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -1,18 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import React, { useCallback } from 'react';
-import {
-  DefaultButton,
-  IButtonProps,
-  IRenderFunction,
-  Text,
-  concatStyleSets,
-  mergeStyles,
-  IButtonStyles
-} from '@fluentui/react';
-import { useTheme } from '../theming';
-import { controlButtonLabelStyles, controlButtonStyles } from './styles/ControlBar.styles';
+import React from 'react';
+import { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles } from '@fluentui/react';
+import { controlButtonStyles } from './styles/ControlBar.styles';
 import { ControlButtonTooltip } from './ControlButtonTooltip';
 
 /**
@@ -123,22 +114,10 @@ const DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null =>
  */
 export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
   const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});
-  const theme = useTheme();
 
   const labelText =
     props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);
 
-  const DefaultRenderText = useCallback(() => {
-    return (
-      <Text
-        key={props?.labelKey}
-        className={mergeStyles(controlButtonLabelStyles, theme.palette.neutralPrimary, props?.styles?.label)}
-      >
-        {labelText}
-      </Text>
-    );
-  }, [labelText, props?.labelKey, props?.styles?.label, theme]);
-
   const tooltipContent =
     props?.strings?.tooltipContent ??
     (props?.disabled
@@ -154,9 +133,11 @@ export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
       <DefaultButton
         {...props}
         styles={componentStyles}
-        onRenderText={props.showLabel ? props.onRenderText ?? DefaultRenderText : undefined}
+        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}
         onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}
-      />
+      >
+        {props.showLabel ? labelText : <></>}
+      </DefaultButton>
     </ControlButtonTooltip>
   );
 };

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

@@ -4,7 +4,7 @@
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';
-import { Icon } from '@fluentui/react';
+import { DefaultPalette, IButtonStyles, Icon, Theme, useTheme } from '@fluentui/react';
 
 /**
  * Strings of {@link ScreenShareButton} that can be overridden.
@@ -56,9 +56,13 @@ export const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element =>
   const localeStrings = useLocale().strings.screenShareButton;
   const strings = { ...localeStrings, ...props.strings };
 
+  const theme = useTheme();
+  const styles = screenshareButtonStyles(theme);
+
   return (
     <ControlBarButton
       {...props}
+      styles={styles}
       onClick={props.onToggleScreenShare ?? props.onClick}
       onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon}
       onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon}
@@ -67,3 +71,18 @@ export const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element =>
     />
   );
 };
+
+const screenshareButtonStyles = (theme: Theme): IButtonStyles => ({
+  rootChecked: {
+    background: theme.palette.themePrimary,
+    color: DefaultPalette.white,
+    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+  },
+  rootCheckedHovered: {
+    background: theme.palette.themePrimary,
+    color: DefaultPalette.white,
+    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+  },
+  labelHovered: { color: DefaultPalette.white },
+  labelChecked: { color: DefaultPalette.white }
+});

packages/react-components/src/components/styles/ControlBar.styles.ts

@@ -125,20 +125,17 @@ export const controlButtonStyles: IButtonStyles = {
   flexContainer: {
     flexFlow: 'column',
     display: 'contents'
+  },
+  label: {
+    fontSize: '0.625rem',
+    fontWeight: '400',
+    lineHeight: '1rem',
+    cursor: 'pointer',
+    display: 'block',
+    margin: '0rem 0.25rem'
   }
 };
 
-/**
- * @private
- */
-export const controlButtonLabelStyles: IStyle = {
-  fontSize: '0.625rem',
-  lineHeight: '1rem',
-  cursor: 'pointer',
-  display: 'block',
-  margin: '0rem 0.25rem'
-};
-
 /**
  * making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
  *

packages/react-composites/src/composites/CallComposite/components/CallControls.tsx

@@ -11,16 +11,14 @@ import {
   MicrophoneButton,
   ParticipantMenuItemsCallback,
   ParticipantsButton,
-  ScreenShareButton,
-  useTheme
+  ScreenShareButton
 } from '@internal/react-components';
 import React, { useMemo } from 'react';
 import { useLocale } from '../../localization';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useSelector } from '../hooks/useSelector';
 import { getCallStatus, getLocalMicrophoneEnabled } from '../selectors/baseSelectors';
 import {
-  checkedButtonOverrideStyles,
   controlButtonBaseStyle,
   devicesButtonWithIncreasedTouchTargets,
   groupCallLeaveButtonCompressedStyle,
@@ -128,13 +126,6 @@ export const CallControls = (props: CallControlsProps): JSX.Element => {
   const devicesButtonProps = usePropsFor(DevicesButton);
   const hangUpButtonProps = usePropsFor(EndCallButton);
 
-  const theme = useTheme();
-
-  const screenShareButtonStyles = useMemo(
-    () => mergeButtonBaseStyles(checkedButtonOverrideStyles(theme, screenShareButtonProps.checked)),
-    [screenShareButtonProps.checked, theme.palette.themePrimary]
-  );
-
   const participantsButtonStyles = useMemo(
     () => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}),
     [props.increaseFlyoutItemSize]
@@ -170,7 +161,6 @@ export const CallControls = (props: CallControlsProps): JSX.Element => {
     <ScreenShareButton
       data-ui-id="call-composite-screenshare-button"
       {...screenShareButtonProps}
-      styles={screenShareButtonStyles}
       showLabel={!compactMode}
       disabled={options?.screenShareButton !== true && options?.screenShareButton?.disabled}
     />

packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { DefaultPalette as palette, IButtonStyles, IContextualMenuItemStyles, IStyle, Theme } from '@fluentui/react';
+import { IButtonStyles, IContextualMenuItemStyles, IStyle } from '@fluentui/react';
 import { DevicesButtonStyles, ParticipantsButtonStyles } from '@internal/react-components';
 
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
@@ -46,18 +46,6 @@ export const groupCallLeaveButtonCompressedStyle = {
   }
 };
 
-/**
- * @private
- */
-export const checkedButtonOverrideStyles = (theme: Theme, isChecked?: boolean): IButtonStyles => ({
-  rootChecked: {
-    background: theme.palette.themePrimary,
-    color: palette.white,
-    ':focus::after': { outlineColor: `${palette.white} !important` } // added !important to avoid override by FluentUI button styles
-  },
-  label: isChecked ? { color: palette.white } : {}
-});
-
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *

packages/storybook/stories/ControlBar/__snapshots__/ControlBar.stories.storyshot

@@ -157,7 +157,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               onMouseLeave={[Function]}
             >
               <button
-                className="ms-Button ms-Button--default root-5"
+                className="ms-Button ms-Button--default root-13"
                 data-is-focusable={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -248,7 +248,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-37 css-13 ms-Button-menuIcon menuIcon-10"
+                    className="ms-Icon root-37 css-14 ms-Button-menuIcon menuIcon-10"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -313,7 +313,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-37 css-13 ms-Button-menuIcon menuIcon-10"
+                    className="ms-Icon root-37 css-14 ms-Button-menuIcon menuIcon-10"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -336,7 +336,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               onMouseLeave={[Function]}
             >
               <button
-                className="ms-Button ms-Button--default root-14"
+                className="ms-Button ms-Button--default root-15"
                 data-is-focusable={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}

packages/storybook/stories/Examples/TeamsInterop/__snapshots__/Lobby.stories.storyshot

@@ -141,9 +141,14 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                       </span>
                     </i>
                     <span
-                      className="#323130 css-23"
+                      className="ms-Button-textContainer textContainer-16"
                     >
-                      Turn off
+                      <span
+                        className="ms-Button-label label-18"
+                        id="id__2"
+                      >
+                        Turn off
+                      </span>
                     </span>
                   </span>
                 </button>
@@ -198,9 +203,14 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                       </span>
                     </i>
                     <span
-                      className="#323130 css-23"
+                      className="ms-Button-textContainer textContainer-16"
                     >
-                      Mute
+                      <span
+                        className="ms-Button-label label-18"
+                        id="id__6"
+                      >
+                        Mute
+                      </span>
                     </span>
                   </span>
                 </button>
@@ -214,7 +224,7 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                 onMouseLeave={[Function]}
               >
                 <button
-                  className="ms-Button ms-Button--default root-24"
+                  className="ms-Button ms-Button--default root-22"
                   data-is-focusable={true}
                   onClick={[Function]}
                   onKeyDown={[Function]}
@@ -252,13 +262,18 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                       </span>
                     </i>
                     <span
-                      className="#323130 css-23"
+                      className="ms-Button-textContainer textContainer-16"
                     >
-                      Devices
+                      <span
+                        className="ms-Button-label label-18"
+                        id="id__10"
+                      >
+                        Devices
+                      </span>
                     </span>
                     <i
                       aria-hidden={true}
-                      className="ms-Icon root-37 css-26 ms-Button-menuIcon menuIcon-25"
+                      className="ms-Icon root-37 css-24 ms-Button-menuIcon menuIcon-23"
                       data-icon-name="ChevronDown"
                       hidden={true}
                       style={
@@ -281,7 +296,7 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                 onMouseLeave={[Function]}
               >
                 <button
-                  className="ms-Button ms-Button--default root-27"
+                  className="ms-Button ms-Button--default root-25"
                   data-is-focusable={true}
                   onClick={[Function]}
                   onKeyDown={[Function]}
@@ -325,9 +340,14 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby
                       </span>
                     </i>
                     <span
-                      className="#323130 css-30"
+                      className="ms-Button-textContainer textContainer-16"
                     >
-                      Leave
+                      <span
+                        className="ms-Button-label label-26"
+                        id="id__14"
+                      >
+                        Leave
+                      </span>
                     </span>
                   </span>
                 </button>