feat: add overflow-indicator-top and oveflow-indicator-bottom variants (#10182)

Author: jouni

dev/scroller.html

@@ -31,9 +31,21 @@ <h2 class="heading">Standard variant</h2>
       <div class="content"></div>
     </vaadin-scroller>
 
-    <h2 class="heading">Overflow indicators variant</h2>
+    <h2 class="heading">Overflow Indicator Variants</h2>
+
+    <h3 class="heading">Top &amp; Bottom</h3>
     <vaadin-scroller theme="overflow-indicators">
       <div class="content"></div>
     </vaadin-scroller>
+
+    <h3 class="heading">Top Only</h3>
+    <vaadin-scroller theme="overflow-indicator-top">
+      <div class="content"></div>
+    </vaadin-scroller>
+
+    <h3 class="heading">Bottom Only</h3>
+    <vaadin-scroller theme="overflow-indicator-bottom">
+      <div class="content"></div>
+    </vaadin-scroller>
   </body>
 </html>

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

@@ -33,8 +33,8 @@ export const scrollerStyles = css`
     overflow: hidden;
   }
 
-  :host([theme~='overflow-indicators'])::before,
-  :host([theme~='overflow-indicators'])::after {
+  :host([theme*='overflow-indicator'])::before,
+  :host([theme*='overflow-indicator'])::after {
     content: '';
     display: none;
     position: sticky;
@@ -45,13 +45,15 @@ export const scrollerStyles = css`
     background: var(--vaadin-scroller-border-color, var(--vaadin-border-color-subtle));
   }
 
-  :host([theme~='overflow-indicators'])::after {
+  :host([theme*='overflow-indicator'])::after {
     margin-bottom: 0;
     margin-top: -1px;
   }
 
+  :host([theme~='overflow-indicator-top'][overflow~='top'])::before,
   :host([theme~='overflow-indicators'][overflow~='top'])::before,
-  :host([theme~='overflow-indicators'][overflow~='bottom'])::after {
+  :host([theme~='overflow-indicators'][overflow~='bottom'])::after,
+  :host([theme~='overflow-indicator-bottom'][overflow~='bottom'])::after {
     display: block;
   }
 `;

packages/scroller/test/visual/base/screenshots/scroller/baseline/theme-overflow-indicators-both.png

@@ -1,7 +1,6 @@
 import { sendKeys } from '@vaadin/test-runner-commands';
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../hide-scrollbar.js';
 import '../../../src/vaadin-scroller.js';
 
 describe('scroller', () => {
@@ -31,7 +30,7 @@ describe('scroller', () => {
   });
 
   it('theme-overflow-indicators-bottom', async () => {
-    element.setAttribute('theme', 'overflow-indicators');
+    element.setAttribute('theme', 'overflow-indicator-bottom');
     await visualDiff(div, 'theme-overflow-indicators-bottom');
   });
 
@@ -42,7 +41,7 @@ describe('scroller', () => {
   });
 
   it('theme-overflow-indicators-top', async () => {
-    element.setAttribute('theme', 'overflow-indicators');
+    element.setAttribute('theme', 'overflow-indicator-top');
     element.scrollTop = element.scrollHeight - element.clientHeight;
     await visualDiff(div, 'theme-overflow-indicators-top');
   });

packages/scroller/test/visual/base/screenshots/scroller/baseline/theme-overflow-indicators-bottom.png

@@ -4,7 +4,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-scroller',
   css`
-    :host([theme~='overflow-indicators'])::-webkit-scrollbar {
+    :host([theme*='overflow-indicator'])::-webkit-scrollbar {
       display: none;
     }
   `,