fix(mui): Fixed condition preventing Breadcrumb text display

[aress31]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the current behavior?

What is the new behavior?

fixes #6497

Notes for reviewers

The following tasks have not been performed, kindly complete them to provide me with a how-to example:

• Tests for the changes have been added
• Docs have been added / updated

[changeset-bot]

🦋 Changeset detected

Latest commit: 3b6b903

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@refinedev/chakra-ui	Minor
@refinedev/ui-tests	Minor
@refinedev/ui-types	Minor
@refinedev/mantine	Minor
@refinedev/antd	Minor
@refinedev/mui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[BatuhanW]

Hey @aress31 thanks for taking time to create issues and the PR.

In your PR, please do not include any irrelevant changes. Only the changes related to your fix and specs.

Imports like import HomeOutlined from "@mui/icons-material/HomeOutlined"; are not coincidence. They are intentionally like that because of bundling issues with mui library.

[BatuhanW]

@aress31 For tests, you can update the tests in packages/mui/src/components/breadcrumb/index.spec.tsx file. We have routerInitialEntries: ["/posts/create"], there, you can add new cases with routerInitialEntries: ["/posts"], and see if it renders. You can also stash your changes and run the test to see if new test correctly fails.

[aress31]

Hey @aress31 thanks for taking time to create issues and the PR.

In your PR, please do not include any irrelevant changes. Only the changes related to your fix and specs.

Imports like import HomeOutlined from "@mui/icons-material/HomeOutlined"; are not coincidence. They are intentionally like that because of bundling issues with mui library.

@BatuhanW besides reverting the imports, what else do you want me to change? I think refactoring the file as I did help with modularity and readability - killing two birds with one stone.

[aress31]

As requested, I focused solely on the fix. However, I recommend reviewing my previous commits with the refactoring. Some styles, such as default padding and fontSize, should, in my opinion, be removed to keep the component unstyled, allowing users to customize it via breadcrumbProps. Additionally, I suggest improving modularity by splitting the breadcrumb and home rendering logic.

[alicanerdurmaz]

Hello @aress31, Thanks for improving Refine 🚀

I added comments to the issue about implementation. Please feel free to ask questions if you have any concerns

[alicanerdurmaz]

• case 1: breadcrumbs.length = 0: // both versions return null
• case 2: breadcrumbs.length = 1: // old version returns null, new version shows
• case 3: breadcrumbs.length = 2: // Both versions renders

we have two options to fix case 2:
1.

Suggested change

	if (breadcrumbs.length < minItems) return null;
	if (breadcrumbs.length <= minItems) return null;

2. default should be set to 2 minItems = 2

I believe second option is better because it fits minItems name.

[aress31]

Why should the default be set to minItems = 2 by default?

What’s the rationale behind this choice? If a route is configured, the breadcrumb should display it by default, unless specified otherwise (and that is the point of this new minItems prop).

Regardless I pushed suggested changes, if you change your mind, please feel free to discard the commit. :)

[alicanerdurmaz]

Because previously, the breadcrumb would render only if there were at least 2 items, but it wouldn’t render if there was only 1 item. So, minItems should be 2. If we break this logic, it would be a breaking change, and current users who update Refine would see a breadcrumb even in cases with just 1 item.

I'm with you. If the route is configured, it should render, but we shouldn't make breaking changes, even if the old implementation is wrong.

[aress31]

We should be good to merge then since I have the default for minItems to be 2. Please let me know if there is another blocker.

Also for future major release might be a good idea to implement the breaking change of setting minItems to 1.