@wordpress/eslint-plugin 25.4.1 → 25.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "25.4.1",
+	"version": "25.5.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,9 +44,9 @@
 		"@babel/eslint-parser": "^7.28.6",
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.7.0",
 		"@eslint/compat": "^2.0.0",
-		"@wordpress/babel-preset-default": "^8.48.1",
-		"@wordpress/prettier-config": "^4.48.1",
-		"@wordpress/theme": "^0.15.1",
+		"@wordpress/babel-preset-default": "^8.49.0",
+		"@wordpress/prettier-config": "^4.49.0",
+		"@wordpress/theme": "^0.16.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^10.0.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -64,7 +64,8 @@
 	},
 	"devDependencies": {
 		"@types/eslint": "^9",
-		"@types/estree": "^1.0.5"
+		"@types/estree": "^1.0.5",
+		"eslint": "^10.0.0"
 	},
 	"peerDependencies": {
 		"@babel/core": ">=7",
@@ -83,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

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

@@ -112,7 +112,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				import {
 					BorderBoxControl,
 					BorderControl,
-					BoxControl,
 					ComboboxControl,
 					CustomSelectControl,
 					FontAppearanceControl,
@@ -125,14 +124,12 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 					NumberControl,
 					RangeControl,
 					SelectControl,
-					TextControl,
 					ToggleGroupControl,
 					UnitControl,
 				} from '@wordpress/components';
 				<>
 					<BorderBoxControl __next40pxDefaultSize />
 					<BorderControl __next40pxDefaultSize />
-					<BoxControl __next40pxDefaultSize />
 					<ComboboxControl __next40pxDefaultSize />
 					<CustomSelectControl __next40pxDefaultSize />
 					<FontAppearanceControl __next40pxDefaultSize />
@@ -145,7 +142,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 					<NumberControl __next40pxDefaultSize />
 					<RangeControl __next40pxDefaultSize />
 					<SelectControl __next40pxDefaultSize />
-					<TextControl __next40pxDefaultSize />
 					<ToggleGroupControl __next40pxDefaultSize />
 					<UnitControl __next40pxDefaultSize />
 				</>
@@ -208,13 +204,13 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 		// Aliased import without __next40pxDefaultSize
 		{
 			code: `
-				import { TextControl as MyTextControl } from '@wordpress/components';
-				<MyTextControl />
+				import { InputControl as MyInputControl } from '@wordpress/components';
+				<MyInputControl />
 			`,
 			errors: [
 				{
 					messageId: 'missingProp',
-					data: { component: 'TextControl' },
+					data: { component: 'InputControl' },
 				},
 			],
 		},

package/rules/__tests__/no-ds-tokens.js

@@ -32,7 +32,7 @@ ruleTester.run( 'no-ds-tokens', rule, {
 	],
 	invalid: [
 		{
-			code: `const style = 'color: var(--wpds-color-fg-content-neutral)';`,
+			code: `const style = 'color: var(--wpds-color-foreground-content-neutral)';`,
 			errors: [
 				{
 					messageId: 'disallowed',
@@ -40,7 +40,7 @@ ruleTester.run( 'no-ds-tokens', rule, {
 			],
 		},
 		{
-			code: 'const style = `color: var(--wpds-color-fg-content-neutral)`;',
+			code: 'const style = `color: var(--wpds-color-foreground-content-neutral)`;',
 			errors: [
 				{
 					messageId: 'disallowed',
@@ -48,7 +48,7 @@ ruleTester.run( 'no-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />`,
+			code: `<div style={ { color: 'var(--wpds-color-foreground-content-neutral)' } } />`,
 			errors: [
 				{
 					messageId: 'disallowed',
@@ -64,7 +64,7 @@ ruleTester.run( 'no-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `const token = '--wpds-color-fg-content-neutral';`,
+			code: `const token = '--wpds-color-foreground-content-neutral';`,
 			errors: [
 				{
 					messageId: 'disallowed',
@@ -72,7 +72,7 @@ ruleTester.run( 'no-ds-tokens', rule, {
 			],
 		},
 		{
-			code: 'const style = `--wpds-color-fg-content-neutral: red`;',
+			code: 'const style = `--wpds-color-foreground-content-neutral: red`;',
 			errors: [
 				{
 					messageId: 'disallowed',

package/rules/__tests__/no-setting-ds-tokens.js

@@ -18,7 +18,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			code: `<div style={ { '--my-custom-prop': 'value' } } />`,
 		},
 		{
-			code: `<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />`,
+			code: `<div style={ { color: 'var(--wpds-color-foreground-content-neutral)' } } />`,
 		},
 		{
 			code: `<div style={ { '--other-prefix-token': '10px' } } />`,
@@ -30,10 +30,10 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			code: `const styles = { '--my-custom-prop': 'value' };`,
 		},
 		{
-			code: `const styles = { color: 'var(--wpds-color-fg-content-neutral)' };`,
+			code: `const styles = { color: 'var(--wpds-color-foreground-content-neutral)' };`,
 		},
 		{
-			code: `const { '--wpds-color-fg-content-neutral': neutralColor } = styles;`,
+			code: `const { '--wpds-color-foreground-content-neutral': neutralColor } = styles;`,
 		},
 		{
 			code: `const css = '--my-custom-prop: red;';`,
@@ -50,7 +50,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 	],
 	invalid: [
 		{
-			code: `<div style={ { '--wpds-color-fg-content-neutral': 'red' } } />`,
+			code: `<div style={ { '--wpds-color-foreground-content-neutral': 'red' } } />`,
 			errors: [
 				{
 					messageId: 'disallowedSet',
@@ -66,7 +66,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `const styles = { '--wpds-color-fg-content-neutral': 'red' };`,
+			code: `const styles = { '--wpds-color-foreground-content-neutral': 'red' };`,
 			errors: [
 				{
 					messageId: 'disallowedSet',
@@ -82,7 +82,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `const config = { inner: { '--wpds-color-fg-content-neutral': 'red' } };`,
+			code: `const config = { inner: { '--wpds-color-foreground-content-neutral': 'red' } };`,
 			errors: [
 				{
 					messageId: 'disallowedSet',
@@ -90,7 +90,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `const css = '--wpds-color-fg-content-neutral: red;';`,
+			code: `const css = '--wpds-color-foreground-content-neutral: red;';`,
 			errors: [
 				{
 					messageId: 'disallowedSet',
@@ -98,7 +98,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			],
 		},
 		{
-			code: 'const css = `--wpds-color-fg-content-neutral: red;`;',
+			code: 'const css = `--wpds-color-foreground-content-neutral: red;`;',
 			errors: [
 				{
 					messageId: 'disallowedSet',
@@ -106,7 +106,7 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 			],
 		},
 		{
-			code: 'const css = `--wpds-color-fg-content-neutral: ${ value };`;',
+			code: 'const css = `--wpds-color-foreground-content-neutral: ${ value };`;',
 			errors: [
 				{
 					messageId: 'disallowedSet',

package/rules/__tests__/no-unknown-ds-tokens.js

@@ -24,34 +24,34 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 			code: `<div style={ { color: 'var(--other-prefix-token)' } } />`,
 		},
 		{
-			code: `<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />`,
+			code: `<div style={ { color: 'var(--wpds-color-foreground-content-neutral)' } } />`,
 		},
 		{
-			code: '<div style={ { color: `var(--wpds-color-fg-content-neutral)` } } />',
+			code: '<div style={ { color: `var(--wpds-color-foreground-content-neutral)` } } />',
 		},
 		{
-			code: `const token = 'var(--wpds-color-fg-content-neutral)';`,
+			code: `const token = 'var(--wpds-color-foreground-content-neutral)';`,
 		},
 		{
 			code: `const name = 'something--wpds-color';`,
 		},
 		{
-			code: '`${ prefix }: var(--wpds-color-fg-content-neutral)`',
+			code: '`${ prefix }: var(--wpds-color-foreground-content-neutral)`',
 		},
 		{
-			code: '`var(--wpds-color-fg-content-neutral) ${ suffix }`',
+			code: '`var(--wpds-color-foreground-content-neutral) ${ suffix }`',
 		},
 		{
-			code: `const style = { '--wpds-color-fg-content-neutral': 'red' };`,
+			code: `const style = { '--wpds-color-foreground-content-neutral': 'red' };`,
 		},
 		{
-			code: `const css = '--wpds-color-fg-content-neutral: red;';`,
+			code: `const css = '--wpds-color-foreground-content-neutral: red;';`,
 		},
 		{
-			code: 'const css = `--wpds-color-fg-content-neutral: red;`;',
+			code: 'const css = `--wpds-color-foreground-content-neutral: red;`;',
 		},
 		{
-			code: 'const css = `--wpds-color-fg-content-neutral: ${ value };`;',
+			code: 'const css = `--wpds-color-foreground-content-neutral: ${ value };`;',
 		},
 	],
 	invalid: [
@@ -168,78 +168,78 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 			],
 		},
 		{
-			code: `const token = '--wpds-color-fg-content-neutral';`,
+			code: `const token = '--wpds-color-foreground-content-neutral';`,
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: 'const token = `--wpds-color-fg-content-neutral`;',
+			code: 'const token = `--wpds-color-foreground-content-neutral`;',
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: '<div style={ { gap: `--wpds-color-fg-content-neutral` } } />',
+			code: '<div style={ { gap: `--wpds-color-foreground-content-neutral` } } />',
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: '`${ prefix }: --wpds-color-fg-content-neutral`',
+			code: '`${ prefix }: --wpds-color-foreground-content-neutral`',
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: '`var(--wpds-color-fg-content-neutral) --wpds-color-fg-content-neutral ${ x }`',
+			code: '`var(--wpds-color-foreground-content-neutral) --wpds-color-foreground-content-neutral ${ x }`',
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: `const css = '--wpds-color-fg-content-neutral: red; color: --wpds-color-bg-surface-neutral;';`,
+			code: `const css = '--wpds-color-foreground-content-neutral: red; color: --wpds-color-background-surface-neutral;';`,
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-bg-surface-neutral'",
+						tokenNames: "'--wpds-color-background-surface-neutral'",
 					},
 				},
 			],
 		},
 		{
-			code: `const css = '--wpds-color-fg-content-neutral: red; background: --wpds-color-fg-content-neutral;';`,
+			code: `const css = '--wpds-color-foreground-content-neutral: red; background: --wpds-color-foreground-content-neutral;';`,
 			errors: [
 				{
 					messageId: 'bareToken',
 					data: {
-						tokenNames: "'--wpds-color-fg-content-neutral'",
+						tokenNames: "'--wpds-color-foreground-content-neutral'",
 					},
 				},
 			],

package/rules/__tests__/use-recommended-components.js

@@ -24,7 +24,7 @@ ruleTester.run( 'use-recommended-components', rule, {
 		"import { Link } from '@wordpress/ui';",
 		"import { Stack } from '@wordpress/ui';",
 		"import { Text } from '@wordpress/ui';",
-		"import { Badge, Icon, Link, Stack, Tabs, Text } from '@wordpress/ui';",
+		"import { Badge, Icon, Link, Stack, Tabs, Text, Tooltip } from '@wordpress/ui';",
 
 		// Unlocked private APIs are only checked for denied names.
 		"import { privateApis } from '@wordpress/components'; import { unlock } from '../../lock-unlock'; const { SomethingElse } = unlock( privateApis );",
@@ -114,6 +114,14 @@ ruleTester.run( 'use-recommended-components', rule, {
 				},
 			],
 		},
+		{
+			code: "import { Tooltip } from '@wordpress/components';",
+			errors: [
+				{
+					message: 'Use `Tooltip` from `@wordpress/ui` instead.',
+				},
+			],
+		},
 	],
 } );
 

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

@@ -14,7 +14,6 @@ const { hasTruthyJsxAttribute } = require( '../utils' );
 const COMPONENTS_REQUIRING_40PX = new Set( [
 	'BorderBoxControl',
 	'BorderControl',
-	'BoxControl',
 	'Button',
 	'ClipboardButton',
 	'ComboboxControl',
@@ -31,7 +30,6 @@ const COMPONENTS_REQUIRING_40PX = new Set( [
 	'Radio',
 	'RangeControl',
 	'SelectControl',
-	'TextControl',
 	'TreeSelect',
 	'ToggleGroupControl',
 	'UnitControl',

package/rules/use-recommended-components.js

@@ -26,6 +26,7 @@ const ALLOWLIST = {
 			'Stack',
 			'Tabs',
 			'Text',
+			'Tooltip',
 			'VisuallyHidden',
 		],
 		message:
@@ -60,6 +61,7 @@ const DENYLIST = {
 		CardMedia: 'Use `Card.FullBleed` from `@wordpress/ui` instead.',
 		TabPanel: 'Use `Tabs` from `@wordpress/ui` instead.',
 		Tabs: 'Use `Tabs` from `@wordpress/ui` instead.',
+		Tooltip: 'Use `Tooltip` from `@wordpress/ui` instead.',
 		VisuallyHidden: 'Use `{{ name }}` from `@wordpress/ui` instead.',
 	},
 };