Skip to content

Commit 002be35

Browse files
jonrohanjonrohan
authored
chore(Link): Remove the CSS modules feature flag from the Link component (#5148)
* Remove the CSS modules feature flag from Link * Create sour-flies-camp.md * Update snapshot * Deprecate hoverColor and underline props
1 parent 2ab7b9e commit 002be35

File tree

4 files changed

+200
-537
lines changed

4 files changed

+200
-537
lines changed

‎.changeset/sour-flies-camp.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
Remove the CSS modules feature flag from the Link component

‎packages/react/src/Link/Link.tsx‎

Lines changed: 8 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import {clsx} from 'clsx'
22
import React, {forwardRef, useEffect} from 'react'
3-
import styled from 'styled-components'
4-
import {system} from 'styled-system'
5-
import {get} from '../constants'
63
import {useRefObjectAsForwardedRef} from '../hooks'
74
import type {SxProp} from '../sx'
8-
import sx from '../sx'
95
import classes from './Link.module.css'
10-
import {useFeatureFlag} from '../FeatureFlags'
116
import Box from '../Box'
127
import type {ComponentProps} from '../utils/types'
138
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
149

1510
type StyledLinkProps = {
11+
/** @deprecated use CSS modules to style hover color */
1612
hoverColor?: string
1713
muted?: boolean
1814
/** @deprecated use `inline` to specify the type of link instead */
@@ -21,49 +17,7 @@ type StyledLinkProps = {
2117
inline?: boolean
2218
} & SxProp
2319

24-
const hoverColor = system({
25-
hoverColor: {
26-
property: 'color',
27-
scale: 'colors',
28-
},
29-
})
30-
31-
const StyledLink = styled.a<StyledLinkProps>`
32-
color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
33-
34-
/* By default, Link does not have underline */
35-
text-decoration: none;
36-
37-
/* You can add one by setting underline={true} */
38-
text-decoration: ${props => (props.underline ? 'underline' : undefined)};
39-
40-
/* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */
41-
/* Note: setting underline={false} does not override this */
42-
[data-a11y-link-underlines='true'] &[data-inline='true'] {
43-
text-decoration: underline;
44-
}
45-
46-
&:hover {
47-
text-decoration: ${props => (props.muted ? 'none' : 'underline')};
48-
${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
49-
}
50-
&:is(button) {
51-
display: inline-block;
52-
padding: 0;
53-
font-size: inherit;
54-
white-space: nowrap;
55-
cursor: pointer;
56-
user-select: none;
57-
background-color: transparent;
58-
border: 0;
59-
appearance: none;
60-
}
61-
${sx};
62-
`
63-
6420
const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => {
65-
const enabled = useFeatureFlag('primer_react_css_modules_ga')
66-
6721
const innerRef = React.useRef<HTMLAnchorElement>(null)
6822
useRefObjectAsForwardedRef(forwardedRef, innerRef)
6923

@@ -91,24 +45,10 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
9145
}, [innerRef])
9246
}
9347

