Skip to content

Commit ab5ffb0

Browse files
mperrottimperrotti
authored
Remove styled-system usage - misc components (#6676)
1 parent 1aa7404 commit ab5ffb0

File tree

16 files changed

+1003
-1218
lines changed

16 files changed

+1003
-1218
lines changed

‎.changeset/pretty-women-sing.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
Removes styled-system and related utilities from Caret.tsx, IssueLabelToken.tsx, ProgressBar.tsx, StateLabel.tsx, ToggleSwitch.tsx, and deprecated/ActionList/List.tsx

‎packages/react/src/ProgressBar/ProgressBar.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,13 @@
4949
&:where([data-progress-bar-size='large']) {
5050
height: 10px;
5151
}
52+
53+
/* Width support for containers */
54+
&:where([data-width='auto']) {
55+
width: auto;
56+
}
57+
58+
&:where([data-width='full']) {
59+
width: 100%;
60+
}
5261
}

‎packages/react/src/ProgressBar/ProgressBar.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React, {forwardRef} from 'react'
2-
import type {WidthProps} from 'styled-system'
3-
import type {SxProp} from '../sx'
42
import {clsx} from 'clsx'
53
import classes from './ProgressBar.module.css'
64
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
@@ -15,14 +13,12 @@ type StyledProgressContainerProps = {
1513
inline?: boolean
1614
barSize?: 'small' | 'default' | 'large'
1715
animated?: boolean
18-
} & WidthProps &
19-
SxProp
16+
}
2017

2118
export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
2219
'aria-label'?: string
2320
className?: string
24-
} & ProgressProp &
25-
SxProp
21+
} & ProgressProp
2622

2723
export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
2824
(

‎packages/react/src/StateLabel/StateLabel.module.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,98 @@
1+
.StateLabel {
2+
display: inline-flex;
3+
align-items: center;
4+
font-weight: var(--base-text-weight-semibold);
5+
/* stylelint-disable-next-line primer/typography */
6+
line-height: 16px;
7+
color: var(--fgColor-onEmphasis);
8+
text-align: center;
9+
border-radius: var(--borderRadius-full);
10+
}
11+
12+
/* Size variants */
13+
.StateLabel:where([data-variant='small']) {
14+
padding: var(--base-size-4) var(--base-size-8);
15+
font-size: var(--text-body-size-small);
16+
}
17+
18+
.StateLabel:where([data-variant='normal']) {
19+
padding: var(--base-size-8) var(--base-size-12);
20+
font-size: var(--text-body-size-medium);
21+
}
22+
23+
/* Status color variants */
24+
.StateLabel:where([data-status='issueClosed']) {
25+
background-color: var(--bgColor-done-emphasis);
26+
color: var(--fgColor-onEmphasis);
27+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
28+
}
29+
30+
.StateLabel:where([data-status='issueClosedNotPlanned']) {
31+
background-color: var(--bgColor-neutral-emphasis);
32+
color: var(--fgColor-onEmphasis);
33+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
34+
}
35+
36+
.StateLabel:where([data-status='pullClosed']) {
37+
background-color: var(--bgColor-closed-emphasis);
38+
color: var(--fgColor-onEmphasis);
39+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);
40+
}
41+
42+
.StateLabel:where([data-status='pullMerged']) {
43+
background-color: var(--bgColor-done-emphasis);
44+
color: var(--fgColor-onEmphasis);
45+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
46+
}
47+
48+
.StateLabel:where([data-status='pullQueued']) {
49+
background-color: var(--bgColor-attention-emphasis);
50+
color: var(--fgColor-onEmphasis);
51+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent);
52+
}
53+
54+
.StateLabel:where([data-status='issueOpened']) {
55+
background-color: var(--bgColor-open-emphasis);
56+
color: var(--fgColor-onEmphasis);
57+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
58+
}
59+
60+
.StateLabel:where([data-status='pullOpened']) {
61+
background-color: var(--bgColor-open-emphasis);
62+
color: var(--fgColor-onEmphasis);
63+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
64+
}
65+
66+
.StateLabel:where([data-status='draft']) {
67+
background-color: var(--bgColor-neutral-emphasis);
68+
color: var(--fgColor-onEmphasis);
69+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
70+
}
71+
72+
.StateLabel:where([data-status='issueDraft']) {
73+
background-color: var(--bgColor-neutral-emphasis);
74+
color: var(--fgColor-onEmphasis);
75+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
76+
}
77+
78+
.StateLabel:where([data-status='unavailable']) {
79+
background-color: var(--bgColor-neutral-emphasis);
80+
color: var(--fgColor-onEmphasis);
81+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);
82+
}
83+
84+
.StateLabel:where([data-status='open']) {
85+
background-color: var(--bgColor-open-emphasis);
86+
color: var(--fgColor-onEmphasis);
87+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);
88+
}
89+
90+
.StateLabel:where([data-status='closed']) {
91+
background-color: var(--bgColor-done-emphasis);
92+
color: var(--fgColor-onEmphasis);
93+
box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);
94+
}
95+
196
.Icon {
297
margin-right: var(--base-size-4);
398
}

‎packages/react/src/StateLabel/StateLabel.stories.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,4 @@ Playground.argTypes = {
2222
disable: true,
2323
},
2424
},
25-
theme: {
26-
controls: false,
27-
table: {
28-
disable: true,
29-
},
30-
},
3125
}

