Skip to content

Commit 4110f05

Browse files
HerbertsVaadinweb-padawan
HerbertsVaadin
and
web-padawan
authored
feat: add has-tooltip attribute to components supporting slotted tooltip (#10028)
Co-authored-by: web-padawan <[email protected]>
1 parent 2198726 commit 4110f05

File tree

54 files changed

+211
-44
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+211
-44
lines changed

‎packages/accordion/src/vaadin-accordion-panel.d.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,15 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
2828
* -----------------|----------------
2929
* `content` | The wrapper for the collapsible panel content.
3030
*
31-
* The following attributes are exposed for styling:
31+
* The following state attributes are available for styling:
3232
*
33-
* Attribute | Description
34-
* -------------| -----------
35-
* `opened` | Set when the collapsible content is expanded and visible.
36-
* `disabled` | Set when the element is disabled.
37-
* `focus-ring` | Set when the element is focused using the keyboard.
38-
* `focused` | Set when the element is focused.
33+
* Attribute | Description
34+
* ---------------|------------
35+
* `opened` | Set when the collapsible content is expanded and visible
36+
* `disabled` | Set when the element is disabled
37+
* `focus-ring` | Set when the element is focused using the keyboard
38+
* `focused` | Set when the element is focused
39+
* `has-tooltip` | Set when the element has a slotted tooltip
3940
*
4041
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
4142
*

‎packages/accordion/src/vaadin-accordion-panel.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
2323
* -----------------|----------------
2424
* `content` | The wrapper for the collapsible panel content.
2525
*
26-
* The following attributes are exposed for styling:
26+
* The following state attributes are available for styling:
2727
*
28-
* Attribute | Description
29-
* -------------| -----------
30-
* `opened` | Set when the collapsible content is expanded and visible.
31-
* `disabled` | Set when the element is disabled.
32-
* `focus-ring` | Set when the element is focused using the keyboard.
33-
* `focused` | Set when the element is focused.
28+
* Attribute | Description
29+
* ---------------|------------
30+
* `opened` | Set when the collapsible content is expanded and visible
31+
* `disabled` | Set when the element is disabled
32+
* `focus-ring` | Set when the element is focused using the keyboard
33+
* `focused` | Set when the element is focused
34+
* `has-tooltip` | Set when the element has a slotted tooltip
3435
*
3536
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
3637
*

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ snapshots["vaadin-avatar-group items"] =
4444
abbr="YY"
4545
aria-describedby="vaadin-tooltip-2"
4646
aria-label="YY"
47+
has-tooltip=""
4748
role="img"
4849
tabindex="0"
4950
with-tooltip=""
@@ -65,6 +66,7 @@ snapshots["vaadin-avatar-group items"] =
6566
abbr="TV"
6667
aria-describedby="vaadin-tooltip-3"
6768
aria-label="TV"
69+
has-tooltip=""
6870
name="Tomi Virkki"
6971
role="img"
7072
tabindex="0"
@@ -89,6 +91,7 @@ snapshots["vaadin-avatar-group items"] =
8991
aria-expanded="false"
9092
aria-haspopup="menu"
9193
aria-label="+2"
94+
has-tooltip=""
9295
hidden=""
9396
role="button"
9497
slot="overflow"
@@ -127,6 +130,7 @@ snapshots["vaadin-avatar-group theme"] =
127130
abbr="YY"
128131
aria-describedby="vaadin-tooltip-5"
129132
aria-label="YY"
133+
has-tooltip=""
130134
role="img"
131135
tabindex="0"
132136
theme="small"
@@ -149,6 +153,7 @@ snapshots["vaadin-avatar-group theme"] =
149153
abbr="TV"
150154
aria-describedby="vaadin-tooltip-6"
151155
aria-label="TV"
156+
has-tooltip=""
152157
name="Tomi Virkki"
153158
role="img"
154159
tabindex="0"
@@ -174,6 +179,7 @@ snapshots["vaadin-avatar-group theme"] =
174179
aria-expanded="false"
175180
aria-haspopup="menu"
176181
aria-label="+2"
182+
has-tooltip=""
177183
hidden=""
178184
role="button"
179185
slot="overflow"
@@ -247,6 +253,7 @@ snapshots["vaadin-avatar-group opened default"] =
247253
abbr="AD"
248254
aria-describedby="vaadin-tooltip-8"
249255
aria-label="AD"
256+
has-tooltip=""
250257
name="Abc Def"
251258
role="img"
252259
tabindex="0"
@@ -269,6 +276,7 @@ snapshots["vaadin-avatar-group opened default"] =
269276
abbr="GJ"
270277
aria-describedby="vaadin-tooltip-9"
271278
aria-label="GJ"
279+
has-tooltip=""
272280
name="Ghi Jkl"
273281
role="img"
274282
tabindex="0"
@@ -294,6 +302,7 @@ snapshots["vaadin-avatar-group opened default"] =
294302
aria-haspopup="menu"
295303
aria-label="+2"
296304
focused=""
305+
has-tooltip=""
297306
role="button"
298307
slot="overflow"
299308
tabindex="0"

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,8 @@ export const AvatarMixin = (superClass) =>
198198

199199
/** @private */
200200
__withTooltipChanged(withTooltip, oldWithTooltip) {
201+
this.toggleAttribute('has-tooltip', withTooltip);
202+
201203
if (withTooltip) {
202204
// Create and attach tooltip
203205
const tooltipNode = document.createElement('vaadin-tooltip');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export { AvatarI18n } from './vaadin-avatar-mixin.js';
3232
* `focus-ring` | Set when the avatar is focused using the keyboard.
3333
* `focused` | Set when the avatar is focused.
3434
* `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
35+
* `has-tooltip` | Set when the element has a slotted tooltip.
3536
*
3637
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
3738
*/

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { AvatarMixin } from './vaadin-avatar-mixin.js';
3838
* `focus-ring` | Set when the avatar is focused using the keyboard.
3939
* `focused` | Set when the avatar is focused.
4040
* `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
41+
* `has-tooltip` | Set when the element has a slotted tooltip.
4142
*
4243
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
4344
*

‎packages/avatar/test/avatar.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,16 @@ describe('vaadin-avatar', () => {
283283
avatar.focus();
284284
expect(overlay.opened).to.be.true;
285285
});
286+
287+
it('should set has-tooltip attribute on the avatar', () => {
288+
expect(avatar.hasAttribute('has-tooltip')).to.be.true;
289+
});
290+
291+
it('should remove has-tooltip attribute from the avata when withTooltip is set to false ', async () => {
292+
avatar.withTooltip = false;
293+
await nextUpdate(avatar);
294+
expect(avatar.hasAttribute('has-tooltip')).to.be.false;
295+
});
286296
});
287297
});
288298

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
2424
* `prefix` | A slot for content before the label (e.g. an icon).
2525
* `suffix` | A slot for content after the label (e.g. an icon).
2626
*
27-
* The following attributes are available for styling:
27+
* The following state attributes are available for styling:
2828
*
29-
* Attribute | Description
30-
* -------------|-------------
31-
* `active` | Set when the button is pressed down, either with mouse, touch or the keyboard.
32-
* `disabled` | Set when the button is disabled.
33-
* `focus-ring` | Set when the button is focused using the keyboard.
34-
* `focused` | Set when the button is focused.
29+
* Attribute | Description
30+
* ---------------|-------------
31+
* `active` | Set when the button is pressed down, either with mouse, touch or the keyboard
32+
* `disabled` | Set when the button is disabled
33+
* `focus-ring` | Set when the button is focused using the keyboard
34+
* `focused` | Set when the button is focused
35+
* `has-tooltip` | Set when the button has a slotted tooltip
3536
*
3637
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
3738
*/

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
3030
* `prefix` | A slot for content before the label (e.g. an icon).
3131
* `suffix` | A slot for content after the label (e.g. an icon).
3232
*
33-
* The following attributes are available for styling:
33+
* The following state attributes are available for styling:
3434
*
35-
* Attribute | Description
36-
* -------------|-------------
37-
* `active` | Set when the button is pressed down, either with mouse, touch or the keyboard.
38-
* `disabled` | Set when the button is disabled.
39-
* `focus-ring` | Set when the button is focused using the keyboard.
40-
* `focused` | Set when the button is focused.
35+
* Attribute | Description
36+
* ---------------|-------------
37+
* `active` | Set when the button is pressed down, either with mouse, touch or the keyboard
38+
* `disabled` | Set when the button is disabled
39+
* `focus-ring` | Set when the button is focused using the keyboard
40+
* `focused` | Set when the button is focused
41+
* `has-tooltip` | Set when the button has a slotted tooltip
4142
*
4243
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
4344
*

‎packages/checkbox-group/src/vaadin-checkbox-group.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
6868
* `has-value` | Set when the element has a value
6969
* `has-helper` | Set when the element has helper text
7070
* `has-error-message` | Set when the element has an error message
71+
* `has-tooltip` | Set when the element has a slotted tooltip
7172
*
7273
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
7374
*

0 commit comments

Comments
 (0)