fix: enforce zero padding on tabsheet no-padding theme variant (#9846)

Author: web-padawan

packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js

@@ -69,7 +69,7 @@ export const tabSheetStyles = [
     }
 
     :host([theme~='no-padding']) [part='content'] {
-      padding: 0;
+      padding: 0 !important;
     }
   `,
 ];

packages/tabsheet/test/visual/base/tabsheet.test.js

@@ -50,11 +50,6 @@ describe('tabsheet', () => {
     await visualDiff(div, 'no-border');
   });
 
-  it('no-padding', async () => {
-    element.setAttribute('theme', 'no-padding');
-    await visualDiff(div, 'no-padding');
-  });
-
   it('overflow-top', async () => {
     element.style.setProperty('height', '100px');
     element.shadowRoot.querySelector('[part="content"]').scrollBy(0, 40);
@@ -78,6 +73,24 @@ describe('tabsheet', () => {
     await visualDiff(div, 'loading');
   });
 
+  describe('no-padding', () => {
+    before(() => {
+      const contentStyles = new CSSStyleSheet();
+      contentStyles.insertRule('vaadin-tabsheet::part(content) { padding: 20px; }');
+      document.adoptedStyleSheets = [contentStyles];
+    });
+
+    after(() => {
+      document.adoptedStyleSheets = [];
+    });
+
+    it('no-padding', async () => {
+      element.setAttribute('theme', 'no-padding');
+      await nextRender();
+      await visualDiff(div, 'no-padding');
+    });
+  });
+
   ['ltr', 'rtl'].forEach((dir) => {
     describe(dir, () => {
       before(() => {
@@ -88,10 +101,8 @@ describe('tabsheet', () => {
         document.documentElement.removeAttribute('dir');
       });
 
-      describe(`${dir}`, () => {
-        it('default', async () => {
-          await visualDiff(div, `${dir}-default`);
-        });
+      it('default', async () => {
+        await visualDiff(div, `${dir}-default`);
       });
     });
   });

packages/tabsheet/test/visual/lumo/tabsheet.test.js

@@ -56,18 +56,27 @@ describe('tabsheet', () => {
         document.documentElement.removeAttribute('dir');
       });
 
-      describe(`${dir}`, () => {
-        it('default', async () => {
-          await visualDiff(div, `${dir}-default`);
+      it('default', async () => {
+        await visualDiff(div, `${dir}-default`);
+      });
+
+      it('bordered', async () => {
+        element.setAttribute('theme', 'bordered');
+        await visualDiff(div, `${dir}-bordered`);
+      });
+
+      describe('no-padding', () => {
+        before(() => {
+          const contentStyles = new CSSStyleSheet();
+          contentStyles.insertRule('vaadin-tabsheet::part(content) { padding: 20px; }');
+          document.adoptedStyleSheets = [contentStyles];
         });
 
-        it('bordered', async () => {
-          element.setAttribute('theme', 'bordered');
-          await visualDiff(div, `${dir}-bordered`);
+        after(() => {
+          document.adoptedStyleSheets = [];
         });
 
-        // prettier-ignore
-        it('no-padding', async () => { // NOSONAR
+        it('no-padding', async () => {
           element.setAttribute('theme', 'no-padding');
           await visualDiff(div, `${dir}-no-padding`);
         });

packages/tabsheet/theme/lumo/vaadin-tabsheet-styles.js

@@ -40,7 +40,7 @@ const tabsheet = css`
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 `;
 

packages/vaadin-lumo-styles/src/components/tabsheet.css

@@ -54,6 +54,6 @@
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 }