refactor: update scroller and virtual-list overflow-indicators (#10433)

Author: jouni

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

@@ -8,9 +8,18 @@ import { css } from 'lit';
 
 export const scrollerStyles = css`
   :host {
+    --_indicator-height: var(--vaadin-scroller-overflow-indicator-height, 1px);
+    /* Don't let these properties inherit */
+    --vaadin-scroller-padding-block: 0px;
+    --vaadin-scroller-padding-inline: 0px;
+    --vaadin-scroller-overflow-indicator-top-opacity: 0;
+    --vaadin-scroller-overflow-indicator-bottom-opacity: 0;
     display: block;
     overflow: auto;
     outline: none;
+    flex: 1;
+    box-sizing: border-box;
+    padding: 0 var(--vaadin-scroller-padding-inline);
   }
 
   :host([focus-ring]) {
@@ -33,27 +42,44 @@ export const scrollerStyles = css`
     overflow: hidden;
   }
 
-  :host([theme*='overflow-indicator'])::before,
-  :host([theme*='overflow-indicator'])::after {
+  :host::before,
+  :host::after {
     content: '';
-    display: none;
+    display: block;
+    opacity: 0;
     position: sticky;
-    inset: 0;
+    inset: 0 calc(var(--vaadin-scroller-padding-inline) * -1);
     z-index: 9999;
-    height: 1px;
-    margin-bottom: -1px;
-    background: var(--vaadin-scroller-border-color, var(--vaadin-border-color-secondary));
+    pointer-events: none;
+    box-sizing: border-box;
+    height: var(--_indicator-height);
+    margin-inline: calc(var(--vaadin-scroller-padding-inline) * -1);
+    background: var(--vaadin-border-color-secondary);
   }
 
-  :host([theme*='overflow-indicator'])::after {
-    margin-bottom: 0;
-    margin-top: -1px;
+  :host::before {
+    margin-bottom: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
   }
 
-  :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-indicator-bottom'][overflow~='bottom'])::after {
-    display: block;
+  :host::after {
+    margin-top: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
+  }
+
+  :host([overflow~='top'])::before {
+    opacity: var(--vaadin-scroller-overflow-indicator-top-opacity);
+  }
+
+  :host([overflow~='bottom'])::after {
+    opacity: var(--vaadin-scroller-overflow-indicator-bottom-opacity);
+  }
+
+  :host([theme~='overflow-indicator-top'][overflow~='top']),
+  :host([theme~='overflow-indicators'][overflow~='top']) {
+    --vaadin-scroller-overflow-indicator-top-opacity: 1;
+  }
+
+  :host([theme~='overflow-indicators'][overflow~='bottom']),
+  :host([theme~='overflow-indicator-bottom'][overflow~='bottom']) {
+    --vaadin-scroller-overflow-indicator-bottom-opacity: 1;
   }
 `;

packages/scroller/src/vaadin-scroller.d.ts

@@ -16,13 +16,36 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
  * </vaadin-scroller>
  * ```
  *
- * The following attributes are exposed for styling:
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
  *
  * Attribute    | Description
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
+ *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-scroller>` supports the following theme variants:
+ *
+ * Theme variant                            | Description
+ * -----------------------------------------|---------------
+ * `theme="overflow-indicators"`            | Shows visual indicators at the top and bottom when the content is scrolled
+ * `theme="overflow-indicator-top"`         | Shows the visual indicator at the top when the content is scrolled
+ * `theme="overflow-indicator-top-bottom"`  | Shows the visual indicator at the bottom when the content is scrolled
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                | Description
+ * -----------------------------------|-------------
+ * `--vaadin-scroller-padding-block`  | The CSS padding applied to top and bottom edges
+ * `--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class Scroller extends ScrollerMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 

packages/scroller/src/vaadin-scroller.js

@@ -22,14 +22,37 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
  * </vaadin-scroller>
  * ```
  *
- * The following attributes are exposed for styling:
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
  *
  * Attribute    | Description
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-scroller>` supports the following theme variants:
+ *
+ * Theme variant                            | Description
+ * -----------------------------------------|---------------
+ * `theme="overflow-indicators"`            | Shows visual indicators at the top and bottom when the content is scrolled
+ * `theme="overflow-indicator-top"`         | Shows the visual indicator at the top when the content is scrolled
+ * `theme="overflow-indicator-top-bottom"`  | Shows the visual indicator at the bottom when the content is scrolled
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                | Description
+ * -----------------------------------|-------------
+ * `--vaadin-scroller-padding-block`  | The CSS padding applied to top and bottom edges
+ * `--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin

packages/scroller/test/visual/lumo/screenshots/scroller/baseline/default.png

@@ -46,9 +46,9 @@ export const tabSheetStyles = [
       position: relative;
       flex: 1;
       box-sizing: border-box;
-      padding: var(--vaadin-tabsheet-padding, var(--vaadin-padding-l));
-      border-top: var(--vaadin-tabsheet-border-width, 1px) solid transparent;
-      margin-top: calc(var(--vaadin-tabsheet-border-width, 1px) * -1);
+      --vaadin-scroller-padding-block: var(--vaadin-tabsheet-padding, var(--vaadin-padding-m));
+      --vaadin-scroller-padding-inline: var(--vaadin-tabsheet-padding, var(--vaadin-padding-m));
+      --vaadin-scroller-overflow-indicator-top-opacity: 1;
     }
 
     [part='content'][focus-ring] {
@@ -57,14 +57,12 @@ export const tabSheetStyles = [
       outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
     }
 
-    [part='content'][overflow~='top'] {
-      border-top-color: var(--vaadin-tabsheet-border-color, var(--vaadin-border-color-secondary));
+    :host([loading]) [part='content'] {
+      align-content: center;
     }
 
-    :host([loading]) [part='content'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    [part='loader'] {
+      margin: auto;
     }
 
     :host([theme~='no-border']) {
@@ -74,6 +72,8 @@ export const tabSheetStyles = [
 
     :host([theme~='no-padding']) [part='content'] {
       padding: 0 !important;
+      --vaadin-scroller-padding-block: 0px !important;
+      --vaadin-scroller-padding-inline: 0px !important;
     }
   `,
 ];