From 5dd7713346786c5874615b34a1d56f81a29b673f Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 31 May 2024 05:49:36 +0200 Subject: [PATCH] [Performance]: Replace `classnames` usage with `clsx` (#47760) * Replace classnames with clsx within woocommerce-blocks. * Undo unnecessary change to getClassnames const. * Replace classnames with clsx within woocommerce-admin. * Add changelog. * Update the pnpm lock file * Address lint. * Address lint errors for the block-library. --- .../activity-panel/activity-card/index.js | 7 ++--- .../activity-card/placeholder.js | 4 +-- .../activity-panel/activity-header/index.js | 4 +-- .../client/activity-panel/panel.js | 4 +-- .../client/activity-panel/tab/index.js | 4 +-- .../client/activity-panel/toggle-bubble.js | 11 +++----- .../components/choice/choice.tsx | 4 +-- .../components/heading/heading.tsx | 9 ++---- .../multiple-selector/render-menu.tsx | 11 +++----- .../components/navigation/navigation.tsx | 6 ++-- .../components/plugin-card/plugin-card.tsx | 6 ++-- .../core-profiler/pages/BusinessInfo.tsx | 4 +-- .../core-profiler/pages/UserProfile.tsx | 4 +-- .../customize-store/assembler-hub/editor.tsx | 4 +-- .../customize-store/assembler-hub/iframe.jsx | 4 +-- .../customize-store/assembler-hub/layout.tsx | 6 ++-- .../assembler-hub/resizable-frame.jsx | 6 ++-- .../global-styles/variation-container.jsx | 4 +-- .../sidebar/sidebar-navigation-screen.tsx | 11 +++----- .../assembler-hub/site-hub.tsx | 11 +++----- .../components/choice/choice.tsx | 7 ++--- .../customize-store/intro/intro-banners.tsx | 4 +-- .../dashboard/dashboard-charts/index.js | 25 ++++++----------- .../woocommerce-admin/client/header/index.js | 4 +-- .../activity-panel/reviews/index.js | 4 +-- .../homescreen/activity-panel/stock/card.js | 15 ++++------ .../header-banner-slot/header-banner-slot.tsx | 9 ++---- .../client/homescreen/layout.js | 6 ++-- .../homescreen/stats-overview/stats-list.js | 4 +-- .../wcpay-feature-slot/wcpay-feature-slot.tsx | 9 ++---- .../welcome-from-calypso-modal.js | 4 +-- .../client/launch-your-store/hub/index.tsx | 4 +-- .../pages/launch-store-success/index.tsx | 4 +-- .../hub/main-content/pages/loading.tsx | 4 +-- .../hub/main-content/pages/site-preview.tsx | 4 +-- .../sidebar/components/launch-store-hub.tsx | 4 +-- .../sidebar/components/sidebar-container.tsx | 11 +++----- .../hub/sidebar/tasklist.tsx | 6 ++-- .../launch-your-store/hub/sidebar/xstate.tsx | 7 ++--- .../launch-your-store/settings/slotfill.js | 4 +-- .../client/launch-your-store/status/index.tsx | 4 +-- .../client/layout/footer/footer.tsx | 4 +-- .../client/layout/store-alerts/index.js | 4 +-- .../client/layout/transient-notices/index.js | 4 +-- .../transient-notices/snackbar/index.js | 13 ++++----- .../layout/transient-notices/snackbar/list.js | 4 +-- .../CollapsibleCard/CollapsibleCard.tsx | 9 ++---- .../CreateNewCampaignModal.tsx | 4 +-- .../PluginCardBody/PluginCardBody.tsx | 4 +-- .../components/product-icon/index.js | 4 +-- .../client/marketing/coupons/card/index.js | 7 ++--- .../marketing/coupons/knowledge-base/index.js | 6 ++-- .../coupons/recommended-extensions/index.js | 8 +++--- .../client/marketing/coupons/slider/index.js | 4 +-- .../Channels/IssueStatus.tsx | 6 ++-- .../Channels/SyncStatus.tsx | 12 +++----- .../category-selector/category-dropdown.tsx | 4 +-- .../category-selector/category-link.tsx | 15 ++++------ .../category-selector/category-selector.tsx | 4 +-- .../components/likert-scale/likert-scale.tsx | 4 +-- .../marketplace/components/notice/notice.tsx | 6 ++-- .../components/product-card/product-card.tsx | 4 +-- .../product-list-content.tsx | 4 +-- .../product-list-header.tsx | 11 +++----- .../components/products/products.tsx | 12 ++++---- .../marketplace/components/tabs/tabs.tsx | 8 +++--- .../navigation/components/container/index.js | 4 +-- .../navigation/components/header/index.js | 4 +-- .../products/tour/components/guide/index.tsx | 4 +-- .../flows/selective-bundle/index.js | 4 +-- .../dismissable-list.tsx | 7 ++--- .../components/List/Item.js | 4 +-- .../components/List/Placeholder.js | 7 ++--- .../components/Setup/Placeholder.js | 4 +-- .../components/plugin-banner.tsx | 4 +-- .../client/task-lists/fills/shipping/index.js | 4 +-- .../client/task-lists/fills/shipping/rates.js | 4 +-- .../fills/tax/components/partners.tsx | 4 +-- .../components/task-list-completed-header.tsx | 4 +-- .../components/task-list-completed.tsx | 4 +-- .../components/task-list-item.tsx | 4 +-- .../components/task-list-placeholder.tsx | 4 +-- .../setup-task-list/setup-task-list.tsx | 4 +-- .../task-list-completion-slot.tsx | 4 +-- plugins/woocommerce-admin/package.json | 2 +- plugins/woocommerce-blocks/.eslintrc.js | 5 ++++ .../product-elements/average-rating/block.tsx | 4 +-- .../blocks/product-elements/button/block.tsx | 8 +++--- .../blocks/product-elements/button/edit.tsx | 4 +-- .../blocks/product-elements/button/save.tsx | 4 +-- .../blocks/product-elements/image/block.tsx | 6 ++-- .../blocks/product-elements/price/block.tsx | 8 +++--- .../product-details/block.tsx | 4 +-- .../product-elements/rating-counter/block.tsx | 4 +-- .../product-elements/rating-stars/block.tsx | 8 +++--- .../blocks/product-elements/rating/block.tsx | 8 +++--- .../product-elements/sale-badge/block.tsx | 4 +-- .../js/atomic/blocks/product-elements/save.js | 6 ++-- .../blocks/product-elements/sku/block.tsx | 6 ++-- .../stock-indicator/block.tsx | 4 +-- .../blocks/product-elements/summary/block.tsx | 6 ++-- .../blocks/product-elements/summary/save.tsx | 4 +-- .../blocks/product-elements/title/block.tsx | 6 ++-- .../blocks/product-elements/title/save.tsx | 4 +-- .../js/base/components/button/index.tsx | 4 +-- .../cart-line-item-row.tsx | 4 +-- .../cart-line-items-table/index.tsx | 4 +-- .../components/cart-checkout/form/form.tsx | 4 +-- .../order-summary/order-summary-item.tsx | 4 +-- .../payment-method-icons/index.tsx | 4 +-- .../payment-method-label/index.tsx | 4 +-- .../place-order-button/index.tsx | 4 +-- .../cart-checkout/product-badge/index.tsx | 7 ++--- .../shipping-rates-control-package/index.tsx | 6 ++-- .../totals/footer-item/index.tsx | 4 +-- .../cart-checkout/totals/shipping/index.tsx | 4 +-- .../js/base/components/combobox/index.tsx | 4 +-- .../country-input/country-input.tsx | 7 ++--- .../js/base/components/drawer/index.tsx | 26 +++++++---------- .../components/filter-reset-button/index.tsx | 4 +-- .../components/filter-submit-button/index.tsx | 4 +-- .../components/form-token-field/index.tsx | 4 +-- .../assets/js/base/components/form/index.tsx | 4 +-- .../js/base/components/loading-mask/index.tsx | 6 ++-- .../base/components/notice-banner/index.tsx | 4 +-- .../js/base/components/pagination/index.tsx | 8 +++--- .../js/base/components/price-slider/index.tsx | 6 ++-- .../product-list/product-list-item/index.tsx | 12 +++----- .../components/product-list/product-list.tsx | 6 ++-- .../js/base/components/product-name/index.tsx | 4 +-- .../base/components/product-price/index.tsx | 16 +++++------ .../base/components/product-rating/index.tsx | 4 +-- .../components/quantity-selector/index.tsx | 7 ++--- .../reviews/review-list-item/index.tsx | 4 +-- .../base/components/sidebar-layout/main.tsx | 7 ++--- .../sidebar-layout/sidebar-layout.tsx | 4 +-- .../components/sidebar-layout/sidebar.tsx | 7 ++--- .../base/components/snackbar-list/index.tsx | 4 +-- .../components/snackbar-list/snackbar.tsx | 4 +-- .../components/state-input/state-input.tsx | 4 +-- .../providers/container-width-context.tsx | 4 +-- .../assets/js/base/hooks/use-style-props.ts | 4 +-- .../assets/js/base/utils/get-inline-styles.ts | 6 ++-- .../blocks/active-filters/block-wrapper.tsx | 4 +-- .../assets/js/blocks/active-filters/block.tsx | 4 +-- .../js/blocks/active-filters/deprecated.tsx | 4 +-- .../assets/js/blocks/active-filters/index.tsx | 4 +-- .../blocks/attribute-filter/block-wrapper.tsx | 4 +-- .../js/blocks/attribute-filter/block.tsx | 6 ++-- .../js/blocks/attribute-filter/deprecated.tsx | 4 +-- .../js/blocks/attribute-filter/edit.tsx | 4 +-- .../js/blocks/attribute-filter/index.tsx | 4 +-- .../payment-methods/payment-method-options.js | 4 +-- .../assets/js/blocks/cart/edit.js | 4 +-- .../assets/js/blocks/cart/index.js | 7 ++--- .../cart-express-payment-block/block.tsx | 9 ++---- .../cart-express-payment-block/edit.tsx | 4 +-- .../cart-items-block/frontend.tsx | 4 +-- .../cart-order-summary-heading/block.tsx | 6 ++-- .../cart-order-summary-heading/edit.tsx | 7 ++--- .../cart-totals-block/frontend.tsx | 6 ++-- .../inner-blocks/filled-cart-block/edit.tsx | 4 +-- .../filled-cart-block/frontend.tsx | 4 +-- .../proceed-to-checkout-block/block.tsx | 4 +-- .../blocks/checkout/address-wrapper/index.tsx | 4 +-- .../assets/js/blocks/checkout/block.tsx | 4 +-- .../assets/js/blocks/checkout/edit.tsx | 4 +-- .../checkout/form-step/form-step-block.tsx | 4 +-- .../assets/js/blocks/checkout/index.tsx | 12 ++------ .../checkout-actions-block/block.tsx | 6 ++-- .../checkout-actions-block/edit.tsx | 4 +-- .../edit.tsx | 4 +-- .../frontend.tsx | 4 +-- .../checkout-billing-address-block/edit.tsx | 4 +-- .../frontend.tsx | 7 ++--- .../edit.tsx | 4 +-- .../frontend.tsx | 7 ++--- .../checkout-express-payment-block/edit.tsx | 4 +-- .../checkout-fields-block/edit.tsx | 9 ++---- .../checkout-fields-block/frontend.tsx | 6 ++-- .../checkout-order-note-block/block.tsx | 7 ++--- .../checkout-payment-block/edit.tsx | 4 +-- .../checkout-payment-block/frontend.tsx | 7 ++--- .../checkout-pickup-options-block/edit.tsx | 4 +-- .../frontend.tsx | 7 ++--- .../checkout-shipping-address-block/edit.tsx | 4 +-- .../frontend.tsx | 4 +-- .../checkout-shipping-method-block/block.tsx | 24 ++++++---------- .../checkout-shipping-method-block/edit.tsx | 26 +++++++---------- .../frontend.tsx | 4 +-- .../checkout-shipping-methods-block/edit.tsx | 4 +-- .../frontend.tsx | 4 +-- .../checkout-terms-block/frontend.tsx | 4 +-- .../checkout-totals-block/edit.tsx | 7 ++--- .../checkout-totals-block/frontend.tsx | 4 +-- .../js/blocks/customer-account/edit.tsx | 4 +-- .../customer-account/sidebar-settings.tsx | 6 ++-- .../blocks/featured-items/call-to-action.tsx | 7 ++--- .../featured-items/constrained-resizable.tsx | 4 +-- .../featured-items/with-featured-item.tsx | 6 ++-- .../assets/js/blocks/mini-cart/block.tsx | 12 +++----- .../mini-cart-cart-button-block/block.tsx | 4 +-- .../mini-cart-checkout-button-block/block.tsx | 4 +-- .../mini-cart-checkout-button-block/edit.tsx | 4 +-- .../mini-cart-footer-block/block.tsx | 6 ++-- .../mini-cart-items-block/frontend.tsx | 4 +-- .../mini-cart-products-table-block/block.tsx | 4 +-- .../mini-cart-shopping-button-block/block.tsx | 4 +-- .../mini-cart-title-block/block.tsx | 4 +-- .../block.tsx | 4 +-- .../mini-cart-title-label-block/block.tsx | 4 +-- .../downloads-wrapper/edit.tsx | 4 +-- .../js/blocks/price-filter/block-wrapper.tsx | 4 +-- .../js/blocks/price-filter/deprecated.tsx | 4 +-- .../assets/js/blocks/price-filter/index.tsx | 4 +-- .../inner-blocks/active-filters/edit.tsx | 4 +-- .../price-filter/components/price-slider.tsx | 4 +-- .../inner-blocks/rating-filter/edit.tsx | 4 +-- .../inner-blocks/stock-filter/edit.tsx | 9 ++---- .../assets/js/blocks/product-filters/save.tsx | 4 +-- .../edit.tsx | 6 ++-- .../product-gallery-large-image/edit.tsx | 4 +-- .../product-gallery-pager/edit.tsx | 4 +-- .../product-gallery-thumbnails/edit.tsx | 4 +-- .../assets/js/blocks/product-gallery/save.tsx | 4 +-- .../assets/js/blocks/product-search/block.tsx | 4 +-- .../assets/js/blocks/product-search/edit.tsx | 4 +-- .../js/blocks/product-template/edit.tsx | 4 +-- .../assets/js/blocks/products/base-utils.js | 4 +-- .../assets/js/blocks/products/utils.js | 4 +-- .../js/blocks/rating-filter/block-wrapper.tsx | 4 +-- .../assets/js/blocks/rating-filter/block.tsx | 6 ++-- .../js/blocks/rating-filter/deprecated.tsx | 4 +-- .../assets/js/blocks/rating-filter/edit.tsx | 4 +-- .../assets/js/blocks/rating-filter/index.tsx | 4 +-- .../assets/js/blocks/reviews/utils.js | 4 +-- .../js/blocks/stock-filter/block-wrapper.tsx | 4 +-- .../assets/js/blocks/stock-filter/block.tsx | 6 ++-- .../js/blocks/stock-filter/deprecated.tsx | 4 +-- .../assets/js/blocks/stock-filter/edit.tsx | 4 +-- .../assets/js/blocks/stock-filter/index.tsx | 4 +-- .../error-placeholder/index.tsx | 4 +-- .../expandable-search-list-item.tsx | 4 +-- .../product-attribute-term-control/index.tsx | 6 ++-- .../product-category-control/index.tsx | 4 +-- .../product-control/index.tsx | 6 ++-- .../product-tag-control/product-tag-item.tsx | 14 ++++------ .../search-list-control/item.tsx | 4 +-- .../search-list-control.tsx | 4 +-- .../assets/js/editor-components/tag/index.tsx | 4 +-- .../text-toolbar-button/index.js | 4 +-- .../assets/js/icons/library/woo.tsx | 4 +-- plugins/woocommerce-blocks/package.json | 3 +- .../components/discounts-meta/index.js | 4 +-- .../order-local-pickup-packages/index.tsx | 4 +-- .../checkout/components/order-meta/index.js | 4 +-- .../order-shipping-packages/index.js | 4 +-- .../components/checkbox-control/index.tsx | 4 +-- .../components/checkbox-list/index.tsx | 4 +-- .../packages/components/chip/chip.tsx | 4 +-- .../components/chip/removable-chip.tsx | 4 +-- .../packages/components/form-step/index.tsx | 16 ++++------- .../formatted-monetary-amount/index.tsx | 4 +-- .../packages/components/label/index.tsx | 7 ++--- .../packages/components/panel/index.tsx | 4 +-- .../radio-control-accordion/index.tsx | 8 +++--- .../components/radio-control/index.tsx | 4 +-- .../components/radio-control/option.tsx | 18 +++++------- .../packages/components/sort-select/index.tsx | 4 +-- .../components/store-notice/index.tsx | 4 +-- .../snackbar-notices.tsx | 4 +-- .../store-notices-container/store-notices.tsx | 4 +-- .../components/text-input/text-input.tsx | 12 +++----- .../text-input/validated-text-input.tsx | 4 +-- .../packages/components/textarea/index.tsx | 4 +-- .../packages/components/title/index.tsx | 7 ++--- .../components/totals-wrapper/index.tsx | 12 +++----- .../packages/components/totals/fees/index.tsx | 4 +-- .../packages/components/totals/item/index.tsx | 9 ++---- .../components/totals/taxes/index.tsx | 6 ++-- ...ormance-replace-classnames-usage-with-clsx | 4 +++ pnpm-lock.yaml | 28 ++++++++----------- 282 files changed, 708 insertions(+), 908 deletions(-) create mode 100644 plugins/woocommerce/changelog/47602-performance-replace-classnames-usage-with-clsx diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js b/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js index 915dbaa0443..bdf7c7bfb95 100644 --- a/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js +++ b/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { cloneElement, Component } from '@wordpress/element'; import NoticeOutline from 'gridicons/dist/notice-outline'; import moment from 'moment'; @@ -36,10 +36,7 @@ class ActivityCard extends Component { title, unread, } = this.props; - const cardClassName = classnames( - 'woocommerce-activity-card', - className - ); + const cardClassName = clsx( 'woocommerce-activity-card', className ); const actionsList = Array.isArray( actions ) ? actions : [ actions ]; const dateString = isDateString( date ) ? moment.utc( date ).fromNow() diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js b/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js index 5ddcbeb160b..d973a2550ea 100644 --- a/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js +++ b/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { Component } from '@wordpress/element'; import PropTypes from 'prop-types'; import { range } from 'lodash'; @@ -10,7 +10,7 @@ class ActivityCardPlaceholder extends Component { render() { const { className, hasAction, hasDate, hasSubtitle, lines } = this.props; - const cardClassName = classnames( + const cardClassName = clsx( 'woocommerce-activity-card is-loading', className ); diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js b/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js index 5b1295cbe62..b5d42ff4e66 100644 --- a/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js +++ b/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { Component } from '@wordpress/element'; import PropTypes from 'prop-types'; import { Text } from '@woocommerce/experimental'; @@ -15,7 +15,7 @@ import './style.scss'; class ActivityHeader extends Component { render() { const { className, menu, subtitle, title, unreadMessages } = this.props; - const cardClassName = classnames( + const cardClassName = clsx( { 'woocommerce-layout__inbox-panel-header': subtitle, 'woocommerce-layout__activity-panel-header': ! subtitle, diff --git a/plugins/woocommerce-admin/client/activity-panel/panel.js b/plugins/woocommerce-admin/client/activity-panel/panel.js index f1000786ccc..0cebb8366d9 100644 --- a/plugins/woocommerce-admin/client/activity-panel/panel.js +++ b/plugins/woocommerce-admin/client/activity-panel/panel.js @@ -2,7 +2,7 @@ * External dependencies */ import { Suspense, useRef, useCallback } from '@wordpress/element'; -import classnames from 'classnames'; +import clsx from 'clsx'; import { Spinner } from '@woocommerce/components'; /** @@ -68,7 +68,7 @@ export const Panel = ( { return null; } - const classNames = classnames( panelClass, { + const classNames = clsx( panelClass, { 'is-open': isPanelOpen, 'is-switching': isPanelSwitching, } ); diff --git a/plugins/woocommerce-admin/client/activity-panel/tab/index.js b/plugins/woocommerce-admin/client/activity-panel/tab/index.js index c3abe11be63..70426ab1792 100644 --- a/plugins/woocommerce-admin/client/activity-panel/tab/index.js +++ b/plugins/woocommerce-admin/client/activity-panel/tab/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import classnames from 'classnames'; +import clsx from 'clsx'; export const Tab = ( { icon, @@ -14,7 +14,7 @@ export const Tab = ( { isPanelOpen, onTabClick, } ) => { - const className = classnames( 'woocommerce-layout__activity-panel-tab', { + const className = clsx( 'woocommerce-layout__activity-panel-tab', { 'is-active': isPanelOpen && selected, 'has-unread': unread, } ); diff --git a/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js b/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js index 15ee319f850..348f88f0a0c 100644 --- a/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js +++ b/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; const ActivityPanelToggleBubble = ( { @@ -9,12 +9,9 @@ const ActivityPanelToggleBubble = ( { width = 24, hasUnread = false, } ) => { - const classes = classnames( - 'woocommerce-layout__activity-panel-toggle-bubble', - { - 'has-unread': hasUnread, - } - ); + const classes = clsx( 'woocommerce-layout__activity-panel-toggle-bubble', { + 'has-unread': hasUnread, + } ); /* eslint-disable max-len */ return ( diff --git a/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx b/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx index 06711fc5397..702da2ab23e 100644 --- a/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import classNames from 'classnames'; +import clsx from 'clsx'; /** * Internal dependencies @@ -35,7 +35,7 @@ export const Choice = ( { return (
{ return ( -
+

{ title }

{ subTitle && (

diff --git a/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx b/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx index 1f5edf25831..25f06a40b2c 100644 --- a/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx @@ -8,7 +8,7 @@ import { __experimentalSelectControlMenuItem as MenuItem, } from '@woocommerce/components'; import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types'; -import classNames from 'classnames'; +import clsx from 'clsx'; type Props = { selectedOptions: Array< { label: string; value: string } >; @@ -51,12 +51,9 @@ export const renderMenu = } } > {} } checked={ isSelected } label={ item.label } diff --git a/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx b/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx index 3f036b916b4..ac96b6f29d6 100644 --- a/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import classnames from 'classnames'; +import clsx from 'clsx'; import { Button } from '@wordpress/components'; /** * Internal dependencies @@ -33,7 +33,7 @@ export const Navigation = ( { }: NavigationProps ) => { return (
{ { type={ templateType } id={ templateId } > -
+
{ diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx index 8b682b07725..e64cf4a4eaf 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx @@ -4,7 +4,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { useState, useRef } from '@wordpress/element'; import { ResizableBox, @@ -202,7 +202,7 @@ function ResizableFrame( { key="handle" role="separator" aria-orientation="vertical" - className={ classnames( 'edit-site-resizable-frame__handle', { + className={ clsx( 'edit-site-resizable-frame__handle', { 'is-resizing': isResizing, } ) } variants={ resizeHandleVariants } @@ -302,7 +302,7 @@ function ResizableFrame( { onResizeStart={ handleResizeStart } onResize={ handleResize } onResizeStop={ handleResizeStop } - className={ classnames( 'edit-site-resizable-frame__inner', { + className={ clsx( 'edit-site-resizable-frame__inner', { 'is-resizing': isResizing, } ) } > diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx index 18d02715913..ab05865014a 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx @@ -2,7 +2,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { useMemo, useContext } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; @@ -144,7 +144,7 @@ export const VariationContainer = ( { variation, children } ) => { >
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx index 75df1e206e8..1bb7d25fcb4 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx @@ -4,7 +4,7 @@ /** * External dependencies */ -import classnames from 'classnames'; +import clsx from 'clsx'; import { useSelect } from '@wordpress/data'; import { // @ts-ignore No types for this exist yet. @@ -60,10 +60,7 @@ export const SiteHub = forwardRef(
{ if ( e.key === 'Enter' ) { diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx index a4ddad0fa3c..6157aa3a3b3 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { Button } from '@wordpress/components'; import { getNewPath } from '@woocommerce/navigation'; import interpolateComponents from '@automattic/interpolate-components'; @@ -45,7 +45,7 @@ export const BaseIntroBanner = ( { } ) => { return (
{ role="menubar" >
); - const activityCardClasses = classnames( - 'woocommerce-stock-activity-card', - { - 'is-dimmed': ! editing && ! isLowStock, - } - ); + const activityCardClasses = clsx( 'woocommerce-stock-activity-card', { + 'is-dimmed': ! editing && ! isLowStock, + } ); const activityCard = ( +
); diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js index d7215e39cc2..a8670f1ef34 100644 --- a/plugins/woocommerce-admin/client/homescreen/layout.js +++ b/plugins/woocommerce-admin/client/homescreen/layout.js @@ -10,7 +10,7 @@ import { } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import classnames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import { useUserPreferences, @@ -141,13 +141,13 @@ export const Layout = ( { <> { isDashboardShown && ( ) }
diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js b/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js index a986c6250ef..72849df9949 100644 --- a/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js +++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js @@ -4,7 +4,7 @@ import { useContext } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { withSelect } from '@wordpress/data'; -import classnames from 'classnames'; +import clsx from 'clsx'; import { SummaryNumber, SummaryNumberPlaceholder, @@ -40,7 +40,7 @@ export const StatsList = ( { return (