Fix for actionlist weird autofix (#409)

* Fix for actionlist weird autofix

* Remove alias behavior

* Updaet docs

* Use caret for version

* Downgrade

Author: jonrohan

docs/rules/use-styled-react-import.md

@@ -12,7 +12,7 @@ Enforce importing components that use `sx` prop from `@primer/styled-react` inst
 
 This rule detects when certain Primer React components are used with the `sx` prop and ensures they are imported from the temporary `@primer/styled-react` package instead of `@primer/react`. When the same components are used without the `sx` prop, it ensures they are imported from `@primer/react` instead of `@primer/styled-react`.
 
-When a component is used both with and without the `sx` prop in the same file, the rule will import the styled version with an alias (e.g., `StyledButton`) and update the JSX usage accordingly to avoid naming conflicts.
+When a component is used with the `sx` prop anywhere in the file, the entire component import is moved to `@primer/styled-react`, simplifying the import structure.
 
 It also moves certain types and utilities to the styled-react package.
 
@@ -111,12 +111,11 @@ const Component = () => <Button>Click me</Button>
 ```
 
 ```jsx
-// When a component is used both ways, use an alias for the styled version
-import {Button} from '@primer/react'
-import {Button as StyledButton} from '@primer/styled-react'
+// When a component is used with sx prop anywhere, import from styled-react
+import {Button} from '@primer/styled-react'
 
 const Component1 = () => <Button>Click me</Button>
-const Component2 = () => <StyledButton sx={{color: 'red'}}>Styled me</StyledButton>
+const Component2 = () => <Button sx={{color: 'red'}}>Styled me</Button>
 ```
 
 ## Options

package-lock.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "@typescript-eslint/utils": "8.43.0",
+    "@typescript-eslint/utils": "^8.39.0",
     "eslint-plugin-github": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",

package.json

@@ -70,7 +70,7 @@ ruleTester.run('use-styled-react-import', rule, {
       ],
     },
 
-    // Invalid: FormControl used both with and without sx prop - should use alias
+    // Invalid: FormControl used both with and without sx prop - should move to styled-react
     {
       code: `import { FormControl } from '@primer/react'
              const Component = () => (
@@ -81,24 +81,19 @@ ruleTester.run('use-styled-react-import', rule, {
                  </FormControl>
                </div>
              )`,
-      output: `import { FormControl } from '@primer/react'
-import { FormControl as StyledFormControl } from '@primer/styled-react'
+      output: `import { FormControl } from '@primer/styled-react'
              const Component = () => (
                <div>
                  <FormControl></FormControl>
-                 <StyledFormControl sx={{ color: 'red' }}>
-                   <StyledFormControl.Label visuallyHidden>Label</StyledFormControl.Label>
-                 </StyledFormControl>
+                 <FormControl sx={{ color: 'red' }}>
+                   <FormControl.Label visuallyHidden>Label</FormControl.Label>
+                 </FormControl>
                </div>
              )`,
       errors: [
         {
-          messageId: 'useStyledReactImportWithAlias',
-          data: {componentName: 'FormControl', aliasName: 'StyledFormControl'},
-        },
-        {
-          messageId: 'useAliasedComponent',
-          data: {componentName: 'FormControl', aliasName: 'StyledFormControl'},
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'FormControl'},
         },
       ],
     },
@@ -117,6 +112,41 @@ import { FormControl as StyledFormControl } from '@primer/styled-react'
       ],
     },
 
+    // Invalid: ActionList used without sx, ActionList.Item used with sx - should move ActionList to styled-react
+    {
+      code: `import { ActionList, ActionMenu } from '@primer/react'
+             const Component = () => (
+               <ActionMenu>
+                 <ActionMenu.Overlay>
+                   <ActionList>
+                     <ActionList.Item sx={{ paddingLeft: 'calc(1 * var(--base-size-12))' }}>
+                       Item
+                     </ActionList.Item>
+                   </ActionList>
+                 </ActionMenu.Overlay>
+               </ActionMenu>
+             )`,
+      output: `import { ActionMenu } from '@primer/react'
+import { ActionList } from '@primer/styled-react'
+             const Component = () => (
+               <ActionMenu>
+                 <ActionMenu.Overlay>
+                   <ActionList>
+                     <ActionList.Item sx={{ paddingLeft: 'calc(1 * var(--base-size-12))' }}>
+                       Item
+                     </ActionList.Item>
+                   </ActionList>
+                 </ActionMenu.Overlay>
+               </ActionMenu>
+             )`,
+      errors: [
+        {
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'ActionList'},
+        },
+      ],
+    },
+
     // Invalid: Multiple components, one with sx prop
     {
       code: `import { Button, Box, Avatar } from '@primer/react'
@@ -185,7 +215,7 @@ import { Button } from '@primer/styled-react'
       ],
     },
 
-    // Invalid: <Link /> and <StyledButton /> imported from styled-react but used without sx prop
+    // Invalid: <Link /> and <Button /> imported from styled-react but used without sx prop
     {
       code: `import { Button } from '@primer/react'
 import { Button as StyledButton, Link } from '@primer/styled-react'
@@ -202,7 +232,7 @@ import { Button as StyledButton, Link } from '@primer/styled-react'
                <div>
                  <Link />
                  <Button>Regular button</Button>
-                 <Button>Styled button</Button>
+                 <StyledButton>Styled button</StyledButton>
                </div>
              )`,
       errors: [
@@ -214,10 +244,6 @@ import { Button as StyledButton, Link } from '@primer/styled-react'
           messageId: 'usePrimerReactImport',
           data: {componentName: 'Link'},
         },
-        {
-          messageId: 'usePrimerReactImport',
-          data: {componentName: 'Button'},
-        },
       ],
     },
 
@@ -260,7 +286,7 @@ import { Button } from '@primer/react'
       ],
     },
 
-    // Invalid: Button used both with and without sx prop - should use alias
+    // Invalid: Button and Link used with sx prop - should move both to styled-react
     {
       code: `import { Button, Link } from '@primer/react'
              const Component = () => (
@@ -270,28 +296,23 @@ import { Button } from '@primer/react'
                  <Button sx={{ color: 'red' }}>Styled button</Button>
                </div>
              )`,
-      output: `import { Button } from '@primer/react'
-import { Button as StyledButton, Link } from '@primer/styled-react'
+      output: `import { Link, Button } from '@primer/styled-react'
              const Component = () => (
                <div>
                  <Link sx={{ color: 'red' }} />
                  <Button>Regular button</Button>
-                 <StyledButton sx={{ color: 'red' }}>Styled button</StyledButton>
+                 <Button sx={{ color: 'red' }}>Styled button</Button>
                </div>
              )`,
       errors: [
         {
-          messageId: 'useStyledReactImportWithAlias',
-          data: {componentName: 'Button', aliasName: 'StyledButton'},
+          messageId: 'useStyledReactImport',
+          data: {componentName: 'Button'},
         },
         {
           messageId: 'useStyledReactImport',
           data: {componentName: 'Link'},
         },
-        {
-          messageId: 'useAliasedComponent',
-          data: {componentName: 'Button', aliasName: 'StyledButton'},
-        },
       ],
     },
   ],