Dependencies: Replace classnames with clsx - v2 (#91408)

apps/blaze-dashboard/package.json

@@ -35,7 +35,7 @@
 		"@tanstack/react-query": "^5.15.5",
 		"@wordpress/data": "^10.0.0",
 		"calypso": "workspace:^",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"debug": "^4.3.4",
 		"moment": "^2.26.0",
 		"prop-types": "^15.8.1",

apps/blaze-dashboard/src/components/jetpack-blaze-header/index.jsx

@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './style.scss';
 
 const JetpackBlazeHeader = ( { className = '' } ) => (
-	<header className={ classNames( 'jetpack-blaze-header', className ) }>
+	<header className={ clsx( 'jetpack-blaze-header', className ) }>
 		<svg width="175" height="32" viewBox="0 0 175 32" fill="none">
 			<g clipPath="url(#clip0_8399_69928)">
 				<path

apps/blaze-dashboard/src/components/layout.jsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -22,7 +22,7 @@ class Layout extends Component {
 	};
 
 	render() {
-		const sectionClass = classnames( 'layout', `focus-${ this.props.currentLayoutFocus }`, {
+		const sectionClass = clsx( 'layout', `focus-${ this.props.currentLayoutFocus }`, {
 			[ 'is-group-' + this.props.sectionGroup ]: this.props.sectionGroup,
 			[ 'is-section-' + this.props.sectionName ]: this.props.sectionName,
 			'is-support-session': this.props.isSupportSession,

apps/blaze-dashboard/src/components/woo-blaze-header/index.jsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 
 import './style.scss';
@@ -7,7 +7,7 @@ const WooBlazeHeader = ( { className = '', children } ) => {
 	const translate = useTranslate();
 
 	return (
-		<header className={ classNames( 'woo-blaze-header', className ) }>
+		<header className={ clsx( 'woo-blaze-header', className ) }>
 			<h2>{ translate( 'Blaze for WooCommerce' ) }</h2>
 			{ children }
 		</header>

apps/editing-toolkit/editing-toolkit-plugin/global-styles/src/font-pairings-panel.js

@@ -1,7 +1,7 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { ENTER } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import NoSupport from './no-support';
 
 export default ( { fontPairings, fontBase, fontHeadings, update } ) => {
@@ -15,7 +15,7 @@ export default ( { fontPairings, fontBase, fontHeadings, update } ) => {
 							const isSelected = headings === fontHeadings && base === fontBase;
 							return (
 								<Button
-									className={ classnames( 'style-preview__font-option', {
+									className={ clsx( 'style-preview__font-option', {
 										'is-selected': isSelected,
 									} ) }
 									onClick={ () => update( { headings, base } ) }

apps/editing-toolkit/editing-toolkit-plugin/help-center/src/help-center.js

@@ -7,7 +7,7 @@ import { useMediaQuery } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
-import cx from 'classnames';
+import cx from 'clsx';
 import { useSelector } from 'react-redux';
 import { getSectionName } from 'calypso/state/ui/selectors';
 import { whatsNewQueryClient } from '../../common/what-new-query-client';

apps/editing-toolkit/editing-toolkit-plugin/jetpack-timeline/blocks/src/timeline-item.js

@@ -9,7 +9,7 @@ import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { positionLeft, positionRight } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { TimelineIcon } from './icon';
 
 const DEFAULT_BACKGROUND = '#eeeeee';
@@ -66,7 +66,7 @@ export function registerTimelineItemBlock() {
 				setAttributes( { alignment: newAlignment } );
 			};
 
-			const classes = classnames( 'wp-block-jetpack-timeline-item', {
+			const classes = clsx( 'wp-block-jetpack-timeline-item', {
 				'is-left': attributes.alignment === 'left',
 				'is-right': attributes.alignment === 'right',
 			} );
@@ -103,7 +103,7 @@ export function registerTimelineItemBlock() {
 			);
 		},
 		save: ( { attributes } ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'is-left': attributes.alignment === 'left',
 				'is-right': attributes.alignment === 'right',
 			} );

apps/editing-toolkit/editing-toolkit-plugin/jetpack-timeline/blocks/src/timeline.js

@@ -7,7 +7,7 @@ import { registerBlockType, createBlock } from '@wordpress/blocks';
 import { ToggleControl, PanelBody } from '@wordpress/components';
 import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { BlockAppender } from './block-appender';
 import { TimelineIcon } from './icon';
 
@@ -83,7 +83,7 @@ export function registerTimelineBlock() {
 
 			const toggleAlternate = () => setAttributes( { isAlternating: ! isAlternating } );
 
-			const classes = classnames( 'wp-block-jetpack-timeline', {
+			const classes = clsx( 'wp-block-jetpack-timeline', {
 				'is-alternating': isAlternating,
 			} );
 
@@ -112,7 +112,7 @@ export function registerTimelineBlock() {
 		save: ( props ) => {
 			const { attributes } = props;
 			const { isAlternating } = attributes;
-			const classes = classnames( 'wp-block-jetpack-timeline', {
+			const classes = clsx( 'wp-block-jetpack-timeline', {
 				'is-alternating': isAlternating,
 			} );
 

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-item/index.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { _x } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Post } from '../../types';
 
 import './style.scss';
@@ -18,11 +18,11 @@ interface NavItemProps {
 
 const NavItem = forwardRef< HTMLLIElement, NavItemProps >(
 	( { item, postType, selected, statusLabel }, ref ) => {
-		const buttonClasses = classNames( 'wpcom-block-editor-nav-item', {
+		const buttonClasses = clsx( 'wpcom-block-editor-nav-item', {
 			'is-selected': selected,
 		} );
 
-		const titleClasses = classNames( 'wpcom-block-editor-nav-item__title', {
+		const titleClasses = clsx( 'wpcom-block-editor-nav-item__title', {
 			'is-untitled': ! item.title?.raw,
 		} );
 

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/index.tsx

@@ -12,7 +12,7 @@ import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { get, isEmpty, partition } from 'lodash';
 import * as React from 'react';
 import { POST_IDS_TO_EXCLUDE } from '../../constants';
@@ -185,7 +185,7 @@ function WpcomBlockEditorNavSidebar() {
 
 	return (
 		<IsolatedEventContainer
-			className={ classNames( 'wpcom-block-editor-nav-sidebar-nav-sidebar__click-guard', {
+			className={ clsx( 'wpcom-block-editor-nav-sidebar-nav-sidebar__click-guard', {
 				'is-fading-out': isClosing,
 			} ) }
 			onAnimationEnd={ ( ev: React.AnimationEvent ) => {
@@ -213,7 +213,7 @@ function WpcomBlockEditorNavSidebar() {
 				// 		'full-site-editing'
 				//  	)
 				// }
-				className={ classNames( 'wpcom-block-editor-nav-sidebar-nav-sidebar__container', {
+				className={ clsx( 'wpcom-block-editor-nav-sidebar-nav-sidebar__container', {
 					'is-sliding-left': isClosing,
 				} ) }
 				role="dialog"
@@ -224,7 +224,7 @@ function WpcomBlockEditorNavSidebar() {
 						label={ __( 'Close block editor sidebar', 'full-site-editing' ) }
 						showTooltip
 						ref={ dismissButtonMount }
-						className={ classNames(
+						className={ clsx(
 							'edit-post-fullscreen-mode-close',
 							'wpcom-block-editor-nav-sidebar-nav-sidebar__dismiss-sidebar-button',
 							'has-icon'

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/toggle-sidebar-button/index.tsx

@@ -2,7 +2,7 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { store } from '../../store';
 import SiteIcon from '../site-icon';
 import './style.scss';
@@ -20,7 +20,7 @@ export default function ToggleSidebarButton() {
 		<Button
 			label={ __( 'Block editor sidebar', 'full-site-editing' ) }
 			showTooltip
-			className={ classnames(
+			className={ clsx(
 				'edit-post-fullscreen-mode-close',
 				'wpcom-block-editor-nav-sidebar-toggle-sidebar-button__button',
 				'has-icon',

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/nux-modal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import './style.scss';
 
@@ -41,7 +41,7 @@ const NuxModal: React.FC< Props > = ( {
 
 	return (
 		<Modal
-			className={ classnames( 'wpcom-block-editor-nux-modal', className ) }
+			className={ clsx( 'wpcom-block-editor-nux-modal', className ) }
 			title=""
 			onRequestClose={ onRequestClose }
 		>

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/sharing-modal/index.tsx

@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { Icon, globe, link as linkIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { useI18n } from '@wordpress/react-i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import ClipboardButton from 'calypso/components/forms/clipboard-button';
 import FormInputCheckbox from 'calypso/components/forms/form-checkbox';
@@ -204,7 +204,7 @@ const SharingModalInner: React.FC = () => {
 					<hr />
 					<h2>{ __( 'Get more traffic to your post by sharing:', 'full-site-editing' ) }</h2>
 					<Button
-						className={ classnames(
+						className={ clsx(
 							'wpcom-block-editor-post-published-sharing-modal__sharing-button',
 							'share-facebook'
 						) }
@@ -213,7 +213,7 @@ const SharingModalInner: React.FC = () => {
 						<InlineSocialLogo icon="facebook" size={ 18 } />
 					</Button>
 					<Button
-						className={ classnames(
+						className={ clsx(
 							'wpcom-block-editor-post-published-sharing-modal__sharing-button',
 							'share-twitter'
 						) }
@@ -222,7 +222,7 @@ const SharingModalInner: React.FC = () => {
 						<InlineSocialLogo icon="twitter-alt" size={ 18 } />
 					</Button>
 					<Button
-						className={ classnames(
+						className={ clsx(
 							'wpcom-block-editor-post-published-sharing-modal__sharing-button',
 							'share-linkedin'
 						) }
@@ -231,7 +231,7 @@ const SharingModalInner: React.FC = () => {
 						<InlineSocialLogo icon="linkedin" size={ 18 } />
 					</Button>
 					<Button
-						className={ classnames(
+						className={ clsx(
 							'wpcom-block-editor-post-published-sharing-modal__sharing-button',
 							'share-tumblr'
 						) }
@@ -240,7 +240,7 @@ const SharingModalInner: React.FC = () => {
 						<InlineSocialLogo icon="tumblr-alt" size={ 18 } />
 					</Button>
 					<Button
-						className={ classnames(
+						className={ clsx(
 							'wpcom-block-editor-post-published-sharing-modal__sharing-button',
 							'share-pinterest'
 						) }

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/sharing-modal/inline-social-logo.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as React from 'react';
 import { Assign } from 'utility-types';
 
@@ -28,7 +28,7 @@ function InlineSocialLogo( props: Assign< React.SVGProps< SVGSVGElement >, Props
 	// The current CSS expects individual icon classes in the form of e.g. `.twitter`, but the social-logos build
 	// appears to generate them in the form of `.social-logo-twitter` instead.
 	// We add both here, to ensure compatibility.
-	const iconClass = classnames( 'social-logo', iconName, icon, className );
+	const iconClass = clsx( 'social-logo', iconName, icon, className );
 
 	return (
 		<svg

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js

@@ -12,7 +12,7 @@ import {
 	useState,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useCanvas } from './use-canvas';
 import { useGlobalStylesConfig } from './use-global-styles-config';
 import { usePreview } from './use-preview';
@@ -148,7 +148,7 @@ function GlobalStylesEditNotice() {
 				onClick: upgradePlan,
 				variant: 'primary',
 				noDefaultClasses: true,
-				className: classnames(
+				className: clsx(
 					'wpcom-global-styles-action-is-upgrade',
 					'wpcom-global-styles-action-has-icon',
 					'wpcom-global-styles-action-is-external'

apps/editing-toolkit/package.json

@@ -103,7 +103,7 @@
 		"@wordpress/server-side-render": "^5.0.0",
 		"@wordpress/url": "^4.0.0",
 		"calypso": "workspace:^",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"eslint": "^8.57.0",
 		"jest": "^29.7.0",
 		"lodash": "^4.17.21",

apps/happy-blocks/block-library/pricing-plans/components/block-settings.tsx

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FunctionComponent } from 'react';
 import usePlanOptions from '../hooks/plan-options';
 import { BlockPlan } from '../hooks/pricing-plans';
@@ -98,7 +98,7 @@ const BlockSettings: FunctionComponent<
 				<PanelRow>
 					{ planOptions.map( ( option ) => (
 						<CheckboxControl
-							className={ classNames( {
+							className={ clsx( {
 								'hb-pricing-plans-embed__settings-checkbox--disabled': isDisabled( option.value ),
 							} ) }
 							key={ option.value }

apps/happy-blocks/block-library/pricing-plans/components/pricing-plans-tabs.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { FunctionComponent } from 'react';
 import usePlanOptions from '../hooks/plan-options';
 import { BlockPlan } from '../hooks/pricing-plans';
@@ -35,7 +35,7 @@ const PricingPlansTabs: FunctionComponent< Props > = ( {
 			{ availablePlanOptions.map( ( planOption ) => (
 				<button
 					onClick={ () => onTabButtonClick( planOption.value ) }
-					className={ classnames( 'hb-pricing-plans-embed__tabs-label', {
+					className={ clsx( 'hb-pricing-plans-embed__tabs-label', {
 						'hb-pricing-plans-embed__tabs-label--active': planOption.value === currentPlan.type,
 					} ) }
 					key={ planOption.value }

apps/happy-blocks/package.json

@@ -43,7 +43,7 @@
 		"@wordpress/data": "^10.0.0",
 		"@wordpress/element": "^6.0.0",
 		"@wordpress/i18n": "^5.0.0",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"glob": "^7.1.6",
 		"i18n-calypso": "workspace:^",
 		"react": "^18.2.0",

apps/notifications/package.json

@@ -32,7 +32,7 @@
 		"@automattic/webpack-extensive-lodash-replacement-plugin": "workspace:^",
 		"autoprefixer": "^10.2.5",
 		"calypso": "workspace:^",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"debug": "^4.3.3",
 		"i18n-calypso": "workspace:^",
 		"prop-types": "^15.7.2",

apps/notifications/src/panel/templates/action-button.jsx

@@ -1,12 +1,12 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import HotkeyContainer from './container-hotkey';
 import Gridicon from './gridicons';
 
 const ActionButton = ( { isActive, hotkey, icon, onToggle, text, title } ) => (
 	<HotkeyContainer shortcuts={ hotkey ? [ { hotkey, action: onToggle } ] : null }>
 		<button
-			className={ classNames( 'wpnc__action-link', {
+			className={ clsx( 'wpnc__action-link', {
 				'active-action': isActive,
 				'inactive-action': ! isActive,
 			} ) }