-
Notifications
You must be signed in to change notification settings - Fork 414
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(core): add maxLength to breadcrumb and change symbol #4880
fix(core): add maxLength to breadcrumb and change symbol #4880
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
Component Testing Report Updated Sep 5, 2023 7:57 PM (UTC)
|
7348435
to
b08cf9e
Compare
ef611bc
to
83b1584
Compare
83b1584
to
a11c5a4
Compare
packages/sanity/src/core/field/diff/components/ChangeBreadcrumb.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
![image](https://private-user-images.githubusercontent.com/209129/264756982-d537a5bb-63a0-48bc-9c19-1ba259d4cdb8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NDI1ODEsIm5iZiI6MTcyNTU0MjI4MSwicGF0aCI6Ii8yMDkxMjkvMjY0NzU2OTgyLWQ1MzdhNWJiLTYzYTAtNDhiYy05YzE5LTFiYTI1OWQ0Y2RiOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxMzE4MDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lOThiYTI1N2I3NTJlNTFmZGY0MTkyN2EyZTRkYTUwOGQzZmU4ZGRlNmQ2MTMzYzJmYzZmN2E2MGZjYzY0Zjk1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.DVVGrwN70xYRa8AURwmJTV3Kfv1aqVgatFzWUMP7qtc)
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.
separator={ | ||
<Text muted size={1}> | ||
/ | ||
{'>'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion: Use <ChevronRightIcon />
(from @sanity/icons
) instead of a greater than symbol
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maxWidth
probably made more sense before this <Breadcrumbs>
component used maxLength
. I agree in that it's probably no longer necessary.
50db5e3
to
7b282af
Compare
bbc510d
to
43619be
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @ninaandal!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job! thank you!
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:
![Screenshot 2023-08-22 at 13 59 48](https://private-user-images.githubusercontent.com/44635000/264300921-148f9d42-2fbe-4935-9517-9633f11b8c6c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NDI1ODAsIm5iZiI6MTcyNTU0MjI4MCwicGF0aCI6Ii80NDYzNTAwMC8yNjQzMDA5MjEtMTQ4ZjlkNDItMmZiZS00OTM1LTk1MTctOTYzM2YxMWI4YzZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDEzMTgwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE4YWYzMWNjN2E4MTFmYzI0MTYwZGExYjI0NGJmYTQ5N2Y4MWUxNjFmYWJmYmI1MGEwN2U0YTNkZWU1ODdjZDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.uDQab1MxeajcM9epIpGYkCaKevQwcclkNU0441u6Dj8)
After:
![Screenshot 2023-08-30 at 14 46 19](https://private-user-images.githubusercontent.com/44635000/264346950-edf60ffd-a10c-4e80-95a0-464b83db8b24.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NDI1ODAsIm5iZiI6MTcyNTU0MjI4MCwicGF0aCI6Ii80NDYzNTAwMC8yNjQzNDY5NTAtZWRmNjBmZmQtYTEwYy00ZTgwLTk1YTAtNDY0YjgzZGI4YjI0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDEzMTgwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUyNWQzYTUyMWM4NjgzMmM1ZGU3N2E1MjE0ZmIwOTUzYzE2MjhlNGY5OWY2ZTg5YzUxMGVmMDdiYTY0YmNiOTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._aGa2vm3JraSCb3GJlllENMufbNzOVPX09tYK25_CwQ)
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