eslint-plugin-primer-react 6.2.0-rc.2c85052 → 7.0.0-rc.0a66f81

package/CHANGELOG.md

@@ -1,9 +1,15 @@
 # eslint-plugin-primer-react
 
-## 6.2.0
+## 7.0.0
+
+### Major Changes
+
+- [#270](https://github.com/primer/eslint-plugin-primer-react/pull/270) [`17814a2`](https://github.com/primer/eslint-plugin-primer-react/commit/17814a2d77d752b6675e51124fe3c18671837a10) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Update a11y-use-next-tooltip to be a11y-use-accessible-tooltip and make the changes accordingly
 
 ### Minor Changes
 
+- [#266](https://github.com/primer/eslint-plugin-primer-react/pull/266) [`90134bc`](https://github.com/primer/eslint-plugin-primer-react/commit/90134bcee073c424e81c53e69632e1518798af93) Thanks [@keithamus](https://github.com/keithamus)! - Add enforce-css-module-default-import rule
+
 - [#258](https://github.com/primer/eslint-plugin-primer-react/pull/258) [`83f29f3`](https://github.com/primer/eslint-plugin-primer-react/commit/83f29f339999b9c21d95167bcc2680c1797cbab6) Thanks [@keithamus](https://github.com/keithamus)! - Add enforce-css-module-identifier-casing rule
 
 ## 6.1.6

package/README.md

@@ -39,4 +39,4 @@ ESLint rules for Primer React
 - [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
 - [a11y-link-in-text-block](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-link-in-text-block.md)
 - [a11y-remove-disable-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-remove-disable-tooltip.md)
-- [a11y-use-next-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-next-tooltip.md)
+- [a11y-use-accessible-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-accessible-tooltip.md)

package/docs/rules/a11y-use-accessible-tooltip.md

@@ -0,0 +1,47 @@
+# Recommends to use the new accessible tooltip instead of the deprecated one.
+
+## Rule details
+
+This rule suggests switching to the new accessible tooltip from @primer/react instead of the deprecated version. Deprecated props like wrap, noDelay, and align should also be removed.
+
+Note that the new tooltip is intended for interactive elements only, such as buttons and links, whereas the deprecated tooltip could be applied to any element, though it lacks screen reader accessibility. As a result, the autofix for this rule will only work if the deprecated tooltip is on an interactive element. If it is applied to a non-interactive element, please consult your design team for [an alternative approach](https://primer.style/guides/accessibility/tooltip-alternatives).
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+import {Tooltip} from '@primer/react/deprecated'
+
+const App = () => (
+  <Tooltip aria-label="This change cannot be undone" direction="w" wrap={true} noDelay={true} align="left">
+    <Button onClick={onClick}>Delete</Button>
+  </Tooltip>
+)
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {Tooltip} from '@primer/react'
+
+const App = () => (
+  <Tooltip text="This change cannot be undone" direction="w">
+    <Button onClick={onClick}>Delete</Button>
+  </Tooltip>
+)
+```
+
+## Icon buttons and tooltips
+
+Even though the below code is perfectly valid, since icon buttons now come with tooltips by default, it is not required to explicitly use the Tooltip component on icon buttons.
+
+```jsx
+import {IconButton, Tooltip} from '@primer/react'
+
+function ExampleComponent() {
+  return (
+    <Tooltip text="Search" direction="e">
+      <IconButton icon={SearchIcon} aria-label="Search" />
+    </Tooltip>
+  )
+}
+```

package/docs/rules/enforce-css-module-default-import.md

@@ -0,0 +1,53 @@
+# Enforce CSS Module Default Import (enforce-css-module-default-import)
+
+CSS Modules should import only the default import. Avoid named imports which can often conflict with other variables (including the function name of the React component) when importing css modules.
+
+Additionally, for consistency among the codebase the default import should be consistently named. This rule allows enforcing the name of the default import, which by default expects it to be named either `classes` or be suffixed `Classes`.
+
+## Rule details
+
+This rule disallows the use of any CSS Module property that does not match the desired casing.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: "error" */
+import {Button} from '@primer/react'
+import {Button as ButtonClass} from './some.module.css' // oops! Conflict!
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"^classes$"}] */
+import {Button} from '@primer/react'
+import classnames from './some.module.css' // This default import should match /^classes$/
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: "error" */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"^classes$"}] */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"(^classes$|Classes$)"}] */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+import sharedClasses from './shared.module.css'
+import utilClasses from './util.module.css'
+```
+
+## Options
+
+- `enforceName` (default: `.*`)
+
+  By default, the `enforce-css-module-default-import` rule will allow any name for the default export,
+  however in the _recommended_ ruleset this is set to `(^classes$|Classes$)` meaning that the default
+  export name must either be exactly `classes` or end in `Classes`, for example `sharedClasses`.