fix: style and tests

sbb-design-systems · Aug 21, 2024 · fa32841 · fa32841
1 parent 71500f1
commit fa32841
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 28 deletions.
diff --git a/src/elements/paginator/paginator.scss b/src/elements/paginator/paginator.scss
@@ -9,7 +9,9 @@
   --sbb-paginator-height: var(--sbb-size-element-m);
   --sbb-paginator-page-color: var(--sbb-color-metal);
   --sbb-paginator-page-background-color: transparent;
-  --sbb-paginator-page-border: none;
+  --sbb-paginator-page-border-width: 0;
+  --sbb-paginator-page-border-style: none;
+  --sbb-paginator-page-border-color: none;
   --sbb-paginator-page-inset: 0;
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);
   --sbb-paginator-animation-duration: var(
@@ -69,10 +71,10 @@
     content: '';
     position: absolute;
     background-color: var(--sbb-paginator-page-background-color);
-    border: var(--sbb-paginator-page-border);
+    border: var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style)
+      var(--sbb-paginator-page-border-color);
     border-radius: var(--sbb-border-radius-infinity);
     inset: var(--sbb-paginator-page-inset);
-    z-index: -1;
     transition: {
       property: background-color, border;
       duration: var(--sbb-paginator-animation-duration);
@@ -107,11 +109,15 @@
     @include sbb.text-s--bold;
 
     --sbb-paginator-page-color: var(--sbb-color-charcoal);
-    --sbb-paginator-page-border: var(--sbb-border-width-2x) solid var(--sbb-color-charcoal);
+    --sbb-paginator-page-border-width: var(--sbb-border-width-2x);
+    --sbb-paginator-page-border-style: solid;
+    --sbb-paginator-page-border-color: var(--sbb-color-charcoal);
 
     :host([negative]) & {
       --sbb-paginator-page-color: var(--sbb-color-milk);
-      --sbb-paginator-page-border: var(--sbb-border-width-2x) solid var(--sbb-color-white);
+      --sbb-paginator-page-border-width: var(--sbb-border-width-2x);
+      --sbb-paginator-page-border-style: solid;
+      --sbb-paginator-page-border-color: var(--sbb-color-white);
     }
   }
 }
@@ -126,7 +132,9 @@
 }
 
 .sbb-paginator__page--number-item {
+  position: relative;
   outline: none !important;
+  z-index: 1;
 
   // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
   &:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {

diff --git a/src/elements/paginator/paginator.visual.spec.ts b/src/elements/paginator/paginator.visual.spec.ts
@@ -2,18 +2,23 @@ import { html, nothing } from 'lit';
 
 import {
   describeViewports,
+  visualDiffActive,
   visualDiffDefault,
-  visualDiffStandardStates,
+  visualDiffFocus,
+  visualDiffHover,
 } from '../core/testing/private.js';
 
 import './paginator.js';
 
 describe('sbb-paginator', () => {
   describeViewports({ viewports: ['small', 'medium'] }, () => {
     for (const negative of [false, true]) {
-      const wrapperStyle = { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined };
+      const wrapperStyle = {
+        backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+        focusOutlineDark: negative,
+      };
 
-      for (const state of visualDiffStandardStates) {
+      for (const state of [visualDiffDefault, visualDiffFocus]) {
         it(
           `${state.name} negative=${negative}`,
           state.with(async (setup) => {
@@ -24,20 +29,43 @@ describe('sbb-paginator', () => {
                 page-size="10"
                 pager-position="end"
               ></sbb-paginator>`,
-              { ...wrapperStyle, focusOutlineDark: negative },
+              wrapperStyle,
             );
-            const value = state.name === 'default' || state.name === 'focus' ? 0 : 2;
             setup.withStateElement(
               setup.snapshotElement
                 .querySelector('sbb-paginator')!
-                .shadowRoot!.querySelector(
-                  `.sbb-paginator__page--number-item[data-index="${value}"]`,
-                )!,
+                .shadowRoot!.querySelector(`.sbb-paginator__page--number-item[data-index="0"]`)!,
             );
           }),
         );
       }
 
+      for (const state of [visualDiffActive, visualDiffHover]) {
+        for (const selected of [false, true]) {
+          it(
+            `${state.name} negative=${negative} selected=${selected}`,
+            state.with(async (setup) => {
+              await setup.withFixture(
+                html` <sbb-paginator
+                  ?negative=${negative || nothing}
+                  length="50"
+                  page-size="10"
+                  pager-position="end"
+                ></sbb-paginator>`,
+                wrapperStyle,
+              );
+              setup.withStateElement(
+                setup.snapshotElement
+                  .querySelector('sbb-paginator')!
+                  .shadowRoot!.querySelector(
+                    `.sbb-paginator__page--number-item[data-index="${selected ? 0 : 2}"]`,
+                  )!,
+              );
+            }),
+          );
+        }
+      }
+
       for (const pageIndex of [0, 2, 5, 7, 9]) {
         it(
           `pageIndex=${pageIndex} negative=${negative}`,
@@ -69,21 +97,6 @@ describe('sbb-paginator', () => {
           );
         }),
       );
-
-      it(
-        `pagerPosition=end negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            html` <sbb-paginator
-              length="50"
-              page-size="4"
-              pager-position="end"
-              ?negative=${negative || nothing}
-            ></sbb-paginator>`,
-            wrapperStyle,
-          );
-        }),
-      );
     }
   });
 });