Update primer-react eslint plugin and update the code accordignly

primer · Jul 23, 2024 · cede298 · cede298
1 parent 1c131f8
commit cede298
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 137 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -75,7 +75,6 @@ module.exports = {
         ],
       },
     ],
-    'primer-react/no-deprecated-colors': ['warn', {checkAllStrings: true}],
 
     // Overrides from updating plugin:github
     'filenames/match-regex': 'off',
@@ -89,6 +88,7 @@ module.exports = {
     'github/no-inner-html': 'off',
     'github/role-supports-aria-props': 'off',
     'no-restricted-syntax': 'off',
+    'primer-react/a11y-use-next-tooltip': 'off',
   },
   overrides: [
     // rules which apply only to JS
@@ -241,7 +241,6 @@ module.exports = {
         'jsx-a11y/label-has-for': 'off',
         '@typescript-eslint/no-unnecessary-condition': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
-        'primer-react/no-deprecated-colors': ['error', {skipImportCheck: true}],
         'no-redeclare': 'off',
         'ssr-friendly/no-dom-globals-in-module-scope': 'off',
         'ssr-friendly/no-dom-globals-in-react-fc': 'off',

diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -121,7 +121,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <ActionList.Group title="Live query">
+      <ActionList.Group><ActionList.GroupHeading>Live query</ActionList.GroupHeading>
         <ActionList.Item>
           <ActionList.LeadingVisual>
             <SearchIcon />
@@ -130,7 +130,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
         </ActionList.Item>
       </ActionList.Group>
       <ActionList.Divider />
-      <ActionList.Group title="Layout" variant="subtle">
+      <ActionList.Group variant="subtle"><ActionList.GroupHeading>Layout</ActionList.GroupHeading>
         <ActionList.Item>
           <ActionList.LeadingVisual>
             <NoteIcon />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "eslint-plugin-mdx": "3.0.0",
     "eslint-plugin-playwright": "0.15.1",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-primer-react": "4.0.2",
+    "eslint-plugin-primer-react": "5.4.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-ssr-friendly": "1.3.0",

diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -41,6 +41,7 @@ export const GroupWithSubtleTitleOldAPI = () => {
         under features.
       </p>
       <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
+        {/* eslint-disable-next-line primer-react/no-deprecated-props */}
         <ActionList.Group title="Everyone">
           {users.slice(2).map(user => (
             <ActionList.Item
@@ -80,6 +81,7 @@ export const GroupWithFilledTitleOldAPI = () => {
         under features.
       </p>
       <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
+        {/* eslint-disable-next-line primer-react/no-deprecated-props */}
         <ActionList.Group title="Everyone" variant="filled">
           {users.slice(2).map(user => (
             <ActionList.Item

diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -181,7 +181,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         cursor: 'not-allowed',
         '[data-component="ActionList.Checkbox"]': {
           cursor: 'not-allowed',
-          bg: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
+          bg: selected ? 'fg.muted' : 'var(--control-bgColor-disabled, rgba(175, 184, 193, 0.2))',
           borderColor: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
         },
       },

diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx
@@ -219,7 +219,8 @@ export const LoadingItems = () => (
           </ActionList.LeadingVisual>
         </ActionList.Item>
         <ActionList.Divider />
-        <ActionList.Group title="Github projects">
+        <ActionList.Group>
+          <ActionList.GroupHeading>Github projects</ActionList.GroupHeading>
           <ActionList.LinkItem href="/">
             What&apos;s new
             <ActionList.LeadingVisual>

diff --git a/packages/react/src/Button/IconButton.dev.stories.tsx b/packages/react/src/Button/IconButton.dev.stories.tsx
@@ -7,14 +7,7 @@ export default {
 }
 
 export const CustomSize = () => (
-  <IconButton
-    aria-label="Expand"
-    variant="primary"
-    size="small"
-    icon={ChevronDownIcon}
-    unsafeDisableTooltip={false}
-    sx={{width: 16, height: 16}}
-  />
+  <IconButton aria-label="Expand" variant="primary" size="small" icon={ChevronDownIcon} sx={{width: 16, height: 16}} />
 )
 
 export const CustomSizeWithMedia = () => {
@@ -24,19 +17,11 @@ export const CustomSizeWithMedia = () => {
       variant="primary"
       size="small"
       icon={ChevronDownIcon}
-      unsafeDisableTooltip={false}
       sx={{'@media (min-width: 123px)': {width: 16, height: 16}}}
     />
   )
 }
 
 export const CustomIconColor = () => (
-  <IconButton
-    aria-label="Expand"
-    variant="invisible"
-    size="small"
-    icon={ChevronDownIcon}
-    unsafeDisableTooltip={false}
-    sx={{color: 'red'}}
-  />
+  <IconButton aria-label="Expand" variant="invisible" size="small" icon={ChevronDownIcon} sx={{color: 'red'}} />
 )
diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx
@@ -10,41 +10,22 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => (
-  <IconButton icon={HeartIcon} variant="primary" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Favorite" />
 
-export const Danger = () => (
-  <IconButton icon={HeartIcon} variant="danger" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Favorite" />
 
-export const Invisible = () => (
-  <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" />
 
-export const Disabled = () => (
-  <IconButton disabled icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Disabled = () => <IconButton disabled icon={HeartIcon} aria-label="Favorite" />
 
-export const Small = () => (
-  <IconButton size="small" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label="Favorite" />
 
-export const Medium = () => (
-  <IconButton size="medium" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Favorite" />
 
-export const Large = () => (
-  <IconButton size="large" icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
-)
+export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Favorite" />
 
 export const WithDescription = () => (
-  <IconButton
-    icon={InboxIcon}
-    aria-label="Notifications"
-    description="You have no unread notifications."
-    unsafeDisableTooltip={false}
-  />
+  <IconButton icon={InboxIcon} aria-label="Notifications" description="You have no unread notifications." />
 )
 
 export const ExternalTooltip = () => (
@@ -62,7 +43,7 @@ export const ExternalTooltipVersion1 = () => (
 export const AsAMenuAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>
-      <IconButton icon={ChevronDownIcon} aria-label="Something" unsafeDisableTooltip={false} />
+      <IconButton icon={ChevronDownIcon} aria-label="Something" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay width="medium">
@@ -91,14 +72,11 @@ export const AsAMenuAnchor = () => (
 
 export const KeyshortcutsOnDescription = () => (
   <IconButton
-    unsafeDisableTooltip={false}
     icon={InboxIcon}
     aria-label="Notifications"
     description="You have unread notifications"
     keyshortcuts="G+N"
   />
 )
 
-export const Keyshortcuts = () => (
-  <IconButton unsafeDisableTooltip={false} icon={BoldIcon} aria-label="Bold" keyshortcuts="Command+B" />
-)
+export const Keyshortcuts = () => <IconButton icon={BoldIcon} aria-label="Bold" keyshortcuts="Command+B" />
diff --git a/packages/react/src/Button/IconButton.stories.tsx b/packages/react/src/Button/IconButton.stories.tsx
@@ -46,4 +46,4 @@ Playground.args = {
   icon: HeartIcon,
 }
 
-export const Default = () => <IconButton icon={HeartIcon} aria-label="Favorite" unsafeDisableTooltip={false} />
+export const Default = () => <IconButton icon={HeartIcon} aria-label="Favorite" />
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -115,16 +115,14 @@ describe('Button', () => {
   })
 
   it('should render tooltip on an icon button when unsafeDisableTooltip prop is passed as false', () => {
-    const {getByRole, getByText} = render(
-      <IconButton icon={HeartIcon} aria-label="Heart" unsafeDisableTooltip={false} />,
-    )
+    const {getByRole, getByText} = render(<IconButton icon={HeartIcon} aria-label="Heart" />)
     const triggerEL = getByRole('button')
     const tooltipEl = getByText('Heart')
     expect(triggerEL).toHaveAttribute('aria-labelledby', tooltipEl.id)
   })
   it('should render description type tooltip on an icon button when unsafeDisableTooltip prop is passed as false', () => {
     const {getByRole, getByText} = render(
-      <IconButton icon={HeartIcon} aria-label="Heart" description="Love is all around" unsafeDisableTooltip={false} />,
+      <IconButton icon={HeartIcon} aria-label="Heart" description="Love is all around" />,
     )
     const triggerEL = getByRole('button')
     expect(triggerEL).toHaveAttribute('aria-label', 'Heart')
@@ -139,44 +137,28 @@ describe('Button', () => {
     expect(triggerEl).not.toHaveAttribute('aria-label')
   })
   it('should render aria-keyshorts on an icon button when keyshortcuts prop is passed', () => {
-    const {getByRole} = render(
-      <IconButton unsafeDisableTooltip={false} icon={HeartIcon} aria-label="Heart" keyshortcuts="Command+H" />,
-    )
+    const {getByRole} = render(<IconButton icon={HeartIcon} aria-label="Heart" keyshortcuts="Command+H" />)
     const triggerEl = getByRole('button')
     expect(triggerEl).toHaveAttribute('aria-keyshortcuts', 'Command+H')
   })
   it('should append the keyshortcuts to the tooltip text that labels the icon button when keyshortcuts prop is passed', () => {
-    const {getByRole, getByText} = render(
-      <IconButton unsafeDisableTooltip={false} icon={HeartIcon} aria-label="Heart" keyshortcuts="Command+H" />,
-    )
+    const {getByRole, getByText} = render(<IconButton icon={HeartIcon} aria-label="Heart" keyshortcuts="Command+H" />)
     const triggerEl = getByRole('button')
     const tooltipEl = getByText('Heart, Command+H')
     expect(tooltipEl).toBeInTheDocument()
     expect(triggerEl).toHaveAttribute('aria-labelledby', tooltipEl.id)
   })
   it('should render aria-keyshorts on an icon button when keyshortcuts prop is passed (Description Type)', () => {
     const {getByRole, getByText} = render(
-      <IconButton
-        unsafeDisableTooltip={false}
-        icon={HeartIcon}
-        aria-label="Heart"
-        description="Love is all around"
-        keyshortcuts="Command+H"
-      />,
+      <IconButton icon={HeartIcon} aria-label="Heart" description="Love is all around" keyshortcuts="Command+H" />,
     )
     const triggerEl = getByRole('button')
     const tooltipEl = getByText('Love is all around, Command+H')
     expect(triggerEl).toHaveAttribute('aria-describedby', tooltipEl.id)
   })
   it('should append the keyshortcuts to the tooltip text that describes the icon button when keyshortcuts prop is passed (Description Type)', () => {
     const {getByRole, getByText} = render(
-      <IconButton
-        unsafeDisableTooltip={false}
-        icon={HeartIcon}
-        aria-label="Heart"
-        description="Love is all around"
-        keyshortcuts="Command+H"
-      />,
+      <IconButton icon={HeartIcon} aria-label="Heart" description="Love is all around" keyshortcuts="Command+H" />,
     )
     const triggerEl = getByRole('button')
     const tooltipEl = getByText('Love is all around, Command+H')

diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx
@@ -12,7 +12,9 @@ export default {
 export const IconButtons = () => (
   <ButtonGroup>
     {/* We can remove these unsafe props after we resolve https://github.com/primer/react/issues/4129 */}
+    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
     <IconButton unsafeDisableTooltip={true} icon={PlusIcon} aria-label="Add" />
+    {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */}
     <IconButton unsafeDisableTooltip={true} icon={DashIcon} aria-label="Subtract" />
   </ButtonGroup>
 )