From 36707bfac632c45a76f0ea12adf70bccf6325967 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 24 Jan 2023 19:22:37 -0700 Subject: [PATCH 1/4] Revert Truncate --- src/Truncate.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/Truncate.tsx b/src/Truncate.tsx index a78a2a76bc5..5da330d26c7 100644 --- a/src/Truncate.tsx +++ b/src/Truncate.tsx @@ -1,4 +1,3 @@ -import React from 'react' import styled from 'styled-components' import {maxWidth, MaxWidthProps} from 'styled-system' import sx, {SxProp} from './sx' @@ -11,7 +10,7 @@ type StyledTruncateProps = { } & MaxWidthProps & SxProp -const StyledTruncate = styled.div` +const Truncate = styled.div` display: ${props => (props.inline ? 'inline-block' : 'inherit')}; overflow: hidden; text-overflow: ellipsis; @@ -22,9 +21,13 @@ const StyledTruncate = styled.div` ${sx}; ` -export type TruncateProps = ComponentProps -const Truncate = ({expandable = false, inline = false, maxWidth = 125, ...rest}: TruncateProps) => ( - -) +// TODO: Remove defaultProps to be compatible with the next major version of React +// Reference: https://github.com/primer/react/issues/2758 +Truncate.defaultProps = { + expandable: false, + inline: false, + maxWidth: 125, +} +export type TruncateProps = ComponentProps export default Truncate From 9d118e24cfa117d2fe6793290cc215a219607438 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 24 Jan 2023 19:24:18 -0700 Subject: [PATCH 2/4] Revert Label --- src/Label.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/Label.tsx b/src/Label.tsx index 15d8e5ea131..f557750184c 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -1,12 +1,9 @@ -import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' import {get} from './constants' import sx, {BetterSystemStyleObject, SxProp} from './sx' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' -import {ComponentProps} from './utils/types' -type StyledLabelProps = { +export type LabelProps = { /** The color of the label */ variant?: LabelColorOptions /** How large the label is rendered */ @@ -79,7 +76,7 @@ const sizes: Record = { }, } -const StyledLabel = styled.span` +const Label = styled.span` align-items: center; background-color: transparent; border-width: 1px; @@ -95,11 +92,11 @@ const StyledLabel = styled.span` ${sx}; ` -const Label = React.forwardRef(({size = 'small', variant = 'default', ...rest}, ref) => ( - -)) as PolymorphicForwardRefComponent<'span', StyledLabelProps> - -Label.displayName = 'Label' +// TODO: Remove defaultProps to be compatible with the next major version of React +// Reference: https://github.com/primer/react/issues/2758 +Label.defaultProps = { + size: 'small', + variant: 'default', +} -export type LabelProps = ComponentProps export default Label From 5b21ebe7bb1ffe7e9266127270ec326f85571d32 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 24 Jan 2023 19:32:24 -0700 Subject: [PATCH 3/4] Fix lint error --- src/Truncate.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Truncate.tsx b/src/Truncate.tsx index d6b017c103a..5da330d26c7 100644 --- a/src/Truncate.tsx +++ b/src/Truncate.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import {maxWidth, MaxWidthProps} from 'styled-system' import sx, {SxProp} from './sx' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' import {ComponentProps} from './utils/types' type StyledTruncateProps = { From 0b471f1014c7fef78a10c77924381022db6232c3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 24 Jan 2023 19:54:25 -0700 Subject: [PATCH 4/4] Revert Avatar and Flash --- src/Avatar.tsx | 18 ++++++++++-------- src/Flash.tsx | 16 ++++++++-------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/Avatar.tsx b/src/Avatar.tsx index 002f44520b0..daa97861c46 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -1,7 +1,7 @@ -import React from 'react' import styled from 'styled-components' import {get} from './constants' import sx, {SxProp} from './sx' +import {ComponentProps} from './utils/types' type StyledAvatarProps = { /** Sets the width and height of the avatar. */ @@ -22,7 +22,7 @@ function getBorderRadius({size, square}: StyledAvatarProps) { } } -const StyledAvatar = styled.img.attrs(props => ({ +const Avatar = styled.img.attrs(props => ({ height: props.size, width: props.size, }))` @@ -35,11 +35,13 @@ const StyledAvatar = styled.img.attrs(props => ({ ${sx} ` -export type AvatarProps = StyledAvatarProps & React.ComponentPropsWithoutRef<'img'> -const Avatar = React.forwardRef(({size = 20, alt = '', ...rest}, ref) => ( - -)) - -Avatar.displayName = 'Avatar' +// TODO: Remove defaultProps to be compatible with the next major version of React +// Reference: https://github.com/primer/react/issues/2758 +Avatar.defaultProps = { + size: 20, + alt: '', + square: false, +} +export type AvatarProps = ComponentProps export default Avatar diff --git a/src/Flash.tsx b/src/Flash.tsx index 57c118c4041..75450124fe1 100644 --- a/src/Flash.tsx +++ b/src/Flash.tsx @@ -1,8 +1,8 @@ -import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' import {get} from './constants' import sx, {SxProp} from './sx' +import {ComponentProps} from './utils/types' const variants = variant({ variants: { @@ -46,7 +46,7 @@ type StyledFlashProps = { full?: boolean } & SxProp -const StyledFlash = styled.div` +const Flash = styled.div` position: relative; color: ${get('colors.fg.default')}; padding: ${get('space.3')}; @@ -67,11 +67,11 @@ const StyledFlash = styled.div` ${sx}; ` -export type FlashProps = StyledFlashProps & React.ComponentPropsWithoutRef<'div'> -const Flash = React.forwardRef(({variant = 'default', ...rest}, ref) => ( - -)) - -Flash.displayName = 'Flash' +// TODO: Remove defaultProps to be compatible with the next major version of React +// Reference: https://github.com/primer/react/issues/2758 +Flash.defaultProps = { + variant: 'default', +} +export type FlashProps = ComponentProps export default Flash