website: Update breadcrumbs documentation & demos #957
Conversation
FlyersPh9
commented
Jan 5, 2023
•
FlyersPh9
commented
- Add breadcrumbs demos for the different sections on the page.
- Update documentation, include adding hyperlinks to other mentioned components.
FlyersPh9
requested review from
a team,
mayank99 and
r100-stack
and removed request for
a team
|
|
||
| ### First truncated element | ||
| Show as many previously accessed folders as possible so that users can quickly go back to an upper level. If all breadcrumb items can be shown without horizontal scrolling, show them all. Try to keep the first level - the root folder - always accessible. Therefore when you start truncating element start with the secondly accessed folder and work your way from there. |
There was a problem hiding this comment.
The last sentence here might need some commas. I was a bit confused what message the sentence was trying to convey.
There was a problem hiding this comment.
Ive tried to make it more clear, let me know what you think.
| <Button key={1} onClick={() => {}}> | ||
| My files | ||
| </Button> | ||
| <Button key={2} onClick={() => {}}> |
There was a problem hiding this comment.
Are all the empty onClicks needed?
There was a problem hiding this comment.
It would appear they are not needed, removed.
| <div | ||
| style={{ | ||
| border: '1px solid pink', | ||
| maxWidth: 450, |
There was a problem hiding this comment.
There's a bit of overflow on the smallest window width with the current maxWidth. Should we change the maxWidth?
There was a problem hiding this comment.
What width works on your screen? Being on macOS I can never see those thicker scrollbars that Windows has.
There was a problem hiding this comment.
I am unable to re-create this scenario. When shrinking the browser window width, I do not see the pink box going outside of the demo frame:
There was a problem hiding this comment.
I was able to recreate this error. In collaboration with Jon, I fixed it by changing the maxWidth in Breadcrumbs.extremetruncation.tsx from 450 to 425.
…om/iTwin/iTwinUI into jon/documentation-site-breadcrumbs
