Skip to content

Commit e738a4b

Browse files
committed
Add docs for explicit-heading
1 parent d17554f commit e738a4b

File tree

1 file changed

+37
-0
lines changed

1 file changed

+37
-0
lines changed

docs/rules/explicit-heading.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
## Require explicit heading level on `<Heading>` component
2+
3+
The `Heading` component does not require you to use `as` to specify the heading level, as it will default to an `h2` if one isn't specified. This may lead to inaccessible usage if the default is out of order in the existing heading hierarchy.
4+
5+
## Rule Details
6+
7+
This rule enforces using `as` on the `<Heading>` component to specify a heading level (`h1`-`h6`). In addition, it enforces `as` usage to only be used for headings.
8+
9+
👎 Examples of **incorrect** code for this rule
10+
11+
```jsx
12+
import {Heading} from '@primer/react'
13+
14+
<Heading>Heading without explicit heading level</Heading>
15+
```
16+
17+
`as` must only be for headings (`h1`-`h6`)
18+
19+
```jsx
20+
import {Heading} from '@primer/react'
21+
22+
<Heading as="span">Heading component used as "span"</Heading>
23+
```
24+
25+
👍 Examples of **correct** code for this rule:
26+
27+
```jsx
28+
import {Heading} from '@primer/react';
29+
30+
<Heading as="h2">Heading level 2</Heading>
31+
```
32+
33+
## Options
34+
35+
- `skipImportCheck` (default: `false`)
36+
37+
By default, the `explicit-heading` rule will only check for `<Heading>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.

0 commit comments

Comments
 (0)