Resolves #37695 - Use clsx instead of classnames (#37708)

* Add rule to disallow `classnames`

* Initial pass

* `classnames/dedupe` → `@wordpress/token-list`

* Add changelog

* Use valid changelog types

* Remove file from eslint exclusions

* Change post-rebase use of classnames

* More changelog format compliance fixes

* Bump versions

Author: tbradsha

.eslintrc.js

@@ -3,6 +3,7 @@ const loadIgnorePatterns = require( './tools/js-tools/load-eslint-ignore.js' );
 /**
  * @type {import("eslint").Linter.Config}
  */
+
 module.exports = {
 	root: true,
 	extends: [ './tools/js-tools/eslintrc/base.js' ],

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.

projects/js-packages/ai-client/changelog/fix-37695-classnames_to_clsx

@@ -56,7 +56,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",
 		"react": "18.3.1",

projects/js-packages/ai-client/package.json

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -54,14 +54,14 @@ export default function AIControl( {
 }: AIControlProps ): ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			className={ clsx( 'jetpack-components-ai-control__container-wrapper', className ) }
 			ref={ wrapperRef }
 		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }
 				<div
-					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+					className={ clsx( 'jetpack-components-ai-control__wrapper', {
 						'is-transparent': isTransparent,
 					} ) }
 				>

projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*
  * Types
  */
@@ -26,7 +26,7 @@ export type AiStatusIndicatorProps = {
 export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
+			className={ clsx( 'jetpack-ai-status-indicator__icon-wrapper', {
 				[ `is-${ state }` ]: true,
 			} ) }
 		>

projects/js-packages/ai-client/src/components/ai-status-indicator/index.tsx

@@ -4,7 +4,7 @@
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -78,7 +78,7 @@ export default function Message( {
 }: MessageProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'jetpack-ai-assistant__message',
 				`jetpack-ai-assistant__message-severity-${ severity }`
 			) }

projects/js-packages/ai-client/src/components/message/index.tsx

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.

projects/js-packages/components/changelog/fix-37695-classnames_to_clsx

@@ -3,7 +3,7 @@
  */
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 /**
  * Internal dependencies
@@ -40,7 +40,7 @@ const ActionButton = props => {
 		<>
 			{
 				<Button
-					className={ classNames( styles.button, 'jp-action-button--button', customClass ) }
+					className={ clsx( styles.button, 'jp-action-button--button', customClass ) }
 					label={ label }
 					onClick={ onClick }
 					variant="primary"
@@ -51,7 +51,7 @@ const ActionButton = props => {
 			}
 
 			{ displayError && (
-				<p className={ classNames( styles.error, 'jp-action-button__error' ) }>{ errorMessage }</p>
+				<p className={ clsx( styles.error, 'jp-action-button__error' ) }>{ errorMessage }</p>
 			) }
 		</>
 	);

projects/js-packages/components/components/action-button/index.jsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import JetpackFooter from '../jetpack-footer';
 import JetpackLogo from '../jetpack-logo';
 import Col from '../layout/col';
@@ -25,7 +25,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 	showBackground = true,
 	header,
 } ) => {
-	const rootClassName = classNames( styles[ 'admin-page' ], {
+	const rootClassName = clsx( styles[ 'admin-page' ], {
 		[ styles.background ]: showBackground,
 	} );
 

projects/js-packages/components/components/admin-page/index.tsx

@@ -1,5 +1,5 @@
 import { Icon, warning, info, check } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './style.module.scss';
 
@@ -39,7 +39,7 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
  * @returns {React.ReactElement}             The `Alert` component.
  */
 const Alert: React.FC< AlertProps > = ( { level = 'warning', children, showIcon = true } ) => {
-	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
+	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
 
 	return (
 		<div className={ classes }>

projects/js-packages/components/components/alert/index.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { AutomatticBylineLogoProps } from './types';
 
@@ -24,7 +24,7 @@ const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
 			enableBackground="new 0 0 935 38.2"
 			aria-labelledby="jp-automattic-byline-logo-title"
 			height={ height }
-			className={ classnames( 'jp-automattic-byline-logo', className ) }
+			className={ clsx( 'jp-automattic-byline-logo', className ) }
 			{ ...otherProps }
 		>
 			<desc id="jp-automattic-byline-logo-title">{ title }</desc>