Updated menu example

firecmsco · Dec 17, 2024 · f8ba393 · f8ba393
1 parent 7409991
commit f8ba393
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/website/docs/components/menu.mdx b/website/docs/components/menu.mdx
@@ -26,18 +26,18 @@ import MenuBasicSource from '!!raw-loader!../../samples/components/menu/menu_bas
 
 <CodeBlock language="tsx">{MenuBasicSource}</CodeBlock>
 
-## Menu with Custom Trigger
+## Controlled Menu
 
-Demonstrating how to use a custom element as the trigger for opening the menu.
+You can control the visibility of the `Menu` component by passing the `open` and `onOpenChange` props.
 
-import MenuCustomTriggerDemo from '../../samples/components/menu/menu_custom_trigger';
-import MenuCustomTriggerSource from '!!raw-loader!../../samples/components/menu/menu_custom_trigger';
+import MenuControlledDemo from '../../samples/components/menu/menu_controlled';
+import MenuControlledSource from '!!raw-loader!../../samples/components/menu/menu_controlled';
 
 <CodeSample>
-    <MenuCustomTriggerDemo/>
+    <MenuControlledDemo/>
 </CodeSample>
 
-<CodeBlock language="tsx">{MenuCustomTriggerSource}</CodeBlock>
+<CodeBlock language="tsx">{MenuControlledSource}</CodeBlock>
 
 ## Dense Menu Items
 
@@ -50,4 +50,4 @@ import MenuDenseItemsSource from '!!raw-loader!../../samples/components/menu/men
     <MenuDenseItemsDemo/>
 </CodeSample>
 
-<CodeBlock language="tsx">{MenuDenseItemsSource}</CodeBlock>
+<CodeBlock language="tsx">{MenuDenseItemsSource}</CodeBlock>
diff --git a/website/samples/components/circular_progress/circular_progress_sizes.tsx b/website/samples/components/circular_progress/circular_progress_sizes.tsx
@@ -4,6 +4,10 @@ import { CircularProgress } from "@firecms/ui";
 export default function CircularProgressSizesDemo() {
     return (
         <div>
+            <div>
+                <p>Smallest</p>
+                <CircularProgress size="smallest" />
+            </div>
             <div>
                 <p>Small</p>
                 <CircularProgress size="small" />
@@ -18,4 +22,4 @@ export default function CircularProgressSizesDemo() {
             </div>
         </div>
     );
-}
+}
diff --git a/...s/components/menu/menu_custom_trigger.tsx → ...mples/components/menu/menu_controlled.tsx b/...s/components/menu/menu_custom_trigger.tsx → ...mples/components/menu/menu_controlled.tsx
@@ -1,12 +1,20 @@
 import React from "react";
-import { Menu, MenuItem } from "@firecms/ui";
+import { Button, Menu, MenuItem } from "@firecms/ui";
 
 export default function MenuCustomTriggerDemo() {
+
+    const [open, setOpen] = React.useState(false);
+
     return (
-        <Menu trigger={<div style={{ cursor: 'pointer', padding: '10px', background: 'grey', color: 'white' }}>Click me</div>}>
+        <Menu
+            onOpenChange={setOpen}
+            open={open}
+            trigger={
+                <Button onClick={() => setOpen(true)}>Click me</Button>
+            }>
             <MenuItem onClick={() => alert("Action 1")}>Action 1</MenuItem>
             <MenuItem onClick={() => alert("Action 2")}>Action 2</MenuItem>
             <MenuItem onClick={() => alert("Action 3")}>Action 3</MenuItem>
         </Menu>
     );
-}
+}
diff --git a/website/src/partials/ui/ClientUIComponentsShowcase.tsx b/website/src/partials/ui/ClientUIComponentsShowcase.tsx
@@ -441,6 +441,7 @@ export default function ClientUIComponentsShowcase({
                     <CircularProgress size="large"/>
                     <CircularProgress/>
                     <CircularProgress size="small"/>
+                    <CircularProgress size="smallest"/>
                 </div>
             </Card>