docs(menu): document menu

PiperOrigin-RevId: 563523511

catalog/src/hydration-entrypoints/components/menu.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/button/filled-button.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/menu/sub-menu-item.js';

docs/components/figures/menu/theming.html

@@ -0,0 +1,44 @@
+<div class="figure-wrapper">
+  <figure
+    class="styled-example menu"
+    aria-label="A green, filled button with the text Themed menu. Interact with the button to open the green themed menu with 0 border-radius."
+    style="padding-block: 16px"
+  >
+    <style>
+      .styled-example {
+        background-color: #f4fbfa;
+      }
+      .styled-example md-filled-button {
+        --md-sys-color-primary: #006a6a;
+        --md-sys-color-on-primary: #ffffff;
+      }
+      .styled-example.menu md-menu {
+        --md-menu-container-color: #f4fbfa;
+        --md-menu-container-shape: 0px;
+        --md-menu-item-container-color: transparent;
+        --md-list-item-container-shape: 28px;
+        --md-list-item-label-text-color: #161d1d;
+        --md-list-item-supporting-text-color: #3f4948;
+        --md-list-item-trailing-supporting-text-color: #3f4948;
+        --md-list-item-label-text-type: system-ui;
+        --md-list-item-supporting-text-type: system-ui;
+        --md-list-item-trailing-supporting-text-type: system-ui;
+      }
+    </style>
+    <span style="position: relative">
+      <md-filled-button id="theming-anchor">Themed menu</md-filled-button>
+      <md-menu id="theming-menu" anchor="theming-anchor">
+        <md-menu-item headline="Apple"></md-menu-item>
+        <md-menu-item headline="Banana"></md-menu-item>
+        <md-menu-item headline="Cucumber"></md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#theming-anchor");
+      const menuEl = document.body.querySelector("#theming-menu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+  </figure>
+</div>

docs/components/figures/menu/usage-fixed.html

@@ -0,0 +1,24 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says open fixed menu. Interact with the button to open a fixed menu."
+  >
+    <div>
+      <div style="margin: 16px">
+        <md-filled-button id="usage-fixed-anchor">Open fixed menu</md-filled-button>
+      </div>
+      <md-menu fixed id="usage-fixed" anchor="usage-fixed-anchor">
+        <md-menu-item headline="Apple"></md-menu-item>
+        <md-menu-item headline="Banana"></md-menu-item>
+        <md-menu-item headline="Cucumber"></md-menu-item>
+      </md-menu>
+    </div>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-fixed-anchor");
+      const menuEl = document.body.querySelector("#usage-fixed");
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+  </figure>
+</div>

docs/components/figures/menu/usage-submenu.html

@@ -0,0 +1,37 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center"
+    aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
+  >
+    <span style="position: relative">
+      <md-filled-button id="usage-submenu-anchor">Menu with Submenus</md-filled-button>
+      <!-- Note the has-overflow attribute -->
+      <md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
+        <md-sub-menu-item headline="Fruits with A">
+          <md-menu slot="submenu">
+            <md-menu-item headline="Apricot"></md-menu-item>
+            <md-menu-item headline="Avocado"></md-menu-item>
+            <md-sub-menu-item headline="Apples" menu-corner="START_END" anchor-corner="START_START">
+              <md-menu slot="submenu">
+                <md-menu-item headline="Fuji"></md-menu-item>
+                <md-menu-item headline="Granny Smith"></md-menu-item>
+                <md-menu-item headline="Red Delicious"></md-menu-item>
+              </md-menu>
+              <md-icon slot="start" data-variant="icon" style="font-size: 24px;height:24px;">arrow_left</md-icon>
+            </md-sub-menu-item>
+          </md-menu>
+          <md-icon slot="end">arrow_right</md-icon>
+        </md-sub-menu-item>
+        <md-menu-item headline="Banana"></md-menu-item>
+        <md-menu-item headline="Cucumber"></md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-submenu-anchor");
+      const menuEl = document.body.querySelector("#usage-submenu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+  </figure>
+</div>

docs/components/figures/menu/usage.html

@@ -0,0 +1,46 @@
+<div class="figure-wrapper">
+  <style>
+    main > .figure-wrapper {
+      /* prevent scrolling bars on menu open */
+      overflow: visible;
+      /* unset page styles */
+      --md-list-item-container-shape: 0px;
+    }
+  </style>
+  <figure
+    style="justify-content: center"
+    aria-label="Two filled buttons next to each other. The first one says set with idref and the other says set with element ref. Interact with them to open their respective menus."
+  >
+    <span style="position: relative; margin-inline-end: 8px">
+      <md-filled-button id="usage-anchor">Set with idref</md-filled-button>
+      <md-menu id="usage-menu" anchor="usage-anchor">
+        <md-menu-item headline="Apple"></md-menu-item>
+        <md-menu-item headline="Banana"></md-menu-item>
+        <md-menu-item headline="Cucumber"></md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-anchor");
+      const menuEl = document.body.querySelector("#usage-menu");
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+    <span style="position: relative">
+      <md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button>
+      <md-menu id="usage-menu-2">
+        <md-menu-item headline="Apple"></md-menu-item>
+        <md-menu-item headline="Banana"></md-menu-item>
+        <md-menu-item headline="Cucumber"></md-menu-item>
+      </md-menu>
+    </span>
+    <script type="module">
+      const anchorEl = document.body.querySelector("#usage-anchor-2");
+      const menuEl = document.body.querySelector("#usage-menu-2");
+      menuEl.anchorElement = anchorEl;
+      anchorEl.addEventListener("click", () => {
+        menuEl.show();
+      });
+    </script>
+  </figure>
+</div>