eslint-plugin-primer-react 8.1.0 → 8.2.0-rc.18e9359
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# eslint-plugin-primer-react
|
|
2
2
|
|
|
3
|
+
## 8.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#407](https://github.com/primer/eslint-plugin-primer-react/pull/407) [`2f25480`](https://github.com/primer/eslint-plugin-primer-react/commit/2f25480c3341c1d1afb6fc040c5c5deee416d71c) Thanks [@jonrohan](https://github.com/jonrohan)! - Make `use-styled-react-import` rule configurable
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#406](https://github.com/primer/eslint-plugin-primer-react/pull/406) [`d72e8c4`](https://github.com/primer/eslint-plugin-primer-react/commit/d72e8c4c172d1c37da201a20cde0b7b2bd9ab283) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixes for `use-styled-react-import` rule for compound components.
|
|
12
|
+
|
|
3
13
|
## 8.1.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
|
@@ -121,7 +121,55 @@ const Component2 = () => <StyledButton sx={{color: 'red'}}>Styled me</StyledButt
|
|
|
121
121
|
|
|
122
122
|
## Options
|
|
123
123
|
|
|
124
|
-
This rule
|
|
124
|
+
This rule accepts an optional configuration object with the following properties:
|
|
125
|
+
|
|
126
|
+
- `styledComponents` (array of strings): Components that should be imported from `@primer/styled-react` when used with `sx` prop. Defaults to the list shown above.
|
|
127
|
+
- `styledTypes` (array of strings): Types that should always be imported from `@primer/styled-react`. Defaults to `['BoxProps', 'SxProp', 'BetterSystemStyleObject']`.
|
|
128
|
+
- `styledUtilities` (array of strings): Utilities that should always be imported from `@primer/styled-react`. Defaults to `['sx']`.
|
|
129
|
+
|
|
130
|
+
### Example Configuration
|
|
131
|
+
|
|
132
|
+
```json
|
|
133
|
+
{
|
|
134
|
+
"rules": {
|
|
135
|
+
"@primer/primer-react/use-styled-react-import": [
|
|
136
|
+
"error",
|
|
137
|
+
{
|
|
138
|
+
"styledComponents": ["Button", "Box", "CustomComponent"],
|
|
139
|
+
"styledTypes": ["BoxProps", "CustomProps"],
|
|
140
|
+
"styledUtilities": ["sx", "customSx"]
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Configuration Examples
|
|
148
|
+
|
|
149
|
+
#### ❌ Incorrect with custom configuration
|
|
150
|
+
|
|
151
|
+
```jsx
|
|
152
|
+
// With styledComponents: ["CustomButton"]
|
|
153
|
+
import {CustomButton} from '@primer/react'
|
|
154
|
+
|
|
155
|
+
const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### ✅ Correct with custom configuration
|
|
159
|
+
|
|
160
|
+
```jsx
|
|
161
|
+
// With styledComponents: ["CustomButton"]
|
|
162
|
+
import {CustomButton} from '@primer/styled-react'
|
|
163
|
+
|
|
164
|
+
const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
```jsx
|
|
168
|
+
// Box is not in custom styledComponents list, so it can be used with sx from @primer/react
|
|
169
|
+
import {Box} from '@primer/react'
|
|
170
|
+
|
|
171
|
+
const Component = () => <Box sx={{color: 'red'}}>Content</Box>
|
|
172
|
+
```
|
|
125
173
|
|
|
126
174
|
## When Not To Use It
|
|
127
175
|
|