[docs] document new items.renderItem objet property

cee-chen · cee-chen · commit 2c3c923ab8ca · 2024-02-05T11:10:15.000-08:00
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
@@ -9,6 +9,7 @@ import {
   EuiContextMenu,
   EuiContextMenuItem,
   EuiContextMenuPanel,
+  EuiTitle,
 } from '../../../../src/components';
 import { EuiContextMenuPanelDescriptor } from '!!prop-loader!../../../../src/components/context_menu/context_menu';
 
@@ -173,6 +174,9 @@ export const ContextMenuExample = {
       ],
       text: (
         <>
+          <EuiTitle>
+            <h3>Custom panels</h3>
+          </EuiTitle>
           <p>
             Context menu panels can be passed React elements through the{' '}
             <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>.
@@ -184,16 +188,24 @@ export const ContextMenuExample = {
             <EuiCode language="ts">width: [number of pixels]</EuiCode> to the
             panel tree.
           </p>
+          <EuiTitle>
+            <h3>Custom items</h3>
+          </EuiTitle>
           <p>
             You can add separator lines in the <EuiCode>items</EuiCode> prop if
             you define an item as{' '}
             <EuiCode language="ts">{'{isSeparator: true}'}</EuiCode>. This will
-            pass the rest of its fields as props to a{' '}
+            pass the rest of the object properties to an{' '}
             <Link to="/layout/horizontal-rule">
               <strong>EuiHorizontalRule</strong>
             </Link>{' '}
             component.
           </p>
+          <p>
+            For completely custom rendered items, you can use the{' '}
+            <EuiCode>{'{renderItem}'}</EuiCode> property to pass a component or
+            any function that returns a JSX node.
+          </p>
         </>
       ),
       demo: <ContextMenuWithContent />,
diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js
@@ -5,6 +5,7 @@ import {
   EuiContextMenu,
   EuiIcon,
   EuiPopover,
+  EuiPopoverFooter,
   EuiSpacer,
   EuiText,
 } from '../../../../src/components';
@@ -64,10 +65,6 @@ export default () => {
           icon: <EuiIcon type="search" size="m" />,
           onClick: closePopover,
         },
-        {
-          isSeparator: true,
-          key: 'sep',
-        },
         {
           name: 'See more',
           icon: 'plusInCircle',
@@ -78,6 +75,19 @@ export default () => {
             content: <Content />,
           },
         },
+        {
+          isSeparator: true,
+          key: 'sep',
+        },
+        {
+          renderItem: () => (
+            <EuiPopoverFooter paddingSize="s">
+              <EuiButton size="s" style={{ marginInlineStart: 'auto' }}>
+                I'm a custom item!
+              </EuiButton>
+            </EuiPopoverFooter>
+          ),
+        },
       ],
     });
   };
@@ -116,7 +126,7 @@ export default () => {
   );
 
   return (
-    <React.Fragment>
+    <>
       <EuiPopover
         id={normalContextMenuPopoverId}
         button={button}
@@ -140,6 +150,6 @@ export default () => {
       >
         <EuiContextMenu initialPanelId={0} panels={dynamicPanels} />
       </EuiPopover>
-    </React.Fragment>
+    </>
   );
 };