‎packages/react/src/StateLabel/StateLabel.tsx‎

Lines changed: 26 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@ import {
77
SkipIcon,
88
IssueDraftIcon,
99
IssueOpenedIcon,
10-
QuestionIcon,
1110
GitMergeQueueIcon,
1211
AlertIcon,
1312
} from '@primer/octicons-react'
14-
import styled from 'styled-components'
15-
import {variant} from 'styled-system'
16-
import {get} from '../constants'
13+
import type React from 'react'
14+
import {forwardRef} from 'react'
15+
import {clsx} from 'clsx'
1716
import Octicon from '../Octicon'
18-
import type {ComponentProps} from '../utils/types'
1917
import classes from './StateLabel.module.css'
2018

2119
const octiconMap = {
@@ -48,126 +46,34 @@ const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' |
4846
closed: '',
4947
}
5048

51-
const colorVariants = variant({
52-
prop: 'status',
53-
variants: {
54-
issueClosed: {
55-
backgroundColor: 'done.emphasis',
56-
color: 'fg.onEmphasis',
57-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
58-
},
59-
issueClosedNotPlanned: {
60-
backgroundColor: 'neutral.emphasis',
61-
color: 'fg.onEmphasis',
62-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
63-
},
64-
pullClosed: {
65-
backgroundColor: 'closed.emphasis',
66-
color: 'fg.onEmphasis',
67-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)',
68-
},
69-
pullMerged: {
70-
backgroundColor: 'done.emphasis',
71-
color: 'fg.onEmphasis',
72-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
73-
},
74-
pullQueued: {
75-
backgroundColor: 'attention.emphasis',
76-
color: 'fg.onEmphasis',
77-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)',
78-
},
79-
issueOpened: {
80-
backgroundColor: 'open.emphasis',
81-
color: 'fg.onEmphasis',
82-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
83-
},
84-
pullOpened: {
85-
backgroundColor: 'open.emphasis',
86-
color: 'fg.onEmphasis',
87-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
88-
},
89-
draft: {
90-
backgroundColor: 'neutral.emphasis',
91-
color: 'fg.onEmphasis',
92-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
93-
},
94-
issueDraft: {
95-
backgroundColor: 'neutral.emphasis',
96-
color: 'fg.onEmphasis',
97-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
98-
},
99-
unavailable: {
100-
backgroundColor: 'neutral.emphasis',
101-
color: 'fg.onEmphasis',
102-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
103-
},
104-
open: {
105-
backgroundColor: 'open.emphasis',
106-
color: 'fg.onEmphasis',
107-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
108-
},
109-
closed: {
110-
backgroundColor: 'done.emphasis',
111-
color: 'fg.onEmphasis',
112-
boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
113-
},
114-
},
115-
})
116-
117-
const sizeVariants = variant({
118-
prop: 'variant',
119-
variants: {
120-
small: {
121-
paddingX: 2,
122-
paddingY: 1,
123-
fontSize: 0,
124-
},
125-
normal: {
126-
paddingX: '12px',
127-
paddingY: 2,
128-
fontSize: 1,
129-
},
130-
},
131-
})
132-
133-
type StyledStateLabelBaseProps = {
49+
export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
13450
variant?: 'small' | 'normal'
13551
status: keyof typeof octiconMap
13652
}
13753

138-
const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
139-
display: inline-flex;
140-
align-items: center;
141-
font-weight: ${get('fontWeights.bold')};
142-
line-height: 16px;
143-
color: ${get('colors.canvas.default')};
144-
text-align: center;
145-
border-radius: ${get('radii.3')};
146-
${colorVariants};
147-
${sizeVariants};
148-
`
54+
const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
55+
({children, status, variant: variantProp = 'normal', className, ...rest}, ref) => {
56+
const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
57+
// Open and closed statuses, we don't want to show an icon
58+
const noIconStatus = status === 'open' || status === 'closed'
14959

150-
export type StateLabelProps = ComponentProps<typeof StateLabelBase>
60+
return (
61+
<span
62+
{...rest}
63+
ref={ref}
64+
className={clsx(classes.StateLabel, className)}
65+
data-variant={variantProp}
66+
data-status={status}
67+
>
68+
{!noIconStatus && (
69+
<Octicon {...octiconProps} icon={octiconMap[status]} aria-label={labelMap[status]} className={classes.Icon} />
70+
)}
71+
{children}
72+
</span>
73+
)
74+
},
75+
)
15176

152-
function StateLabel({children, status, variant: variantProp = 'normal', ...rest}: StateLabelProps) {
153-
const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
154-
// Open and closed statuses, we don't want to show an icon
155-
const noIconStatus = status === 'open' || status === 'closed'
156-
return (
157-
<StateLabelBase {...rest} variant={variantProp} status={status}>
158-
{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
159-
{status && !noIconStatus && (
160-
<Octicon
161-
{...octiconProps}
162-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
163-
icon={octiconMap[status] || QuestionIcon}
164-
aria-label={labelMap[status]}
165-
className={classes.Icon}
166-
/>
167-
)}
168-
{children}
169-
</StateLabelBase>
170-
)
171-
}
77+
StateLabel.displayName = 'StateLabel'
17278

17379
export default StateLabel

0 commit comments

Comments
 (0)