Skip to content

Commit be1595e

Browse files
Merge branch 'main' into bs/rule-for-tooltip-v2
2 parents 4435db4 + d433ee7 commit be1595e

19 files changed

+1813
-1779
lines changed
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Check for changeset
2+
3+
on:
4+
pull_request:
5+
types:
6+
# On by default if you specify no types.
7+
- 'opened'
8+
- 'reopened'
9+
- 'synchronize'
10+
# For `skip-label` only.
11+
- 'labeled'
12+
- 'unlabeled'
13+
14+
jobs:
15+
check-for-changeset:
16+
name: Check for changeset
17+
runs-on: ubuntu-latest
18+
steps:
19+
- uses: actions/checkout@v4
20+
- name: 'Check for changeset'
21+
uses: brettcannon/check-for-changed-files@v1
22+
with:
23+
file-pattern: '.changeset/*.md'
24+
skip-label: 'skip changeset'
25+
failure-message: 'No changeset found. If these changes should not result in a new version, apply the ${skip-label} label to this pull request. If these changes should result in a version bump, please add a changeset https://git.io/J6QvQ'
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: Release Event Tracking
2+
# Measure a datadog event every time a release occurs
3+
4+
on:
5+
pull_request:
6+
types:
7+
- closed
8+
- opened
9+
- reopened
10+
11+
release:
12+
types: [published]
13+
14+
jobs:
15+
release-tracking:
16+
name: Release Tracking
17+
uses: primer/.github/.github/workflows/[email protected]
18+
secrets:
19+
datadog_api_key: ${{ secrets.DATADOG_API_KEY }}

CHANGELOG.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,35 @@
11
# eslint-plugin-primer-react
22

