From ab18737b69c16be762f65cdbee35f69de8f6305e Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 13 Nov 2023 10:23:26 +1300 Subject: [PATCH] add disabled style to MenuItem (#129) --- src/components/MenuItem/MenuItem.module.css | 10 + src/components/MenuItem/MenuItem.stories.tsx | 114 +++++-- src/components/MenuItem/MenuItem.test.tsx | 37 ++ src/components/MenuItem/MenuItem.tsx | 5 + .../__snapshots__/MenuItem.test.tsx.snap | 320 ++++++++++++++++++ 5 files changed, 462 insertions(+), 24 deletions(-) diff --git a/src/components/MenuItem/MenuItem.module.css b/src/components/MenuItem/MenuItem.module.css index 4d237c4e..017a461c 100644 --- a/src/components/MenuItem/MenuItem.module.css +++ b/src/components/MenuItem/MenuItem.module.css @@ -121,3 +121,13 @@ button.item { .item.interactive[data-kind="critical"]:active { background: var(--cpd-color-bg-critical-subtle); } + +.item[data-kind].disabled { + pointer-events: none; +} + +.item[data-kind].disabled > .label, +.item[data-kind].disabled > .icon, +.item[data-kind].disabled > .nav-hint { + color: var(--cpd-color-text-disabled); +} diff --git a/src/components/MenuItem/MenuItem.stories.tsx b/src/components/MenuItem/MenuItem.stories.tsx index 2d98e9b1..f2c68125 100644 --- a/src/components/MenuItem/MenuItem.stories.tsx +++ b/src/components/MenuItem/MenuItem.stories.tsx @@ -27,32 +27,98 @@ export default { title: "MenuItem", component: MenuItemComponent, tags: ["autodocs"], - argTypes: {}, - args: {}, -} as Meta; - -const Template: StoryFn = (args) => ( -
- + argTypes: { + onClick: { action: "clicked!" }, + }, + args: { + label: "Menu item", + children: ( 99 - - - - - Third item without a label - - -
-); + ), + Icon: ChatIcon, + }, + decorators: [ + (Story: StoryFn) => ( +
+ +
+ ), + ], +} as Meta; + +export const Example = { + render: () => ( +
+ + + 99 + + + + + + Third item without a label + + +
+ ), +}; + +export const Primary = { + args: { + kind: "primary", + }, +}; -export const Primary = Template.bind({}); -Primary.args = { kind: "primary" }; +export const Critical = { + args: { + kind: "critical", + }, +}; -export const Critical = Template.bind({}); -Critical.args = { kind: "critical" }; +export const PrimaryDisabled = { + args: { + ...Primary.args, + disabled: true, + }, +}; + +export const CriticalDisabled = { + args: { + ...Critical.args, + disabled: true, + }, +}; + +export const WithoutLabel = { + args: { + ...Primary.args, + label: undefined, + }, +}; + +export const WithALongLabel = { + args: { + ...Primary.args, + label: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + }, +}; + +export const WithALongLabelAndChildren = { + args: { + ...Primary.args, + label: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, empor incididunt ut labore et dolore magna aliqua.", + children: ( + + Longer children too + + ), + }, +}; diff --git a/src/components/MenuItem/MenuItem.test.tsx b/src/components/MenuItem/MenuItem.test.tsx index dee176d3..c80c8095 100644 --- a/src/components/MenuItem/MenuItem.test.tsx +++ b/src/components/MenuItem/MenuItem.test.tsx @@ -24,6 +24,18 @@ import MicOnOutlineIcon from "@vector-im/compound-design-tokens/icons/mic-on-out import { MenuItem } from "./MenuItem"; import { Text } from "../Typography/Text"; +import * as stories from "./MenuItem.stories"; +import { composeStories } from "@storybook/react"; + +const { + Primary, + Critical, + PrimaryDisabled, + CriticalDisabled, + WithALongLabel, + WithALongLabelAndChildren, +} = composeStories(stories); + describe("MenuItem", () => { it("renders", () => { const { asFragment } = render( @@ -51,4 +63,29 @@ describe("MenuItem", () => { ); expect(asFragment()).toMatchSnapshot(); }); + + it("renders a Primary menu item", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a Critical menu item", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a Primary Disabled menu item", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a Critical Disabled menu item", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a menu item with a long label", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a menu item with a long label and children", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); }); diff --git a/src/components/MenuItem/MenuItem.tsx b/src/components/MenuItem/MenuItem.tsx index 528ff77b..488baf58 100644 --- a/src/components/MenuItem/MenuItem.tsx +++ b/src/components/MenuItem/MenuItem.tsx @@ -51,6 +51,8 @@ type Props = { * @default primary */ kind?: "primary" | "critical"; + + disabled?: boolean; } & ComponentPropsWithoutRef; /** @@ -64,6 +66,7 @@ export const MenuItem = ({ label, kind = "primary", children, + disabled, ...props }: Props): JSX.Element => { const Component = as ?? ("button" as ElementType); @@ -75,8 +78,10 @@ export const MenuItem = ({ className={classnames(className, styles.item, { [styles.interactive]: as !== "div", [styles["no-label"]]: label === undefined, + [styles["disabled"]]: disabled, })} data-kind={kind} + disabled={disabled} > {label !== undefined && ( diff --git a/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap index 6728d58c..5517d295 100644 --- a/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap @@ -52,6 +52,326 @@ exports[`MenuItem > renders 1`] = ` `; +exports[`MenuItem > renders a Critical Disabled menu item 1`] = ` +
+
+ +
+
+`; + +exports[`MenuItem > renders a Critical menu item 1`] = ` +
+
+ +
+
+`; + +exports[`MenuItem > renders a Primary Disabled menu item 1`] = ` +
+
+ +
+
+`; + +exports[`MenuItem > renders a Primary menu item 1`] = ` +
+
+ +
+
+`; + +exports[`MenuItem > renders a menu item with a long label 1`] = ` +
+
+ +
+
+`; + +exports[`MenuItem > renders a menu item with a long label and children 1`] = ` +
+
+ +
+
+`; + exports[`MenuItem > renders with a child 1`] = `