refactor: [M3-9435] [Akamai Design System] Breadcrumb Component

packages/manager/.changeset/pr-11841-changed-1741884096366.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Updated Breadcrumb component to conform to Akamai Design System specs ([#11841](https://github.com/linode/manager/pull/11841))

packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,12 +1,57 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { Chip } from '@linode/ui';
 
 import { Breadcrumb } from './Breadcrumb';
 
+const withBadgeCrumbs = [
+  {
+    position: 3,
+    label: (
+      <>
+        <span>test</span>
+        <span
+          style={{
+            display: 'inline-block',
+            marginLeft: '4px',
+            textDecoration: 'none',
+          }}
+        >
+          <Chip label="beta" component="span" />
+        </span>
+      </>
+    ),
+  },
+];
+
+const noBadgeCrumbs = [
+  {
+    position: 3,
+    label: <span>test</span>,
+  },
+];
+
 const meta: Meta<typeof Breadcrumb> = {
   component: Breadcrumb,
   title: 'Foundations/Breadcrumb',
+  argTypes: {
+    crumbOverrides: {
+      options: ['With Badge', 'No Badge'],
+      mapping: {
+        'With Badge': withBadgeCrumbs,
+        'No Badge': noBadgeCrumbs,
+      },
+      control: {
+        type: 'radio',
+        labels: {
+          'With Badge': 'Show Beta Badge',
+          'No Badge': 'Hide Beta Badge',
+        },
+      },
+      defaultValue: 'No Badge',
+    },
+  },
 };
 
 type Story = StoryObj<typeof Breadcrumb>;
@@ -20,6 +65,7 @@ export const Default: Story = {
       onEdit: async () => action('onEdit'),
     },
     pathname: '/linodes/9872893679817/test/lastcrumb',
+    crumbOverrides: noBadgeCrumbs,
   },
   render: (args) => <Breadcrumb {...args} />,
 };

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

@@ -3,23 +3,24 @@ import { styled } from '@mui/material';
 
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
-})(({}) => ({
+})(({ theme }) => ({
   '&:hover': {
     textDecoration: 'underline',
   },
-  fontSize: '1.125rem',
+  fontSize: '1rem',
   lineHeight: 'normal',
   textTransform: 'capitalize',
   whiteSpace: 'nowrap',
+  color: theme.tokens.component.Breadcrumb.LastItem.Text,
 }));
 
 export const StyledSlashTypography = styled(Typography, {
   label: 'StyledSlashTypography',
 })(({ theme }) => ({
   color: theme.textColors.tableHeader,
-  fontSize: 20,
-  marginLeft: 2,
-  marginRight: 2,
+  fontSize: 16,
+  marginLeft: 4,
+  marginRight: 4,
 }));
 
 export const StyledDiv = styled('div', { label: 'StyledDiv' })({

packages/manager/src/components/Breadcrumb/Crumbs.tsx

@@ -14,7 +14,7 @@ import type { EditableProps, LabelProps } from './types';
 import type { LinkProps } from 'react-router-dom';
 
 export interface CrumbOverridesProps {
-  label?: string;
+  label?: string | React.ReactNode;
   linkTo?: LinkProps['to'];
   noCap?: boolean;
   position: number;

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

@@ -14,16 +14,16 @@ export const StyledEditableText = styled(EditableText, {
   '& > div': {
     width: 250,
   },
-  marginLeft: `-${theme.spacing()}`,
 }));
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
   ({ theme }) => ({
-    color: theme.textColors.tableStatic,
-    fontSize: '1.125rem',
+    color: theme.tokens.component.Breadcrumb.Normal.Text.Default,
+    fontSize: '1rem',
+    paddingLeft: 0,
     textTransform: 'capitalize',
     [theme.breakpoints.up('lg')]: {
-      fontSize: '1.125rem',
+      fontSize: '1rem',
     },
   })
 );

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

@@ -38,6 +38,7 @@ export const FinalCrumb = React.memo((props: Props) => {
         disabledBreadcrumbEditButton={disabledBreadcrumbEditButton}
         errorText={onEditHandlers.errorText}
         handleAnalyticsEvent={onEditHandlers.handleAnalyticsEvent}
+        isBreadcrumb
         onCancel={onEditHandlers.onCancel}
         onEdit={onEditHandlers.onEdit}
         text={onEditHandlers.editableTextTitle}

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.component.Breadcrumb.Normal.Text.Default,
+      fontSize: '1rem !important',
+      paddingLeft: 0,
+    },
   })
 );
 
@@ -135,6 +140,10 @@ interface BaseProps extends Omit<TextFieldProps, 'label'> {
    * Optional suffix to append to the text when it is not in editing mode
    */
   textSuffix?: string;
+  /**
+   * Whether this EditableText is used as a breadcrumb
+   */
+  isBreadcrumb?: boolean;
 }
 
 interface PropsWithoutLink extends BaseProps {
@@ -163,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);
@@ -173,6 +182,7 @@ export const EditableText = (props: EditableTextProps) => {
     disabledBreadcrumbEditButton,
     errorText,
     handleAnalyticsEvent,
+    isBreadcrumb,
     labelLink,
     onCancel,
     onEdit,
@@ -237,15 +247,15 @@ export const EditableText = (props: EditableTextProps) => {
   };
   const labelText = (
     <H1Header
-      className={classes.root}
+      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 ? (
@@ -258,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}
@@ -268,11 +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,
+            className: cx(classes.input, {
+              [classes.breadcrumbText]: isBreadcrumb,
+            }),
           }}
           InputProps={{ className: classes.inputRoot }}
           // eslint-disable-next-line