luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Fix up tippy console warning... (#14524) 

...enabling/disabling now depends on whether the string is non-empty
This commit is contained in:
John Cowen 2022-09-12 11:21:26 +01:00 committed by GitHub
parent f0066ee262
commit 2df2276ffa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 80 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/packages/consul-ui/app/components/peerings/badge/index.hbs
View File

@ -1,5 +1,5 @@
{{#if @peering.State}}
<div class="peerings-badge {{lowercase @peering.State}}" {{tooltip this.tooltip options=(hash hideTooltip=(not this.tooltip))}}>
<div class="peerings-badge {{lowercase @peering.State}}" {{tooltip this.tooltip}}>
<Peerings::Badge::Icon @state="{{@peering.State}}" />
<span class="peerings-badge__text">{{capitalize (lowercase @peering.State)}}</span>
</div>

6
ui/packages/consul-ui/app/components/peerings/badge/index.js
View File

@ -20,9 +20,11 @@ const BADGE_LOOKUP = {
TERMINATED: {
tooltip: 'Someone in the other peer may have deleted this peering connection.',
},
UNDEFINED: {},
UNDEFINED: {
tooltip: ''
},
};
export default class PeeingsBadge extends Component {
export default class PeeringsBadge extends Component {
get styles() {
const {
peering: { State },

119
ui/packages/consul-ui/app/modifiers/tooltip.js
View File

@ -8,68 +8,69 @@ import tippy, { followCursor } from 'tippy.js';
* {{tooltip 'Text' options=(hash )}}
*/
export default modifier(($element, [content], hash = {}) => {
if(typeof content === 'string' && content.trim() === '') {
return;
}
const options = hash.options || {};
if (!options.hideTooltip) {
let $anchor = $element;
let $anchor = $element;
// make it easy to specify the modified element as the actual tooltip
if (typeof options.triggerTarget === 'string') {
const $el = $anchor;
switch (options.triggerTarget) {
case 'parentNode':
$anchor = $anchor.parentNode;
break;
default:
$anchor = $anchor.querySelectorAll(options.triggerTarget);
}
content = $anchor.cloneNode(true);
$el.remove();
hash.options.triggerTarget = undefined;
// make it easy to specify the modified element as the actual tooltip
if (typeof options.triggerTarget === 'string') {
const $el = $anchor;
switch (options.triggerTarget) {
case 'parentNode':
$anchor = $anchor.parentNode;
break;
default:
$anchor = $anchor.querySelectorAll(options.triggerTarget);
}
// {{tooltip}} will just use the HTML content
if (typeof content === 'undefined') {
content = $anchor.innerHTML;
$anchor.innerHTML = '';
}
let interval;
if (options.trigger === 'manual') {
// if we are manually triggering, a out delay means only show for the
// amount of time specified by the delay
const delay = options.delay || [];
if (typeof delay[1] !== 'undefined') {
hash.options.onShown = tooltip => {
clearInterval(interval);
interval = setTimeout(() => {
tooltip.hide();
}, delay[1]);
};
}
}
let $trigger = $anchor;
let needsTabIndex = false;
if (!$trigger.hasAttribute('tabindex')) {
needsTabIndex = true;
$trigger.setAttribute('tabindex', '0');
}
const tooltip = tippy($anchor, {
theme: 'tooltip',
triggerTarget: $trigger,
content: $anchor => content,
// showOnCreate: true,
// hideOnClick: false,
plugins: [
typeof options.followCursor !== 'undefined' ? followCursor : undefined,
].filter(item => Boolean(item)),
...hash.options,
});
return () => {
if (needsTabIndex) {
$trigger.removeAttribute('tabindex');
}
clearInterval(interval);
tooltip.destroy();
};
content = $anchor.cloneNode(true);
$el.remove();
hash.options.triggerTarget = undefined;
}
// {{tooltip}} will just use the HTML content
if (typeof content === 'undefined') {
content = $anchor.innerHTML;
$anchor.innerHTML = '';
}
let interval;
if (options.trigger === 'manual') {
// if we are manually triggering, a out delay means only show for the
// amount of time specified by the delay
const delay = options.delay || [];
if (typeof delay[1] !== 'undefined') {
hash.options.onShown = tooltip => {
clearInterval(interval);
interval = setTimeout(() => {
tooltip.hide();
}, delay[1]);
};
}
}
let $trigger = $anchor;
let needsTabIndex = false;
if (!$trigger.hasAttribute('tabindex')) {
needsTabIndex = true;
$trigger.setAttribute('tabindex', '0');
}
const tooltip = tippy($anchor, {
theme: 'tooltip',
triggerTarget: $trigger,
content: $anchor => content,
// showOnCreate: true,
// hideOnClick: false,
plugins: [
typeof options.followCursor !== 'undefined' ? followCursor : undefined,
].filter(item => Boolean(item)),
...hash.options,
});
return () => {
if (needsTabIndex) {
$trigger.removeAttribute('tabindex');
}
clearInterval(interval);
tooltip.destroy();
};
});

16
ui/packages/consul-ui/app/modifiers/tooltip.mdx
View File

@ -11,7 +11,21 @@ most common usage will be something like the below:
</span>
```
A `tabindex=0` is automatically added to the element that triggers the tooltip if it doesn't have one already to make sure the tooltip is in the natural tabbing order of the document.
A `tabindex=0` is automatically added to the element that triggers the tooltip
if it doesn't have one already to make sure the tooltip is in the natural
tabbing order of the document.
If you specify and empty string as a content, then the tooltip will not show,
you can use this to conditionally disable/enable tooltips. It additionally
means empty tooltips can not been added by accident.
```hbs preview-template
<span
{{tooltip (if false 'Never show this' '')}}
>
Hover over me
</span>
```
An additional options hash can be passed into the tooltip the contents of
which are passed along to `tippy.js` [so all of the `tippy.js`