feat(ToolbarMenuItem): add menu prop

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))
+
 <!--------------------------------[ v0.40.1 ]------------------------------- -->
 ## [v0.40.1](https://github.com/stardust-ui/react/tree/v0.40.1) (2019-10-18)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.40.0...v0.40.1)

build/gulp/tasks/test-circulars/config.ts

@@ -16,4 +16,22 @@ export const cyclesToSkip = [
     reactPackageDist('components/Reaction/Reaction.js'),
     reactPackageDist('components/Reaction/ReactionGroup.js'),
   ],
+  [
+    reactPackageDist('components/Toolbar/ToolbarMenu.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuRadioGroup.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuItem.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenu.js'),
+  ],
+  [
+    reactPackageDist('components/Toolbar/ToolbarMenuItem.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenu.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuRadioGroup.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuItem.js'),
+  ],
+  [
+    reactPackageDist('components/Toolbar/ToolbarMenuRadioGroup.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuItem.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenu.js'),
+    reactPackageDist('components/Toolbar/ToolbarMenuRadioGroup.js'),
+  ],
 ]

docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts

@@ -0,0 +1,15 @@
+import { ToolbarItem, ToolbarMenuItem } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .click(`.${ToolbarItem.className}:nth-child(1)`)
+        .snapshot('Shows menu')
+        .keys(`.${ToolbarMenuItem.className}:nth-child(1)`, keys.rightArrow)
+        .snapshot('Opens submenu'),
+  ],
+}
+
+export default config

docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx

@@ -0,0 +1,46 @@
+import { createCallbackLogFormatter } from '@stardust-ui/code-sandbox'
+import { useLogKnob } from '@stardust-ui/docs-components'
+import { Toolbar } from '@stardust-ui/react'
+import * as React from 'react'
+
+const ToolbarExampleMenuWithSubmenuShorthand = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  const onMenuOpenChange = useLogKnob(
+    'onMenuOpenChange',
+    (e, { menuOpen }) => setMenuOpen(menuOpen),
+    createCallbackLogFormatter(['menuOpen']),
+  )
+
+  return (
+    <Toolbar
+      items={[
+        {
+          key: 'more',
+          icon: 'more',
+          active: menuOpen,
+          menu: [
+            {
+              key: 'play',
+              content: 'Play',
+              icon: 'play',
+              menu: {
+                items: [
+                  'Play with audio',
+                  { content: 'Play with video', key: 'playVideo', menu: ['HD', 'Full HD'] },
+                ],
+              },
+            },
+            { key: 'pause', content: 'Pause', icon: 'pause' },
+            { key: 'divider', kind: 'divider' },
+            'Without icon',
+          ],
+          menuOpen,
+          onMenuOpenChange,
+        },
+      ]}
+    />
+  )
+}
+
+export default ToolbarExampleMenuWithSubmenuShorthand

docs/src/examples/components/Toolbar/Content/index.tsx

