Skip to content

Commit 84a533c

Browse files
stuarthendrenstuarthendren
committed
fix(menu): fix css margin
minor css fix and improvements to stories to reccoment MenuButton as the default
1 parent ec2df2d commit 84a533c

File tree

4 files changed

+76
-63
lines changed

4 files changed

+76
-63
lines changed

‎src/components/Menu/Menu.stories.tsx

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import {
1717
MenuTrigger,
1818
MenuTriggerItem,
1919
} from '.'
20-
import { Button } from '../Button'
20+
import { Avatar } from '../Avatar'
21+
import { Chip } from '../Chip'
22+
import { Row } from '../Flex'
23+
import { Text } from '../Text'
2124

2225
export default {
2326
title: 'Components/Menu',
@@ -40,9 +43,7 @@ export default {
4043

4144
export const Default: Story = (args) => (
4245
<Menu {...args}>
43-
<MenuTrigger>
44-
<Button>Trigger</Button>
45-
</MenuTrigger>
46+
<MenuButton>Show Menu</MenuButton>
4647
<MenuContent>
4748
<MenuItem onSelect={action('cut')}>Cut</MenuItem>
4849
<MenuItem onSelect={action('copy')}>Copy</MenuItem>
@@ -53,12 +54,9 @@ export const Default: Story = (args) => (
5354

5455
export const WithDisabledItems: Story = () => (
5556
<Menu>
56-
<MenuTrigger>
57-
<Button>Trigger</Button>
58-
</MenuTrigger>
57+
<MenuButton>Show Menu</MenuButton>
5958
<MenuContent>
6059
<MenuItem disabled>Cut</MenuItem>
61-
6260
<MenuItem>Copy</MenuItem>
6361
</MenuContent>
6462
</Menu>
@@ -67,9 +65,7 @@ export const WithDisabledItems: Story = () => (
6765
/* Separators and Groups can be used to arrange items in vertical and horizontal sections */
6866
export const WithSeparators: Story = () => (
6967
<Menu>
70-
<MenuTrigger>
71-
<Button>Trigger</Button>
72-
</MenuTrigger>
68+
<MenuButton>Show Menu</MenuButton>
7369
<MenuContent>
7470
<MenuItem>Cut</MenuItem>
7571
<MenuItem>Copy</MenuItem>
@@ -92,9 +88,7 @@ export const WithSeparators: Story = () => (
9288

9389
export const WithLabel: Story = () => (
9490
<Menu>
95-
<MenuTrigger>
96-
<Button>Trigger</Button>
97-
</MenuTrigger>
91+
<MenuButton>Show Menu</MenuButton>
9892
<MenuContent>
9993
<MenuLabel>Actions</MenuLabel>
10094
<MenuItem>Cut</MenuItem>
@@ -109,9 +103,7 @@ export const Controlled: Story = () => {
109103
return (
110104
<>
111105
<Menu open={open} onOpenChange={setFalse}>
112-
<MenuTrigger>
113-
<Button onClick={setTrue}>Show Menu</Button>
114-
</MenuTrigger>
106+
<MenuButton onClick={setTrue}>Show Menu</MenuButton>
115107
<MenuContent>
116108
<MenuItem>Item</MenuItem>
117109
</MenuContent>
@@ -125,9 +117,7 @@ export const WithCheckbox: Story = () => {
125117
const [checked, setChecked] = useState(true)
126118
return (
127119
<Menu>
128-
<MenuTrigger>
129-
<Button>Trigger</Button>
130-
</MenuTrigger>
120+
<MenuButton>Show Menu</MenuButton>
131121
<MenuContent>
132122
<MenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
133123
Cut
@@ -143,9 +133,7 @@ export const WithRadioItems: Story = () => {
143133
const [color, setColor] = React.useState('blue')
144134
return (
145135
<Menu>
146-
<MenuTrigger>
147-
<Button>Trigger</Button>
148-
</MenuTrigger>
136+
<MenuButton>Show Menu</MenuButton>
149137
<MenuContent>
150138
<MenuRadioGroup value={color} onValueChange={setColor}>
151139
<MenuRadioItem value="red">Red</MenuRadioItem>
@@ -161,9 +149,7 @@ export const WithRadioItems: Story = () => {
161149
export const Shortcuts: Story = () => {
162150
return (
163151
<Menu>
164-
<MenuTrigger>
165-
<Button>Trigger</Button>
166-
</MenuTrigger>
152+
<MenuButton>Show Menu</MenuButton>
167153
<MenuContent>
168154
<MenuItem>
169155
New Tab <MenuItemShortcut>⌘+T</MenuItemShortcut>
@@ -176,27 +162,56 @@ export const Shortcuts: Story = () => {
176162
)
177163
}
178164

179-
/** Use the `MenuButton` component instead of `MenuTrigger` for an animated chevron indiciating the open state */
180-
export const WithMenuButton: Story = () => {
165+
/** The menu can be triggers from other components using the `MenuTrigger` */
166+
export const WithTrigger: Story = () => {
181167
return (
182-
<Menu>
183-
<MenuButton>Button</MenuButton>
184-
<MenuContent>
185-
<MenuItem onSelect={action('cut')}>Cut</MenuItem>
186-
<MenuItem onSelect={action('copy')}>Copy</MenuItem>
187-
<MenuItem onSelect={action('paste')}>Paste</MenuItem>
188-
</MenuContent>
189-
</Menu>
168+
<Row gap css={{ alignItems: 'center' }}>
169+
<Menu>
170+
<MenuTrigger>
171+
<Text css={{ cursor: 'pointer' }}>Show Menu</Text>
172+
</MenuTrigger>
173+
<MenuContent>
174+
<MenuItem onSelect={action('cut')}>Cut</MenuItem>
175+
<MenuItem onSelect={action('copy')}>Copy</MenuItem>
176+
<MenuItem onSelect={action('paste')}>Paste</MenuItem>
177+
</MenuContent>
178+
</Menu>
179+
<Menu>
180+
<MenuTrigger>
181+
<Avatar
182+
size="small"
183+
alt="Show Menu"
184+
src="https://i.pravatar.cc"
185+
css={{ cursor: 'pointer' }}
186+
/>
187+
</MenuTrigger>
188+
<MenuContent>
189+
<MenuItem onSelect={action('cut')}>Cut</MenuItem>
190+
<MenuItem onSelect={action('copy')}>Copy</MenuItem>
191+
<MenuItem onSelect={action('paste')}>Paste</MenuItem>
192+
</MenuContent>
193+
</Menu>
194+
<Menu>
195+
<MenuTrigger>
196+
<Chip interactive variant="success">
197+
Show Menu
198+
</Chip>
199+
</MenuTrigger>
200+
<MenuContent>
201+
<MenuItem onSelect={action('cut')}>Cut</MenuItem>
202+
<MenuItem onSelect={action('copy')}>Copy</MenuItem>
203+
<MenuItem onSelect={action('paste')}>Paste</MenuItem>
204+
</MenuContent>
205+
</Menu>
206+
</Row>
190207
)
191208
}
192209

193210
/** Create nested menus using a nested `Menu` component with a `MenuTriggerItem` and it's own `MenuContent` */
194211
export const Nested: Story = () => {
195212
return (
196213
<Menu>
197-
<MenuTrigger>
198-
<Button>Trigger</Button>
199-
</MenuTrigger>
214+
<MenuButton>Show Menu</MenuButton>
200215
<MenuContent>
201216
<MenuItem>
202217
New Tab <MenuItemShortcut>⌘+T</MenuItemShortcut>
@@ -230,11 +245,9 @@ export const MultipleMenus: Story = () => {
230245
const [checked, setChecked] = useState(true)
231246
const [color, setColor] = React.useState('blue')
232247
return (
233-
<>
248+
<Row gap>
234249
<Menu>
235-
<MenuTrigger>
236-
<Button>Trigger</Button>
237-
</MenuTrigger>
250+
<MenuButton>Menu 1</MenuButton>
238251
<MenuContent>
239252
<MenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
240253
Cut
@@ -243,9 +256,7 @@ export const MultipleMenus: Story = () => {
243256
</MenuContent>
244257
</Menu>
245258
<Menu>
246-
<MenuTrigger>
247-
<Button>Trigger</Button>
248-
</MenuTrigger>
259+
<MenuButton>Menu 2</MenuButton>
249260
<MenuContent>
250261
<MenuRadioGroup value={color} onValueChange={setColor}>
251262
<MenuRadioItem value="red">Red</MenuRadioItem>
@@ -254,7 +265,7 @@ export const MultipleMenus: Story = () => {
254265
</MenuRadioGroup>
255266
</MenuContent>
256267
</Menu>
257-
</>
268+
</Row>
258269
)
259270
}
260271

@@ -264,9 +275,7 @@ export const Destructive: Story = () => {
264275
const [checked, setChecked] = useState(true)
265276
return (
266277
<Menu>
267-
<MenuTrigger>
268-
<Button>Trigger</Button>
269-
</MenuTrigger>
278+
<MenuButton>Show Menu</MenuButton>
270279
<MenuContent>
271280
<MenuItem>
272281
Open <MenuItemShortcut>⌘+O</MenuItemShortcut>

‎src/components/Menu/Menu.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,16 @@ export const MenuTrigger = forwardRef<
103103
))
104104
MenuTrigger.toString = () => `.${MENU_TRIGGER_CLASS_NAME}`
105105

106+
const ButtonIndicator = styled(ChevronDown, {
107+
position: 'relative',
108+
top: 1,
109+
'[data-state=open] &': { transform: 'rotate(-180deg)' },
110+
marginRight: '-$2',
111+
'@motion': {
112+
transition: 'transform 250ms ease',
113+
},
114+
})
115+
106116
type MenuButtonProps = ComponentProps<typeof Button>
107117
const MENU_BUTTON_CLASS_NAME = 'c-menu-button'
108118

@@ -113,17 +123,7 @@ export const MenuButton = forwardRef<
113123
<Trigger className={MENU_BUTTON_CLASS_NAME} asChild ref={forwardedRef}>
114124
<Button {...props}>
115125
{children}
116-
<ChevronDown
117-
aria-hidden
118-
css={{
119-
position: 'relative',
120-
top: 1,
121-
'[data-state=open] &': { transform: 'rotate(-180deg)' },
122-
'@media (prefers-reduced-motion: no-preference)': {
123-
transition: 'transform 250ms ease',
124-
},
125-
}}
126-
/>
126+
<ButtonIndicator />
127127
</Button>
128128
</Trigger>
129129
))

‎src/stitches.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,8 @@ const stitches = createStitches({
362362
md: '(min-width: 960px)',
363363
lg: '(min-width: 1280px)',
364364
xl: '(min-width: 1920px)',
365-
motion: '(prefers-reduced-motion)',
365+
motion: '(prefers-reduced-motion: no-preference)',
366+
reducedmotion: '(prefers-reduced-motion: reduce)',
366367
hover: '(any-hover: hover)',
367368
dark: '(prefers-color-scheme: dark)',
368369
light: '(prefers-color-scheme: light)',

‎src/utils/menuStyles.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,14 @@ export const itemStyles = css({
1717
border: 'none',
1818
color: '$text',
1919
outline: 'none',
20-
transition: 'all 50ms',
2120
display: 'flex',
2221
alignItems: 'center',
2322
justifyContent: 'space-between',
2423

24+
'@motion': {
25+
transition: 'all 50ms',
26+
},
27+
2528
'&:focus': {
2629
background: '$selection',
2730
cursor: 'pointer',

0 commit comments

Comments
 (0)