-
Notifications
You must be signed in to change notification settings - Fork 350
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(Alert, NotificationDrawer): Added tooltips to truncated titles #5043
Conversation
PF4 preview: https://patternfly-react-pr-5043.surge.sh |
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 great @tlabaj .
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.
LGTM! Since this pattern has become so pervasive we should make a hook for it in the future.
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.
I'd recommend following what we currently do with chipgroup by adding a tabindex="0"
to the div of the notification drawer group title like this: <div class="pf-c-notification-drawer__group-toggle-title" aria-describedby="pf-tooltip-139" tabindex="0">Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.</div>
And add the tabindex="0"
on the <h4>
of the alerts. This will allow keyboard users to see the tooltips.
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.
LGTM
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.
LGTM! :)
@@ -43,6 +44,8 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio | |||
onTimeout?: () => void; | |||
/** Truncate title to number of lines */ | |||
truncateTitle?: number; |
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.
does changing the value of truncateTitle
have an effect? It doesn't seem to have the effect indicated in the documentation of limiting to be the number of lines? From what I see it's one line in each case.
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.
good catch. That is a regression. I am looking at it now.
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.
@mcoker when we apply the tooltip, it looks like the maxLines value we set is not applied. Do you have an ideas why that is? If i se the truncateTile
to a number greater than the number of line of text, that work because we do not have a tooltip. But if we have a tooltip, it always truncates to 1 line.
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 like there is some problem here
titleRef.current.style.setProperty(maxLines.name, truncateTitle.toString()); |
This should create an inline style that defines --pf-c-alert__title--max-lines
with the value of the truncate prop. Should look like this
Codecov Report
@@ Coverage Diff @@
## master #5043 +/- ##
==========================================
- Coverage 52.17% 52.13% -0.05%
==========================================
Files 535 535
Lines 9827 9848 +21
Branches 3629 3641 +12
==========================================
+ Hits 5127 5134 +7
- Misses 4038 4045 +7
- Partials 662 669 +7
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
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.
lgtm!
Your changes have been released in:
Thanks for your contribution! 🎉 |
What: Added tooltips to truncated titles for Alert, NotificationDrawerListItemHeader and NotificationDrawerGroup.
Added truncatedTitle Prop to demo app and updated integration test
Closes #4760
Closes #4752