Fix control bar button label styling. Fix screenshare button hover and checked styling. (#1178)

Author: JamesBurnside

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.
  *