Skip to content

Commit 164719f

Browse files
web-padawanweb-padawan
authored
refactor!: update tooltip overlay to use native popover (#9760)
1 parent d749747 commit 164719f

File tree

13 files changed

+148
-160
lines changed

13 files changed

+148
-160
lines changed

‎packages/avatar-group/test/avatar-group.test.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,7 @@ describe('avatar-group', () => {
101101
const overflow = group._overflow;
102102
const items = group.items;
103103
const tooltip = overflow.querySelector('vaadin-tooltip');
104-
const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
105-
expect(overlay.textContent).to.equal([items[2].name, items[3].abbr, 'anonymous'].join('\n'));
104+
expect(tooltip.textContent).to.equal([items[2].name, items[3].abbr, 'anonymous'].join('\n'));
106105
});
107106

108107
it('should show overflow avatar when maxItemsVisible is less than items count', () => {

‎packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ snapshots["vaadin-avatar-group default"] =
2323
<div
2424
id="vaadin-tooltip-0"
2525
role="tooltip"
26-
slot="sr-label"
26+
slot="overlay"
2727
>
2828
</div>
2929
</vaadin-tooltip>
@@ -55,7 +55,7 @@ snapshots["vaadin-avatar-group items"] =
5555
<div
5656
id="vaadin-tooltip-2"
5757
role="tooltip"
58-
slot="sr-label"
58+
slot="overlay"
5959
>
6060
YY
6161
</div>
@@ -77,7 +77,7 @@ snapshots["vaadin-avatar-group items"] =
7777
<div
7878
id="vaadin-tooltip-3"
7979
role="tooltip"
80-
slot="sr-label"
80+
slot="overlay"
8181
>
8282
Tomi Virkki
8383
</div>
@@ -101,7 +101,7 @@ snapshots["vaadin-avatar-group items"] =
101101
<div
102102
id="vaadin-tooltip-1"
103103
role="tooltip"
104-
slot="sr-label"
104+
slot="overlay"
105105
>
106106
YY
107107
Tomi Virkki
@@ -139,7 +139,7 @@ snapshots["vaadin-avatar-group theme"] =
139139
<div
140140
id="vaadin-tooltip-5"
141141
role="tooltip"
142-
slot="sr-label"
142+
slot="overlay"
143143
>
144144
YY
145145
</div>
@@ -162,7 +162,7 @@ snapshots["vaadin-avatar-group theme"] =
162162
<div
163163
id="vaadin-tooltip-6"
164164
role="tooltip"
165-
slot="sr-label"
165+
slot="overlay"
166166
>
167167
Tomi Virkki
168168
</div>
@@ -187,7 +187,7 @@ snapshots["vaadin-avatar-group theme"] =
187187
<div
188188
id="vaadin-tooltip-4"
189189
role="tooltip"
190-
slot="sr-label"
190+
slot="overlay"
191191
>
192192
YY
193193
Tomi Virkki
@@ -259,7 +259,7 @@ snapshots["vaadin-avatar-group opened default"] =
259259
<div
260260
id="vaadin-tooltip-8"
261261
role="tooltip"
262-
slot="sr-label"
262+
slot="overlay"
263263
>
264264
Abc Def
265265
</div>
@@ -281,7 +281,7 @@ snapshots["vaadin-avatar-group opened default"] =
281281
<div
282282
id="vaadin-tooltip-9"
283283
role="tooltip"
284-
slot="sr-label"
284+
slot="overlay"
285285
>
286286
Ghi Jkl
287287
</div>
@@ -305,7 +305,7 @@ snapshots["vaadin-avatar-group opened default"] =
305305
<div
306306
id="vaadin-tooltip-7"
307307
role="tooltip"
308-
slot="sr-label"
308+
slot="overlay"
309309
>
310310
Mno Pqr
311311
Stu Vwx

‎packages/menu-bar/src/vaadin-menu-bar-mixin.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -678,6 +678,7 @@ export const MenuBarMixin = (superClass) =>
678678
_hideTooltip(immediate) {
679679
const tooltip = this._tooltipController && this._tooltipController.node;
680680
if (tooltip) {
681+
this._tooltipController.setContext({ item: null });
681682
tooltip._stateController.close(immediate);
682683
}
683684
}

‎packages/tooltip/src/vaadin-tooltip-mixin.js‎

Lines changed: 13 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,6 @@ export const TooltipMixin = (superClass) =>
330330
*/
331331
text: {
332332
type: String,
333-
observer: '__textChanged',
334333
},
335334

336335
/**
@@ -366,26 +365,9 @@ export const TooltipMixin = (superClass) =>
366365
type: Boolean,
367366
sync: true,
368367
},
369-
370-
/** @private */
371-
_srLabel: {
372-
type: Object,
373-
},
374-
375-
/** @private */
376-
_overlayContent: {
377-
type: String,
378-
},
379368
};
380369
}
381370

382-
static get observers() {
383-
return [
384-
'__generatorChanged(_overlayElement, generator, context)',
385-
'__updateSrLabelText(_srLabel, _overlayContent)',
386-
];
387-
}
388-
389371
/**
390372
* Sets the default focus delay to be used by all tooltip instances,
391373
* except for those that have focus delay configured using property.
@@ -420,7 +402,6 @@ export const TooltipMixin = (superClass) =>
420402
super();
421403

422404
this._uniqueId = `vaadin-tooltip-${generateUniqueId()}`;
423-
this._renderer = this.__tooltipRenderer.bind(this);
424405

425406
this.__onFocusin = this.__onFocusin.bind(this);
426407
this.__onFocusout = this.__onFocusout.bind(this);
@@ -467,19 +448,24 @@ export const TooltipMixin = (superClass) =>
467448

468449
this._overlayElement = this.$.overlay;
469450

470-
this._srLabelController = new SlotController(this, 'sr-label', 'div', {
451+
this.__contentController = new SlotController(this, 'overlay', 'div', {
471452
initializer: (element) => {
472453
element.id = this._uniqueId;
473454
element.setAttribute('role', 'tooltip');
474-
this._srLabel = element;
455+
this.__contentNode = element;
475456
},
476457
});
477-
this.addController(this._srLabelController);
458+
this.addController(this.__contentController);
478459
}
479460

480-
/** @private */
481-
__computeOpened(manual, opened, autoOpened, connected) {
482-
return connected && (manual ? opened : autoOpened);
461+
/** @protected */
462+
updated(props) {
463+
super.updated(props);
464+
465+
if (props.has('text') || props.has('generator') || props.has('context')) {
466+
this.__updateContent();
467+
this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
468+
}
483469
}
484470

485471
/** @private */
@@ -688,18 +674,8 @@ export const TooltipMixin = (superClass) =>
688674
}
689675

690676
/** @private */
691-
__textChanged(text, oldText) {
692-
if (this._overlayElement && (text || oldText)) {
693-
this._overlayElement.requestContentUpdate();
694-
}
695-
}
696-
697-
/** @private */
698-
__tooltipRenderer(root) {
699-
root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
700-
701-
// Update the sr-only label text content
702-
this._overlayContent = root.textContent;
677+
__updateContent() {
678+
this.__contentNode.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
703679
}
704680

705681
/** @private */
@@ -723,23 +699,4 @@ export const TooltipMixin = (superClass) =>
723699
});
724700
}
725701
}
726-
727-
/** @private */
728-
__generatorChanged(overlayElement, generator, context) {
729-
if (overlayElement) {
730-
if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
731-
overlayElement.requestContentUpdate();
732-
}
733-
734-
this.__oldTextGenerator = generator;
735-
this.__oldContext = context;
736-
}
737-
}
738-
739-
/** @private */
740-
__updateSrLabelText(srLabel, textContent) {
741-
if (srLabel) {
742-
srLabel.textContent = textContent;
743-
}
744-
}
745702
};

