fix: update menu docs (#254)

reapit · Dec 20, 2024 · bd661b8 · bd661b8
1 parent 7be9541
commit bd661b8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 53 deletions.
diff --git a/src/components/menu/menu.mdx b/src/components/menu/menu.mdx
@@ -14,22 +14,22 @@ More features will be added to Menu in the future
 
 <Controls />
 
-## Styles Only Usage
+## Default
 
-Default style of the `Menu`, can set `data-alignment` to "right" to move the x-position to the right of the button
+By default, the `Menu` is left-aligned, but this can be adjusted using the `data-alignment`. Additionally (for React user), the vertical position of the Menu is automatically adjusted based on the available space below the trigger and `window` each time the menu is opened (can use `yOffset` to have more adjustment).
 
-<Canvas of={MenuStories.StylesOnlyUsage} />
+`closeMenu`={false} can be set to keep the menu open when it is clicked.
 
-<RenderHtmlMarkup of={MenuStories.StylesOnlyUsage} />
+Note: `closeMenu` and `yOffset` are react only props.
 
-## React Usage
+<Canvas of={MenuStories.Default} />
 
-In the React Usage, you can compose your component using `Menu` component as example here
+<RenderHtmlMarkup of={MenuStories.Default} />
 
-And the y-position of the menu will be automatically adjusted based on the available space below the trigger and `window` each time the menu is opened
+## With Alignment
 
-`closeMenu`={false} or `data-close-menu`="false" (note: this is only for React users) can be set to keep the menu open when it is clicked."
+Example for `Menu` with right Alignment.
 
-<Canvas of={MenuStories.ReactUsage} />
+<Canvas of={MenuStories.WithCustomAlignment} />
 
-<RenderHtmlMarkup of={MenuStories.ReactUsage} />
+<RenderHtmlMarkup of={MenuStories.WithCustomAlignment} />
diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
@@ -1,59 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import {
-  ElMenu,
-  ElMenuItemAnchor,
-  ElMenuItemButton,
-  ElMenuItemGroup,
-  ElMenuItemGroupTitle,
-  ElMenuList,
-  ElMenuPopover,
-  Menu,
-} from '.'
+import type { ComponentProps } from 'react'
+import { Menu } from '.'
 import { Button } from '../button'
 import { Icon } from '../icon'
-import type { ComponentProps } from 'react'
 import { FlexContainer } from '../layout'
 
 const meta: Meta<typeof Menu> = {
   title: 'Components/Menu',
-  argTypes: {
-    'data-alignment': {
-      control: 'inline-radio',
-      options: ['left', 'right'],
-      description:
-        'to control the alignment of Menu container, will default to left if not provided (please see `More Complex Usage Example` for interactive example)',
-    },
-  },
 }
 
 export default meta
 type Story = StoryObj<typeof Menu>
 
-export const StylesOnlyUsage: StoryObj = {
+export const Default: StoryObj = {
   render: () => {
     return (
-      <ElMenu data-alignment="left">
-        <ElMenuPopover>
-          <ElMenuList role="menu">
-            <ElMenuItemGroup role="group">
-              <ElMenuItemGroupTitle>Group Title</ElMenuItemGroupTitle>
-              <ElMenuItemButton role="menuitem">Menu Item</ElMenuItemButton>
-              <ElMenuItemButton role="menuitem">Menu Item</ElMenuItemButton>
-              <ElMenuItemAnchor href="/#" role="menuitem">
-                Menu Item as anchor
-              </ElMenuItemAnchor>
-            </ElMenuItemGroup>
-          </ElMenuList>
-        </ElMenuPopover>
-      </ElMenu>
-    )
-  },
-}
-
-export const ReactUsage: Story = {
-  render: (props) => {
-    return (
-      <Menu {...props}>
+      <Menu>
         <Menu.Trigger>
           {({ getTriggerProps }) => <Button {...getTriggerProps()} iconLeft={<Icon icon="more" fontSize="1rem" />} />}
         </Menu.Trigger>
@@ -71,7 +33,30 @@ export const ReactUsage: Story = {
   },
 }
 
-export const MoreComplexUsageExample: StoryObj<ComponentProps<typeof Menu>> = {
+export const WithCustomAlignment: Story = {
+  render: () => {
+    return (
+      <FlexContainer isFlexAlignCenter isFlexJustifyCenter>
+        <Menu data-alignment="right">
+          <Menu.Trigger>
+            {({ getTriggerProps }) => <Button {...getTriggerProps()} iconLeft={<Icon icon="more" fontSize="1rem" />} />}
+          </Menu.Trigger>
+          <Menu.Popover yOffset={10}>
+            <Menu.List>
+              <Menu.Group label="Group Title">
+                <Menu.Item onClick={console.log}>Menu Item</Menu.Item>
+                <Menu.Item href="/#">Menu Item as anchor</Menu.Item>
+                <Menu.Item closeMenu={false}>Menu Item (keep open)</Menu.Item>
+              </Menu.Group>
+            </Menu.List>
+          </Menu.Popover>
+        </Menu>
+      </FlexContainer>
+    )
+  },
+}
+
+export const MoreComplexUsageExample: Story = {
   render: (props) => {
     const NavDropdownButtonUsageExample = ({
       title,