eslint-plugin-primer-react 9.3.2-rc.8eef5f9 → 9.4.0-rc.a59f32a

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # eslint-plugin-primer-react
 
-## 9.3.2
+## 9.4.0
+
+### Minor Changes
+
+- [#705](https://github.com/primer/eslint-plugin-primer-react/pull/705) [`9b282ba`](https://github.com/primer/eslint-plugin-primer-react/commit/9b282babfb4436dee689eaeeec568b1f6b3ce8b4) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - Expand `no-deprecated-props` to cover known deprecated Primer props, including compound components and aliased imports.
 
 ### Patch Changes
 

package/docs/rules/no-deprecated-props.md

@@ -1,48 +1,31 @@
 ## Rule Details
 
-This rule enforces to use the recommended API (`ActionList.GroupHeading`) component over the deprecated prop (`title` prop on `ActionList.Group`) for ActionList component.
+Reports known deprecated Primer React props. Supports compound components, import
+aliases, and namespace imports without TypeScript type information.
 
-👎 Examples of **incorrect** code for this rule:
+### Incorrect
 
 ```jsx
-/* eslint primer-react/no-deprecated-props: "error" */
-import {ActionList} from '@primer/react'
-
-const App = () => (
-  <ActionList>
-    <ActionList.Group title="Group heading">
-      <ActionList.Item>Item 1</ActionList.Item>
-    </ActionList.Group>
-  </ActionList>
-)
+import {Autocomplete, Banner} from '@primer/react'
+
+const input = <Autocomplete.Input openOnFocus />
+const banner = <Banner icon={InfoIcon} />
 ```
 
-👍 Examples of **correct** code for this rule:
+### Correct
 
 ```jsx
-/* eslint primer-react/no-deprecated-props: "error" */
-import {ActionList} from '@primer/react'
-
-const App = () => (
-  <ActionList>
-    <ActionList.Group>
-      <ActionList.GroupHeading as="h2">Group heading</ActionList.GroupHeading>
-      <ActionList.Item>Item 1</ActionList.Item>
-    </ActionList.Group>
-  </ActionList>
-)
-```
+import {Autocomplete, Banner} from '@primer/react'
 
-```jsx
-/* eslint primer-react/no-deprecated-props: "error" */
-import {ActionList} from '@primer/react'
-
-const App = () => (
-  <ActionList role="lisbox">
-    <ActionList.Group>
-      <ActionList.GroupHeading>Group heading</ActionList.GroupHeading>
-      <ActionList.Item>Item 1</ActionList.Item>
-    </ActionList.Group>
-  </ActionList>
-)
+const input = <Autocomplete.Input />
+const banner = <Banner leadingVisual={InfoIcon} />
 ```
+
+Removing `openOnFocus` changes when suggestions open; it has no replacement prop.
+
+The [prop list](../../src/rules/no-deprecated-props.js) is maintained manually.
+The rule checks explicit JSX props, not spreads, nested objects, wrappers,
+re-exports, or `React.createElement`.
+
+Only `ActionList.Group.title` has an autofix, for paired tags with string or
+expression values. Other migrations require manual changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "9.3.2-rc.8eef5f9",
+  "version": "9.4.0-rc.a59f32a",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {

package/src/rules/__tests__/no-deprecated-props.test.js

@@ -65,59 +65,154 @@ ruleTester.run('no-deprecated-props', rule, {
     </ActionList>`,
   ],
   invalid: [
+    [
+      `<ActionList.Group title="Group heading 1"></ActionList.Group>`,
+      `<ActionList.Group><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
+    ],
+    [
+      `<ActionList.Group title="Group heading 1" sx={{padding: 2}}></ActionList.Group>`,
+      `<ActionList.Group sx={{padding: 2}}><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
+    ],
+    [
+      `<ActionList.Group variant="filled" title="Group heading 1"></ActionList.Group>`,
+      `<ActionList.Group variant="filled"><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
+    ],
+    ...['titleVariable', "'Title'", "condition ? 'Title' : undefined"].map(title => [
+      `<ActionList.Group title={${title}}></ActionList.Group>`,
+      `<ActionList.Group><ActionList.GroupHeading>{${title}}</ActionList.GroupHeading></ActionList.Group>`,
+    ]),
+  ].map(([code, output]) => ({
+    code: `import {ActionList} from '@primer/react';\n${code}`,
+    output: `import {ActionList} from '@primer/react';\n${output}`,
+    errors: [{messageId: 'titlePropDeprecated'}],
+  })),
+})
+
+const deprecatedProps = [
+  ['ActionList.Item', 'as'],
+  ['Autocomplete.Input', 'openOnFocus'],
+  ['Autocomplete.Overlay', 'overlayProps'],
+  ['Banner', 'icon'],
+  ['CounterLabel', 'scheme'],
+  ['IconButton', 'keyshortcuts'],
+  ['Link', 'hoverColor'],
+  ['PageLayout.Header', 'dividerWhenNarrow'],
+  ['PageLayout.Pane', 'dividerWhenNarrow'],
+  ['PageLayout.Pane', 'positionWhenNarrow'],
+  ['PageLayout.Footer', 'dividerWhenNarrow'],
+  ['SegmentedControl.Button', 'icon'],
+  ['SegmentedControl.Button', 'leadingIcon'],
+  ['SelectPanel', 'footer'],
+  ['Spinner', 'aria-label'],
+  ['StateLabel', 'variant'],
+  ['TextInput.Action', 'children'],
+  ['TextInput.Action', 'variant'],
+  ['Textarea', 'contrast'],
+  ['ThemeProvider', 'preventSSRMismatch'],
+  ['UnderlineNav.Item', 'icon'],
+  ...['TextInput', 'TextInputWithTokens', 'Autocomplete.Input'].flatMap(component =>
+    ['icon', 'contrast', 'variant', 'width', 'minWidth', 'maxWidth'].map(prop => [component, prop]),
+  ),
+  ...['Button', 'LinkButton', 'ActionMenu.Button'].flatMap(component =>
+    ['leadingIcon', 'trailingIcon'].map(prop => [component, prop]),
+  ),
+]
+
+ruleTester.run('no-deprecated-props catalogue', rule, {
+  valid: [
+    `import {ActionList} from '@primer/react'; <ActionList.LinkItem as="a" />`,
+    `import {Autocomplete} from '@primer/react'; <Autocomplete.Input onFocus={onFocus} />`,
+    `import {Autocomplete} from '@primer/react'; <Autocomplete.Overlay width="small" />`,
+    `import {Banner} from '@primer/react'; <Banner leadingVisual={Icon} />`,
+    `import {CounterLabel} from '@primer/react'; <CounterLabel variant="secondary" />`,
+    `import {IconButton} from '@primer/react'; <IconButton icon={Icon} keybindingHint="g" />`,
+    `import {Link} from '@primer/react'; <Link className="hover" />`,
+    `import {PageLayout} from '@primer/react'; <PageLayout.Pane divider={{narrow: 'line'}} position={{narrow: 'end'}} />`,
+    `import {SegmentedControl} from '@primer/react'; <SegmentedControl.Button leadingVisual={Icon} />`,
+    `import {SelectPanel} from '@primer/react'; <SelectPanel secondaryAction={action} />`,
+    `import {Spinner} from '@primer/react'; <Spinner srText="Loading" />`,
+    `import {StateLabel} from '@primer/react'; <StateLabel size="small" />`,
+    `import {TextInput} from '@primer/react'; <TextInput leadingVisual={Icon} size="small" style={{width: 100}} />`,
+    `import {TextInput} from '@primer/react'; <TextInput.Action icon={Icon}>{/* no children */}</TextInput.Action>`,
+    `import {UnderlineNav} from '@primer/react'; <UnderlineNav.Item leadingVisual={Icon} />`,
+    `import {Banner} from '@primer/react-brand'; <Banner icon={Icon} />`,
+    `import * as Primer from '@primer/react-brand'; <Primer.Autocomplete.Input openOnFocus />`,
+    `import {SelectPanel} from '@primer/react/experimental'; <SelectPanel footer={footer} />`,
+    `import {ActionList} from '@primer/react/deprecated'; <ActionList.Item as="a" />`,
+    `import {ActionList} from './local'; <ActionList.Group title="Local title" />`,
+    `const Autocomplete = local; <Autocomplete.Input openOnFocus />`,
+    `import {Banner} from '@primer/react'; function Example(Banner) { return <Banner icon={Icon} /> }`,
+    `import * as Primer from '@primer/react'; function Example(Primer) { return <Primer.Banner icon={Icon} /> }`,
+    `import {Autocomplete} from '@primer/react'; function Example(Autocomplete) { return <Autocomplete.Input openOnFocus /> }`,
+    `import {Banner} from '@primer/react'; <Banner {...props} />`,
+    `import * as Primer from '@primer/react'; <Primer.toString icon={Icon} />`,
+    `import {Banner} from '@primer/react'; <Banner toString={value} />`,
+    `<ActionList.Group title="Unresolved component" />`,
+    `<svg:path title="Not a component" />`,
+  ],
+  invalid: [
+    ...deprecatedProps.flatMap(([component, prop]) => {
+      const [root, ...members] = component.split('.')
+      const alias = ['Alias', ...members].join('.')
+      return [
+        `import {${root}} from '@primer/react'; <${component} ${prop}={value} />`,
+        `import {${root} as Alias} from '@primer/react'; <${alias} ${prop}={value} />`,
+        `import * as Primer from '@primer/react'; <Primer.${component} ${prop}={value} />`,
+      ].map(code => ({
+        code,
+        output: null,
+        errors: [{messageId: 'deprecatedProp'}],
+      }))
+    }),
     {
-      code: `<ActionList.Group title="Group heading 1"></ActionList.Group>`,
-      output: `<ActionList.Group><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
-    },
-    {
-      code: `<ActionList.Group title="Group heading 1" sx={{padding: 2}}></ActionList.Group>`,
-      output: `<ActionList.Group sx={{padding: 2}}><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
+      code: `import {Autocomplete as A} from '@primer/react'; <A.Input openOnFocus={false} />`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}],
     },
     {
-      code: `<ActionList.Group variant="filled" title="Group heading 1"></ActionList.Group>`,
-      output: `<ActionList.Group variant="filled"><ActionList.GroupHeading>Group heading 1</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
+      code: `import {TextInput} from '@primer/react'; <TextInput icon={Icon} contrast />`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}, {messageId: 'deprecatedProp'}],
     },
+    ...['trailingIcon', 'trailingText'].map(prop => ({
+      code: `import {ActionList as Legacy} from '@primer/react/deprecated'; <Legacy.Item ${prop}={value} />`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}],
+    })),
+    ...['icon', 'contrast', 'variant', 'width', 'minWidth', 'maxWidth'].map(prop => ({
+      code: `import {FilteredActionList} from '@primer/react/experimental'; <FilteredActionList.Input ${prop}={value} />`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}],
+    })),
     {
-      code: `<ActionList.Group title={titleVariable}></ActionList.Group>`,
-      output: `<ActionList.Group><ActionList.GroupHeading>{titleVariable}</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
+      code: `import {ThemeProvider} from '@primer/react/next'; <ThemeProvider preventSSRMismatch />`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}],
     },
