fix(menu): allow menu-item to support arbitrary element as the submen…

…u root (#4720) * fix(menu): allow using non-menu-item element as submenu root * chore(menu): fixed broken test * chore(menu): added a custom root submenu example in storybook * chore(menu): updated docs --------- Co-authored-by: Rúben Carvalho <[email protected]>
adobe · Sep 13, 2024 · 18dee11 · 18dee11
1 parent cf16c3e
commit 18dee11
Showing 1 changed file with 18 additions and 36 deletions.
diff --git a/packages/menu/menu-item.md b/packages/menu/menu-item.md
@@ -127,42 +127,6 @@ Content assigned to the `value` slot will be placed at the end of the `<sp-menu-
 </sp-menu>
 ```
 
-Note: While `sp-menu-item` can accommodate any custom content in the `submenu` slot, it will not handle selection or keyboard navigation for such content. To ensure proper management of selection and keyboard navigation, it is recommended to use `sp-menu` within the `submenu` slot```
-
-```html
-<sp-menu style="width: 200px;">
-    <sp-menu-item>
-        Item with arbitrary content in submenu
-        <div role="menuitem" slot="submenu" style="padding: 12px">
-            <img
-                src="https://placekitten.com/200/200"
-                alt="Kitten"
-                style="width: 100%; height: auto; border-radius: 4px"
-            />
-            <p>I am an arbitrary content in submenu</p>
-        </div>
-    </sp-menu-item>
-</sp-menu>
-```
-
-Note: While `sp-menu-item` can accommodate any custom content in the `submenu` slot, it will not handle selection or keyboard navigation for such content. To ensure proper management of selection and keyboard navigation, it is recommended to use `sp-menu` within the `submenu` slot```
-
-```html
-<sp-menu style="width: 200px;">
-    <sp-menu-item>
-        Item with arbitrary content in submenu
-        <div role="menuitem" slot="submenu" style="padding: 12px">
-            <img
-                src="https://placekitten.com/200/200"
-                alt="Kitten"
-                style="width: 100%; height: auto; border-radius: 4px"
-            />
-            <p>I am an arbitrary content in submenu</p>
-        </div>
-    </sp-menu-item>
-</sp-menu>
-```
-
 #### Value attribute
 
 When displayed as a descendent of an element that manages selection (e.g. `<sp-action-menu>`, `<sp-picker>`, `<sp-split-button>`, etc.), an `<sp-menu-item>` will represent the "selected" value of that ancestor when its `value` attribute or the trimmed `textContent` (represeted by `el.itemText`) matches the `value` of the ancestor element.
@@ -278,6 +242,24 @@ Note: While `sp-menu-item` can accommodate any custom content in the `submenu` s
 </sp-menu>
 ```
 
+Note: While `sp-menu-item` can accommodate any custom content in the `submenu` slot, it will not handle selection or keyboard navigation for such content. To ensure proper management of selection and keyboard navigation, it is recommended to use `sp-menu` within the `submenu` slot```
+
+```html
+<sp-menu style="width: 200px;">
+    <sp-menu-item>
+        Item with arbitrary content in submenu
+        <div role="menuitem" slot="submenu" style="padding: 12px">
+            <img
+                src="https://placekitten.com/200/200"
+                alt="Kitten"
+                style="width: 100%; height: auto; border-radius: 4px"
+            />
+            <p>I am an arbitrary content in submenu</p>
+        </div>
+    </sp-menu-item>
+</sp-menu>
+```
+
 ### Accessibility guidelines
 
 Review the guidelines for the parent [menu](../menu#accessibility-guidelines) and [menu-group](../menu-group#accessibility-guidelines).