LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

Reuse available text as the tooltip where appropriate.

Browse source 
The best candidate is `aria-label`, followed by `description`.

Most of the existing elements already have these defined, so try to route it as the tooltip instead of having to explicitly define tooltips everywhere through a redundant `title` or <Tooltip> tag.

Minor side-effect:
This will cancel off any effect from a parent <Tooltip>, i.e. might confuse future developers who are trying to do "<Tooltip><Button></Button></Tooltip>".
This commit is contained in:
infiinte-persistence 2020-05-12 17:22:36 +08:00 committed by Sean Yesmunt
parent a2d4757823
commit fa219af5aa
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/component/button/view.jsx
View file

@ -37,6 +37,7 @@ type Props = {
requiresAuth: ?boolean,
myref: any,
dispatch: any,
'aria-label'?: string,
};
// use forwardRef to allow consumers to pass refs to the button content if they want to
@ -155,6 +156,17 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
}
}
// Try to generate a tooltip using available text and display it through
// the 'title' mechanism, but only if it isn't being used.
let defaultTooltip;
if (!title) {
if (props['aria-label']) {
defaultTooltip = props['aria-label'];
} else if (description) {
defaultTooltip = description;
}
}
if (requiresAuth && !emailVerified) {
return (
<NavLink
@ -163,7 +175,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
e.stopPropagation();
}}
to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
title={title}
title={title || defaultTooltip}
disabled={disabled}
className={combinedClassName}
activeClassName={activeClass}
@ -177,7 +189,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
<NavLink
exact
to={path}
title={title}
title={title || defaultTooltip}
disabled={disabled}
onClick={e => {
e.stopPropagation();
@ -194,7 +206,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
) : (
<button
ref={combinedRef}
title={title}
title={title || defaultTooltip}
aria-label={description || label || title}
className={combinedClassName}
onClick={e => {