From 492ee7cde526ca57fa3577609ea216bd3a11ef50 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Fri, 16 Sep 2022 16:47:40 +0200 Subject: [PATCH 1/5] fix(Toolbar): close previous submenu when opening another submenu --- .../ToolbarExampleMenuWithSubmenu.shorthand.steps.ts | 6 ++++-- .../Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx | 7 +++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts index 827a3308a91840..535d87fcfe1800 100644 --- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts @@ -8,8 +8,10 @@ const config: ScreenerTestsConfig = { builder .click(`.${toolbarItemWrapperClassName} button`) .snapshot('Shows menu') - .keys(`.${toolbarMenuItemClassName}:nth-child(1)`, keys.rightArrow) - .snapshot('Opens submenu'), + .keys(`.${toolbarMenuItemClassName}:has-text("Play")`, keys.rightArrow) + .snapshot('Opens submenu') + .click(`.${toolbarMenuItemClassName}:has-text("Appearance")`) + .snapshot('Opens second submenu'), ], }; diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx index ed0afee0b44893..73de013b747bbd 100644 --- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx +++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx @@ -43,6 +43,13 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { items: ['Play with audio', { content: 'Play with video', key: 'playVideo', menu: ['HD', 'Full HD'] }], }, }, + { + key: 'appearance', + content: 'Appearance', + menu: { + items: ['Centered Layout', 'Zen', 'Zoom In', 'Zoom Out'], + }, + }, { key: 'pause', content: 'Pause', icon: }, { key: 'divider', kind: 'divider' }, 'Without icon', From 946eccf1a59fe373bb40ca141dbf2c5a4382f146 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Fri, 16 Sep 2022 18:18:13 +0200 Subject: [PATCH 2/5] bump screener --- .../Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts index 535d87fcfe1800..5cfcd9677e6724 100644 --- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts @@ -9,7 +9,7 @@ const config: ScreenerTestsConfig = { .click(`.${toolbarItemWrapperClassName} button`) .snapshot('Shows menu') .keys(`.${toolbarMenuItemClassName}:has-text("Play")`, keys.rightArrow) - .snapshot('Opens submenu') + .snapshot('Opens first submenu') .click(`.${toolbarMenuItemClassName}:has-text("Appearance")`) .snapshot('Opens second submenu'), ], From 1487c0e2a71559f988bae177bc57f4f803516d40 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 26 Sep 2022 12:54:26 +0200 Subject: [PATCH 3/5] fix screener test selectors --- .../Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts | 4 ++-- .../Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts index 5cfcd9677e6724..13c398590c9555 100644 --- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts +++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts @@ -8,9 +8,9 @@ const config: ScreenerTestsConfig = { builder .click(`.${toolbarItemWrapperClassName} button`) .snapshot('Shows menu') - .keys(`.${toolbarMenuItemClassName}:has-text("Play")`, keys.rightArrow) + .keys(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Play`, keys.rightArrow) .snapshot('Opens first submenu') - .click(`.${toolbarMenuItemClassName}:has-text("Appearance")`) + .click(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Appearance`) .snapshot('Opens second submenu'), ], }; diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx index 73de013b747bbd..fba7fbc631781f 100644 --- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx +++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx @@ -37,6 +37,7 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { menu: [ { key: 'play', + id: 'ToolbarExampleMenuWithSubmenu_Play', content: 'Play', icon: , menu: { @@ -45,6 +46,7 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { }, { key: 'appearance', + id: 'ToolbarExampleMenuWithSubmenu_Appearance', content: 'Appearance', menu: { items: ['Centered Layout', 'Zen', 'Zoom In', 'Zoom Out'], From 7c2d8e907a778c14edeaad396974758975c4fe3a Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 26 Sep 2022 13:27:56 +0200 Subject: [PATCH 4/5] Listen for outside click in capture --- .../src/components/Toolbar/ToolbarMenuItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx index ebb0a36e017800..3a78c14b67dbdb 100644 --- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx @@ -416,7 +416,12 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe - + ); }} From 84e0df1e606c165bfd660fd5a57a2d3731644227 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 26 Sep 2022 17:01:07 +0200 Subject: [PATCH 5/5] changelog --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index e74a4e16beb1ca..7f34dc0bb10b0b 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `FocusZone` to reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` @yuanboxue-amber ([#24463](https://github.com/microsoft/fluentui/pull/24463)) - Change `useLayoutEffect` in `Dropdown` to `useIsomorphicLayoutEffect` @marwan38 ([#24559](https://github.com/microsoft/fluentui/pull/24559)) - Fix styling mutation when merging themes in `Dropdown` @petrjaros ([#24787](https://github.com/microsoft/fluentui/pull/24787)) +- Fix `Toolbar` submenu closing when another submenu is opened @miroslavstastny ([#24836](https://github.com/microsoft/fluentui/pull/24836)) ### Performance - Avoid memory trashing in `felaExpandCssShorthandsPlugin` @layershifter ([#24663](https://github.com/microsoft/fluentui/pull/24663))