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/Breadcrumb.styles.tsx

@@ -4,7 +4,7 @@ export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
   alignItems: 'center',
   display: 'flex',
   flexWrap: 'wrap',
-  minHeight: 48,
+  minHeight: 34,
 });
 
 export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(

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.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,21 @@ export const StyledEditableText = styled(EditableText, {
   '& > div': {
     width: 250,
   },
-  marginLeft: `-${theme.spacing()}`,
+  '& .breadcrumb-text': {
+    color: theme.tokens.breadcrumb.Normal.Text.Default,
+    fontSize: '1rem !important',
+    paddingLeft: 0,
+  },
 }));
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
   ({ theme }) => ({
-    color: theme.textColors.tableStatic,
-    fontSize: '1.125rem',
+    color: theme.tokens.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

@@ -135,6 +135,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 {
@@ -173,6 +177,7 @@ export const EditableText = (props: EditableTextProps) => {
     disabledBreadcrumbEditButton,
     errorText,
     handleAnalyticsEvent,
+    isBreadcrumb,
     labelLink,
     onCancel,
     onEdit,
@@ -237,7 +242,7 @@ export const EditableText = (props: EditableTextProps) => {
   };
   const labelText = (
     <H1Header
-      className={classes.root}
+      className={`${classes.root} ${isBreadcrumb ? 'breadcrumb-text' : ''}`}
       data-qa-editable-text
       title={`${text}${textSuffix ?? ''}`}
     />
@@ -272,7 +277,9 @@ export const EditableText = (props: EditableTextProps) => {
         <TextField
           {...rest}
           inputProps={{
-            className: classes.input,
+            className: `${classes.input} ${
+              isBreadcrumb ? 'breadcrumb-text' : ''
+            }`,
           }}
           InputProps={{ className: classes.inputRoot }}
           // eslint-disable-next-line

packages/ui/src/foundations/themes/dark.ts

@@ -4,6 +4,7 @@ import {
   Background,
   Badge,
   Border,
+  Breadcrumb,
   Button,
   Calendar,
   Color,
@@ -1040,6 +1041,7 @@ export const darkTheme: ThemeOptions = {
     action: Action,
     background: Background,
     border: Border,
+    breadcrumb: Breadcrumb,
     calendar: Calendar,
     content: Content,
     dropdown: Dropdown,

packages/ui/src/foundations/themes/index.ts

@@ -34,6 +34,7 @@ import type {
   GlobalFooterTypes as GlobalFooterTypesLight,
   GlobalHeaderTypes,
   InteractionTypes as InteractionTypesLight,
+  BreadcrumbTypes as BreadcrumbTypesLight,
   RadiusTypes,
   SearchTypes as SearchTypesLight,
   SideNavigationTypes as SideNavigationTypesLight,
@@ -47,6 +48,7 @@ import type {
   ActionTypes as ActionTypesDark,
   BackgroundTypes as BackgroundTypesDark,
   BorderTypes as BorderTypesDark,
+  BreadcrumbTypes as BreadcrumbTypesDark,
   CalendarTypes as CalendarTypesDark,
   ContentTypes as ContentTypesDark,
   DropdownTypes as DropdownTypesDark,
@@ -67,6 +69,7 @@ type AccentTypes = MergeTypes<AccentTypesLight, AccentTypesDark>;
 type ActionTypes = MergeTypes<ActionTypesLight, ActionTypesDark>;
 type BackgroundTypes = MergeTypes<BackgroundTypesLight, BackgroundTypesDark>;
 type BorderTypes = MergeTypes<BorderTypesLight, BorderTypesDark>;
+type BreadcrumbTypes = MergeTypes<BreadcrumbTypesLight, BreadcrumbTypesDark>;
 type ContentTypes = MergeTypes<ContentTypesLight, ContentTypesDark>;
 type ElevationTypes = MergeTypes<ElevationTypesLight, ElevationTypesDark>;
 type CalendarTypes = MergeTypes<CalendarTypesLight, CalendarTypesDark>;
@@ -147,6 +150,7 @@ declare module '@mui/material/styles/createTheme' {
       //  ---- Global tokens: theme agnostic ----
       border: BorderTypes;
       borderRadius: BorderRadiusTypes;
+      breadcrumb: BreadcrumbTypes;
       calendar: CalendarTypes;
       chart: ChartTypes;
       color: ColorTypes;
@@ -193,6 +197,7 @@ declare module '@mui/material/styles/createTheme' {
       border?: BorderTypes;
       //  ---- Global tokens: theme agnostic ----
       borderRadius?: BorderRadiusTypes;
+      breadcrumb?: BreadcrumbTypes;
       calendar?: CalendarTypes;
       chart?: ChartTypes;
       color?: ColorTypes;

packages/ui/src/foundations/themes/light.ts

@@ -4,6 +4,7 @@ import {
   Background,
   Border,
   BorderRadius,
+  Breadcrumb,
   Button,
   Calendar,
   Chart,
@@ -1804,6 +1805,7 @@ export const lightTheme: ThemeOptions = {
     background: Background,
     border: Border,
     borderRadius: BorderRadius,
+    breadcrumb: Breadcrumb,
     calendar: Calendar,
     chart: Chart,
     color: Color,