-
Notifications
You must be signed in to change notification settings - Fork 355
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(NavExpandable): allows title prop to accept ReactNodes #9264
feat(NavExpandable): allows title prop to accept ReactNodes #9264
Conversation
Preview: https://patternfly-react-pr-9264.surge.sh A11y report: https://patternfly-react-pr-9264-a11y.surge.sh |
I think the line break is a result of using |
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.
🚀
After chatting with @tlabaj about it, it's probably better if we create a better HTML structure for markup (as opposed to just text) to go in the nav link. I think the main issue with the structure now would because the nav link is a flex layout, its children are going to be flex children, so passing something like "nav text " will not display that way since "nav text" and "" will be separate flex children. Both of them will be stretched, and the whitespace between them will not be preserved. It would be better if we added a wrapper for the nav link text/content that is not a flex layout, and that will be what holds the nav link text/content. To do this in a way that isn't breaking and doesn't impact current users passing strings as the nav text, we could do this as an opt-in by changing the markup if anything other than a string is passed via something like:
Created a core issue for the initial work to add that element - patternfly/patternfly#5857 |
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 incorporate @mcoker suggestion of checking type and rendering accordingly?
@tlabaj the core change was merged, though it's worth noting that there are no associated styles for the |
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.
Seems good to me. Thank you!
I could not push to this PR, so I created a new one to add the nav link text wrapper |
Closing since this was resolved with PR #9740 |
Potential fix for patternfly/patternfly-design#1267
Changes the
<NavExpandable>
title
prop to accept anyReactNode
. This also adds an example to the documentation. (Is this wanted, or is it more of a distraction in it's current location?)