This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ToolbarMenuItem): add menu prop (#1984)
* -init * -cleanups -added TODO * -fixed styles for submenu indicator * -fixed tests -added example * -added submenuIndicator defaultProp * -added example -fixed typings * -fixed issues * -added onItemClick in the example * -fixes -refactorings on the behavior * -fixed broken popup * -fixed popup * -updated changelog * -fix test * -fixed popup issues * -fixed issues * -fixed closing of the menu when enter/spacebar is pressed * -added toolbarMenuBehavior * -added test * -fixed click on popup closing menus * -reverted inline popup in ToolbarItem * -removed inline popups * -disabled non-working tests * -fixed popups onClick and onKeyDown * -reverted disabled tests * -fixed not closing first open menu * -fixed typings * -fixed typings * -fixed typings * -reverted typings changes * -addressed PR comments * -added e2e tests * -added more e2e for popups in submenus -fixed typing errors * -fixed typing errors * -reverted changes * fix typings * -updated test-cirtucalrs/config * add circulars snapshot
- Loading branch information
Showing
21 changed files
with
857 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
.../src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
46 changes: 46 additions & 0 deletions
46
docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Oops, something went wrong.