94-
if (enabled) {
95-
if (props.sx) {
96-
return (
97-
<Box
98-
as={Component}
99-
className={clsx(className, classes.Link)}
100-
data-muted={props.muted}
101-
data-inline={inline}
102-
data-underline={underline}
103-
{...props}
104-
// @ts-ignore shh
105-
ref={innerRef}
106-
/>
107-
)
108-
}
109-
48+
if (props.sx) {
11049
return (
111-
<Component
50+
<Box
51+
as={Component}
11252
className={clsx(className, classes.Link)}
11353
data-muted={props.muted}
11454
data-inline={inline}
@@ -121,11 +61,11 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
12161
}
12262

12363
return (
124-
<StyledLink
125-
as={Component}
126-
className={className}
64+
<Component
65+
className={clsx(className, classes.Link)}
66+
data-muted={props.muted}
12767
data-inline={inline}
128-
underline={underline}
68+
data-underline={underline}
12969
{...props}
13070
// @ts-ignore shh
13171
ref={innerRef}

‎packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap‎

Lines changed: 9 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,203 +1,41 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Link applies button styles when rendering a button element 1`] = `
4-
.c1 {
5-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
6-
-webkit-text-decoration: none;
7-
text-decoration: none;
8-
}
9-
10-
[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
11-
-webkit-text-decoration: underline;
12-
text-decoration: underline;
13-
}
14-
15-
.c1:hover {
16-
-webkit-text-decoration: underline;
17-
text-decoration: underline;
18-
}
19-
20-
.c1:is(button) {
21-
display: inline-block;
22-
padding: 0;
23-
font-size: inherit;
24-
white-space: nowrap;
25-
cursor: pointer;
26-
-webkit-user-select: none;
27-
-moz-user-select: none;
28-
-ms-user-select: none;
29-
user-select: none;
30-
background-color: transparent;
31-
border: 0;
32-
-webkit-appearance: none;
33-
-moz-appearance: none;
34-
appearance: none;
35-
}
36-
374
<button
38-
className="c0 c1"
5+
className="Link"
396
/>
407
`;
418

429
exports[`Link passes href down to link element 1`] = `
43-
.c1 {
44-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
45-
-webkit-text-decoration: none;
46-
text-decoration: none;
47-
}
48-
49-
[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
50-
-webkit-text-decoration: underline;
51-
text-decoration: underline;
52-
}
53-
54-
.c1:hover {
55-
-webkit-text-decoration: underline;
56-
text-decoration: underline;
57-
}
58-
59-
.c1:is(button) {
60-
display: inline-block;
61-
padding: 0;
62-
font-size: inherit;
63-
white-space: nowrap;
64-
cursor: pointer;
65-
-webkit-user-select: none;
66-
-moz-user-select: none;
67-
-ms-user-select: none;
68-
user-select: none;
69-
background-color: transparent;
70-
border: 0;
71-
-webkit-appearance: none;
72-
-moz-appearance: none;
73-
appearance: none;
74-
}
75-
7610
<a
77-
className="c0 c1"
11+
className="Link"
7812
href="https://github.com"
7913
/>
8014
`;
8115

8216
exports[`Link respects hoverColor prop 1`] = `
83-
.c1 {
84-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
85-
-webkit-text-decoration: none;
86-
text-decoration: none;
87-
}
88-
89-
[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
90-
-webkit-text-decoration: underline;
91-
text-decoration: underline;
92-
}
93-
94-
.c1:hover {
95-
-webkit-text-decoration: underline;
96-
text-decoration: underline;
97-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
98-
}
99-
100-
.c1:is(button) {
101-
display: inline-block;
102-
padding: 0;
103-
font-size: inherit;
104-
white-space: nowrap;
105-
cursor: pointer;
106-
-webkit-user-select: none;
107-
-moz-user-select: none;
108-
-ms-user-select: none;
109-
user-select: none;
110-
background-color: transparent;
111-
border: 0;
112-
-webkit-appearance: none;
113-
-moz-appearance: none;
114-
appearance: none;
115-
}
116-
11717
<a
118-
className="c0 c1"
18+
className="Link"
19+
hoverColor="accent.fg"
11920
/>
12021
`;
12122

12223
exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = `
123-
.c1 {
124-
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
125-
-webkit-text-decoration: none;
126-
text-decoration: none;
24+
.c0 {
12725
color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
12826
}
12927
130-
[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
131-
-webkit-text-decoration: underline;
132-
text-decoration: underline;
133-
}
134-
135-
.c1:hover {
136-
-webkit-text-decoration: none;
137-
text-decoration: none;
138-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
139-
}
140-
141-
.c1:is(button) {
142-
display: inline-block;
143-
padding: 0;
144-
font-size: inherit;
145-
white-space: nowrap;
146-
cursor: pointer;
147-
-webkit-user-select: none;
148-
-moz-user-select: none;
149-
-ms-user-select: none;
150-
user-select: none;
151-
background-color: transparent;
152-
border: 0;
153-
-webkit-appearance: none;
154-
-moz-appearance: none;
155-
appearance: none;
156-
}
157-
15828
<a
159-
className="c0 c1"
29+
className="c0 Link"
30+
data-muted={true}
16031
muted={true}
16132
/>
16233
`;
16334

16435
exports[`Link respects the "muted" prop 1`] = `
165-
.c1 {
166-
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
167-
-webkit-text-decoration: none;
168-
text-decoration: none;
169-
}
170-
171-
[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
172-
-webkit-text-decoration: underline;
173-
text-decoration: underline;
174-
}
175-
176-
.c1:hover {
177-
-webkit-text-decoration: none;
178-
text-decoration: none;
179-
color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
180-
}
181-
182-
.c1:is(button) {
183-
display: inline-block;
184-
padding: 0;
185-
font-size: inherit;
186-
white-space: nowrap;
187-
cursor: pointer;
188-
-webkit-user-select: none;
189-
-moz-user-select: none;
190-
-ms-user-select: none;
191-
user-select: none;
192-
background-color: transparent;
193-
border: 0;
194-
-webkit-appearance: none;
195-
-moz-appearance: none;
196-
appearance: none;
197-
}
198-
19936
<a
200-
className="c0 c1"
37+
className="Link"
38+
data-muted={true}
20139
muted={true}
20240
/>
20341
`;

0 commit comments

Comments
 (0)