3+
## 5.3.0
4+
5+
### Minor Changes
6+
7+
- [#185](https://github.com/primer/eslint-plugin-primer-react/pull/185) [`fea642d`](https://github.com/primer/eslint-plugin-primer-react/commit/fea642d79982e36729262ec55d6e291780ca6160) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Add a rule that warns against removing `unsafeDisableTooltip` prop
8+
9+
## 5.2.1
10+
11+
### Patch Changes
12+
13+
- [#195](https://github.com/primer/eslint-plugin-primer-react/pull/195) [`ccc2e99`](https://github.com/primer/eslint-plugin-primer-react/commit/ccc2e995a3f46bb4842468188b91c0bd641da390) Thanks [@khiga8](https://github.com/khiga8)! - Clean up docs for link lint rule
14+
15+
- [#193](https://github.com/primer/eslint-plugin-primer-react/pull/193) [`5fc19f6`](https://github.com/primer/eslint-plugin-primer-react/commit/5fc19f63a4916add7b3c335ac661119c50af17af) Thanks [@khiga8](https://github.com/khiga8)! - Update link lint rule to skip Link with className
16+
17+
## 5.2.0
18+
19+
### Minor Changes
20+
21+
- [#190](https://github.com/primer/eslint-plugin-primer-react/pull/190) [`a02a188`](https://github.com/primer/eslint-plugin-primer-react/commit/a02a1884c1334e1cdb43d7c5cafacdfd4ec92e33) Thanks [@khiga8](https://github.com/khiga8)! - \* bump eslint-plugin-github to v5.0.0
22+
23+
### Patch Changes
24+
25+
- [#183](https://github.com/primer/eslint-plugin-primer-react/pull/183) [`7bd36d2`](https://github.com/primer/eslint-plugin-primer-react/commit/7bd36d2a9a594a49ab8317a2986eda7c948b16b6) Thanks [@khiga8](https://github.com/khiga8)! - New rule to flag `Link` in text block missing the `inline` prop
26+
27+
## 5.1.0
28+
29+
### Minor Changes
30+
31+
- [#178](https://github.com/primer/eslint-plugin-primer-react/pull/178) [`49150da`](https://github.com/primer/eslint-plugin-primer-react/commit/49150da106f0ff9a52faac8d559b78449c672391) Thanks [@khiga8](https://github.com/khiga8)! - Map `Box` to `div` and pass it into `eslint-plugin-github`.
32+
333
## 5.0.0
434

535
### Major Changes

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ ESLint rules for Primer React
3333

3434
- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
3535
- [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
36-
- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
37-
- [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
3836
- [new-css-color-vars](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/new-css-color-vars.md)
3937
- [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-props.md)
38+
- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
39+
- [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
40+
- [a11y-link-in-text-block](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-link-in-text-block.md)
41+
- [a11y-remove-disable-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-remove-disable-tooltip.md)

docs/rules/a11y-link-in-text-block.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# EXPERIMENTAL: Require `inline` prop on `<Link>` in text block
2+
3+
This is an experimental rule. If you suspect any false positives reported by this rule, please file an issue so we can make this rule better.
4+
5+
## Rule Details
6+
7+
The `Link` component should have the `inline` prop when it is used within a text block and has no styles (aside from color) to distinguish itself from surrounding plain text.
8+
9+
Related: [WCAG 1.4.1 Use of Color issues](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
10+
11+
The lint rule will flag any `<Link>` without the `inline` property (equal to `true`) detected with string nodes on either side.
12+
13+
There are certain edge cases that the linter skips to avoid false positives including:
14+
15+
- `<Link className="...">` because there may be distinguishing styles applied.
16+
- `<Link sx={{fontWeight:...}}>` or `<Link sx={{fontFamily:...}}>` because these technically may provide sufficient distinguishing styling.
17+
- `<Link>` where the only adjacent text is a period, since that can't really be considered a text block.
18+
- `<Link>` where the children is a JSX component, rather than a string literal, because then it might be an icon link rather than a text link.
19+
- `<Link>` that are nested inside of headings as these have often been breadcrumbs.
20+
21+
This rule will not catch all instances of link in text block due to the limitations of static analysis, so be sure to also have in-browser checks in place such as the [link-in-text-block Axe rule](https://dequeuniversity.com/rules/axe/4.9/link-in-text-block) for additional coverage.
22+
23+
👎 Examples of **incorrect** code for this rule
24+
25+
```jsx
26+
import {Link} from '@primer/react'
27+
28+
function ExampleComponent() {
29+
return (
30+
<SomeComponent>
31+
<Link>Say hello</Link> or not.
32+
</SomeComponent>
33+
)
34+
}
35+
```
36+
37+
```jsx
38+
import {Link} from '@primer/react'
39+
40+
function ExampleComponent() {
41+
return (
42+
<SomeComponent>
43+
Say hello or <Link>sign-up</Link>.
44+
</SomeComponent>
45+
)
46+
}
47+
```
48+
49+
👍 Examples of **correct** code for this rule:
50+
51+
```jsx
52+
function ExampleComponent() {
53+
return (
54+
<SomeComponent>
55+
<Link inline>Say hello</Link> or not.
56+
</SomeComponent>
57+
)
58+
}
59+
```
60+
61+
```jsx
62+
function ExampleComponent() {
63+
return (
64+
<SomeComponent>
65+
<Link inline={true}>Say hello</Link> or not.
66+
</SomeComponent>
67+
)
68+
}
69+
```
70+
71+
This rule will skip `Link`s containing JSX elements to minimize potential false positives because it is possible the JSX element sufficiently distinguishes the link from surrounding text.
72+
73+
```jsx
74+
function ExampleComponent() {
75+
return (
76+
<SomeComponent>
77+
<Link>
78+
<SomeAvatar />
79+
@monalisa
80+
</Link>{' '}
81+
commented on your account.
82+
</SomeComponent>
83+
)
84+
}
85+
```
86+
87+
This rule will skip `Link`s nested inside of a `Heading`.
88+
89+
```jsx
90+
function ExampleComponent() {
91+
return (
92+
<Heading>
93+
<Link>Previous location</Link>/ Current location
94+
</Heading>
95+
)
96+
}
97+
```
98+
99+
This rule will skip `Link`s with a `className`.
100+
101+
```jsx
102+
function ExampleComponent() {
103+
return (
104+
Learn more at <Link className={styles.someDistinguishingStyle}>GitHub</Link>
105+
)
106+
}
107+
```
108+
109+
## Options
110+
111+
- `skipImportCheck` (default: `false`)
112+
113+
By default, the `a11y-link-in-text-block` rule will only check for `<Link>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
## Rule Details
2+
3+
This rule enforces to remove the `unsafeDisableTooltip` from `IconButton` component so that they have a tooltip by default. `unsafeDisableTooltip` prop is created for an incremental migration and should be removed once all icon buttons have a tooltip.
4+
5+
👎 Examples of **incorrect** code for this rule:
6+
7+
```jsx
8+
import {IconButton} from '@primer/react'
9+
10+
const App = () => (
11+
<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip />
12+
// OR
13+
<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={true} />
14+
// OR
15+
<IconButton icon={SearchIcon} aria-label="Search" unsafeDisableTooltip={false} /> // This is incorrect because it should be removed
16+
)
17+
```
18+
19+
👍 Examples of **correct** code for this rule:
20+
21+
```jsx
22+
import {IconButton} from '@primer/react'
23+
24+
const App = () => <IconButton icon={SearchIcon} aria-label="Search" />
25+
```

0 commit comments

Comments
 (0)