diff --git a/dev/tabsheet.html b/dev/tabsheet.html index 66cd4449ed..749d44da24 100644 --- a/dev/tabsheet.html +++ b/dev/tabsheet.html @@ -64,6 +64,7 @@
+ diff --git a/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/ltr-no-padding.png b/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/ltr-no-padding.png new file mode 100644 index 0000000000..c94d1d5dae Binary files /dev/null and b/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/ltr-no-padding.png differ diff --git a/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/rtl-no-padding.png b/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/rtl-no-padding.png new file mode 100644 index 0000000000..0ba616f6aa Binary files /dev/null and b/packages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/rtl-no-padding.png differ diff --git a/packages/tabsheet/test/visual/lumo/tabsheet.test.js b/packages/tabsheet/test/visual/lumo/tabsheet.test.js index eeca37b717..624cc485b6 100644 --- a/packages/tabsheet/test/visual/lumo/tabsheet.test.js +++ b/packages/tabsheet/test/visual/lumo/tabsheet.test.js @@ -59,6 +59,12 @@ describe('tabsheet', () => { element.setAttribute('theme', 'bordered'); await visualDiff(div, `${dir}-bordered`); }); + + // prettier-ignore + it('no-padding', async () => { // NOSONAR + element.setAttribute('theme', 'no-padding'); + await visualDiff(div, `${dir}-no-padding`); + }); }); }); }); diff --git a/packages/tabsheet/theme/lumo/vaadin-tabsheet-styles.js b/packages/tabsheet/theme/lumo/vaadin-tabsheet-styles.js index 3a30ab58b0..0534498e71 100644 --- a/packages/tabsheet/theme/lumo/vaadin-tabsheet-styles.js +++ b/packages/tabsheet/theme/lumo/vaadin-tabsheet-styles.js @@ -38,6 +38,10 @@ const tabsheet = css` align-items: center; justify-content: center; } + + :host([theme~='no-padding']) [part='content'] { + padding: 0; + } `; registerStyles('vaadin-tabsheet', [tabsheet, loader], { moduleId: 'lumo-tabsheet' });