@@ -42,6 +42,11 @@ const Content = () => (
       description="Toolbar item can open a menu which can contain radio groups."
       examplePath="components/Toolbar/Content/ToolbarExampleMenuRadioGroup"
     />
+    <ComponentExample
+      title="Toolbar can contain a submenu in a menu"
+      description="Toolbar item can open a menu with submenu."
+      examplePath="components/Toolbar/Content/ToolbarExampleMenuWithSubmenu"
+    />
     <ComponentExample
       title="Toolbar can contain custom content"
       toolbarAriaLabel="Example Toolbar can contain custom content"

e2e/tests/popupInSubmenuInToolbarMenu-example.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { Toolbar, ToolbarItemShorthandKinds, Input } from '@stardust-ui/react'
+
+export const selectors = {
+  toolbarMenuId: 'toolbarMenu',
+  menuButtonId: 'menuButton',
+  popupTriggerId: 'popupTrigger',
+  popupElementId: 'popupElement',
+  submenuTriggerId: 'submenuTrigger',
+  dummyButtonId: 'dummyButton',
+}
+
+const ToolbarExamplePopupInMenu = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  return (
+    <>
+      <Toolbar
+        items={[
+          {
+            id: selectors.menuButtonId,
+            key: 'menu',
+            icon: 'more',
+            active: menuOpen,
+            menu: {
+              id: selectors.toolbarMenuId,
+              items: [
+                {
+                  id: selectors.submenuTriggerId,
+                  key: 'submenu',
+                  content: 'Open Submenu',
+                  menu: [
+                    {
+                      content: 'Open Popup',
+                      id: selectors.popupTriggerId,
+                      key: 'popup',
+                      popup: {
+                        content: (
+                          <Input
+                            id={selectors.popupElementId}
+                            icon="search"
+                            placeholder="Search..."
+                          />
+                        ),
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            menuOpen,
+            onMenuOpenChange: (e, { menuOpen }) => {
+              setMenuOpen(menuOpen)
+            },
+          },
+          {
+            id: selectors.dummyButtonId,
+            key: 'italic',
+            kind: 'toggle' as ToolbarItemShorthandKinds,
+            icon: { name: 'italic', outline: true },
+          },
+        ]}
+      />
+    </>
+  )
+}
+
+export default ToolbarExamplePopupInMenu

e2e/tests/popupInSubmenuInToolbarMenu-test.ts

@@ -0,0 +1,132 @@
+import { selectors } from './popupInSubmenuInToolbarMenu-example'
+
+const toolbarMenuId = `#${selectors.toolbarMenuId}`
+const menuButtonId = `#${selectors.menuButtonId}`
+const popupTriggerId = `#${selectors.popupTriggerId}`
+const submenuTriggerId = `#${selectors.submenuTriggerId}`
+const popupElementId = `#${selectors.popupElementId}`
+const dummyButtonId = `#${selectors.dummyButtonId}`
+
+describe('Popup in ToolbarMenu', () => {
+  beforeEach(async () => {
+    await e2e.gotoTestCase(__filename, menuButtonId)
+  })
+
+  it('Popup can be opened using mouse', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    expect(await e2e.exists(popupElementId)).toBe(true)
+  })
+
+  it('Popup can be opened using keyboard', async () => {
+    // focuses menu button
+    await e2e.pressKey('Tab')
+
+    // opens menu
+    await e2e.pressKey('Enter')
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.pressKey('Enter')
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.pressKey('Enter')
+
+    expect(await e2e.exists(popupElementId)).toBe(true)
+  })
+
+  it('Opening Popup results in first element to be focused', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    expect(await e2e.isFocused(popupElementId)).toBe(true)
+  })
+
+  it('Tab when Popup is focused does not result in hiding the Popup', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    await e2e.pressKey('Tab')
+
+    expect(await e2e.exists(popupElementId)).toBe(true)
+  })
+
+  it('Click inside Popup does not hide Popup', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    await e2e.clickOn(popupElementId)
+
+    expect(await e2e.exists(popupElementId)).toBe(true)
+  })
+
+  it('Popup is closed when clicking outside of menu and popup', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    await e2e.clickOn(dummyButtonId)
+
+    expect(await e2e.exists(popupElementId)).toBe(false)
+    expect(await e2e.exists(popupTriggerId)).toBe(false)
+  })
+
+  it('Click outside of Popup but inside of Menu closes Popup but leaves Menu open', async () => {
+    // opens menu
+    await e2e.clickOn(menuButtonId)
+    expect(await e2e.exists(toolbarMenuId)).toBe(true)
+
+    // opens submenu
+    await e2e.clickOn(submenuTriggerId)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+
+    // opens Popup
+    await e2e.clickOn(popupTriggerId)
+
+    await e2e.clickOn(popupTriggerId)
+
+    expect(await e2e.exists(popupElementId)).toBe(false)
+    expect(await e2e.exists(popupTriggerId)).toBe(true)
+  })
+})

e2e/tests/submenuInToolbarMenu-example.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Toolbar } from '@stardust-ui/react'
+
+export const selectors = {
+  toolbarMenuId: 'toolbarMenu',
+  toolbarMenuSubmenuId: 'toolbarMenuSubmenu',
+  moreButtonId: 'moreButton',
+  playId: 'play',
+  playVideoId: 'playVideo',
+  hdId: 'hd',
+}
+
+const ToolbarExampleMenuWithSubmenuShorthand = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  const onMenuOpenChange = (e, { menuOpen }) => setMenuOpen(menuOpen)
+
+  return (
+    <Toolbar
+      items={[
+        {
+          id: selectors.moreButtonId,
+          key: 'more',
+          icon: 'more',
+          active: menuOpen,
+          menu: {
+            id: selectors.toolbarMenuId,
+            items: [
+              {
+                key: 'play',
+                content: 'Play',
+                icon: 'play',
+                id: selectors.playId,
+                menu: {
+                  id: selectors.toolbarMenuSubmenuId,
+                  items: [
+                    'Play with audio',
+                    {
+                      content: 'Play with video',
+                      key: 'playVideo',
+                      id: selectors.playVideoId,
+                      menu: [{ content: 'HD', id: selectors.hdId, key: 'HD' }, 'Full HD'],
+                    },
+                  ],
+                },
+              },
+              { key: 'pause', content: 'Pause', icon: 'pause' },
+              { key: 'divider', kind: 'divider' },
+              'Without icon',
+            ],
+          },
+          menuOpen,
+          onMenuOpenChange,
+        },
+      ]}
+    />
+  )
+}
+
+export default ToolbarExampleMenuWithSubmenuShorthand