-
+
+
+
`;
}
@@ -123,6 +136,24 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
}
}
+ /** @protected */
+ updated(props) {
+ super.updated(props);
+
+ if (props.has('autoTooltip')) {
+ this.__updateAutoTooltip();
+ }
+ }
+
+ /** @protected */
+ ready() {
+ super.ready();
+
+ this._tooltipController = new TooltipController(this);
+ this.addController(this._tooltipController);
+ this.__updateAutoTooltip();
+ }
+
/** @protected */
firstUpdated() {
super.firstUpdated();
@@ -137,6 +168,42 @@ class Badge extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(L
this.toggleAttribute('has-icon', currentNodes.length > 0);
});
}
+
+ /** @private */
+ __getContentText() {
+ const slot = this.shadowRoot.querySelector('slot:not([name])');
+ return slot
+ .assignedNodes({ flatten: true })
+ .map((node) => node.textContent)
+ .join('')
+ .trim();
+ }
+
+ /** @private */
+ __hasCustomTooltip() {
+ return Array.from(this.children).some((node) => node !== this.__autoTooltip && node.slot === 'tooltip');
+ }
+
+ /** @private */
+ __updateAutoTooltip() {
+ const text = this.__getContentText();
+
+ if (!this.autoTooltip || !text || this.__hasCustomTooltip()) {
+ this.__autoTooltip?.remove();
+ return;
+ }
+
+ if (!this.__autoTooltip) {
+ this.__autoTooltip = document.createElement('vaadin-tooltip');
+ this.__autoTooltip.setAttribute('slot', 'tooltip');
+ }
+
+ this.__autoTooltip.setAttribute('text', text);
+
+ if (!this.__autoTooltip.isConnected) {
+ this.appendChild(this.__autoTooltip);
+ }
+ }
}
defineCustomElement(Badge);
diff --git a/packages/badge/test/badge.test.ts b/packages/badge/test/badge.test.ts
index 21e3f4f84ec..c441476dea1 100644
--- a/packages/badge/test/badge.test.ts
+++ b/packages/badge/test/badge.test.ts
@@ -116,4 +116,24 @@ describe('vaadin-badge', () => {
expect(badge.hasAttribute('has-icon')).to.be.false;
});
});
+
+ describe('auto-tooltip', () => {
+ beforeEach(async () => {
+ badge = fixtureSync('
New');
+ await nextRender();
+ });
+
+ it('should hide the content visually', () => {
+ const content = badge.shadowRoot!.querySelector('[part="content"]')!;
+
+ expect(content.classList.contains('sr-only')).to.be.true;
+ });
+
+ it('should add a tooltip with content text', () => {
+ const tooltip = badge.querySelector('vaadin-tooltip[slot="tooltip"]')!;
+
+ expect(tooltip).to.be.ok;
+ expect(tooltip.getAttribute('text')).to.equal('New');
+ });
+ });
});
diff --git a/packages/button/package.json b/packages/button/package.json
index 9cf7770b79e..487a9c7098d 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -37,6 +37,7 @@
"@open-wc/dedupe-mixin": "^1.3.0",
"@vaadin/a11y-base": "25.2.0-alpha12",
"@vaadin/component-base": "25.2.0-alpha12",
+ "@vaadin/tooltip": "25.2.0-alpha12",
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
"lit": "^3.0.0"
},
diff --git a/packages/button/src/vaadin-button.d.ts b/packages/button/src/vaadin-button.d.ts
index 530c9bbbd43..ad8136b1233 100644
--- a/packages/button/src/vaadin-button.d.ts
+++ b/packages/button/src/vaadin-button.d.ts
@@ -54,6 +54,11 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*/
declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+ /**
+ * When enabled, hides the label visually and shows it in a tooltip.
+ */
+ autoTooltip: boolean;
+
/**
* When disabled, the button is rendered as "dimmed".
*
diff --git a/packages/button/src/vaadin-button.js b/packages/button/src/vaadin-button.js
index d50336e7545..2efcb7e923e 100644
--- a/packages/button/src/vaadin-button.js
+++ b/packages/button/src/vaadin-button.js
@@ -3,7 +3,10 @@
* Copyright (c) 2017 - 2026 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
+import '@vaadin/tooltip/src/vaadin-tooltip.js';
import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -68,7 +71,7 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
}
static get styles() {
- return buttonStyles;
+ return [buttonStyles, screenReaderOnly];
}
static get properties() {
@@ -95,6 +98,16 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
reflectToAttribute: true,
sync: true,
},
+
+ /**
+ * When enabled, hides the label visually and shows it in a tooltip.
+ */
+ autoTooltip: {
+ type: Boolean,
+ value: false,
+ reflectToAttribute: true,
+ sync: true,
+ },
};
}
@@ -105,30 +118,76 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
-
-
+
+
-
+