feat: add no-padding theme variant to tabsheet (#7606)

vaadin · Aug 1, 2024 · 7296145 · 7296145
1 parent cdadcb5
commit 7296145
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 0 deletions.
diff --git a/dev/tabsheet.html b/dev/tabsheet.html
@@ -64,6 +64,7 @@
     <section style="margin-top: 40px">
       <vaadin-checkbox-group label="Tabsheet theme variants" id="variant-group" theme="vertical">
         <vaadin-checkbox label="bordered" value="bordered"></vaadin-checkbox>
+        <vaadin-checkbox label="no padding" value="no-padding"></vaadin-checkbox>
       </vaadin-checkbox-group>
 
       <vaadin-radio-group label="Direction" id="direction-group" value="ltr" theme="vertical">

diff --git a/...ages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/ltr-no-padding.png b/...ages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/ltr-no-padding.png
diff --git a/...ages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/rtl-no-padding.png b/...ages/tabsheet/test/visual/lumo/screenshots/tabsheet/baseline/rtl-no-padding.png
diff --git 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
@@ -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' });