fix(core): add maxLength to breadcrumb and change symbol

[ninaandal]

Description

The breadcrumps for the review changes could get very long if there were several objects. Added a maxLength and changed the symbol from / to > as a separator to make it consistent with the new breadcrumb styling.

Before:

After:

What to review

Review changes -> the headings of which document has been editedrr

Notes for release

Fixed a visibility issue with breadcrumbing which document was edited in Review Changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Sep 5, 2023 7:56pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2023 7:56pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Sep 5, 2023 7:56pm

[github-actions]

Component Testing Report Updated Sep 5, 2023 7:57 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	9s	3	0	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	9s	6	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	12s	9	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	43s	18	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	10s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	5s	3	0	0

[robinpyon]

Thanks @ninaandal!

Minor point, but we should make sure to use correct icons rather than the text equivalent.

Whilst not a regression introduced by this PR, breadcrumbs in this space can be unnecessarily truncated. An example can be found here.

I believe this is happening because <ChangeTitleSegment> will always set maxWidth = 100 when its supplied string is over 30 chars.

We should consider only truncating this text when we know we're dealing with a breadcrumb containing multiple segments.

[robinpyon]

suggestion: Use <ChevronRightIcon /> (from @sanity/icons) instead of a greater than symbol

[ninaandal]

Why do we even have that maxWidth set in any condition? Looks better without it?

[robinpyon]

maxWidth probably made more sense before this <Breadcrumbs> component used maxLength. I agree in that it's probably no longer necessary.

[robinpyon]

Thanks @ninaandal!

[binoy14]

Great job! thank you!