eslint-plugin-primer-react 7.0.0-rc.0d4a60c → 7.0.0-rc.1eafbbd

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.1
+    uses: primer/.github/.github/workflows/release_tracking.yml@v2.2.0
     secrets:
       datadog_api_key: ${{ secrets.DATADOG_API_KEY }}

package/CHANGELOG.md

@@ -6,12 +6,16 @@
 
 - [#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
 
+- [#316](https://github.com/primer/eslint-plugin-primer-react/pull/316) [`40016c8`](https://github.com/primer/eslint-plugin-primer-react/commit/40016c8db99b4045ed7474cead0b48eed05f5f64) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add `a11y-no-title-usage` that warns against using `title` in some components
+
 ### 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
 
+- [#325](https://github.com/primer/eslint-plugin-primer-react/pull/325) [`f689fcc`](https://github.com/primer/eslint-plugin-primer-react/commit/f689fcc0ca3e5a2c4b76aa04ebb620c7c5786fdf) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add `no-deprecated-experimental-components` rule
+
 ### Patch Changes
 
 - [#314](https://github.com/primer/eslint-plugin-primer-react/pull/314) [`63ef9fd`](https://github.com/primer/eslint-plugin-primer-react/commit/63ef9fdf02a9c4b80528644a96fd81e366bce187) Thanks [@khiga8](https://github.com/khiga8)! - fix: Link to should be allowed to have tooltip

package/README.md

@@ -40,3 +40,4 @@ ESLint rules for Primer React
 - [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-accessible-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-accessible-tooltip.md)
+- [no-deprecated-experimental-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-experimental-components.md)

package/docs/rules/a11y-no-title-usage.md

@@ -0,0 +1,40 @@
+## Rule Details
+
+This rule aims to prevent the use of the `title` attribute with some components from `@primer/react`. The `title` attribute is not keyboard accessible, which results in accessibility issues. Instead, we should utilize alternatives that are accessible.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {RelativeTime} from '@primer/react'
+
+const App = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={false} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+import {RelativeTime} from '@primer/react'
+
+const App = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+```
+
+The noTitle attribute is true by default, so it can be omitted.
+
+## With alternative tooltip
+
+If you want to still utilize a tooltip in a similar way to how the `title` attribute works, you can use the [Primer `Tooltip`](https://primer.style/components/tooltip/react/beta). If you use the `Tooltip` component, you must use it with an interactive element, such as with a button or a link.
+
+```jsx
+import {RelativeTime, Tooltip} from '@primer/react'
+
+const App = () => {
+  const date = new Date('2020-01-01T00:00:00Z')
+  return (
+    <Tooltip text={date.toString()}>
+      <Link href="#">
+        <RelativeTime date={date} noTitle={true} />
+      </Link>
+    </Tooltip>
+  )
+}
+```

package/docs/rules/no-deprecated-experimental-components.md

@@ -0,0 +1,29 @@
+# No deprecated experimental components
+
+## Rule Details
+
+This rule discourages the usage of specific imports from `@primer/react/experimental`.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+import {SelectPanel} from '@primer/react/experimental'
+
+function ExampleComponent() {
+  return <SelectPanel />
+}
+```
+
+👍 Examples of **correct** code for this rule:
+
+You can satisfy the rule by either converting to the non-experimental version:
+
+```jsx
+import {SelectPanel} from '@primer/react'
+
+function ExampleComponent() {
+  return <SelectPanel />
+}
+```
+
+Or by removing usage of the component.