Merge pull request #8416 from backstage/freben/classnames

Standardize on classnames instead of both that and clsx

.changeset/odd-gifts-decide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Standardize on `classnames` instead of both that and `clsx`.

packages/core-components/package.json

@@ -41,7 +41,6 @@
     "@types/react-text-truncate": "^0.14.0",
     "ansi-regex": "^5.0.1",
     "classnames": "^2.2.6",
-    "clsx": "^1.1.0",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.0",
     "d3-zoom": "^3.0.0",

packages/core-components/src/components/LogViewer/LogLine.tsx

@@ -17,7 +17,7 @@
 import React, { useMemo } from 'react';
 import { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor';
 import startCase from 'lodash/startCase';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useStyles } from './styles';
 
 export function getModifierClasses(
@@ -160,7 +160,7 @@ export function LogLine({
       chunks.map(({ text, modifiers, highlight }, index) => (
         <span
           key={index}
-          className={clsx(
+          className={classnames(
             getModifierClasses(classes, modifiers),
             highlight !== undefined &&
               (highlight === highlightResultIndex

packages/core-components/src/components/LogViewer/RealLogViewer.tsx

@@ -21,7 +21,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { AnsiProcessor } from './AnsiProcessor';
 import { HEADER_SIZE, useStyles } from './styles';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { LogLine } from './LogLine';
 import { LogViewerControls } from './LogViewerControls';
 import { useLogViewerSearch } from './useLogViewerSearch';
@@ -62,7 +62,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
       {({ height, width }) => (
         <div
           style={{ width, height }}
-          className={clsx(classes.root, props.className)}
+          className={classnames(classes.root, props.className)}
         >
           <div className={classes.header}>
             <LogViewerControls {...search} />
@@ -82,7 +82,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
               return (
                 <div
                   style={{ ...style }}
-                  className={clsx(classes.line, {
+                  className={classnames(classes.line, {
                     [classes.lineSelected]: selection.isSelected(lineNumber),
                   })}
                 >

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -16,7 +16,7 @@
 
 import { makeStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import React, { useState, useContext, PropsWithChildren, useRef } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
@@ -172,7 +172,7 @@ export function Sidebar(props: PropsWithChildren<Props>) {
         }}
       >
         <div
-          className={clsx(classes.drawer, {
+          className={classnames(classes.drawer, {
             [classes.drawerOpen]: isOpen,
           })}
         >

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -23,7 +23,7 @@ import Typography from '@material-ui/core/Typography';
 import { CreateCSSProperties } from '@material-ui/core/styles/withStyles';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import SearchIcon from '@material-ui/icons/Search';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import React, {
   Children,
   forwardRef,
@@ -253,12 +253,12 @@ const SidebarItemWithSubmenu = ({
     >
       <div
         onMouseLeave={handleMouseLeave}
-        className={clsx(isHoveredOn && classes.highlighted)}
+        className={classnames(isHoveredOn && classes.highlighted)}
       >
         <div
           onMouseEnter={handleMouseEnter}
           data-testid="item-with-submenu"
-          className={clsx(
+          className={classnames(
             classes.root,
             isOpen ? classes.open : classes.closed,
             isActive && classes.selected,
@@ -360,7 +360,10 @@ export const WorkaroundNavLink = React.forwardRef<
       ref={ref}
       aria-current={ariaCurrent}
       style={{ ...style, ...(isActive ? activeStyle : undefined) }}
-      className={clsx([className, isActive ? activeClassName : undefined])}
+      className={classnames([
+        className,
+        isActive ? activeClassName : undefined,
+      ])}
     />
   );
 });
@@ -388,7 +391,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
       variant="dot"
       overlap="circular"
       invisible={!hasNotifications}
-      className={clsx({ [classes.closedItemIcon]: !isOpen })}
+      className={classnames({ [classes.closedItemIcon]: !isOpen })}
     >
       <Icon fontSize="small" />
     </Badge>
@@ -414,7 +417,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   const childProps = {
     onClick,
-    className: clsx(
+    className: classnames(
       className,
       classes.root,
       isOpen ? classes.open : classes.closed,

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -15,7 +15,7 @@
  */
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import React, { ReactNode, useContext } from 'react';
 import {
   SidebarItemWithSubmenuContext,
@@ -93,7 +93,7 @@ export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
   const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   return (
     <div
-      className={clsx(classes.drawer, {
+      className={classnames(classes.drawer, {
         [classes.drawerOpen]: isHoveredOn,
       })}
     >

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -24,7 +24,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import { IconComponent } from '@backstage/core-plugin-api';
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { BackstageTheme } from '@backstage/theme';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
@@ -138,7 +138,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
       <div className={classes.itemContainer}>
         <button
           onClick={handleClickDropdown}
-          className={clsx(
+          className={classnames(
             classes.item,
             isActive ? classes.selected : undefined,
           )}
@@ -181,7 +181,10 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
         component={NavLink}
         to={to}
         underline="none"
-        className={clsx(classes.item, isActive ? classes.selected : undefined)}
+        className={classnames(
+          classes.item,
+          isActive ? classes.selected : undefined,
+        )}
         onClick={closeSubmenu}
       >
         <Icon fontSize="small" />