@wordpress/eslint-plugin 24.0.1-next.v.0 → 24.1.0

package/README.md

@@ -82,8 +82,10 @@ The granular rulesets will not define any environment globals. As such, if they
 | [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains.                                                             | ✓           |
 | [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments.                                                             | ✓           |
 | [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓           |
+| [components-no-missing-40px-size-prop](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-missing-40px-size-prop.md)   | Disallow missing `__next40pxDefaultSize` prop on `@wordpress/components` components.            | ✓           |
+| [components-no-unsafe-button-disabled](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-unsafe-button-disabled.md)   | Disallow using `disabled` on Button without `accessibleWhenDisabled`.                           | ✓           |
 | [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls.                                             | ✓           |
-| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packagesl                                 | ✓           |
+| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packages                                  | ✓           |
 | [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return.                                   | ✓           |
 | [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md)                                         | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓           |
 | [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component.                                                      |             |

package/configs/custom.js

@@ -6,6 +6,8 @@ module.exports = {
 		'@wordpress/no-unguarded-get-range-at': 'error',
 		'@wordpress/no-global-active-element': 'error',
 		'@wordpress/no-global-get-selection': 'error',
+		'@wordpress/no-setting-ds-tokens': 'error',
+		'@wordpress/no-unknown-ds-tokens': 'error',
 		'@wordpress/no-unsafe-wp-apis': 'error',
 		'@wordpress/no-wp-process-env': 'error',
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "24.0.1-next.v.0+500f87dd8",
+	"version": "24.1.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,8 +40,9 @@
 		"@babel/eslint-parser": "7.25.7",
 		"@typescript-eslint/eslint-plugin": "^6.4.1",
 		"@typescript-eslint/parser": "^6.4.1",
-		"@wordpress/babel-preset-default": "^8.37.1-next.v.0+500f87dd8",
-		"@wordpress/prettier-config": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/babel-preset-default": "^8.39.0",
+		"@wordpress/prettier-config": "^4.39.0",
+		"@wordpress/theme": "^0.6.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -77,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

package/rules/__tests__/components-no-missing-40px-size-prop.js

@@ -0,0 +1,353 @@
+import { RuleTester } from 'eslint';
+import rule from '../components-no-missing-40px-size-prop';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
+	valid: [
+		// Component with __next40pxDefaultSize (boolean attribute)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button __next40pxDefaultSize />
+			`,
+		},
+		// Component with __next40pxDefaultSize={true}
+		{
+			code: `
+				import { InputControl } from '@wordpress/components';
+				<InputControl __next40pxDefaultSize={true} />
+			`,
+		},
+		// Component with non-default size prop
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size="small" />
+			`,
+		},
+		// Component with size="compact"
+		{
+			code: `
+				import { SelectControl } from '@wordpress/components';
+				<SelectControl size="compact" />
+			`,
+		},
+		// Component from @wordpress/ui (should not be checked)
+		{
+			code: `
+				import { Button } from '@wordpress/ui';
+				<Button />
+			`,
+		},
+		// Local component (should not be checked)
+		{
+			code: `
+				const Button = () => <button />;
+				<Button />
+			`,
+		},
+		// Component from another package (should not be checked)
+		{
+			code: `
+				import { Button } from 'some-other-package';
+				<Button />
+			`,
+		},
+		// Aliased import with correct prop
+		{
+			code: `
+				import { Button as WPButton } from '@wordpress/components';
+				<WPButton __next40pxDefaultSize />
+			`,
+		},
+		// FormFileUpload with render prop (special case)
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
+			`,
+		},
+		// FormFileUpload with __next40pxDefaultSize
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload __next40pxDefaultSize />
+			`,
+		},
+		// Component with dynamic size prop (assumes it could be non-default)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size={buttonSize} />
+			`,
+		},
+		// Button with variant="link" (doesn't need __next40pxDefaultSize)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button variant="link" />
+			`,
+		},
+		// Non-targeted component (should not be checked)
+		{
+			code: `
+				import { Modal } from '@wordpress/components';
+				<Modal />
+			`,
+		},
+		// All targeted components with __next40pxDefaultSize
+		{
+			code: `
+				import {
+					BorderBoxControl,
+					BorderControl,
+					BoxControl,
+					ComboboxControl,
+					CustomSelectControl,
+					FontAppearanceControl,
+					FontFamilyControl,
+					FontSizePicker,
+					FormTokenField,
+					InputControl,
+					LetterSpacingControl,
+					LineHeightControl,
+					NumberControl,
+					RangeControl,
+					SelectControl,
+					TextControl,
+					ToggleGroupControl,
+					UnitControl,
+				} from '@wordpress/components';
+				<>
+					<BorderBoxControl __next40pxDefaultSize />
+					<BorderControl __next40pxDefaultSize />
+					<BoxControl __next40pxDefaultSize />
+					<ComboboxControl __next40pxDefaultSize />
+					<CustomSelectControl __next40pxDefaultSize />
+					<FontAppearanceControl __next40pxDefaultSize />
+					<FontFamilyControl __next40pxDefaultSize />
+					<FontSizePicker __next40pxDefaultSize />
+					<FormTokenField __next40pxDefaultSize />
+					<InputControl __next40pxDefaultSize />
+					<LetterSpacingControl __next40pxDefaultSize />
+					<LineHeightControl __next40pxDefaultSize />
+					<NumberControl __next40pxDefaultSize />
+					<RangeControl __next40pxDefaultSize />
+					<SelectControl __next40pxDefaultSize />
+					<TextControl __next40pxDefaultSize />
+					<ToggleGroupControl __next40pxDefaultSize />
+					<UnitControl __next40pxDefaultSize />
+				</>
+			`,
+		},
+	],
+	invalid: [
+		// Button without __next40pxDefaultSize
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// InputControl without __next40pxDefaultSize
+		{
+			code: `
+				import { InputControl } from '@wordpress/components';
+				<InputControl value={value} onChange={onChange} />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+		// Component with __next40pxDefaultSize={false}
+		{
+			code: `
+				import { SelectControl } from '@wordpress/components';
+				<SelectControl __next40pxDefaultSize={false} />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'SelectControl' },
+				},
+			],
+		},
+		// Component with size="default" (should still require __next40pxDefaultSize)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size="default" />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// Aliased import without __next40pxDefaultSize
+		{
+			code: `
+				import { TextControl as MyTextControl } from '@wordpress/components';
+				<MyTextControl />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'TextControl' },
+				},
+			],
+		},
+		// FormFileUpload without __next40pxDefaultSize or render
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload onChange={handleChange} />
+			`,
+			errors: [
+				{
+					messageId: 'missingPropFormFileUpload',
+				},
+			],
+		},
+		// Multiple components, some invalid
+		{
+			code: `
+				import { Button, InputControl } from '@wordpress/components';
+				<>
+					<Button __next40pxDefaultSize />
+					<InputControl />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+		// Multiple invalid components
+		{
+			code: `
+				import { Button, SelectControl } from '@wordpress/components';
+				<>
+					<Button />
+					<SelectControl />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+				{
+					messageId: 'missingProp',
+					data: { component: 'SelectControl' },
+				},
+			],
+		},
+		// Relative import with checkLocalImports enabled
+		{
+			code: `
+				import { Button } from '../button';
+				<Button />
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// Default import from input-control path with checkLocalImports enabled
+		{
+			code: `
+				import InputControl from '../input-control';
+				<InputControl />
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+	],
+} );
+
+// Additional tests for checkLocalImports option
+ruleTester.run(
+	'components-no-missing-40px-size-prop (checkLocalImports)',
+	rule,
+	{
+		valid: [
+			// Relative import with correct props
+			{
+				code: `
+				import { Button } from '../button';
+				<Button __next40pxDefaultSize />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Default import with correct props
+			{
+				code: `
+				import InputControl from './input-control';
+				<InputControl __next40pxDefaultSize />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import with non-default size
+			{
+				code: `
+				import { Button } from '../button';
+				<Button size="small" />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import { Button } from '../button';
+				<Button />
+			`,
+			},
+			// Default import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import InputControl from '../input-control';
+				<InputControl />
+			`,
+			},
+			// FormFileUpload relative import with render prop
+			{
+				code: `
+				import { FormFileUpload } from '../form-file-upload';
+				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+		],
+		invalid: [],
+	}
+);

package/rules/__tests__/components-no-unsafe-button-disabled.js

@@ -0,0 +1,235 @@
+import { RuleTester } from 'eslint';
+import rule from '../components-no-unsafe-button-disabled';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'components-no-unsafe-button-disabled', rule, {
+	valid: [
+		// Button with both disabled and accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled />
+			`,
+		},
+		// Button with accessibleWhenDisabled={true}
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled={true} />
+			`,
+		},
+		// Button with accessibleWhenDisabled={false}
+		{
+			code: `
+						import { Button } from '@wordpress/components';
+						<Button disabled accessibleWhenDisabled={false} />
+					`,
+		},
+		// Button with accessibleWhenDisabled={someVar}
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled={someVar} />
+			`,
+		},
+		// Button with accessibleWhenDisabled={false} should error (handled in invalid)
+		// Button with disabled={false} should not require accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={false} />
+			`,
+		},
+		// Button with disabled={someVar} and accessibleWhenDisabled={someVar}
+		{
+			code: `
+						import { Button } from '@wordpress/components';
+						<Button disabled={isDisabled} accessibleWhenDisabled={someVar} />
+					`,
+		},
+		// Button without disabled prop
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button onClick={handleClick} />
+			`,
+		},
+		// Button from @wordpress/ui (should not be checked)
+		{
+			code: `
+				import { Button } from '@wordpress/ui';
+				<Button disabled />
+			`,
+		},
+		// Local Button component (should not be checked)
+		{
+			code: `
+				const Button = () => <button />;
+				<Button disabled />
+			`,
+		},
+		// Button from another package (should not be checked)
+		{
+			code: `
+				import { Button } from 'some-other-package';
+				<Button disabled />
+			`,
+		},
+		// Aliased import with correct props
+		{
+			code: `
+				import { Button as WPButton } from '@wordpress/components';
+				<WPButton disabled accessibleWhenDisabled />
+			`,
+		},
+		// Non-Button component with disabled (should not be checked)
+		{
+			code: `
+				import { TextControl } from '@wordpress/components';
+				<TextControl disabled />
+			`,
+		},
+	],
+	invalid: [
+		// Button with disabled but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Button with disabled={someVar} but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={isDisabled} />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Button with disabled={true} but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={true} />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Aliased import without accessibleWhenDisabled
+		{
+			code: `
+				import { Button as MyButton } from '@wordpress/components';
+				<MyButton disabled />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Multiple Buttons, one invalid
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<>
+					<Button disabled accessibleWhenDisabled />
+					<Button disabled />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+	],
+} );
+
+// Additional tests for checkLocalImports option
+ruleTester.run(
+	'components-no-unsafe-button-disabled (checkLocalImports)',
+	rule,
+	{
+		valid: [
+			// Relative import with correct props
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled accessibleWhenDisabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Default import with correct props
+			{
+				code: `
+				import Button from './button';
+				<Button disabled accessibleWhenDisabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled />
+			`,
+			},
+			// Default import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import Button from '../button';
+				<Button disabled />
+			`,
+			},
+		],
+		invalid: [
+			// Relative import with checkLocalImports enabled
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+				errors: [
+					{
+						messageId: 'missingAccessibleWhenDisabled',
+					},
+				],
+			},
+			// Default import from button path with checkLocalImports enabled
+			{
+				code: `
+				import Button from '../button';
+				<Button disabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+				errors: [
+					{
+						messageId: 'missingAccessibleWhenDisabled',
+					},
+				],
+			},
+		],
+	}
+);

package/rules/__tests__/dependency-group.js

@@ -53,6 +53,14 @@ const { Component } = require( '@wordpress/element' );
  */
 const edit = require( './edit' );`,
 		},
+		{
+			code: `
+import { camelCase } from 'change-case';
+import clsx from 'clsx';
+import { Component } from '@wordpress/element';
+import edit from './edit';`,
+			options: [ 'never' ],
+		},
 	],
 	invalid: [
 		{
@@ -131,5 +139,30 @@ const { Component } = require( '@wordpress/element' );
  */
 const edit = require( './edit' );`,
 		},
+		{
+			code: `
+/**
+ * External dependencies
+ */
+import { camelCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+
+import { Component } from '@wordpress/element';`,
+			options: [ 'never' ],
+			errors: [
+				{
+					message: 'Unexpected dependency group comment block',
+				},
+				{
+					message: 'Unexpected dependency group comment block',
+				},
+			],
+			output: `
+import { camelCase } from 'change-case';
+import { Component } from '@wordpress/element';`,
+		},
 	],
 } );