From cede29836ee9a8646d340649c3c599627af94278 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 23 Jul 2024 12:44:01 +1000 Subject: [PATCH] Update primer-react eslint plugin and update the code accordignly --- .eslintrc.js | 3 +- docs/content/ActionMenu.mdx | 4 +- package-lock.json | 50 ++++--------------- package.json | 2 +- .../src/ActionList/ActionList.dev.stories.tsx | 2 + packages/react/src/ActionList/Item.tsx | 2 +- .../ActionMenu.features.stories.tsx | 3 +- .../src/Button/IconButton.dev.stories.tsx | 19 +------ .../Button/IconButton.features.stories.tsx | 42 ++++------------ .../react/src/Button/IconButton.stories.tsx | 2 +- .../src/Button/__tests__/Button.test.tsx | 30 +++-------- .../ButtonGroup.features.stories.tsx | 2 + .../__snapshots__/NavList.test.tsx.snap | 16 +++--- .../PageHeader.examples.stories.tsx | 2 - .../react/src/__tests__/ActionMenu.test.tsx | 2 +- .../__snapshots__/Autocomplete.test.tsx.snap | 10 ++-- 16 files changed, 54 insertions(+), 137 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 43ed40e5530..77286a7ae85 100644 --- 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 index 89768e6ae67..6ed2c15b101 100644 --- 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 - + Live query @@ -130,7 +130,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic - + Layout diff --git a/package-lock.json b/package-lock.json index e942c8990d0..5265ce1d048 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,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", @@ -287,7 +287,7 @@ "examples/app-router": { "name": "example-app-router", "dependencies": { - "@primer/react": "36.25.0", + "@primer/react": "36.26.0", "next": "^14.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -306,7 +306,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "36.25.0", + "@primer/react": "36.26.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -349,7 +349,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "19.x", - "@primer/react": "36.25.0", + "@primer/react": "36.26.0", "next": "^14.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -28529,50 +28529,20 @@ } }, "node_modules/eslint-plugin-primer-react": { - "version": "4.0.2", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-5.4.0.tgz", + "integrity": "sha512-t3F8RGOG+88SOZTjC5+ZBDhLIJitlRN4qkdRmwDuaL5mkxIA4LzyhLf4KfM595NwDan8mj37Fjbt3Nj04PxUDQ==", "dev": true, - "license": "MIT", "dependencies": { "@styled-system/props": "^5.1.5", - "eslint-plugin-github": "^4.9.2", + "eslint-plugin-github": "^5.0.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-traverse": "^1.0.0", "lodash": "^4.17.21", "styled-system": "^5.1.5" }, "peerDependencies": { - "@primer/primitives": ">=4.6.2", - "eslint": "^8.0.1" - } - }, - "node_modules/eslint-plugin-primer-react/node_modules/eslint-plugin-github": { - "version": "4.10.2", - "dev": true, - "license": "MIT", - "dependencies": { - "@github/browserslist-config": "^1.0.0", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", - "aria-query": "^5.3.0", - "eslint-config-prettier": ">=8.0.0", - "eslint-plugin-escompat": "^3.3.3", - "eslint-plugin-eslint-comments": "^3.2.0", - "eslint-plugin-filenames": "^1.3.2", - "eslint-plugin-i18n-text": "^1.0.1", - "eslint-plugin-import": "^2.25.2", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-no-only-tests": "^3.0.0", - "eslint-plugin-prettier": "^5.0.0", - "eslint-rule-documentation": ">=1.0.0", - "jsx-ast-utils": "^3.3.2", - "prettier": "^3.0.0", - "svg-element-attributes": "^1.3.1" - }, - "bin": { - "eslint-ignore-errors": "bin/eslint-ignore-errors.js" - }, - "peerDependencies": { - "eslint": "^8.0.1" + "eslint": "^8.42.0" } }, "node_modules/eslint-plugin-react": { @@ -58973,7 +58943,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "36.25.0", + "version": "36.26.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", diff --git a/package.json b/package.json index 34769bd7d18..1ae55d2cfba 100644 --- 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 index 7140aebb244..4578ddb7e59 100644 --- 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.

+ {/* eslint-disable-next-line primer-react/no-deprecated-props */} {users.slice(2).map(user => ( { under features.

+ {/* eslint-disable-next-line primer-react/no-deprecated-props */} {users.slice(2).map(user => ( ( 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 index 7913ed14af2..ab68345afe1 100644 --- 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 = () => ( - + + Github projects What's new diff --git a/packages/react/src/Button/IconButton.dev.stories.tsx b/packages/react/src/Button/IconButton.dev.stories.tsx index 87b0c60a31c..36e75d6b350 100644 --- 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 = () => ( - + ) 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 = () => ( - + ) diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx index 745eb362574..a8f138aa312 100644 --- 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 = () => ( - -) +export const Primary = () => -export const Danger = () => ( - -) +export const Danger = () => -export const Invisible = () => ( - -) +export const Invisible = () => -export const Disabled = () => ( - -) +export const Disabled = () => -export const Small = () => ( - -) +export const Small = () => -export const Medium = () => ( - -) +export const Medium = () => -export const Large = () => ( - -) +export const Large = () => export const WithDescription = () => ( - + ) export const ExternalTooltip = () => ( @@ -62,7 +43,7 @@ export const ExternalTooltipVersion1 = () => ( export const AsAMenuAnchor = () => ( - + @@ -91,7 +72,6 @@ export const AsAMenuAnchor = () => ( export const KeyshortcutsOnDescription = () => ( ( /> ) -export const Keyshortcuts = () => ( - -) +export const Keyshortcuts = () => diff --git a/packages/react/src/Button/IconButton.stories.tsx b/packages/react/src/Button/IconButton.stories.tsx index 04c7dc64470..845fa4b5415 100644 --- 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 = () => +export const Default = () => diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx index 882e5f1cdce..e8effefe2b1 100644 --- 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( - , - ) + const {getByRole, getByText} = render() 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( - , + , ) const triggerEL = getByRole('button') expect(triggerEL).toHaveAttribute('aria-label', 'Heart') @@ -139,16 +137,12 @@ 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( - , - ) + const {getByRole} = render() 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( - , - ) + const {getByRole, getByText} = render() const triggerEl = getByRole('button') const tooltipEl = getByText('Heart, Command+H') expect(tooltipEl).toBeInTheDocument() @@ -156,13 +150,7 @@ describe('Button', () => { }) it('should render aria-keyshorts on an icon button when keyshortcuts prop is passed (Description Type)', () => { const {getByRole, getByText} = render( - , + , ) const triggerEl = getByRole('button') const tooltipEl = getByText('Love is all around, Command+H') @@ -170,13 +158,7 @@ describe('Button', () => { }) 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( - , + , ) 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 index 6b33ad5ab29..ea92075fe5e 100644 --- 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 = () => ( {/* 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 */} + {/* eslint-disable-next-line primer-react/a11y-remove-disable-tooltip */} ) diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index 9a72798f35b..fe8998d3f10 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -87,7 +87,7 @@ exports[`NavList renders a simple list 1`] = ` .c2[aria-disabled] [data-component="ActionList.Checkbox"], .c2[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -180,7 +180,7 @@ exports[`NavList renders a simple list 1`] = ` .c7[aria-disabled] [data-component="ActionList.Checkbox"], .c7[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -535,7 +535,7 @@ exports[`NavList renders with groups 1`] = ` .c6[aria-disabled] [data-component="ActionList.Checkbox"], .c6[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -628,7 +628,7 @@ exports[`NavList renders with groups 1`] = ` .c11[aria-disabled] [data-component="ActionList.Checkbox"], .c11[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -1014,7 +1014,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c11[aria-disabled] [data-component="ActionList.Checkbox"], .c11[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -1107,7 +1107,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c4[aria-disabled] [data-component="ActionList.Checkbox"], .c4[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -1486,7 +1486,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c11[aria-disabled] [data-component="ActionList.Checkbox"], .c11[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -1589,7 +1589,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c4[aria-disabled] [data-component="ActionList.Checkbox"], .c4[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx index dbb256d9e9d..e0024100b61 100644 --- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx +++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx @@ -430,7 +430,6 @@ export const IssuesPage = () => { aria-label="Copy permalink" icon={CopyIcon} variant="invisible" - unsafeDisableTooltip={false} onClick={() => { alert('This button copies the permalink to the clipboard') }} @@ -459,7 +458,6 @@ export const IssuesPage = () => { aria-label="Copy permalink" icon={CopyIcon} variant="invisible" - unsafeDisableTooltip={false} onClick={() => { alert('This button copies the permalink to the clipboard') }} diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx index 91533a83b3a..7028221595b 100644 --- a/packages/react/src/__tests__/ActionMenu.test.tsx +++ b/packages/react/src/__tests__/ActionMenu.test.tsx @@ -497,7 +497,7 @@ describe('ActionMenu', () => { - + diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 529e9781448..1e0a22cc528 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -750,7 +750,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c3[aria-disabled] [data-component="ActionList.Checkbox"], .c3[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -1527,7 +1527,7 @@ exports[`snapshots renders a multiselect input 1`] = ` .c3[aria-disabled] [data-component="ActionList.Checkbox"], .c3[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -2358,7 +2358,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c8[aria-disabled] [data-component="ActionList.Checkbox"], .c8[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -3052,7 +3052,7 @@ exports[`snapshots renders a single select input 1`] = ` .c3[aria-disabled] [data-component="ActionList.Checkbox"], .c3[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } @@ -3523,7 +3523,7 @@ exports[`snapshots renders with a custom text input component 1`] = ` .c3[aria-disabled] [data-component="ActionList.Checkbox"], .c3[data-inactive] [data-component="ActionList.Checkbox"] { cursor: not-allowed; - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2)); border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); }