feat(NavExpandable): allows title prop to accept ReactNodes#9264
feat(NavExpandable): allows title prop to accept ReactNodes#9264dvail wants to merge 1 commit intopatternfly:mainfrom
Conversation
|
Preview: https://patternfly-react-pr-9264.surge.sh A11y report: https://patternfly-react-pr-9264-a11y.surge.sh |
|
Not sure where this fits into the component (core/react) but I noticed the nav text is centered and the label breaks to a new line. Can this be inline with the rest of the nav item title? |
|
I think the line break is a result of using |
|
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 |
|
@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.
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>titleprop 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?)