Use cx utility for cleaner class names in EditableText.tsx, Improve class name handling in Crumbs

Author: bill-akamai

packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx

@@ -14,11 +14,6 @@ export const StyledEditableText = styled(EditableText, {
   '& > div': {
     width: 250,
   },
-  '& .breadcrumb-text': {
-    color: theme.tokens.breadcrumb.Normal.Text.Default,
-    fontSize: '1rem !important',
-    paddingLeft: 0,
-  },
 }));
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(

packages/ui/src/components/EditableText/EditableText.tsx

@@ -13,7 +13,7 @@ import type { TextFieldProps } from '../TextField';
 import type { Theme } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 
-const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
+const useStyles = makeStyles<void, 'editIcon' | 'icon' | 'breadcrumbText'>()(
   (theme: Theme, _params, classes) => ({
     button: {
       '&[aria-label="Save"]': {
@@ -99,6 +99,11 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
         textDecoration: 'underline !important',
       },
     },
+    breadcrumbText: {
+      color: theme.tokens.breadcrumb.Normal.Text.Default,
+      fontSize: '1rem !important',
+      paddingLeft: 0,
+    },
   })
 );
 
@@ -167,7 +172,7 @@ interface PropsWithLink extends BaseProps {
 export type EditableTextProps = PropsWithLink | PropsWithoutLink;
 
 export const EditableText = (props: EditableTextProps) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const [isEditing, setIsEditing] = React.useState(Boolean(props.errorText));
   const [text, setText] = React.useState(props.text);
@@ -242,15 +247,15 @@ export const EditableText = (props: EditableTextProps) => {
   };
   const labelText = (
     <H1Header
-      className={`${classes.root} ${isBreadcrumb ? 'breadcrumb-text' : ''}`}
+      className={cx(classes.root, { [classes.breadcrumbText]: isBreadcrumb })}
       data-qa-editable-text
       title={`${text}${textSuffix ?? ''}`}
     />
   );
 
   return !isEditing && !errorText ? (
     <div
-      className={`${classes.container} ${classes.initial} ${className}`}
+      className={cx(classes.container, classes.initial, className)}
       data-testid={'editable-text'}
     >
       {!!labelLink ? (
@@ -263,7 +268,7 @@ export const EditableText = (props: EditableTextProps) => {
       {/** pencil icon */}
       <Button
         aria-label={`Edit ${text}`}
-        className={`${classes.button} ${classes.editIcon}`}
+        className={cx(classes.button, classes.editIcon)}
         data-qa-edit-button
         disabled={disabledBreadcrumbEditButton}
         onClick={openEdit}
@@ -273,13 +278,13 @@ export const EditableText = (props: EditableTextProps) => {
     </div>
   ) : (
     <ClickAwayListener mouseEvent="onMouseDown" onClickAway={cancelEditing}>
-      <div className={`${classes.container} ${className}`} data-qa-edit-field>
+      <div className={cx(classes.container, className)} data-qa-edit-field>
         <TextField
           {...rest}
           inputProps={{
-            className: `${classes.input} ${
-              isBreadcrumb ? 'breadcrumb-text' : ''
-            }`,
+            className: cx(classes.input, {
+              [classes.breadcrumbText]: isBreadcrumb,
+            }),
           }}
           InputProps={{ className: classes.inputRoot }}
           // eslint-disable-next-line