diff --git a/.changeset/thirty-seas-jog.md b/.changeset/thirty-seas-jog.md new file mode 100644 index 0000000000..4734de4e7f --- /dev/null +++ b/.changeset/thirty-seas-jog.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/menu': minor +'@twilio-paste/core': minor +--- + +- [menu] add menu item destructive variant diff --git a/packages/paste-core/components/menu/src/MenuItem.tsx b/packages/paste-core/components/menu/src/MenuItem.tsx index 784a82bb5b..6fe646f70a 100644 --- a/packages/paste-core/components/menu/src/MenuItem.tsx +++ b/packages/paste-core/components/menu/src/MenuItem.tsx @@ -7,17 +7,17 @@ import {MenuItemVariants} from './constants'; import {MenuGroupContext} from './MenuGroup'; export const StyledMenuItem = React.forwardRef( - ({element = 'STYLED_MENU_ITEM', ...props}, ref) => { + ({element = 'STYLED_MENU_ITEM', href, variant, tabIndex, children, ...props}, ref) => { return ( - {props.children} + {children} ); } diff --git a/packages/paste-core/components/menu/src/constants.ts b/packages/paste-core/components/menu/src/constants.ts index 4c78f5d6a7..736d6f43f7 100644 --- a/packages/paste-core/components/menu/src/constants.ts +++ b/packages/paste-core/components/menu/src/constants.ts @@ -1,4 +1,5 @@ export const MenuItemVariants = { DEFAULT: 'default', + DESTRUCTIVE: 'destructive', GROUP_ITEM: 'group_item', } as const; diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx index 94395ca3fd..b0cfd4ae67 100644 --- a/packages/paste-core/components/menu/stories/index.stories.tsx +++ b/packages/paste-core/components/menu/stories/index.stories.tsx @@ -27,6 +27,9 @@ const PlainMenu: React.FC = () => { Has a link + + Destructive link + Extensions @@ -276,6 +279,9 @@ export const MenuDropdown = (): React.ReactNode => { return ( Default + + Destructive + Disabled @@ -308,11 +314,44 @@ export const MenuDropdown = (): React.ReactNode => { + + Suuuuuuuuuuuuuuuuuuuuuuper long menu item + + + + + + + Got an icon + + + + + Got a right icon + + + + + + + + + + + Got two icons + + + + + } label="Search Options"> Search with Google + + Search with Yahoo + Search with Bing diff --git a/packages/paste-website/src/component-examples/MenuExamples.ts b/packages/paste-website/src/component-examples/MenuExamples.ts index 6927a9d041..026a92cfe6 100644 --- a/packages/paste-website/src/component-examples/MenuExamples.ts +++ b/packages/paste-website/src/component-examples/MenuExamples.ts @@ -30,14 +30,14 @@ const MenuGroupExample = () => { }> - Twitter - Myspace - Dribbble + Twitter + Myspace + Dribbble - Ecosia - DuckDuckGo + Ecosia + DuckDuckGo @@ -154,6 +154,12 @@ const ItemsExample = () => { Menu item content + + Default item + + + Destructive item + diff --git a/packages/paste-website/src/pages/components/menu/index.mdx b/packages/paste-website/src/pages/components/menu/index.mdx index b548a7f3d2..2c4717bec6 100644 --- a/packages/paste-website/src/pages/components/menu/index.mdx +++ b/packages/paste-website/src/pages/components/menu/index.mdx @@ -244,6 +244,8 @@ To do so, either set `href` with a valid url to go to a new page, or set the `on +Use the `variant` prop in `MenuItem` to use a default or destructive item. We recommend naming the menu item as something commonly understood as a destructive (e.g., "Delete" or "Cancel"). + void` | Same as the HTML attribute. | |