diff --git a/change/@internal-react-components-3fcd47f5-2110-43b7-be7f-55d8b54ca073.json b/change/@internal-react-components-3fcd47f5-2110-43b7-be7f-55d8b54ca073.json new file mode 100644 index 00000000000..e5e28c0b2fa --- /dev/null +++ b/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" +} diff --git a/change/@internal-react-composites-90f8fc03-9c00-426e-a0d9-44028a8259ed.json b/change/@internal-react-composites-90f8fc03-9c00-426e-a0d9-44028a8259ed.json new file mode 100644 index 00000000000..1f975c2e24e --- /dev/null +++ b/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" +} diff --git a/change/@internal-storybook-b2ea3718-169c-4e83-a350-a8e3d343a8ed.json b/change/@internal-storybook-b2ea3718-169c-4e83-a350-a8e3d343a8ed.json new file mode 100644 index 00000000000..43c599b1af3 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/src/components/ControlBarButton.tsx b/packages/react-components/src/components/ControlBarButton.tsx index 989d7c34a89..60929e0d830 100644 --- a/packages/react-components/src/components/ControlBarButton.tsx +++ b/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 ( - - {labelText} - - ); - }, [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 => { + > + {props.showLabel ? labelText : <>} + ); }; diff --git a/packages/react-components/src/components/ScreenShareButton.tsx b/packages/react-components/src/components/ScreenShareButton.tsx index e1f21af223d..4286f0a41d7 100644 --- a/packages/react-components/src/components/ScreenShareButton.tsx +++ b/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 ( /> ); }; + +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 } +}); diff --git a/packages/react-components/src/components/styles/ControlBar.styles.ts b/packages/react-components/src/components/styles/ControlBar.styles.ts index 8db4359190e..23fb20a0ec1 100644 --- a/packages/react-components/src/components/styles/ControlBar.styles.ts +++ b/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. * diff --git a/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx b/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx index 5b233ac767b..dedcc23f892 100644 --- a/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx +++ b/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx @@ -11,8 +11,7 @@ import { MicrophoneButton, ParticipantMenuItemsCallback, ParticipantsButton, - ScreenShareButton, - useTheme + ScreenShareButton } from '@internal/react-components'; import React, { useMemo } from 'react'; import { useLocale } from '../../localization'; @@ -20,7 +19,6 @@ 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 => { diff --git a/packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts b/packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts index fa038a9daf8..3dfb1c873c6 100644 --- a/packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts +++ b/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. * diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/participant-menu-item-flyout-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/participant-menu-item-flyout-Desktop-Chrome-linux.png index 7779235caa7..8aff5c5c9ad 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/participant-menu-item-flyout-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/participant-menu-item-flyout-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-0-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-0-Desktop-Chrome-linux.png index 6622c0077e9..bf463a1c8e6 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-0-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-0-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-1-Desktop-Chrome-linux.png index e6e977b7ced..f25154d1dc6 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-1-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-camera-toggled-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-camera-toggled-Desktop-Chrome-linux.png index b2b1d305507..6ff30f74d05 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-camera-toggled-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-camera-toggled-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-0-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-0-Desktop-Chrome-linux.png index 2a67e621817..8f0b99d624d 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-0-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-0-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-1-Desktop-Chrome-linux.png index 3d2cf1c9722..c592fbb40b9 100644 Binary files a/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-participants-flyout-1-Desktop-Chrome-linux.png differ diff --git a/packages/storybook/stories/ControlBar/__snapshots__/ControlBar.stories.storyshot b/packages/storybook/stories/ControlBar/__snapshots__/ControlBar.stories.storyshot index 4f8e9e2ef1e..0b5f8961efc 100644 --- a/packages/storybook/stories/ControlBar/__snapshots__/ControlBar.stories.storyshot +++ b/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]} > - Mute + + Mute + @@ -214,7 +224,7 @@ exports[`storybook snapshot tests Storyshots Examples/Teams Interop/Lobby Lobby onMouseLeave={[Function]} > diff --git a/packages/storybook/stories/Examples/Themes/__snapshots__/TeamsTheme.stories.storyshot b/packages/storybook/stories/Examples/Themes/__snapshots__/TeamsTheme.stories.storyshot index 9815bffd378..bfad68f39f8 100644 --- a/packages/storybook/stories/Examples/Themes/__snapshots__/TeamsTheme.stories.storyshot +++ b/packages/storybook/stories/Examples/Themes/__snapshots__/TeamsTheme.stories.storyshot @@ -179,7 +179,7 @@ exports[`storybook snapshot tests Storyshots Examples/Themes/Teams Teams 1`] = ` onMouseLeave={[Function]} > @@ -285,27 +289,27 @@ exports[`storybook snapshot tests Storyshots Examples/Themes/Teams Teams 1`] = ` className="css-55" >
Michael