+    ...['Text', '{value}', '<span />', '<>Text</>'].map(children => ({
+      code: `import {TextInput} from '@primer/react'; <TextInput.Action>${children}</TextInput.Action>`,
+      output: null,
+      errors: [{messageId: 'deprecatedProp'}],
+    })),
     {
-      code: `<ActionList.Group title={'Title'}></ActionList.Group>`,
-      output: `<ActionList.Group><ActionList.GroupHeading>{'Title'}</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
+      code: `import {ActionList as List} from '@primer/react'; <List.Group title="Title"></List.Group>`,
+      output: `import {ActionList as List} from '@primer/react'; <List.Group><List.GroupHeading>Title</List.GroupHeading></List.Group>`,
+      errors: [{messageId: 'titlePropDeprecated'}],
     },
     {
-      code: `<ActionList.Group title={condition ? 'Title' : undefined}></ActionList.Group>`,
-      output: `<ActionList.Group><ActionList.GroupHeading>{condition ? 'Title' : undefined}</ActionList.GroupHeading></ActionList.Group>`,
-      errors: [
-        {
-          messageId: 'titlePropDeprecated',
-        },
-      ],
+      code: `import * as Primer from '@primer/react'; <Primer.ActionList.Group title="A &amp; B"></Primer.ActionList.Group>`,
+      output: `import * as Primer from '@primer/react'; <Primer.ActionList.Group><Primer.ActionList.GroupHeading>A &amp; B</Primer.ActionList.GroupHeading></Primer.ActionList.Group>`,
+      errors: [{messageId: 'titlePropDeprecated'}],
     },
+    ...['title', 'title="Title"', 'title={title}'].map(attribute => ({
+      code: `import {ActionList} from '@primer/react'; <ActionList.Group ${attribute} />`,
+      output: null,
+      errors: [{messageId: 'titlePropDeprecated'}],
+    })),
+    ...['title', 'title="{literal}"'].map(attribute => ({
+      code: `import {ActionList} from '@primer/react'; <ActionList.Group ${attribute}></ActionList.Group>`,
+      output: null,
+      errors: [{messageId: 'titlePropDeprecated'}],
+    })),
   ],
 })

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

@@ -1,6 +1,128 @@
 'use strict'
-const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
-const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
+const {getVariableDeclaration} = require('../utils/get-variable-declaration')
+const url = require('../url')
+
+const textInputProps = {
+  icon: 'Use `leadingVisual` or `trailingVisual` instead.',
+  contrast: 'Omit this prop to use the default background.',
+  variant: 'Use `size` instead.',
+  width: 'Set `width` using CSS or `style` instead.',
+  minWidth: 'Set `min-width` using CSS or `style` instead.',
+  maxWidth: 'Set `max-width` using CSS or `style` instead.',
+}
+const buttonProps = {
+  leadingIcon: 'Use `leadingVisual` instead.',
+  trailingIcon: 'Use `trailingVisual` instead.',
+}
+const narrowDivider = 'Use `divider` with a responsive value instead.'
+const deprecations = {
+  'ActionList.Group': {title: 'Use `ActionList.GroupHeading` instead.'},
+  'ActionList.Item': {as: 'Use `ActionList.LinkItem` for links; `as` has no effect on `ActionList.Item`.'},
+  'ActionMenu.Button': buttonProps,
+  'Autocomplete.Input': {
+    ...textInputProps,
+    openOnFocus: 'Remove this prop. Review whether opening the menu on focus is still needed.',
+  },
+  'Autocomplete.Overlay': {overlayProps: 'Pass overlay props directly to `Autocomplete.Overlay` instead.'},
+  Banner: {icon: 'Use `leadingVisual` instead.'},
+  Button: buttonProps,
+  CounterLabel: {scheme: 'Use `variant` instead.'},
+  IconButton: {keyshortcuts: 'Use `keybindingHint` instead.'},
+  Link: {hoverColor: 'Style hover color using CSS instead.'},
+  LinkButton: buttonProps,
+  'PageLayout.Header': {dividerWhenNarrow: narrowDivider},
+  'PageLayout.Pane': {
+    dividerWhenNarrow: narrowDivider,
+    positionWhenNarrow: 'Use `position` with a responsive value instead.',
+  },
+  'PageLayout.Footer': {dividerWhenNarrow: narrowDivider},
+  'SegmentedControl.Button': {
+    icon: 'Use `leadingVisual` instead.',
+    leadingIcon: 'Use `leadingVisual` instead.',
+  },
+  SelectPanel: {footer: 'Use `secondaryAction` instead.'},
+  Spinner: {'aria-label': 'Use `srText` instead.'},
+  StateLabel: {variant: 'Use `size` with `small` or `medium` instead.'},
+  TextInput: textInputProps,
+  'TextInput.Action': {
+    children: 'Use an icon-only action with the `icon` prop instead.',
+    variant: 'Omit this prop to use the invisible button variant.',
+  },
+  TextInputWithTokens: textInputProps,
+  Textarea: {contrast: 'Omit this prop to use the default background.'},
+  ThemeProvider: {preventSSRMismatch: 'Remove this prop; it no longer has any effect.'},
+  'UnderlineNav.Item': {icon: 'Use `leadingVisual` instead.'},
+}
+
+const entrypoints = new Map([
+  ['@primer/react', deprecations],
+  [
+    '@primer/react/deprecated',
+    {
+      'ActionList.Item': {
+        trailingIcon: 'Use `trailingVisual` instead.',
+        trailingText: 'Use `trailingVisual` instead.',
+      },
+    },
+  ],
+  [
+    '@primer/react/experimental',
+    {
+      'FilteredActionList.Input': textInputProps,
+    },
+  ],
+  [
+    '@primer/react/next',
+    {
+      ThemeProvider: deprecations.ThemeProvider,
+    },
+  ],
+])
+
+function getPrimerComponent(node, scope) {
+  const members = []
+  let root = node.name
+  while (root.type === 'JSXMemberExpression') {
+    members.unshift(root.property.name)
+    root = root.object
+  }
+  if (root.type !== 'JSXIdentifier') return null
+
+  const definition = getVariableDeclaration(scope, {name: root.name})
+  if (definition?.type !== 'ImportBinding') return null
+  const entrypoint = definition.parent.source.value
+  const specifier = definition.node
+  if (specifier.type === 'ImportSpecifier') {
+    members.unshift(specifier.imported.name ?? specifier.imported.value)
+  } else if (specifier.type !== 'ImportNamespaceSpecifier') {
+    return null
+  }
+
+  const component = members.join('.')
+  const catalogue = entrypoints.get(entrypoint)
+  if (!catalogue || !Object.hasOwn(catalogue, component)) return null
+  return {component, props: catalogue[component]}
+}
+
+function fixGroupTitle(fixer, node, title, sourceCode) {
+  if (!title.value || node.selfClosing) return null
+  let groupTitle
+  if (title.value.type === 'Literal') {
+    groupTitle = sourceCode.getText(title.value).slice(1, -1)
+    if (/[{}<>]/.test(groupTitle)) return null
+  } else if (title.value.type === 'JSXExpressionContainer' && title.value.expression.type !== 'JSXEmptyExpression') {
+    groupTitle = sourceCode.getText(title.value)
+  } else {
+    return null
+  }
+  const heading = `${sourceCode.getText(node.name).slice(0, -'Group'.length)}GroupHeading`
+  const start = title.range[0]
+  const whitespace = sourceCode.text[start - 1]
+  return [
+    fixer.removeRange([whitespace === ' ' ? start - 1 : start, title.range[1]]),
+    fixer.insertTextAfter(node, `<${heading}>${groupTitle}</${heading}>`),
+  ]
+}
 
 /**
  * @type {import('eslint').Rule.RuleModule}
@@ -9,51 +131,56 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description:
-        'Avoid using deprecated `title` prop on `ActionList.Group` component. Use `ActionList.GroupHeading` instead.',
+      description: 'Avoid deprecated Primer React component props.',
       recommended: true,
-      url: 'https://primer.style/components/action-list/react/beta#actionlistgroupheading',
+      url: url(module),
     },
     fixable: 'code',
     schema: [],
     messages: {
       titlePropDeprecated: 'The `title` prop is deprecated. Please use `ActionList.GroupHeading` instead.',
+      deprecatedProp: 'The `{{prop}}` prop on `{{component}}` is deprecated. {{hint}}',
     },
   },
   create(context) {
     return {
       JSXOpeningElement(node) {
-        const openingElName = getJSXOpeningElementName(node)
-        if (openingElName !== 'ActionList.Group') {
-          return
+        const primer = getPrimerComponent(node, context.sourceCode.getScope(node))
+        if (!primer) return
+        for (const attribute of node.attributes) {
+          if (attribute.type !== 'JSXAttribute' || attribute.name.type !== 'JSXIdentifier') continue
+          const prop = attribute.name.name
+          if (!Object.hasOwn(primer.props, prop)) continue
+          if (primer.component === 'ActionList.Group' && prop === 'title') {
+            context.report({
+              node: attribute,
+              messageId: 'titlePropDeprecated',
+              fix: fixer => fixGroupTitle(fixer, node, attribute, context.sourceCode),
+            })
+          } else {
+            context.report({
+              node: attribute,
+              messageId: 'deprecatedProp',
+              data: {component: primer.component, prop, hint: primer.props[prop]},
+            })
+          }
         }
-        const title = getJSXOpeningElementAttribute(node, 'title')
-        let groupTitle = ''
-        if (title !== undefined) {
+        if (
+          Object.hasOwn(primer.props, 'children') &&
+          !node.selfClosing &&
+          node.parent.children.some(
+            child =>
+              (child.type === 'JSXText' && child.value.trim() !== '') ||
+              (child.type === 'JSXExpressionContainer' && child.expression.type !== 'JSXEmptyExpression') ||
+              child.type === 'JSXElement' ||
+              child.type === 'JSXFragment' ||
+              child.type === 'JSXSpreadChild',
+          )
+        ) {
           context.report({
             node,
-            messageId: 'titlePropDeprecated',
-            fix(fixer) {
-              // Group title is a string literal i.e. title="title"
-              if (title.value.type === 'Literal') {
-                groupTitle = title.value.value
-                // Group title is a JSX expression i.e. title={title}
-              } else if (title.value.type === 'JSXExpressionContainer') {
-                groupTitle = context.sourceCode.getText(title.value)
-              } else {
-                // we don't provide fix for cases where the title prop is not a string literal or JSX expression
-                return []
-              }
-              const start = title.range[0]
-              const end = title.range[1]
-              return [
-                fixer.removeRange([start - 1, end]), // remove the space before the title as well
-                fixer.insertTextAfterRange(
-                  [node.range[1], node.range[1]],
-                  `<ActionList.GroupHeading>${groupTitle}</ActionList.GroupHeading>`,
-                ),
-              ]
-            },
+            messageId: 'deprecatedProp',
+            data: {component: primer.component, prop: 'children', hint: primer.props.children},
           })
         }
       },