Create toggle menu item component

This is a pretty common way for the menu item component to be used, and it's slightly non-trivial (you need to hook up the entire menu item as a label element), so I think it deserves its own component.

src/components/MenuItem/ToggleMenuItem.stories.tsx

@@ -0,0 +1,50 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import ExtensionsIcon from "@vector-im/compound-design-tokens/icons/extensions.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/icons/chat.svg";
+
+import { ToggleMenuItem as ToggleMenuItemComponent } from "./ToggleMenuItem";
+
+export default {
+  title: "ToggleMenuItem",
+  component: ToggleMenuItemComponent,
+  argTypes: {},
+  args: {},
+} as Meta<typeof ToggleMenuItemComponent>;
+
+const Template: StoryFn<typeof ToggleMenuItemComponent> = (args) => (
+  <div style={{ width: 300 }}>
+    <ToggleMenuItemComponent {...args} Icon={ChatIcon} label="First item" />
+    <ToggleMenuItemComponent
+      {...args}
+      Icon={ExtensionsIcon}
+      label="Second item"
+    />
+  </div>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+Primary.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=712-6909&mode=dev",
+  },
+};

src/components/MenuItem/ToggleMenuItem.test.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
+
+import { ToggleMenuItem } from "./ToggleMenuItem";
+
+describe("ToggleMenuItem", () => {
+  it("renders", () => {
+    const { asFragment } = render(
+      <ToggleMenuItem Icon={VisibilityOnIcon} label="Always show" />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/MenuItem/ToggleMenuItem.tsx

@@ -0,0 +1,48 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ComponentProps, forwardRef } from "react";
+import { MenuItem } from "./MenuItem";
+import { Toggle } from "../Toggle/Toggle";
+import useId from "../../utils/useId";
+
+type Props = Pick<
+  ComponentProps<typeof MenuItem>,
+  "className" | "Icon" | "label"
+> &
+  Omit<ComponentProps<typeof Toggle>, "id" | "children">;
+
+/**
+ * A menu item with a toggle control. Clicking anywhere on the surface will
+ * activate the toggle.
+ */
+export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
+  function ToggleMenuItem({ className, Icon, label, ...toggleProps }, ref) {
+    const toggleId = useId();
+    return (
+      <MenuItem
+        as="label"
+        htmlFor={toggleId}
+        className={className}
+        Icon={Icon}
+        label={label}
+        navHint={false}
+      >
+        <Toggle id={toggleId} ref={ref} {...toggleProps} />
+      </MenuItem>
+    );
+  },
+);

src/components/MenuItem/__snapshots__/ToggleMenuItem.test.tsx.snap

@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ToggleMenuItem > renders 1`] = `
+<DocumentFragment>
+  <label
+    class="_item_37eef5 _interactive_37eef5"
+    data-kind="primary"
+    for=":r0:"
+  >
+    <svg
+      aria-hidden="true"
+      class="_icon_37eef5"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 16C13.25 16 14.3125 15.5625 15.1875 14.6875C16.0625 13.8125 16.5 12.75 16.5 11.5C16.5 10.25 16.0625 9.1875 15.1875 8.3125C14.3125 7.4375 13.25 7 12 7C10.75 7 9.68755 7.4375 8.81255 8.3125C7.93755 9.1875 7.50005 10.25 7.50005 11.5C7.50005 12.75 7.93755 13.8125 8.81255 14.6875C9.68755 15.5625 10.75 16 12 16ZM12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125C9.56255 12.8875 9.30005 12.25 9.30005 11.5C9.30005 10.75 9.56255 10.1125 10.0875 9.5875C10.6125 9.0625 11.25 8.8 12 8.8C12.75 8.8 13.3875 9.0625 13.9125 9.5875C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2ZM12 19C9.68338 19 7.56672 18.3875 5.65005 17.1625C3.73338 15.9375 2.28338 14.2833 1.30005 12.2C1.25005 12.1167 1.21672 12.0125 1.20005 11.8875C1.18338 11.7625 1.17505 11.6333 1.17505 11.5C1.17505 11.3667 1.18338 11.2375 1.20005 11.1125C1.21672 10.9875 1.25005 10.8833 1.30005 10.8C2.28338 8.71667 3.73338 7.0625 5.65005 5.8375C7.56672 4.6125 9.68338 4 12 4C14.3167 4 16.4334 4.6125 18.35 5.8375C20.2667 7.0625 21.7167 8.71667 22.7 10.8C22.75 10.8833 22.7834 10.9875 22.8 11.1125C22.8167 11.2375 22.825 11.3667 22.825 11.5C22.825 11.6333 22.8167 11.7625 22.8 11.8875C22.7834 12.0125 22.75 12.1167 22.7 12.2C21.7167 14.2833 20.2667 15.9375 18.35 17.1625C16.4334 18.3875 14.3167 19 12 19ZM12 17C13.8834 17 15.6125 16.5042 17.1875 15.5125C18.7625 14.5208 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7625 8.47917 17.1875 7.4875C15.6125 6.49583 13.8834 6 12 6C10.1167 6 8.38755 6.49583 6.81255 7.4875C5.23755 8.47917 4.03338 9.81667 3.20005 11.5C4.03338 13.1833 5.23755 14.5208 6.81255 15.5125C8.38755 16.5042 10.1167 17 12 17Z"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="_font-body-md-medium_489030 _label_37eef5"
+    >
+      Always show
+    </span>
+    <div
+      class="_toggle_eb77c6"
+    >
+      <input
+        id=":r0:"
+        type="checkbox"
+      />
+      <div
+        class="_toggle-ui_eb77c6"
+      />
+    </div>
+  </label>
+</DocumentFragment>
+`;

src/components/Toggle/Toggle.module.css

@@ -86,7 +86,9 @@ limitations under the License.
   transition: all 0.2s ease-in-out;
 }
 
-[type="checkbox"]:focus + .toggle-ui {
+/* Note the use of :focus-visible rather than :focus to avoid showing the focus
+ring after a simple click */
+[type="checkbox"]:focus-visible + .toggle-ui {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }

src/components/Toggle/Toggle.test.tsx

@@ -15,22 +15,14 @@ limitations under the License.
 */
 
 import { describe, it, expect } from "vitest";
-import { getByRole, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import React from "react";
 
 import { Toggle } from "./Toggle";
-import userEvent from "@testing-library/user-event";
 
 describe("Toggle", () => {
   it("renders", () => {
     const { asFragment } = render(<Toggle />);
     expect(asFragment()).toMatchSnapshot();
   });
-
-  it("should not have focus after being clicked", async () => {
-    const { container } = render(<Toggle />);
-    const checkbox = getByRole(container, "checkbox");
-    await userEvent.click(checkbox);
-    expect(checkbox).not.toHaveFocus();
-  });
 });

src/components/Toggle/Toggle.tsx

@@ -23,10 +23,6 @@ type ToggleProps = {
    * The CSS class name.
    */
   className?: string;
-  /**
-   * On mouse down callback for the toggle.
-   */
-  onMouseDown?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
 } & React.ComponentPropsWithoutRef<"input">;
 
 /**
@@ -35,21 +31,11 @@ type ToggleProps = {
 export const Toggle = forwardRef<
   HTMLInputElement,
   PropsWithChildren<ToggleProps>
->(function Toggle({ className, onMouseDown, ...props }, ref) {
+>(function Toggle({ className, ...props }, ref) {
   const classes = classnames(styles.toggle, className);
   return (
     <div className={classes}>
-      <input
-        ref={ref}
-        {...props}
-        type="checkbox"
-        onMouseDown={(e) => {
-          // Prevents the `focus` event from being fired when clicked
-          // but still reliably works when navigating via the keyboard
-          e.preventDefault();
-          onMouseDown?.(e);
-        }}
-      />
+      <input ref={ref} {...props} type="checkbox" />
       <div className={styles["toggle-ui"]} />
     </div>
   );