‎packages/tooltip/src/vaadin-tooltip-overlay.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,20 @@ class TooltipOverlay extends PopoverOverlayMixin(
5353
`;
5454
}
5555

56-
requestContentUpdate() {
57-
super.requestContentUpdate();
56+
/**
57+
* @protected
58+
* @override
59+
*/
60+
_attachOverlay() {
61+
this.showPopover();
62+
}
5863

59-
this.toggleAttribute('hidden', this.textContent.trim() === '');
64+
/**
65+
* @protected
66+
* @override
67+
*/
68+
_detachOverlay() {
69+
this.hidePopover();
6070
}
6171
}
6272

‎packages/tooltip/src/vaadin-tooltip.d.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
1919
*
2020
* ### Styling
2121
*
22-
* `<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal
23-
* themable component as the actual visible overlay.
22+
* The following shadow DOM parts are available for styling:
2423
*
25-
* See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
26-
* for `<vaadin-tooltip-overlay>` parts.
24+
* Part name | Description
25+
* ----------- | ---------------
26+
* `overlay` | The overlay element
27+
* `content` | The overlay content element
2728
*
2829
* The following state attributes are available for styling:
2930
*

‎packages/tooltip/src/vaadin-tooltip.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
2222
*
2323
* ### Styling
2424
*
25-
* `<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal
26-
* themable component as the actual visible overlay.
25+
* The following shadow DOM parts are available for styling:
2726
*
28-
* See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
29-
* for `<vaadin-tooltip-overlay>` parts.
27+
* Part name | Description
28+
* ----------- | ---------------
29+
* `overlay` | The overlay element
30+
* `content` | The overlay content element
3031
*
3132
* The following state attributes are available for styling:
3233
*
@@ -64,7 +65,7 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
6465
static get styles() {
6566
return css`
6667
:host {
67-
display: none;
68+
display: contents;
6869
}
6970
`;
7071
}
@@ -76,7 +77,7 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
7677
return html`
7778
<vaadin-tooltip-overlay
7879
id="overlay"
79-
.renderer="${this._renderer}"
80+
popover="manual"
8081
.owner="${this}"
8182
theme="${ifDefined(this._theme)}"
8283
.opened="${this._isConnected && (this.manual ? this.opened : this._autoOpened)}"
@@ -89,9 +90,9 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
8990
@mouseenter="${this.__onOverlayMouseEnter}"
9091
@mouseleave="${this.__onOverlayMouseLeave}"
9192
modeless
93+
exportparts="overlay, content"
94+
><slot name="overlay"></slot
9295
></vaadin-tooltip-overlay>
93-
94-
<slot name="sr-label"></slot>
9596
`;
9697
}
9798
}

0 commit comments

Comments
 (0)