-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
[dashboard] Show a tooltip with billing cycle dates when hovering over remaining hours #4398
Conversation
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.2 |
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.
Whoa! Thanks for picking this up @jankeromnes! 🌟
The title attribute seems to work for now. Ideally this would look like a tooltip element as described in #4223 but feel free to leave this out of the scope of this iteration. 🛹
Feel free to forward this to someone to review the frontend here if needed. 🏓
@@ -433,7 +433,7 @@ export default function () { | |||
{!assignedTs && ( | |||
<p className="text-base w-96 m-auto">Upgrade your plan to get access to private repositories or more parallel workspaces.</p> | |||
)} | |||
<p className="mt-2 font-semibold text-gray-500">Remaining hours: {typeof(accountStatement?.remainingHours) === 'number' | |||
<p className="mt-2 font-semibold text-gray-500" title={guessCurrentBillingCycle(currentPlan, accountStatement).map(d => d.toLocaleDateString()).join(' - ')}>Remaining hours: {typeof(accountStatement?.remainingHours) === '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.
thought: It took me a while to realize this was added as a title attribute! 😇
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.
Titles are fantastic! I always hover over UI elements when I need more info, and pretty often I'm not disappointed. 😁
If we already have a tooltip component, I think we could do some JS-hacking to make it work for every element that has a title
attribute.
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.
Titles are fantastic!
Agree, and title
along with aria-label
attributes can significantly improve product accessibility. 👀
If we already have a tooltip component ...
We do have first tooltip component implementation! 💬
I think we could do some JS-hacking ...
I'd not expect to see a tooltip element every time we're using the title attribute as this could make the user interface unnecessarily verbose, however, we can try this and see if we need to tone this down. 🏀
bc7996c
to
a4b0366
Compare
…r remaining hours
a4b0366
to
418b065
Compare
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.5 |
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.6 |
…r remaining hours (gitpod-io#4398)
Fixes #4223