Skip to content

Commit e871a6b

Browse files
stuarthendrenstuarthendren
committed
fix: improves use of @motion media query
This adds in the `@motion` media query to many places it was missed. Fixes forward ref issue with Avatar and fixes slide in for Toast.
1 parent 84a533c commit e871a6b

File tree

19 files changed

+176
-68
lines changed

19 files changed

+176
-68
lines changed

‎src/components/Accordion/Accordion.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ const slideUp = keyframes({
1717
})
1818

1919
const Chevron = styled(ChevronDown, {
20-
transition: 'transform 300ms',
20+
'@motion': {
21+
transition: 'transform 300ms',
22+
},
2123

2224
'[data-state=open] &': {
2325
transform: 'rotate(180deg)',
@@ -58,10 +60,14 @@ export const AccordionContent = styled(Content, {
5860
padding: '$4',
5961
color: '$text',
6062
'&[data-state="open"]': {
61-
animation: `${slideDown} 300ms ease-out`,
63+
'@motion': {
64+
animation: `${slideDown} 300ms ease-out`,
65+
},
6266
},
6367
'&[data-state="closed"]': {
64-
animation: `${slideUp} 300ms ease-out`,
68+
'@motion': {
69+
animation: `${slideUp} 300ms ease-out`,
70+
},
6571
},
6672
})
6773

‎src/components/Avatar/Avatar.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Fallback, Image, Root } from '@radix-ui/react-avatar'
22
import { VariantProps } from '@stitches/react'
3-
import React from 'react'
3+
import React, { ElementRef, forwardRef } from 'react'
44
import type { CSS } from '../../stitches.config'
55
import { styled } from '../../stitches.config'
66

@@ -45,29 +45,35 @@ interface AvatarProps extends VariantProps<typeof StyledRoot> {
4545
css?: CSS
4646
color?: CSS['color']
4747
backgroundColor?: CSS['backgroundColor']
48+
children?: React.ReactNode
4849
}
4950

5051
/**
5152
* The Avatar should be used for profile images. If an image is not available initials can be used.
5253
*/
53-
export const Avatar: React.FC<AvatarProps> = ({
54-
src,
55-
backgroundColor = '$grey5',
56-
color = '$text',
57-
alt = 'Avatar',
58-
children,
59-
...props
60-
}) => (
61-
<StyledRoot {...props}>
62-
{src && <StyledImage alt={alt} src={src} />}
63-
<StyledFallback
64-
css={{
65-
backgroundColor,
66-
color,
67-
}}
68-
>
69-
{children}
70-
</StyledFallback>
71-
</StyledRoot>
54+
export const Avatar = forwardRef<ElementRef<typeof Root>, AvatarProps>(
55+
(
56+
{
57+
src,
58+
backgroundColor = '$grey5',
59+
color = '$text',
60+
alt = 'Avatar',
61+
children,
62+
...props
63+
},
64+
forwardRef
65+
) => (
66+
<StyledRoot {...props} ref={forwardRef}>
67+
{src && <StyledImage alt={alt} src={src} />}
68+
<StyledFallback
69+
css={{
70+
backgroundColor,
71+
color,
72+
}}
73+
>
74+
{children}
75+
</StyledFallback>
76+
</StyledRoot>
77+
)
7278
)
7379
Avatar.toString = () => `.${StyledRoot.className}`

‎src/components/Button/Button.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export const focus = hover
1212
export const active = {
1313
backgroundColor: '$$active',
1414
backgroundSize: '100%',
15-
transition: 'background 0s',
15+
'@motion': {
16+
transition: 'background 0s',
17+
},
1618
}
1719

1820
export const disabled = {
@@ -22,7 +24,9 @@ export const disabled = {
2224

2325
export const buttonInteractionStyles = css({
2426
cursor: 'pointer',
25-
transition: 'background 0.5s',
27+
'@motion': {
28+
transition: 'background 0.5s',
29+
},
2630
backgroundPosition: 'center',
2731

2832
$$active: '$colors$defaultActive',

‎src/components/Card/Card.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,16 @@ export const Card = styled(Paper, {
2727
},
2828
ghost: {
2929
backgroundColor: 'transparent',
30-
transition:
31-
'transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 25ms linear',
30+
'@motion': {
31+
transition:
32+
'transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 25ms linear',
33+
},
3234
willChange: 'transform',
3335
'&::before': {
3436
opacity: '0',
35-
transition: 'all 200ms cubic-bezier(0.22, 1, 0.36, 1)',
37+
'@motion': {
38+
transition: 'all 200ms cubic-bezier(0.22, 1, 0.36, 1)',
39+
},
3640
},
3741
},
3842
},

‎src/components/Chip/Chip.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,10 @@ const StyledChip = styled(DEFAULT_TAG, {
144144
},
145145
interactive: {
146146
true: {
147-
transition: 'background 0.5s',
147+
cursor: 'pointer',
148+
'@motion': {
149+
transition: 'background 0.5s',
150+
},
148151
backgroundPosition: 'center',
149152
'&:focus': {
150153
boxShadow: 'inset 0 0 0 1px $$focus, 0 0 0 1px $$focus',
@@ -158,7 +161,9 @@ const StyledChip = styled(DEFAULT_TAG, {
158161
'&:active': {
159162
backgroundColor: '$$active',
160163
backgroundSize: '100%',
161-
transition: 'background 0s',
164+
'@motion': {
165+
transition: 'background 0s',
166+
},
162167
},
163168
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
164169
backgroundColor: '$$active',

‎src/components/Drawer/Drawer.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,15 @@ const StyledContent = styled(Content, paperStyles, {
4141
boxShadow: '$2',
4242

4343
'&[data-state="open"]': {
44-
animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
44+
'@motion': {
45+
animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
46+
},
4547
},
4648

4749
'&[data-state="closed"]': {
48-
animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
50+
'@motion': {
51+
animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
52+
},
4953
},
5054

5155
variants: {

‎src/components/IconButton/IconButton.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ const focus = hover
1515
const active = {
1616
backgroundColor: '$$active',
1717
backgroundSize: '100%',
18-
transition: 'background 0s',
18+
'@motion': {
19+
transition: 'background 0s',
20+
},
1921
}
2022

2123
export const disabled = {
@@ -62,7 +64,9 @@ export const StyledIconButton = styled(DEFAULT_TAG, {
6264
border: 'none',
6365

6466
// Actions
65-
transition: 'background 0.5s',
67+
'@motion': {
68+
transition: 'background 0.5s',
69+
},
6670
backgroundPosition: 'center',
6771

6872
'&:hover': hover,

‎src/components/Input/inputStyles.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,9 @@ export const inputStyles = css({
7171
$$inactive: '$colors$grey7',
7272
$$active: '$colors$primary',
7373

74-
transition: 'background 0.5s',
74+
'@motion': {
75+
transition: 'background 0.5s',
76+
},
7577
backgroundPosition: 'center',
7678

7779
boxShadow: 'inset 0 0 0 1px $$inactive',
@@ -153,7 +155,9 @@ export const checkStyles = css({
153155
fontSize: '$0',
154156
cursor: 'pointer',
155157

156-
transition: 'background 0.5s',
158+
'@motion': {
159+
transition: 'background 0.5s',
160+
},
157161
backgroundPosition: 'center',
158162

159163
'&:hover': {
@@ -165,7 +169,9 @@ export const checkStyles = css({
165169
'&:active': {
166170
backgroundColor: '$$active',
167171
backgroundSize: '100%',
168-
transition: 'background 0s',
172+
'@motion': {
173+
transition: 'background 0s',
174+
},
169175
},
170176

171177
'&:disabled': disabled,

‎src/components/Link/Link.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@ export const linkStyles = css({
8787
textDecoration: 'underline',
8888
},
8989
styled: {
90-
transition: 'background 100ms ease-out',
90+
'@motion': {
91+
transition: 'background 100ms ease-out',
92+
},
9193
fontWeight: 'bold',
9294
background:
9395
'linear-gradient($$linkBackground, $$linkBackground) left bottom transparent no-repeat',

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,14 +240,14 @@ export const Nested: Story = () => {
240240
)
241241
}
242242

243-
/* A `MenuCheckboxItem` are items with an indicated boolean state */
243+
/* Visual test for different size menu buttons and potential menu overlap */
244244
export const MultipleMenus: Story = () => {
245245
const [checked, setChecked] = useState(true)
246246
const [color, setColor] = React.useState('blue')
247247
return (
248248
<Row gap>
249249
<Menu>
250-
<MenuButton>Menu 1</MenuButton>
250+
<MenuButton size="large">Menu 1</MenuButton>
251251
<MenuContent>
252252
<MenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
253253
Cut
@@ -265,6 +265,16 @@ export const MultipleMenus: Story = () => {
265265
</MenuRadioGroup>
266266
</MenuContent>
267267
</Menu>
268+
<Menu>
269+
<MenuButton size="small">Menu 3</MenuButton>
270+
<MenuContent>
271+
<MenuRadioGroup value={color} onValueChange={setColor}>
272+
<MenuRadioItem value="red">Red</MenuRadioItem>
273+
<MenuRadioItem value="green">Green</MenuRadioItem>
274+
<MenuRadioItem value="blue">Blue</MenuRadioItem>
275+
</MenuRadioGroup>
276+
</MenuContent>
277+
</Menu>
268278
</Row>
269279
)
270280
}

0 commit comments

Comments
 (0)