Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add display names to components #817

Merged
merged 10 commits into from
Dec 16, 2020
Merged

add display names to components #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1ae38e1
add display names to components
dburles Mar 31, 2020
e2c5454
add emotion label property to components
dburles Apr 13, 2020
ecb9cdf
appears to be unavoidable
dburles Apr 13, 2020
2885f38
Merge branch 'master' into components-display-names
dburles May 7, 2020
821f51b
Merge branch 'master' into components-display-names
dburles Dec 11, 2020
422364e
optional
dburles Dec 11, 2020
0a7e75e
remove label
dburles Dec 13, 2020
d4a66d6
add displayName to non-forwardRef components
dburles Dec 13, 2020
18349e2
add function names to Switch and Paragraph
dburles Dec 14, 2020
95f6ea8
Merge remote-tracking branch 'upstream/develop' into components-displ…
dburles Dec 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions packages/components/src/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import React from 'react'
import Box from './Box'

export const Alert = React.forwardRef((props, ref) => (
<Box
ref={ref}
variant="primary"
{...props}
__themeKey="alerts"
__css={{
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4,
}}
/>
))
export const Alert = React.forwardRef(function Alert(props, ref) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For my understanding: is the named function syntax still necessary with the Emotion label property added below?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, holy smokes! I don't think I realized the label property would work more generally in the sx prop – that's probably worth putting in a guide in the docs or mentioning somewhere 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For my understanding: is the named function syntax still necessary with the Emotion label property added below?

Just for React devtools

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the displayName static property no longer work for React devtools?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does but just not when you’re using forwardRef https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just thought I'd double check it, it does indeed work with forwardRef! Strange, I am sure that it wasn't working at the time, anyway, I'd probably stick with this approach as it's what's recommended and is more concise.

return (
<Box
ref={ref}
variant="primary"
{...props}
__themeKey="alerts"
__css={{
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4,
}}
/>
)
})
27 changes: 16 additions & 11 deletions packages/components/src/AspectImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@ import React from 'react'
import { AspectRatio } from './AspectRatio'
import { Image } from './Image'

export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
<AspectRatio ratio={ratio}>
<Image
ref={ref}
{...props}
__css={{
objectFit: 'cover',
}}
/>
</AspectRatio>
))
export const AspectImage = React.forwardRef(function AspectImage(
{ ratio, ...props },
ref
) {
return (
<AspectRatio ratio={ratio}>
<Image
ref={ref}
{...props}
__css={{
objectFit: 'cover',
}}
/>
</AspectRatio>
)
})
9 changes: 6 additions & 3 deletions packages/components/src/AspectRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react'
import Box from './Box'

export const AspectRatio = React.forwardRef(
({ ratio = 4 / 3, children, ...props }, ref) => (
export const AspectRatio = React.forwardRef(function AspectRatio(
{ ratio = 4 / 3, children, ...props },
ref
) {
return (
<Box
ref={ref}
sx={{
Expand All @@ -29,4 +32,4 @@ export const AspectRatio = React.forwardRef(
</Box>
</Box>
)
)
})
29 changes: 17 additions & 12 deletions packages/components/src/Avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import React from 'react'
import { Image } from './Image'

export const Avatar = React.forwardRef(({ size = 48, ...props }, ref) => (
<Image
ref={ref}
width={size}
height={size}
variant="avatar"
{...props}
__css={{
borderRadius: 9999,
}}
/>
))
export const Avatar = React.forwardRef(function Avatar(
{ size = 48, ...props },
ref
) {
return (
<Image
ref={ref}
width={size}
height={size}
variant="avatar"
{...props}
__css={{
borderRadius: 9999,
}}
/>
)
})
40 changes: 21 additions & 19 deletions packages/components/src/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import React from 'react'
import Box from './Box'

export const Badge = React.forwardRef((props, ref) => (
<Box
ref={ref}
variant="primary"
{...props}
__themeKey="badges"
__css={{
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary',
}}
/>
))
export const Badge = React.forwardRef(function Badge(props, ref) {
return (
<Box
ref={ref}
variant="primary"
{...props}
__themeKey="badges"
__css={{
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary',
}}
/>
)
})
2 changes: 2 additions & 0 deletions packages/components/src/Box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,6 @@ export const Box = styled('div', {
(props) => props.css
)

Box.displayName = 'Box'

export default Box
48 changes: 25 additions & 23 deletions packages/components/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
import React from 'react'
import Box from './Box'

export const Button = React.forwardRef((props, ref) => (
<Box
ref={ref}
as="button"
variant="primary"
{...props}
__themeKey="buttons"
__css={{
appearance: 'none',
display: props.hidden ? undefined : 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4,
}}
/>
))
export const Button = React.forwardRef(function Button(props, ref) {
return (
<Box
ref={ref}
as="button"
variant="primary"
{...props}
__themeKey="buttons"
__css={{
appearance: 'none',
display: props.hidden ? undefined : 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4,
}}
/>
)
})
6 changes: 3 additions & 3 deletions packages/components/src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import Box from './Box'

export const Card = React.forwardRef((props, ref) => (
<Box ref={ref} variant="primary" {...props} __themeKey="cards" />
))
export const Card = React.forwardRef(function Card(props, ref) {
return <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
})
9 changes: 6 additions & 3 deletions packages/components/src/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,11 @@ const CheckboxIcon = (props) => (
</React.Fragment>
)

export const Checkbox = React.forwardRef(
({ className, sx, variant = 'checkbox', children, ...props }, ref) => (
export const Checkbox = React.forwardRef(function Checkbox(
{ className, sx, variant = 'checkbox', children, ...props },
ref
) {
return (
<Box sx={{ minWidth: 'min-content' }}>
<Box
ref={ref}
Expand Down Expand Up @@ -78,4 +81,4 @@ export const Checkbox = React.forwardRef(
{children}
</Box>
)
)
})
27 changes: 16 additions & 11 deletions packages/components/src/Close.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,19 @@ const x = (
</svg>
)

export const Close = React.forwardRef(({ size = 32, ...props }, ref) => (
<IconButton
ref={ref}
size={size}
title="Close"
aria-label="Close"
variant="close"
{...props}
children={x}
/>
))
export const Close = React.forwardRef(function Close(
{ size = 32, ...props },
ref
) {
return (
<IconButton
ref={ref}
size={size}
title="Close"
aria-label="Close"
variant="close"
{...props}
children={x}
/>
)
})
28 changes: 15 additions & 13 deletions packages/components/src/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import React from 'react'
import Box from './Box'

export const Container = React.forwardRef((props, ref) => (
<Box
ref={ref}
variant="container"
{...props}
__themeKey="layout"
__css={{
width: '100%',
maxWidth: 'container',
mx: 'auto',
}}
/>
))
export const Container = React.forwardRef(function Container(props, ref) {
return (
<Box
ref={ref}
variant="container"
{...props}
__themeKey="layout"
__css={{
width: '100%',
maxWidth: 'container',
mx: 'auto',
}}
/>
)
})
32 changes: 17 additions & 15 deletions packages/components/src/Divider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React from 'react'
import Box from './Box'

export const Divider = React.forwardRef((props, ref) => (
<Box
ref={ref}
as="hr"
variant="styles.hr"
{...props}
__css={{
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid',
}}
/>
))
export const Divider = React.forwardRef(function Divider(props, ref) {
return (
<Box
ref={ref}
as="hr"
variant="styles.hr"
{...props}
__css={{
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid',
}}
/>
)
})
Loading