eslint-plugin-primer-react 6.2.0-rc.2c85052 → 7.0.0-rc.55939f7

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`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.2.0-rc.2c85052",
+  "version": "7.0.0-rc.55939f7",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -17,10 +17,11 @@ module.exports = {
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
-    'primer-react/a11y-use-next-tooltip': 'error',
+    'primer-react/a11y-use-accessible-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
     'primer-react/enforce-css-module-identifier-casing': 'error',
+    'primer-react/enforce-css-module-default-import': ['error', {enforceName: '(^classes$|Classes$)'}],
   },
   settings: {
     github: {

package/src/index.js

@@ -9,12 +9,13 @@ module.exports = {
     'no-deprecated-props': require('./rules/no-deprecated-props'),
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
-    'a11y-use-next-tooltip': require('./rules/a11y-use-next-tooltip'),
+    'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
+    'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/a11y-use-accessible-tooltip.test.js

@@ -0,0 +1,59 @@
+const rule = require('../a11y-use-accessible-tooltip')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('a11y-use-accessible-tooltip', rule, {
+  valid: [`import {Tooltip} from '@primer/react';`],
+  invalid: [
+    // Single import from deprecated
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Tooltip, Button} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated
+    {
+      code: `import {Button, Tooltip, Stack} from '@primer/react/deprecated';`,
+      errors: [{messageId: 'useAccessibleTooltip'}],
+      output: `import {Button, Stack} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';`,
+    },
+    // Single import from deprecated with an existing import from @primer/react
+    {
+      code: `import {Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    // Multiple imports from deprecated with an existing import from @primer/react
+    {
+      code: `import {Dialog, Tooltip} from '@primer/react/deprecated';import {ActionList, ActionMenu} from '@primer/react';`,
+      errors: [{messageId: 'useAccessibleTooltip', line: 1}],
+      output: `import {Dialog} from '@primer/react/deprecated';import {ActionList, ActionMenu, Tooltip} from '@primer/react';`,
+    },
+    {
+      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react/deprecated';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
+      errors: [
+        {messageId: 'useAccessibleTooltip', line: 1},
+        {messageId: 'useTextProp', line: 2},
+        {messageId: 'noDelayRemoved', line: 2},
+        {messageId: 'wrapRemoved', line: 2},
+        {messageId: 'alignRemoved', line: 2},
+      ],
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react/deprecated';\nimport {Tooltip} from '@primer/react';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
+    },
+  ],
+})

package/src/rules/__tests__/enforce-css-module-default-import.js

@@ -0,0 +1,88 @@
+const rule = require('../enforce-css-module-default-import')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('enforce-css-module-default-import', rule, {
+  valid: [
+    'import classes from "a.module.css";',
+    'import {default as classes} from "a.module.css";',
+    'import staticClasses from "a.module.css";',
+    'import fooClasses from "a.module.css";',
+    'import whatever from "a.js";',
+    'import whatever from "a.module.js";',
+    'import whatever from "a.css";',
+    'import {whatever} from "a.js";',
+    'import {whatever} from "a.css";',
+    {
+      code: 'import classes from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+    },
+    {
+      code: 'import sharedClasses from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+    },
+  ],
+  invalid: [
+    {
+      code: 'import {foo} from "a.module.css";',
+      errors: [
+        {
+          messageId: 'notDefault',
+        },
+      ],
+    },
+    {
+      code: 'import _, {foo} from "a.module.css";',
+      errors: [
+        {
+          messageId: 'notDefault',
+        },
+      ],
+    },
+    {
+      code: 'import foobar from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import someclasses from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import {default as foobar} from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+    {
+      code: 'import {default as someclasses} from "a.module.css";',
+      options: [{enforceName: '(?:^classes$|Classes$)'}],
+      errors: [
+        {
+          messageId: 'badName',
+        },
+      ],
+    },
+  ],
+})

package/src/rules/__tests__/enforce-css-module-identifier-casing.test.js

@@ -19,6 +19,7 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
     'import classes from "a.module.css"; function Foo() { return <Box className={`${classes.Foo}`}/> }',
     'import classes from "a.module.css"; function Foo() { return <Box className={`${classes["Foo"]}`}/> }',
     'import classes from "a.module.css"; let x = "Foo"; function Foo() { return <Box className={`${classes[x]}`}/> }',
+    'import {Foo} from "a.module.css"; function Bar() { return <Box className={Foo}/> }',
   ],
   invalid: [
     {
@@ -30,6 +31,15 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
         },
       ],
     },
+    {
+      code: 'import {foo} from "a.module.css"; function Bar() { return <Box className={foo}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
     {
       code: 'import classes from "a.module.css"; function Foo() { return <Box className={clsx(classes.foo)}/> }',
       errors: [

package/src/rules/a11y-use-accessible-tooltip.js

@@ -0,0 +1,148 @@
+'use strict'
+const url = require('../url')
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'recommends the use of @primer/react Tooltip component',
+      category: 'Best Practices',
+      recommended: true,
+      url: url(module),
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      useAccessibleTooltip: 'Please use @primer/react Tooltip component that has accessibility improvements',
+      useTextProp: 'Please use the text prop instead of aria-label',
+      noDelayRemoved: 'noDelay prop is removed. Tooltip now has no delay by default',
+      wrapRemoved: 'wrap prop is removed. Tooltip now wraps by default',
+      alignRemoved: 'align prop is removed. Please use the direction prop instead.',
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@primer/react/deprecated') {
+          return
+        }
+        const hasTooltip = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        if (!hasTooltip) {
+          return
+        }
+
+        const hasOtherImports = node.specifiers.length > 1
+
+        const sourceCode = context.getSourceCode()
+        // Checking to see if there is an existing root (@primer/react) import
+        // Assuming there is one root import per file
+        const rootImport = sourceCode.ast.body.find(statement => {
+          return statement.type === 'ImportDeclaration' && statement.source.value === '@primer/react'
+        })
+
+        const tooltipSpecifier = node.specifiers.find(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
+        )
+
+        const hasRootImport = rootImport !== undefined
+
+        context.report({
+          node,
+          messageId: 'useAccessibleTooltip',
+          fix(fixer) {
+            const fixes = []
+            if (!hasOtherImports) {
+              // If Tooltip is the only import and no existing @primer/react import, replace the whole import statement
+              if (!hasRootImport) fixes.push(fixer.replaceText(node.source, `'@primer/react'`))
+              if (hasRootImport) {
+                //  remove the entire import statement
+                fixes.push(fixer.remove(node))
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            } else {
+              // There are other imports from the deprecated bundle but no existing @primer/react import, so remove the Tooltip import and add a new import statement with the correct path.
+              const previousToken = sourceCode.getTokenBefore(tooltipSpecifier)
+              const nextToken = sourceCode.getTokenAfter(tooltipSpecifier)
+              const hasTrailingComma = nextToken && nextToken.value === ','
+              const hasLeadingComma = previousToken && previousToken.value === ','
+
+              let rangeToRemove
+
+              if (hasTrailingComma) {
+                rangeToRemove = [tooltipSpecifier.range[0], nextToken.range[1] + 1]
+              } else if (hasLeadingComma) {
+                rangeToRemove = [previousToken.range[0], tooltipSpecifier.range[1]]
+              } else {
+                rangeToRemove = [tooltipSpecifier.range[0], tooltipSpecifier.range[1]]
+              }
+              // Remove Tooltip from the import statement
+              fixes.push(fixer.removeRange(rangeToRemove))
+
+              if (!hasRootImport) {
+                fixes.push(fixer.insertTextAfter(node, `\nimport {Tooltip} from '@primer/react';`))
+              } else {
+                // find the last specifier in the existing @primer/react import and insert Tooltip after that
+                const lastSpecifier = rootImport.specifiers[rootImport.specifiers.length - 1]
+                fixes.push(fixer.insertTextAfter(lastSpecifier, `, Tooltip`))
+              }
+            }
+            return fixes
+          },
+        })
+      },
+      JSXOpeningElement(node) {
+        const openingElName = getJSXOpeningElementName(node)
+        if (openingElName !== 'Tooltip') {
+          return
+        }
+        const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
+        if (ariaLabel !== undefined) {
+          context.report({
+            node,
+            messageId: 'useTextProp',
+            fix(fixer) {
+              return fixer.replaceText(ariaLabel.name, 'text')
+            },
+          })
+        }
+        const noDelay = getJSXOpeningElementAttribute(node, 'noDelay')
+        if (noDelay !== undefined) {
+          context.report({
+            node,
+            messageId: 'noDelayRemoved',
+            fix(fixer) {
+              return fixer.remove(noDelay)
+            },
+          })
+        }
+        const wrap = getJSXOpeningElementAttribute(node, 'wrap')
+        if (wrap !== undefined) {
+          context.report({
+            node,
+            messageId: 'wrapRemoved',
+            fix(fixer) {
+              return fixer.remove(wrap)
+            },
+          })
+        }
+        const align = getJSXOpeningElementAttribute(node, 'align')
+        if (align !== undefined) {
+          context.report({
+            node,
+            messageId: 'alignRemoved',
+            fix(fixer) {
+              return fixer.remove(align)
+            },
+          })
+        }
+      },
+    }
+  },
+}

package/src/rules/enforce-css-module-default-import.js

@@ -0,0 +1,62 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    schema: [
+      {
+        properties: {
+          enforceName: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    messages: {
+      badName: 'This default import should match {{enforceName}}',
+      notDefault: 'Class modules should only import the default object.',
+      noDefault: 'Class modules should always import default.',
+    },
+  },
+  create(context) {
+    const enforceName = new RegExp(context.options[0]?.enforceName || '.*')
+    return {
+      ['ImportDeclaration>Literal[value=/.module.css$/]']: function (node) {
+        node = node.parent
+        const defaultSpecifier = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier')
+        const otherSpecifiers = node.specifiers.filter(spec => spec.type !== 'ImportDefaultSpecifier')
+        const asDefaultSpecifier = otherSpecifiers.find(spec => spec.imported?.name === 'default')
+        if (!node.specifiers.length) {
+          context.report({
+            node,
+            messageId: 'noDefault',
+          })
+        } else if (otherSpecifiers.length === 1 && asDefaultSpecifier) {
+          if (!enforceName.test(asDefaultSpecifier.local.name)) {
+            context.report({
+              node,
+              messageId: 'badName',
+              data: {enforceName},
+            })
+          }
+        } else if (otherSpecifiers.length) {
+          context.report({
+            node,
+            messageId: 'notDefault',
+          })
+        } else if (!defaultSpecifier) {
+          context.report({
+            node,
+            messageId: 'noDefault',
+          })
+        }
+        if (defaultSpecifier && !enforceName.test(defaultSpecifier.local.name)) {
+          context.report({
+            node,
+            messageId: 'badName',
+            data: {enforceName},
+          })
+        }
+      },
+    }
+  },
+}

package/src/rules/enforce-css-module-identifier-casing.js

@@ -24,6 +24,16 @@ module.exports = {
   create(context) {
     const casing = context.options[0]?.casing || 'pascal'
     return {
+      ['JSXAttribute[name.name="className"] JSXExpressionContainer>Identifier']: function (node) {
+        if (!identifierIsCSSModuleBinding(node, context)) return
+        if (!casingMatches(node.name || '', casing)) {
+          context.report({
+            node,
+            messageId: casing,
+            data: {name: node.name},
+          })
+        }
+      },
       ['JSXAttribute[name.name="className"] JSXExpressionContainer MemberExpression[object.type="Identifier"]']:
         function (node) {
           if (!identifierIsCSSModuleBinding(node.object, context)) return
@@ -44,8 +54,8 @@ module.exports = {
               })
             }
           } else if (node.computed) {
-            const ref = context
-              .getScope()
+            const ref = context.sourceCode
+              .getScope(node)
               .references.find(reference => reference.identifier.name === node.property.name)
             const def = ref.resolved?.defs?.[0]
             if (def?.node?.init?.type === 'Literal') {

package/src/utils/css-modules.js

@@ -4,8 +4,8 @@ function importBindingIsFromCSSModuleImport(node) {
 
 function identifierIsCSSModuleBinding(node, context) {
   if (node.type !== 'Identifier') return false
-  const ref = context.getScope().references.find(reference => reference.identifier.name === node.name)
-  if (ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
+  const ref = context.sourceCode.getScope(node).references.find(reference => reference.identifier.name === node.name)
+  if (ref && ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
     return true
   }
   return false

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

@@ -1,33 +0,0 @@
-# Recommends to use the `next` tooltip instead of the current stable one.
-
-## Rule details
-
-This rule recommends using the tooltip that is imported from `@primer/react/next` instead of the main entrypoint. The components that are exported from `@primer/react/next` are recommended over the main entrypoint ones because `next` components are reviewed and remediated for accessibility issues.
-👎 Examples of **incorrect** code for this rule:
-
-```tsx
-import {Tooltip} from '@primer/react'
-```
-
-👍 Examples of **correct** code for this rule:
-
-```tsx
-import {Tooltip} from '@primer/react/next'
-```
-
-## 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} from '@primer/react'
-import {Tooltip} from '@primer/react/next'
-
-function ExampleComponent() {
-  return (
-    <Tooltip text="Search" direction="e">
-      <IconButton icon={SearchIcon} aria-label="Search" />
-    </Tooltip>
-  )
-}
-```

package/src/rules/__tests__/a11y-use-next-tooltip.test.js

@@ -1,61 +0,0 @@
-const rule = require('../a11y-use-next-tooltip')
-const {RuleTester} = require('eslint')
-
-const ruleTester = new RuleTester({
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-})
-
-ruleTester.run('a11y-use-next-tooltip', rule, {
-  valid: [
-    `import {Tooltip} from '@primer/react/next';`,
-    `import {UnderlineNav, Button} from '@primer/react';
-   import {Tooltip} from '@primer/react/next';`,
-    `import {UnderlineNav, Button} from '@primer/react';
-   import {Tooltip, SelectPanel} from '@primer/react/next';`,
-  ],
-  invalid: [
-    {
-      code: `import {Tooltip} from '@primer/react';`,
-      errors: [{messageId: 'useNextTooltip'}],
-      output: `import {Tooltip} from '@primer/react/next';`,
-    },
-    {
-      code: `import {Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button>Button</Button></Tooltip>`,
-      errors: [{messageId: 'useNextTooltip'}, {messageId: 'useTextProp'}],
-      output: `import {Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button>Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button>Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button>Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Button, Tooltip} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
-    },
-    {
-      code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
-      errors: [
-        {messageId: 'useNextTooltip', line: 1},
-        {messageId: 'useTextProp', line: 2},
-        {messageId: 'noDelayRemoved', line: 2},
-        {messageId: 'wrapRemoved', line: 2},
-        {messageId: 'alignRemoved', line: 2},
-      ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/next';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
-    },
-  ],
-})

package/src/rules/a11y-use-next-tooltip.js

@@ -1,128 +0,0 @@
-'use strict'
-const url = require('../url')
-const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
-const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description: 'recommends the use of @primer/react/next Tooltip component',
-      category: 'Best Practices',
-      recommended: true,
-      url: url(module),
-    },
-    fixable: true,
-    schema: [],
-    messages: {
-      useNextTooltip: 'Please use @primer/react/next Tooltip component that has accessibility improvements',
-      useTextProp: 'Please use the text prop instead of aria-label',
-      noDelayRemoved: 'noDelay prop is removed. Tooltip now has no delay by default',
-      wrapRemoved: 'wrap prop is removed. Tooltip now wraps by default',
-      alignRemoved: 'align prop is removed. Please use the direction prop instead.',
-    },
-  },
-  create(context) {
-    return {
-      ImportDeclaration(node) {
-        if (node.source.value !== '@primer/react') {
-          return
-        }
-        const hasTooltip = node.specifiers.some(
-          specifier => specifier.imported && specifier.imported.name === 'Tooltip',
-        )
-
-        const hasOtherImports = node.specifiers.length > 1
-        if (!hasTooltip) {
-          return
-        }
-        context.report({
-          node,
-          messageId: 'useNextTooltip',
-          fix(fixer) {
-            // If Tooltip is the only import, replace the whole import statement
-            if (!hasOtherImports) {
-              return fixer.replaceText(node.source, `'@primer/react/next'`)
-            } else {
-              // Otherwise, remove Tooltip from the import statement and add a new import statement with the correct path
-              const tooltipSpecifier = node.specifiers.find(
-                specifier => specifier.imported && specifier.imported.name === 'Tooltip',
-              )
-
-              const tokensToRemove = [' ', ',']
-              const tooltipIsFirstImport = tooltipSpecifier === node.specifiers[0]
-              const tooltipIsLastImport = tooltipSpecifier === node.specifiers[node.specifiers.length - 1]
-              const tooltipIsNotFirstOrLastImport = !tooltipIsFirstImport && !tooltipIsLastImport
-
-              const sourceCode = context.getSourceCode()
-              const canRemoveBefore = tooltipIsNotFirstOrLastImport
-                ? false
-                : tokensToRemove.includes(sourceCode.getTokenBefore(tooltipSpecifier).value)
-              const canRemoveAfter = tokensToRemove.includes(sourceCode.getTokenAfter(tooltipSpecifier).value)
-              const start = canRemoveBefore
-                ? sourceCode.getTokenBefore(tooltipSpecifier).range[0]
-                : tooltipSpecifier.range[0]
-              const end = canRemoveAfter
-                ? sourceCode.getTokenAfter(tooltipSpecifier).range[1] + 1
-                : tooltipSpecifier.range[1]
-              return [
-                // remove tooltip specifier and the space and comma after it
-                fixer.removeRange([start, end]),
-                fixer.insertTextAfterRange(
-                  [node.range[1], node.range[1]],
-                  `\nimport {Tooltip} from '@primer/react/next';`,
-                ),
-              ]
-            }
-          },
-        })
-      },
-      JSXOpeningElement(node) {
-        const openingElName = getJSXOpeningElementName(node)
-        if (openingElName !== 'Tooltip') {
-          return
-        }
-        const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
-        if (ariaLabel !== undefined) {
-          context.report({
-            node,
-            messageId: 'useTextProp',
-            fix(fixer) {
-              return fixer.replaceText(ariaLabel.name, 'text')
-            },
-          })
-        }
-        const noDelay = getJSXOpeningElementAttribute(node, 'noDelay')
-        if (noDelay !== undefined) {
-          context.report({
-            node,
-            messageId: 'noDelayRemoved',
-            fix(fixer) {
-              return fixer.remove(noDelay)
-            },
-          })
-        }
-        const wrap = getJSXOpeningElementAttribute(node, 'wrap')
-        if (wrap !== undefined) {
-          context.report({
-            node,
-            messageId: 'wrapRemoved',
-            fix(fixer) {
-              return fixer.remove(wrap)
-            },
-          })
-        }
-        const align = getJSXOpeningElementAttribute(node, 'align')
-        if (align !== undefined) {
-          context.report({
-            node,
-            messageId: 'alignRemoved',
-            fix(fixer) {
-              return fixer.remove(align)
-            },
-          })
-        }
-      },
-    }
-  },
-}