eslint-plugin-primer-react 5.3.0 → 5.4.0-rc.27e12cc

package/.github/workflows/release_tracking.yml

@@ -14,6 +14,6 @@ on:
 jobs:
   release-tracking:
     name: Release Tracking
-    uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.0
+    uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.1
     secrets:
       datadog_api_key: ${{ secrets.DATADOG_API_KEY }}

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 5.4.0
+
+### Minor Changes
+
+- [#103](https://github.com/primer/eslint-plugin-primer-react/pull/103) [`8617a66`](https://github.com/primer/eslint-plugin-primer-react/commit/8617a66b2afe7e4e7a8608dbf5744999fffd9140) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Add a11y-use-next-tooltip rule that warns against using Tooltip v1 (Not the accessible one)
+
 ## 5.3.0
 
 ### Minor Changes

package/README.md

@@ -39,3 +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)

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

@@ -0,0 +1,33 @@
+# 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>
+  )
+}
+```