chore(docs): Added Menu With Form Controls Demo

Author: mlaursen

packages/documentation/src/components/Demos/Form/MenusWithFormControls.md

@@ -0,0 +1,7 @@
+Starting with `react-md@2.8.0`, you can render the `Checkbox`, `Radio`, and
+`Switch` components within menus while maintaining accessibility using the
+`MenuItemCheckbox`, `MenuItemRadio`, and `MenuItemSwitch` components. These
+components are fully controlled and require an `id`, `checked`, and
+`onCheckedChange` props to work correctly.
+
+Check out the example below to see these new components in action.

packages/documentation/src/components/Demos/Form/MenusWithFormControls.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/jsx-key */
+import { DropdownMenu, MenuItem, MenuItemSeparator } from "@react-md/menu";
+import {
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuItemSwitch,
+} from "@react-md/form";
+import React, { ReactElement, useState } from "react";
+
+type Decoration = "none" | "underline" | "overline" | "strike-through";
+
+const decorations: readonly Decoration[] = [
+  "none",
+  "underline",
+  "overline",
+  "strike-through",
+];
+
+export default function MenusWithFormControls(): ReactElement | null {
+  const [bold, setBold] = useState(false);
+  const [italic, setItalic] = useState(false);
+  const [decoration, setDecoration] = useState<Decoration>("none");
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <DropdownMenu
+      id="some-id"
+      items={[
+        <MenuItem id="item-1">Item 1</MenuItem>,
+        <MenuItemCheckbox
+          id="font-bold"
+          checked={bold}
+          onCheckedChange={(checked) => setBold(checked)}
+        >
+          Bold
+        </MenuItemCheckbox>,
+        <MenuItemCheckbox
+          id="font-italic"
+          checked={italic}
+          onCheckedChange={(checked) => setItalic(checked)}
+        >
+          Italic
+        </MenuItemCheckbox>,
+        <MenuItemSeparator />,
+        ...decorations.map((dec) => (
+          <MenuItemRadio
+            id={`decoration-${dec}`}
+            checked={decoration === dec}
+            onCheckedChange={() => setDecoration(dec)}
+          >
+            {dec}
+          </MenuItemRadio>
+        )),
+        <MenuItemSwitch
+          id="toggle-thing"
+          checked={checked}
+          onCheckedChange={(checked) => setChecked(checked)}
+        >
+          Do Stuff?
+        </MenuItemSwitch>,
+      ]}
+    >
+      Menu
+    </DropdownMenu>
+  );
+}

packages/documentation/src/components/Demos/Form/index.tsx

@@ -66,6 +66,9 @@ import discreteSliders from "./DiscreteSliders.md";
 import ConfigurableSlider from "./ConfigurableSlider";
 import configurableSlider from "./ConfigurableSlider.md";
 
+import MenusWithFormControls from "./MenusWithFormControls";
+import menusWithFormControls from "./MenusWithFormControls.md";
+
 import ExampleForm from "./ExampleForm";
 import exampleForm from "./ExampleForm.md";
 
@@ -173,6 +176,11 @@ const demos = [
     description: configurableSlider,
     children: <ConfigurableSlider />,
   },
+  {
+    name: "Menus with Form Controls",
+    description: menusWithFormControls,
+    children: <MenusWithFormControls />,
+  },
   {
     name: "Example Form",
     description: exampleForm,