fix: set default max-width: 40ch on the tooltip overlay (#4833)

vaadin · Oct 25, 2022 · d1e16b4 · d1e16b4
1 parent 24762ee
commit d1e16b4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 deletions.
diff --git a/packages/tooltip/src/vaadin-tooltip-overlay.js b/packages/tooltip/src/vaadin-tooltip-overlay.js
@@ -10,6 +10,10 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-tooltip-overlay',
   css`
+    [part='overlay'] {
+      max-width: 40ch;
+    }
+
     :host([position^='top'][top-aligned]) [part='overlay'],
     :host([position^='bottom'][top-aligned]) [part='overlay'] {
       margin-top: var(--vaadin-tooltip-offset-top, 0);

diff --git a/packages/tooltip/test/visual/lumo/screenshots/tooltip/baseline/max-width.png b/packages/tooltip/test/visual/lumo/screenshots/tooltip/baseline/max-width.png
diff --git a/packages/tooltip/test/visual/lumo/tooltip.test.js b/packages/tooltip/test/visual/lumo/tooltip.test.js
@@ -44,9 +44,19 @@ describe('tooltip', () => {
       document.documentElement.setAttribute('theme', 'dark');
     });
 
+    after(() => {
+      document.documentElement.removeAttribute('theme');
+    });
+
     it('theme-dark', async () => {
       fire(target, 'mouseenter');
       await visualDiff(div, 'theme-dark');
     });
   });
+
+  it('max-width', async () => {
+    element.text = 'This is a tooltip with a long text (more than 40 chars), it should wrap in 2 lines for readability';
+    fire(target, 'mouseenter');
+    await visualDiff(div, 'max-width');
+  });
 });
diff --git a/packages/tooltip/test/visual/material/screenshots/tooltip/baseline/max-width.png b/packages/tooltip/test/visual/material/screenshots/tooltip/baseline/max-width.png
diff --git a/packages/tooltip/test/visual/material/tooltip.test.js b/packages/tooltip/test/visual/material/tooltip.test.js
@@ -47,9 +47,19 @@ describe('tooltip', () => {
       document.documentElement.setAttribute('theme', 'dark');
     });
 
+    after(() => {
+      document.documentElement.removeAttribute('theme');
+    });
+
     it('theme-dark', async () => {
       fire(target, 'mouseenter');
       await visualDiff(div, 'theme-dark');
     });
   });
+
+  it('max-width', async () => {
+    element.text = 'This is a tooltip with a long text (more than 40 chars), it should wrap in 2 lines for readability';
+    fire(target, 'mouseenter');
+    await visualDiff(div, 'max-width');
+  });
 });