mirror of https://github.com/grafana/grafana
Menu: Improvements to menu component (#52686)
Torkel Ödegaard
3 years ago
committed by
GitHub
parent
da5bc5bde7
commit
feaa037a19
@ -0,0 +1,34 @@ |
||||
import { Meta, Props } from '@storybook/addon-docs/blocks'; |
||||
import { Overlay } from 'ol'; |
||||
|
||||
import { Menu } from './Menu'; |
||||
|
||||
<Meta title="MDX|Menu" component={Menu} /> |
||||
|
||||
# Menu |
||||
|
||||
A simple menu component. |
||||
|
||||
### When to use |
||||
|
||||
When you need to display a list of actions or navigation options in a dropdown. |
||||
|
||||
### Usage |
||||
|
||||
```tsx |
||||
import { Dropdown, Menu, Button } from '@grafana/ui'; |
||||
const menu = ( |
||||
<Menu> |
||||
<Menu.Item label="Google" /> |
||||
<Menu.Divider /> |
||||
<Menu.Item label="Delete" icon="trash-alt" destructive /> |
||||
</Menu> |
||||
); |
||||
return ( |
||||
<Dropdown overlay={menu}> |
||||
<Button icon="bars" /> |
||||
</Dropdown> |
||||
); |
||||
``` |
||||
|
||||
<Props of={Menu} /> |
||||
@ -1,94 +0,0 @@ |
||||
import { Story, ComponentMeta } from '@storybook/react'; |
||||
import React from 'react'; |
||||
|
||||
import { GraphContextMenuHeader } from '..'; |
||||
import { StoryExample } from '../../utils/storybook/StoryExample'; |
||||
import { VerticalGroup } from '../Layout/Layout'; |
||||
|
||||
import { Menu } from './Menu'; |
||||
import { MenuGroup } from './MenuGroup'; |
||||
import { MenuItem } from './MenuItem'; |
||||
|
||||
const meta: ComponentMeta<typeof Menu> = { |
||||
title: 'General/Menu', |
||||
component: Menu, |
||||
argTypes: {}, |
||||
parameters: { |
||||
knobs: { |
||||
disabled: true, |
||||
}, |
||||
controls: { |
||||
disabled: true, |
||||
}, |
||||
actions: { |
||||
disabled: true, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export const Simple: Story = (args) => { |
||||
return ( |
||||
<VerticalGroup> |
||||
<StoryExample name="Simple"> |
||||
<Menu> |
||||
<MenuItem label="Google" icon="search-plus" /> |
||||
<MenuItem label="Filter" icon="filter" /> |
||||
<MenuItem label="History" icon="history" /> |
||||
<MenuItem label="Active" icon="history" active /> |
||||
<MenuItem label="Apps" icon="apps" /> |
||||
</Menu> |
||||
</StoryExample> |
||||
<StoryExample name="With header & groups"> |
||||
<Menu header={args.header} ariaLabel="Menu header"> |
||||
<MenuGroup label="Group 1"> |
||||
<MenuItem label="item1" icon="history" /> |
||||
<MenuItem label="item2" icon="filter" /> |
||||
</MenuGroup> |
||||
<MenuGroup label="Group 2"> |
||||
<MenuItem label="item1" icon="history" /> |
||||
</MenuGroup> |
||||
</Menu> |
||||
</StoryExample> |
||||
<StoryExample name="With submenu"> |
||||
<Menu> |
||||
<MenuItem label="item1" icon="history" /> |
||||
<MenuItem |
||||
label="item2" |
||||
icon="apps" |
||||
childItems={[ |
||||
<MenuItem key="subitem1" label="subitem1" icon="history" />, |
||||
<MenuItem key="subitem2" label="subitem2" icon="apps" />, |
||||
<MenuItem |
||||
key="subitem3" |
||||
label="subitem3" |
||||
icon="search-plus" |
||||
childItems={[ |
||||
<MenuItem key="subitem1" label="subitem1" icon="history" />, |
||||
<MenuItem key="subitem2" label="subitem2" icon="apps" />, |
||||
<MenuItem key="subitem3" label="subitem3" icon="search-plus" />, |
||||
]} |
||||
/>, |
||||
]} |
||||
/> |
||||
<MenuItem label="item3" icon="filter" /> |
||||
</Menu> |
||||
</StoryExample> |
||||
</VerticalGroup> |
||||
); |
||||
}; |
||||
|
||||
Simple.args = { |
||||
header: ( |
||||
<GraphContextMenuHeader |
||||
timestamp="2020-11-25 19:04:25" |
||||
seriesColor="#00ff00" |
||||
displayName="A-series" |
||||
displayValue={{ |
||||
text: '128', |
||||
suffix: 'km/h', |
||||
}} |
||||
/> |
||||
), |
||||
}; |
||||
|
||||
export default meta; |
||||
@ -0,0 +1,104 @@ |
||||
import { ComponentMeta } from '@storybook/react'; |
||||
import React from 'react'; |
||||
|
||||
import { GraphContextMenuHeader } from '..'; |
||||
import { StoryExample } from '../../utils/storybook/StoryExample'; |
||||
import { VerticalGroup } from '../Layout/Layout'; |
||||
|
||||
import { Menu } from './Menu'; |
||||
import mdx from './Menu.mdx'; |
||||
|
||||
const meta: ComponentMeta<typeof Menu> = { |
||||
title: 'General/Menu', |
||||
component: Menu, |
||||
argTypes: {}, |
||||
parameters: { |
||||
docs: { |
||||
page: mdx, |
||||
}, |
||||
knobs: { |
||||
disabled: true, |
||||
}, |
||||
controls: { |
||||
disabled: true, |
||||
}, |
||||
actions: { |
||||
disabled: true, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export function Examples() { |
||||
return ( |
||||
<VerticalGroup> |
||||
<StoryExample name="Plain"> |
||||
<Menu> |
||||
<Menu.Item label="Google" /> |
||||
<Menu.Item label="Filter" /> |
||||
<Menu.Item label="Active" active /> |
||||
<Menu.Item label="I am a link" url="http://google.com" target="_blank" /> |
||||
<Menu.Item label="With destructive prop set" destructive /> |
||||
</Menu> |
||||
</StoryExample> |
||||
<StoryExample name="With icons and a divider"> |
||||
<Menu> |
||||
<Menu.Item label="Google" icon="search-plus" /> |
||||
<Menu.Item label="Filter" icon="filter" /> |
||||
<Menu.Item label="History" icon="history" /> |
||||
<Menu.Divider /> |
||||
<Menu.Item label="With destructive prop set" icon="trash-alt" destructive /> |
||||
</Menu> |
||||
</StoryExample> |
||||
<StoryExample name="With header & groups"> |
||||
<Menu |
||||
header={ |
||||
<GraphContextMenuHeader |
||||
timestamp="2020-11-25 19:04:25" |
||||
seriesColor="#00ff00" |
||||
displayName="A-series" |
||||
displayValue={{ |
||||
text: '128', |
||||
suffix: 'km/h', |
||||
}} |
||||
/> |
||||
} |
||||
ariaLabel="Menu header" |
||||
> |
||||
<Menu.Group label="Group 1"> |
||||
<Menu.Item label="item1" icon="history" /> |
||||
<Menu.Item label="item2" icon="filter" /> |
||||
</Menu.Group> |
||||
<Menu.Group label="Group 2"> |
||||
<Menu.Item label="item1" icon="history" /> |
||||
</Menu.Group> |
||||
</Menu> |
||||
</StoryExample> |
||||
<StoryExample name="With submenu"> |
||||
<Menu> |
||||
<Menu.Item label="item1" icon="history" /> |
||||
<Menu.Item |
||||
label="item2" |
||||
icon="apps" |
||||
childItems={[ |
||||
<Menu.Item key="subitem1" label="subitem1" icon="history" />, |
||||
<Menu.Item key="subitem2" label="subitem2" icon="apps" />, |
||||
<Menu.Item |
||||
key="subitem3" |
||||
label="subitem3" |
||||
icon="search-plus" |
||||
childItems={[ |
||||
<Menu.Item key="subitem1" label="subitem1" icon="history" />, |
||||
<Menu.Item key="subitem2" label="subitem2" icon="apps" />, |
||||
<Menu.Item key="subitem3" label="subitem3" icon="search-plus" />, |
||||
]} |
||||
/>, |
||||
]} |
||||
/> |
||||
<Menu.Item label="item3" icon="filter" /> |
||||
</Menu> |
||||
</StoryExample> |
||||
</VerticalGroup> |
||||
); |
||||
} |
||||
|
||||
export default meta; |
||||
@ -0,0 +1,21 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
import { useStyles2 } from '../../themes'; |
||||
|
||||
export function MenuDivider() { |
||||
const styles = useStyles2(getStyles); |
||||
return <div className={styles.divider} />; |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
divider: css({ |
||||
height: 1, |
||||
backgroundColor: theme.colors.border.weak, |
||||
margin: theme.spacing(0.5, 0), |
||||
}), |
||||
}; |
||||
}; |
||||
Loading…
Reference in new issue