refactor: [M3-6963] - MUI v5 Migration - Src > Component > Breadcrumb

[tyler-akamai]

Description 📝

MUI v5 Migration - Src > Component > Breadcrumb

Changes 🔄

List any change relevant to the reviewer.

• MakeStyle --> Styled API + sx props

Preview 📷

Include a screenshot or screen recording of the change

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• There are no prerequisites

Reproduction steps

(How to reproduce the issue, if applicable)

• There are no reproduction steps since this is a refactor

Verification steps

(How to verify changes)

• Verify that the Breadcrumbs match the page for each product (Linode, NodeBalancers, Firewalls, etc.)
• Verify that the Breadcrumb matches the instance of the details page (Click on a specific Linode, NodeBalancer, Firewall, etc.)
• Verify that you can edit the name of the instance (ex. you can edit the name of the Linode that you selected via the breadcrumb)
• Verify that the name is saved and used in the landing page

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[tyler-akamai]

The original code has two makeStyle classes. One had the bulk of the styling, the other just has a single style element that would be added if hasError == true. So instead of making two separate Styled api components, I created one with the basic styling, and the have an sx component that adds margin to the bottom if hasError == true

[bnussman-akamai]

Didn't notice any regressions 🔎

[cpathipa]

LGTM! Verified Breadcrumbs, no regressions found.

[mjac0bs]

Thanks @tyler-akamai! One nitpick: there are some linter warnings in the files for imports that would be nice to fix. I also left an optional suggestion about the bottom margin for the error on label.

Confirmed the following:
✅ Verify that the Breadcrumbs match the page for each product (Linode, NodeBalancers, Firewalls, etc.)
✅ Verify that the Breadcrumb matches the instance of the details page (Click on a specific Linode, NodeBalancer, Firewall, etc.)
✅ Verify that you can edit the name of the instance (ex. you can edit the name of the Linode that you selected via the breadcrumb)
✅ Verify that the name is saved and used in the landing page