Skip to content

Revert "[Breaking] Remove no-deprecated-colors plugin" #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions .changeset/shiny-kiwis-hammer.md

This file was deleted.

1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ ESLint rules for Primer React
## Rules

- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
- [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
- [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
- [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
Expand Down
91 changes: 91 additions & 0 deletions docs/rules/no-deprecated-colors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Disallow references to deprecated color variables (no-deprecated-colors)

🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can
automatically fix some of the problems reported by this rule.

[Theming](https://primer.style/react/theming) in Primer React is made possible by a theme object that defines your
application's colors, spacing, fonts, and more. The color variables in Primer React's
[default theme object](https://primer.style/react/theme-reference) are pulled from
[Primer Primitives](https://github.com/primer/primitives). When a color variable is deprecated in Primer Primitives,
it's important to remove references to that color variable in your application before it's removed from the library.

## Rule details

This rule disallows references to color variables that are deprecated in
[Primer Primitives](https://github.com/primer/primitives).

👎 Examples of **incorrect** code for this rule:

```jsx
/* eslint primer-react/no-deprecated-colors: "error" */
import {Box, themeGet} from '@primer/react'
import styled from 'styled-components'

const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</Box>

const SxPropExample() = () => <Box sx={{color: 'some.deprecated.color'}}>Incorrect</Box>

const SxPropExample2() = () => <Box sx={{boxShadow: theme => `0 1px 2px ${theme.colors.some.deprecated.color}`}}>Incorrect</Box>

const ThemeGetExample = styled.div`
color: ${themeGet('colors.some.deprecated.color')};
`
```

👍 Examples of **correct** code for this rule:

```jsx
/* eslint primer-react/no-deprecated-colors: "error" */
import {Box, themeGet} from '@primer/react'
import styled from 'styled-components'

const SystemPropExample() = () => <Box color="some.color">Correct</Box>

const SxPropExample() = () => <Box sx={{color: 'some.color'}}>Correct</Box>

const SxPropExample2() = () => <Box sx={{boxShadow: theme => `0 1px 2px ${theme.colors.some.color}`}}>Correct</Box>

const ThemeGetExample = styled.div`
color: ${themeGet('colors.some.color')};
`
```

## Options

- `skipImportCheck` (default: `false`)

By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components
that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is
useful for linting custom components that pass color-related props down to Primer React components.

```js
/* eslint primer-react/no-deprecated-colors: ["warn", {"skipImportCheck": true}] */
import {Box} from '@primer/react'

function MyBox({color, children}) {
return <Box color={color}>{children}</Box>
}

function App() {
// Enabling `skipImportCheck` will find deprecated colors used like this:
return <MyBox color="text.primary">Hello</MyBox>
}
```

- `checkAllStrings` (default: `false`)

If `checkAllStrings` is set to `true`, the `no-deprecated-colors` rule will check for deprecated colors in all
strings. This is useful for catching uses of deprecated colors outside system props and the `sx` prop.

```js
/* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
import {Box} from '@primer/react'

function ExampleComponent() {
const styles = {
// Enabling `checkAllStrings` will find deprecated colors used like this:
color: 'text.primary',
}
return <Box sx={styles}>Hello</Box>
}
```
14 changes: 14 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
},
"homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
"peerDependencies": {
"@primer/primitives": ">=4.6.2",
"eslint": "^8.42.0"
},
"dependencies": {
Expand All @@ -40,6 +41,7 @@
"@changesets/cli": "^2.16.0",
"@github/markdownlint-github": "^0.6.0",
"@github/prettier-config": "0.0.6",
"@primer/primitives": "^7.14.0",
"eslint": "^8.42.0",
"eslint-plugin-prettier": "^5.0.1",
"jest": "^29.7.0",
Expand Down
1 change: 1 addition & 0 deletions src/configs/recommended.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = {
extends: ['plugin:github/react'],
rules: {
'primer-react/direct-slot-children': 'error',
'primer-react/no-deprecated-colors': 'warn',
'primer-react/no-system-props': 'warn',
'primer-react/a11y-tooltip-interactive-trigger': 'error',
'primer-react/new-color-css-vars': 'error',
Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
rules: {
'direct-slot-children': require('./rules/direct-slot-children'),
'no-deprecated-colors': require('./rules/no-deprecated-colors'),
'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
'no-system-props': require('./rules/no-system-props'),
'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
Expand Down
Loading
Loading