-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
feat(breadcrumb): add overflow menu support #7085
feat(breadcrumb): add overflow menu support #7085
Conversation
ac59013
to
f486cf1
Compare
Deploy preview for carbon-elements ready! Built with commit ac59013 |
Deploy preview for carbon-components-react ready! Built with commit ac59013 https://deploy-preview-7085--carbon-components-react.netlify.app |
Deploy preview for carbon-elements ready! Built with commit 0945967 |
Deploy preview for carbon-components-react ready! Built with commit 0945967 https://deploy-preview-7085--carbon-components-react.netlify.app |
405f9e6
to
54e8c0e
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.
Can we make these tweaks to the overflow icon and rule:
- Align the overflow dots to the baseline of the breadcrumb text.
- Have 2px space between the overflow dots and the rule.
- Make the rule 12px long so it aligns flush with the overflow dots.
There is a break line showing up between the sharkfin triangle and the container of the overflow menu. They should be connected to eachother and not have the break.
The sharkfin triangle point needs to align to the middle overflow menu dot. Right now it is a little to the left.
There is no more flashing of color for the breadcrumbs in Firefox for me. 👍🏻 |
6767c8d
to
e9493ff
Compare
@laurenmrice updated 👍 |
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.
9a14e08
to
fd451e8
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.
Looks wonderful in Safari now! Thank you ! 🎉
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.
@tw15egan could the docs pane be updated to describe this feature/story? The 'show code' source view alone would be quite helpful imo
Hi, @tw15egan I have this responsive in-progress prototype carbon-design-system/ibm-products#252 and have a couple of questions.
I have allowed that as I don't know what width my container will be. Currently only visible here (see controls panel to adjust width) May arrive here soon |
Hi, @tw15egan I have this responsive in-progress prototype carbon-design-system/ibm-products#252 and have a couple of questions.
I have allowed that as I don't know what width my container will be. Currently only visible here (see controls panel to adjust width) May arrive here soon |
@lee-chase Nice! As far as your questions go:
|
e637f84
to
6596dbb
Compare
Can we merge this in? |
Closes #7019
Closes #7016
Adds in support for
OverflowMenu
nested inBreadcrumbItem
Changelog
New
OverflowMenu
inside aBreadcrumbItem
Changed
BreadcrumbItem.js
to pass down aclassName
to theFloatingMenu
placed by theOverflowMenu
. This is needed to create the shark fin styles, as theFloatingMenu
is placed outside of the entireBreadcrumb
component and there was no way to scope the styles.menuOffset
props to align the menu to the middle of the overflow menuTesting / Reviewing
Verify the
OverflowMenu
variant renders properly across all browsers