From 1f3fccee6843b10360d5a695aecf9d8584ccf414 Mon Sep 17 00:00:00 2001 From: Enrico Date: Thu, 29 Sep 2022 12:25:36 +0200 Subject: [PATCH 01/12] Add 4px border radius when hovering on menu item --- .../src/themes/teams/components/Menu/menuItemWrapperStyles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts index 0bf91dec1764c..6d441a98a35bb 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts @@ -171,6 +171,7 @@ export const menuItemWrapperStyles: ComponentSlotStylesPrepared Date: Thu, 29 Sep 2022 12:29:43 +0200 Subject: [PATCH 02/12] Add 4px padding right and left to the menu --- .../src/themes/teams/components/Menu/menuStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts index d199ec3097b83..78dc03e9c4c3c 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts @@ -23,7 +23,7 @@ export const menuStyles: ComponentSlotStylesPrepared Date: Thu, 29 Sep 2022 14:59:54 +0200 Subject: [PATCH 03/12] Add subMenuIconColor to menu variables --- .../src/themes/teams/components/Menu/menuVariables.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts index eff4511620f53..1a85c532442f4 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts @@ -97,6 +97,7 @@ export interface MenuVariables { indicatorColorHover: string; subMenuBorderColor: string; + subMenuIconColor: string; } export const menuVariables = (siteVars: any): MenuVariables => { @@ -203,5 +204,6 @@ export const menuVariables = (siteVars: any): MenuVariables => { indicatorColorHover: siteVars.colors.grey[500], subMenuBorderColor: siteVars.colorScheme.default.borderTransparent, + subMenuIconColor: siteVars.colors.brand[600], }; }; From 6ca08ee63f5f4886baf0a0e03ffeec76181a8c76 Mon Sep 17 00:00:00 2001 From: Enrico Date: Thu, 29 Sep 2022 15:02:16 +0200 Subject: [PATCH 04/12] Add color to icons when hovering on menuItem --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts index c6a9712f64e42..3d78d224ea9fe 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts @@ -11,6 +11,8 @@ export const verticalPillsBottomMargin = pxToRem(5); export const horizontalPillsRightMargin = pxToRem(8); export const verticalPointingBottomMargin = pxToRem(12); +export const menuItemIconClassName = 'ui-menu__itemicon'; + export const underlinedItem = (color: string): ICSSInJSStyle => ({ paddingBottom: 0, borderBottom: `solid ${pxToRem(4)} ${color}`, @@ -200,7 +202,13 @@ export const menuItemStyles: ComponentSlotStylesPrepared.${menuItemIconClassName}`]: { + color: v.subMenuIconColor, + ...getIconFillOrOutlineStyles({ outline: false }), + }, + }), ...(!disabled && { ...(iconOnly && getIconFillOrOutlineStyles({ outline: false })), ...(primary From 5b71b97b8c86a164ae7810859c7867193e2f5e46 Mon Sep 17 00:00:00 2001 From: Enrico Date: Thu, 29 Sep 2022 17:12:37 +0200 Subject: [PATCH 05/12] Add changelog entry --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 1fab5f7fe2691..a1b549cd4b778 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974)) - Add `FocusTrapZone` prop `preventScrollOnRestoreFocus` to prevent scroll on focus when `FocusTrapZone` releases @yuanboxue-amber ([#24632](https://github.com/microsoft/fluentui/pull/24632)) - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908)) +- Restyling v0 Menu to match v9 Menu @GianoglioEnrico ([#25012](https://github.com/microsoft/fluentui/pull/25012)) ### Fixes - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356)) From 6251070aff4a06161bfb7c7ccf066a052e1eb19f Mon Sep 17 00:00:00 2001 From: Enrico Date: Mon, 3 Oct 2022 16:41:40 +0200 Subject: [PATCH 06/12] Change icon color when hovering only for Teams theme --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts index 3d78d224ea9fe..f0ed4cb0b5aca 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts @@ -203,10 +203,12 @@ export const menuItemStyles: ComponentSlotStylesPrepared.${menuItemIconClassName}`]: { color: v.subMenuIconColor, - ...getIconFillOrOutlineStyles({ outline: false }), + ...(v.subMenuIconColor && getIconFillOrOutlineStyles({ outline: false })), }, }), ...(!disabled && { From be6aaf46fcb221ffa443ca12e0cdcbeedc0db441 Mon Sep 17 00:00:00 2001 From: Enrico Date: Mon, 3 Oct 2022 16:46:34 +0200 Subject: [PATCH 07/12] Unchanged color in dark and high contrast themes --- .../src/themes/teams-dark/components/Menu/menuVariables.ts | 1 + .../themes/teams-high-contrast/components/Menu/menuVariables.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts index d7ddc8797f074..fbfe784e52195 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -53,4 +53,5 @@ export const menuVariables = (siteVars: any): Partial => ({ activePrimaryIndicatorColor: siteVars.colors.white, activePrimaryVerticalIndicatorColor: siteVars.colors.white, indicatorColorHover: siteVars.colors.white, + subMenuIconColor: undefined, }); diff --git a/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index 7b43878ced9aa..5455f2fb54e9e 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -57,4 +57,5 @@ export const menuVariables = (siteVars: any): Partial => ({ borderColorFocus: siteVars.colors.black, outlineColorFocus: siteVars.accessibleCyan, + subMenuIconColor: undefined, }); From 68ab66100df3e562655368ec6cdc10950c9ca8a1 Mon Sep 17 00:00:00 2001 From: Enrico Date: Tue, 4 Oct 2022 00:47:19 +0200 Subject: [PATCH 08/12] Use a token for the icon color --- .../src/themes/teams-dark/components/Menu/menuVariables.ts | 1 - .../themes/teams-high-contrast/components/Menu/menuVariables.ts | 1 - .../src/themes/teams/components/Menu/menuVariables.ts | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts index fbfe784e52195..d7ddc8797f074 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -53,5 +53,4 @@ export const menuVariables = (siteVars: any): Partial => ({ activePrimaryIndicatorColor: siteVars.colors.white, activePrimaryVerticalIndicatorColor: siteVars.colors.white, indicatorColorHover: siteVars.colors.white, - subMenuIconColor: undefined, }); diff --git a/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index 5455f2fb54e9e..7b43878ced9aa 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -57,5 +57,4 @@ export const menuVariables = (siteVars: any): Partial => ({ borderColorFocus: siteVars.colors.black, outlineColorFocus: siteVars.accessibleCyan, - subMenuIconColor: undefined, }); diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts index 1a85c532442f4..d2a450a25ecb1 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts @@ -204,6 +204,6 @@ export const menuVariables = (siteVars: any): MenuVariables => { indicatorColorHover: siteVars.colors.grey[500], subMenuBorderColor: siteVars.colorScheme.default.borderTransparent, - subMenuIconColor: siteVars.colors.brand[600], + subMenuIconColor: siteVars.colorScheme.brand.foregroundHover, }; }; From ee04c2167105189dfa11e04913211de959b768ea Mon Sep 17 00:00:00 2001 From: Enrico Date: Tue, 4 Oct 2022 01:05:26 +0200 Subject: [PATCH 09/12] Removed check not needed --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts index f0ed4cb0b5aca..50a351b5b1ad3 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts @@ -208,7 +208,7 @@ export const menuItemStyles: ComponentSlotStylesPrepared.${menuItemIconClassName}`]: { color: v.subMenuIconColor, - ...(v.subMenuIconColor && getIconFillOrOutlineStyles({ outline: false })), + ...getIconFillOrOutlineStyles({ outline: false }), }, }), ...(!disabled && { From 58d852f61807b7017cc581eb479e81134faee9eb Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Tue, 25 Oct 2022 16:08:13 +0200 Subject: [PATCH 10/12] Removed useless check --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts index 50a351b5b1ad3..22e15aa682699 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts @@ -202,8 +202,8 @@ export const menuItemStyles: ComponentSlotStylesPrepared.${menuItemIconClassName}`]: { From e571984217d7f968242e0077974e30ca99aeecc1 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Mon, 31 Oct 2022 14:27:22 +0100 Subject: [PATCH 11/12] Importing menuItemIconClassName --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts index 22e15aa682699..2a46b488846dd 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts @@ -6,13 +6,12 @@ import { getColorScheme } from '../../colors'; import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles'; import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; import { getBorderFocusStyles } from '../../getBorderFocusStyles'; +import { menuItemIconClassName } from '../../../../components/Menu/MenuItemIcon'; export const verticalPillsBottomMargin = pxToRem(5); export const horizontalPillsRightMargin = pxToRem(8); export const verticalPointingBottomMargin = pxToRem(12); -export const menuItemIconClassName = 'ui-menu__itemicon'; - export const underlinedItem = (color: string): ICSSInJSStyle => ({ paddingBottom: 0, borderBottom: `solid ${pxToRem(4)} ${color}`, From a7d3608c2b5de752a32916931b8ae825c41dcaf2 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Mon, 31 Oct 2022 15:06:54 +0100 Subject: [PATCH 12/12] Empty-Commit --- packages/react-components/react-persona/MIGRATION.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 57e145ba51c7a..697c575bbd736 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -13,7 +13,6 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - ``` ``` - - `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}` - `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}`