eslint-plugin-primer-react 6.0.0-rc.ad9e155 → 6.0.1-rc.684a5eb

package/CHANGELOG.md

@@ -1,15 +1,27 @@
 # eslint-plugin-primer-react
 
+## 6.0.1
+
+### Patch Changes
+
+- [#216](https://github.com/primer/eslint-plugin-primer-react/pull/216) [`55c5256`](https://github.com/primer/eslint-plugin-primer-react/commit/55c52562bc66fd661a5f0ef8218b90bf900411a4) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix invalid rule names
+
 ## 6.0.0
 
 ### Major Changes
 
 - [#207](https://github.com/primer/eslint-plugin-primer-react/pull/207) [`baff792`](https://github.com/primer/eslint-plugin-primer-react/commit/baff792c0aa01a29374e44e8aa770dbe2cb889a1) Thanks [@iansan5653](https://github.com/iansan5653)! - [Breaking] Adds `no-unnecessary-components` lint rule and enables it by default. This may raise new (typically autofixable) lint errors in existing codebases.
 
+- [#211](https://github.com/primer/eslint-plugin-primer-react/pull/211) [`3f92cd4`](https://github.com/primer/eslint-plugin-primer-react/commit/3f92cd4b689e437bb9efe6a9fe873501ddf76bf2) Thanks [@camchenry](https://github.com/camchenry)! - [Breaking] Adds `prefer-action-list-item-onselect` lint rule and enables it by default. This may raise new auto-fixable lint errors or type-checking errors in existing codebases.
+
 ### Minor Changes
 
 - [#204](https://github.com/primer/eslint-plugin-primer-react/pull/204) [`e2cab87`](https://github.com/primer/eslint-plugin-primer-react/commit/e2cab872c265f4211750436fad32fe5fd8927c5c) Thanks [@joshblack](https://github.com/joshblack)! - Add use-deprecated-from-deprecated rule
 
+### Patch Changes
+
+- [#212](https://github.com/primer/eslint-plugin-primer-react/pull/212) [`78d4600`](https://github.com/primer/eslint-plugin-primer-react/commit/78d460024ae4c10b6a754b615c6d594e4dfb646e) Thanks [@langermank](https://github.com/langermank)! - no-system-props: Add `padding` and `gap` as exceptions for `Stack`
+
 ## 5.4.0
 
 ### Minor Changes

package/docs/rules/prefer-action-list-item-onselect.md

@@ -0,0 +1,37 @@
+# Prefer using `onSelect` instead of `onClick` for `ActionList.Item` components (`prefer-action-list-item-onselect`)
+
+🔧 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.
+
+## Rule details
+
+When using the `onClick` attribute on `ActionList.Item` components, this callback only fires when a user clicks on the element with a mouse. If the user navigates to the element with a keyboard and presses the `Enter` key, the callback will not fire. This produces an inaccessible experience for keyboard users.
+
+Using `onSelect` will lead to a more accessible experience for keyboard users compared to using `onClick`.
+
+This rule is generally auto-fixable, though you may encounter type checking errors that result from not properly handling keyboard events which are not part of the `onSelect` callback signature.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+<ActionList.Item onClick={handleClick} />
+<ActionList.Item
+  aria-label="Edit item 1"
+  onClick={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+<ActionList.Item onSelect={handleClick} />
+<ActionList.Item
+  aria-label="Edit item 1"
+  onSelect={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.0.0-rc.ad9e155",
+  "version": "6.0.1-rc.684a5eb",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/configs/recommended.js

@@ -19,6 +19,7 @@ module.exports = {
     'primer-react/a11y-remove-disable-tooltip': 'error',
     'primer-react/a11y-use-next-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
+    'primer-react/prefer-action-list-item-onselect': 'error',
   },
   settings: {
     github: {

package/src/index.js

@@ -11,7 +11,8 @@ module.exports = {
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
     'a11y-use-next-tooltip': require('./rules/a11y-use-next-tooltip'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
-    'primer-react/no-unnecessary-components': require('./rules/no-unnecessary-components'),
+    'no-unnecessary-components': require('./rules/no-unnecessary-components'),
+    'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/no-unnecessary-components.test.js

@@ -65,6 +65,16 @@ ruleTester.run('unnecessary-components', rule, {
         filename,
       },
     ]),
+    {
+      name: `Text with weight prop`,
+      code: `${prcImport}${jsx(`<Text weight='medium'>Hello World</Text>`)}`,
+      filename,
+    },
+    {
+      name: `Text with size prop`,
+      code: `${prcImport}${jsx(`<Text size='small'>Hello World</Text>`)}`,
+      filename,
+    },
   ],
   invalid: Object.entries(components).flatMap(([component, {messageId, replacement}]) => [
     {

package/src/rules/__tests__/prefer-action-list-item-onselect.test.js

@@ -0,0 +1,67 @@
+const {RuleTester} = require('@typescript-eslint/rule-tester')
+const rule = require('../prefer-action-list-item-onselect')
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('prefer-action-list-item-onselect', rule, {
+  valid: [
+    {code: `<ActionList.Item onSelect={() => console.log(1)} />`},
+    {code: `<ActionList.Item onSelect={() => console.log(1)} onClick={() => console.log(1)} />`},
+    {code: `<Other onClick={() => console.log(1)} />`},
+    {code: `<Button onClick={onSelect} />`},
+    {code: `<Button onSelect={onClick} />`},
+    {code: `<ActionList.Item onClick={() => console.log(1)} onKeyDown={() => console.log(1)} />`},
+    {code: `<ActionList.Item onClick={() => console.log(1)} onKeyUp={() => console.log(1)} />`},
+    // For now, we are not handling spread attributes as this is much less common
+    {code: `<ActionList.Item {...onClick} />`},
+  ],
+  invalid: [
+    {
+      code: `<ActionList.Item onClick={() => console.log(1)} />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item onSelect={() => console.log(1)} />`,
+    },
+    {
+      code: `<ActionList.Item aria-label="Edit item 1" onClick={() => console.log(1)} />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect={() => console.log(1)} />`,
+    },
+    {
+      code: `<ActionList.Item aria-label="Edit item 1" onClick={onClick} />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect={onClick} />`,
+    },
+    {
+      code: `<ActionList.Item
+  aria-label="Edit item 1"
+  onClick={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item
+  aria-label="Edit item 1"
+  onSelect={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>`,
+    },
+    // This is invalid, but we can fix it anyway
+    {
+      code: `<ActionList.Item aria-label="Edit item 1" onClick />`,
+      errors: [{messageId: 'prefer-action-list-item-onselect'}],
+      output: `<ActionList.Item aria-label="Edit item 1" onSelect />`,
+    },
+  ],
+})

package/src/rules/no-system-props.js

@@ -46,6 +46,7 @@ const excludedComponentProps = new Map([
   ['ProgressBar', new Set(['bg'])],
   ['PointerBox', new Set(['bg'])],
   ['Truncate', new Set(['maxWidth'])],
+  ['Stack', new Set(['padding', 'gap'])],
 ])
 
 const alwaysExcludedProps = new Set(['variant', 'size'])

package/src/rules/no-unnecessary-components.js

@@ -12,11 +12,13 @@ const components = {
     replacement: 'div',
     messageId: 'unecessaryBox',
     message: 'Prefer plain HTML elements over `Box` when not using `sx` for styling.',
+    allowedProps: new Set(['sx']), // + styled-system props
   },
   Text: {
     replacement: 'span',
     messageId: 'unecessarySpan',
     message: 'Prefer plain HTML elements over `Text` when not using `sx` for styling.',
+    allowedProps: new Set(['sx', 'size', 'weight']), // + styled-system props
   },
 }
 
@@ -68,33 +70,36 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
         const isPrimer = skipImportCheck || isPrimerComponent(name, context.sourceCode.getScope(openingElement))
         if (!isPrimer) return
 
-        // Validate the attributes and ensure an `sx` prop is present or spreaded in
+        /** @param {string} name */
+        const isAllowedProp = name => componentConfig.allowedProps.has(name) || isStyledSystemProp(name)
+
+        // Validate the attributes and ensure an allowed prop is present or spreaded in
         /** @type {typeof attributes[number] | undefined | null} */
         let asProp = undefined
         for (const attribute of attributes) {
-          // If there is a spread type, check if the type of the spreaded value has an `sx` property
+          // If there is a spread type, check if the type of the spreaded value has an allowed property
           if (attribute.type === 'JSXSpreadAttribute') {
             const services = ESLintUtils.getParserServices(context)
             const typeChecker = services.program.getTypeChecker()
 
             const spreadType = services.getTypeAtLocation(attribute.argument)
-            if (typeChecker.getPropertyOfType(spreadType, 'sx') !== undefined) return
 
-            // Check if the spread type has a string index signature - this could hide an `sx` property
+            // Check if the spread type has a string index signature - this could hide an allowed property
             if (typeChecker.getIndexTypeOfType(spreadType, IndexKind.String) !== undefined) return
 
+            const spreadPropNames = typeChecker.getPropertiesOfType(spreadType).map(prop => prop.getName())
+
+            // If an allowed prop gets spread in, this is a valid use of the component
+            if (spreadPropNames.some(isAllowedProp)) return
+
             // If there is an `as` inside the spread object, we can't autofix reliably
-            if (typeChecker.getPropertyOfType(spreadType, 'as') !== undefined) asProp = null
+            if (spreadPropNames.includes('as')) asProp = null
 
             continue
           }
 
-          // Has sx prop, so should keep using this component
-          if (
-            attribute.name.type === 'JSXIdentifier' &&
-            (attribute.name.name === 'sx' || isStyledSystemProp(attribute.name.name))
-          )
-            return
+          // Has an allowed prop, so should keep using this component
+          if (attribute.name.type === 'JSXIdentifier' && isAllowedProp(attribute.name.name)) return
 
           // If there is an `as` prop we will need to account for that when autofixing
           if (attribute.name.type === 'JSXIdentifier' && attribute.name.name === 'as') asProp = attribute

package/src/rules/prefer-action-list-item-onselect.js

@@ -0,0 +1,67 @@
+// @ts-check
+
+const messages = {
+  'prefer-action-list-item-onselect': `Use the 'onSelect' event handler instead of 'onClick' for ActionList.Item components, so that it is accessible by keyboard and mouse.`,
+}
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').RuleModule<keyof typeof messages>} */
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'To do something when an `ActionList.Item` is selected, you should use the `onSelect` event handler instead of `onClick`, because it handles both keyboard and mouse events. Otherwise, it will only be accessible by mouse.',
+      recommended: true,
+    },
+    messages,
+    type: 'problem',
+    schema: [],
+    fixable: 'code',
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      JSXElement(node) {
+        // Only check components that have the name `ActionList.Item`. We don't check if this comes from Primer
+        // because the chance of conflict here is very low
+        const isActionListItem =
+          node.openingElement.name.type === 'JSXMemberExpression' &&
+          node.openingElement.name.object.type === 'JSXIdentifier' &&
+          node.openingElement.name.object.name === 'ActionList' &&
+          node.openingElement.name.property.name === 'Item'
+        if (!isActionListItem) return
+
+        const attributes = node.openingElement.attributes
+        const onClickAttribute = attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'onClick')
+        const onSelectAttribute = attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'onSelect')
+
+        const keyboardHandlers = ['onKeyDown', 'onKeyUp']
+        const keyboardAttributes = attributes.filter(
+          attr =>
+            attr.type === 'JSXAttribute' &&
+            (typeof attr.name.name === 'string'
+              ? keyboardHandlers.includes(attr.name.name)
+              : keyboardHandlers.includes(attr.name.name.name)),
+        )
+
+        // If the component has `onSelect`, then it's already using the correct event
+        if (onSelectAttribute) return
+        // If there is no `onClick` attribute, then we should also be fine
+        if (!onClickAttribute) return
+        // If there is an onClick attribute as well as keyboard handlers, we will assume it is handled correctly
+        if (onClickAttribute && keyboardAttributes.length > 0) return
+
+        context.report({
+          node: onClickAttribute,
+          messageId: 'prefer-action-list-item-onselect',
+          fix: fixer => {
+            // Replace `onClick` with `onSelect`
+            if (onClickAttribute.type === 'JSXAttribute') {
+              return fixer.replaceText(onClickAttribute.name, 'onSelect')
+            }
+            return null
+          },
+        })
+      },
+    }
+  },
+}