From 749fe834455cc3e7b86326fbc5ad418e7868bed7 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com> Date: Fri, 23 Sep 2022 14:40:21 -0500 Subject: [PATCH] feat: add controls and example for context menu (#12012) * feat: add controls and example for context menu * chore: minor copy fix * Update packages/react/src/components/ContextMenu/ContextMenu-story.js Co-authored-by: Taylor Jones * fix: update stories * fix: load story source Co-authored-by: Taylor Jones Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../ContextMenu/ContextMenu-story.js | 93 ------- .../ContextMenu/ContextMenu.stories.js | 232 ++++++++++++++++++ 2 files changed, 232 insertions(+), 93 deletions(-) delete mode 100644 packages/react/src/components/ContextMenu/ContextMenu-story.js create mode 100644 packages/react/src/components/ContextMenu/ContextMenu.stories.js diff --git a/packages/react/src/components/ContextMenu/ContextMenu-story.js b/packages/react/src/components/ContextMenu/ContextMenu-story.js deleted file mode 100644 index 24df6f564b24..000000000000 --- a/packages/react/src/components/ContextMenu/ContextMenu-story.js +++ /dev/null @@ -1,93 +0,0 @@ -/** - * Copyright IBM Corp. 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import { InlineNotification } from '../Notification'; - -import Menu from '../Menu'; -import { StoryFrame, buildMenu } from '../Menu/_storybook-utils'; - -import { useContextMenu } from './index'; - -export default { - title: 'Experimental/unstable_Menu/ContextMenu', - component: Menu, -}; - -const Story = (items) => { - const menuProps = useContextMenu(); - - const renderedItems = buildMenu(items); - - return ( - - - Context Menu -

- Right-click anywhere on this page to access an example implementation - of this component. -

- - {renderedItems} - - ); -}; - -export const _ContextMenu = () => - Story([ - { - type: 'item', - label: 'Share with', - children: [ - { - type: 'radiogroup', - label: 'Share with', - items: ['None', 'Product team', 'Organization', 'Company'], - initialSelectedItem: 'Product team', - }, - ], - }, - { type: 'divider' }, - { type: 'item', label: 'Cut', shortcut: '⌘X' }, - { type: 'item', label: 'Copy', shortcut: '⌘C' }, - { type: 'item', label: 'Copy path', shortcut: '⌥⌘C' }, - { type: 'item', label: 'Paste', shortcut: '⌘V', disabled: true }, - { type: 'item', label: 'Duplicate' }, - { type: 'divider' }, - { type: 'selectable', label: 'Publish', initialChecked: true }, - { type: 'divider' }, - { type: 'item', label: 'Rename', shortcut: '↩︎' }, - { type: 'item', label: 'Delete', shortcut: '⌘⌫', kind: 'danger' }, - ]); -_ContextMenu.storyName = 'ContextMenu'; - -export const _MultipleGroups = () => - Story([ - { - type: 'group', - label: 'Font style', - children: [ - { type: 'selectable', label: 'Bold' }, - { type: 'selectable', label: 'Italic' }, - ], - }, - { type: 'divider' }, - { - type: 'radiogroup', - label: 'Text color', - items: ['Black', 'Blue', 'Red', 'Green'], - initialSelectedItem: 'Black', - }, - { type: 'divider' }, - { - type: 'radiogroup', - label: 'Text decoration', - items: ['None', 'Overline', 'Line-through', 'Underline'], - initialSelectedItem: 'None', - }, - ]); -_MultipleGroups.storyName = 'MultipleGroups'; diff --git a/packages/react/src/components/ContextMenu/ContextMenu.stories.js b/packages/react/src/components/ContextMenu/ContextMenu.stories.js new file mode 100644 index 000000000000..d83bd233277b --- /dev/null +++ b/packages/react/src/components/ContextMenu/ContextMenu.stories.js @@ -0,0 +1,232 @@ +/** + * Copyright IBM Corp. 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import { InlineNotification } from '../Notification'; +import CodeSnippet from '../CodeSnippet'; +import UnorderedList from '../UnorderedList'; +import ListItem from '../ListItem'; + +import Menu, { + MenuDivider, + MenuGroup, + MenuItem, + MenuRadioGroup, + MenuSelectableItem, +} from '../Menu'; + +import { StoryFrame, buildMenu } from '../Menu/_storybook-utils'; + +import { useContextMenu } from './index'; + +export default { + title: 'Experimental/unstable_Menu/ContextMenu', + component: Menu, + subcomponents: { + MenuItem, + MenuGroup, + MenuDivider, + MenuSelectableItem, + MenuRadioGroup, + }, +}; + +const Text = () => ( +
+

Right click anywere in the story frame

+
+

+ The {`

`} props are set + using the hook{' '} + {`useContextMenu()`}. This + determines the position the menu should have on right click and handles + opening. Props that the{' '} + {`useContextMenu()`} + hook does not set and can be configured by the user are: + + size + onClose + className + id + target + +

+

+ The + {``} and + {``} + components accept children items for nested menus, although the{' '} + {``} component can also + be used as a stand alone item. The other types of menu items ({' '} + {``}, + {``}, + {``}) do not + accept children. The{' '} + {``} accepts an + array of items to display as a group of single choice selection. +

+
+); + +export const _ContextMenu = () => { + const menuProps = useContextMenu(); + + const items = [ + { + type: 'item', + label: 'Share with', + children: [ + { + type: 'radiogroup', + label: 'Share with', + items: ['None', 'Product team', 'Organization', 'Company'], + initialSelectedItem: 'Product team', + }, + ], + }, + { type: 'divider' }, + { type: 'item', label: 'Cut', shortcut: '⌘X' }, + { type: 'item', label: 'Copy', shortcut: '⌘C' }, + { type: 'item', label: 'Copy path', shortcut: '⌥⌘C' }, + { type: 'item', label: 'Paste', shortcut: '⌘V', disabled: true }, + { type: 'item', label: 'Duplicate' }, + { type: 'divider' }, + { type: 'selectable', label: 'Publish', initialChecked: true }, + { type: 'divider' }, + { type: 'item', label: 'Rename', shortcut: '↩︎' }, + { type: 'item', label: 'Delete', shortcut: '⌘⌫', kind: 'danger' }, + ]; + + const renderedItems = buildMenu(items); + + return ( + + + Context Menu +

+ Right-click anywhere on this page to access an example implementation + of this component. +

+ + {renderedItems} + + ); +}; + +export const _MultipleGroups = () => { + const menuProps = useContextMenu(); + + const items = [ + { + type: 'group', + label: 'Font style', + children: [ + { type: 'selectable', label: 'Bold' }, + { type: 'selectable', label: 'Italic' }, + ], + }, + { type: 'divider' }, + { + type: 'radiogroup', + label: 'Text color', + items: ['Black', 'Blue', 'Red', 'Green'], + initialSelectedItem: 'Black', + }, + { type: 'divider' }, + { + type: 'radiogroup', + label: 'Text decoration', + items: ['None', 'Overline', 'Line-through', 'Underline'], + initialSelectedItem: 'None', + }, + ]; + + const renderedItems = buildMenu(items); + + return ( + + + Context Menu +

+ Right-click anywhere on this page to access an example implementation + of this component. +

+ + {renderedItems} + + ); +}; + +export const _Playground = (args) => { + const props = useContextMenu(); + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +_Playground.argTypes = { + size: { + control: { type: 'select' }, + options: ['sm', 'md', 'lg'], + }, + children: { + control: false, + }, + className: { + control: false, + }, + id: { + control: false, + }, + level: { + control: false, + }, + open: { + control: false, + }, + onClose: { + control: false, + }, + target: { + control: false, + }, + x: { + control: false, + }, + y: { + control: false, + }, +};