feat(design): deprecate theming option for paginators and update styl…

…es to work in both dark and light mode (#2575)
graycoreio · Sep 27, 2023 · ec50bcb · ec50bcb
1 parent 68aeffc
commit ec50bcb
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 30 deletions.
diff --git a/libs/design/src/molecules/paginator/paginator-theme.scss b/libs/design/src/molecules/paginator/paginator-theme.scss
@@ -7,8 +7,11 @@
 
 	&:hover,
 	&.selected { /* stylelint-disable-line selector-class-pattern */
-		background: $active-color;
 		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background: $active-color;
+		}
 	}
 }
 
@@ -20,11 +23,26 @@
 	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$white: core.daff-map-deep-get($theme, 'core.white');
 	$black: core.daff-map-deep-get($theme, 'core.black');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$font-color: core.daff-map-deep-get($theme, 'core.font-color');
 
 	.daff-paginator {
 		&__previous,
 		&__next {
-			color: currentColor;
+			color: $font-color;
+		}
+
+		&__page-link {
+			color: $font-color;
+
+			&:hover,
+			&.selected {
+				color: daff-text-contrast(theming.daff-illuminate($base, $gray, 2));
+
+				&:after {
+					background: theming.daff-illuminate($base, $gray, 2);
+				}
+			}
 		}
 
 		&.daff-primary {

diff --git a/libs/design/src/molecules/paginator/paginator.component.html b/libs/design/src/molecules/paginator/paginator.component.html
@@ -3,15 +3,15 @@
   tabindex="0"
   attr.aria-label="Go to Previous Page of {{_paginatorId}} Paginator"
   (click)="_onNotifyPrevPageChange()">
-  <fa-icon [icon]="faChevronLeft"></fa-icon> Previous
+  <fa-icon [icon]="faChevronLeft" size="sm"></fa-icon> Previous
 </button>
 
 <button type="button" class="daff-paginator__page-link"
   [class.selected]="_isSelected(1)"
   tabindex="0"
   attr.aria-label="Go to Page 1 of {{_paginatorId}} Paginator"
   (click)="_onNotifyPageChange(1)">
-  1
+  <span>1</span>
 </button>
 
 <span class="daff-paginator__ellipsis" *ngIf="_showFirstEllipsis()">...</span>
@@ -24,7 +24,7 @@
     aria-current="_isSelected(pageNumber)"
     *ngIf="_showNumber(pageNumber)"
     (click)="_onNotifyPageChange(pageNumber)">
-    {{ pageNumber }}
+    <span>{{ pageNumber }}</span>
   </button>
 </ng-container>
 
@@ -36,13 +36,13 @@
   attr.aria-label="Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator"
   (click)="_onNotifyPageChange(numberOfPages)"
   *ngIf="!(numberOfPages < 2)">
-  {{ numberOfPages }}
+  <span>{{ numberOfPages }}</span>
 </button>
 
 <button class="daff-paginator__next"
   [disabled]="_disableNext()"
   tabindex="0"
   attr.aria-label="Go to Next Page of {{_paginatorId}} Paginator"
   (click)="_onNotifyNextPageChange()">
-  Next <fa-icon [icon]="faChevronRight"></fa-icon>
+  Next <fa-icon [icon]="faChevronRight" size="sm"></fa-icon>
 </button>
diff --git a/libs/design/src/molecules/paginator/paginator.component.scss b/libs/design/src/molecules/paginator/paginator.component.scss
@@ -1,48 +1,74 @@
 @use '../../../scss/interactions';
 
+$border-radius: 3px;
+
 :host {
 	display: flex;
+	gap: 4px;
 }
 
 .daff-paginator {
 	&__previous,
 	&__next {
 		@include interactions.clickable;
+		display: flex;
 		align-items: center;
+		gap: 8px;
 		appearance: none;
 		background: transparent;
 		border: 0;
-		border-radius: 3px;
-		display: flex;
-		line-height: 1em;
-		padding: 5px 10px;
-	}
+		border-radius: $border-radius;
+		height: 2rem;
+		padding: 0 8px;
 
-	&__previous {
-		fa-icon {
-			margin-right: 10px;
-		}
-	}
-
-	&__next {
-		fa-icon {
-			margin-left: 10px;
+		&[disabled] {
+			cursor: not-allowed;
+			opacity: 0.5;
 		}
 	}
 
 	&__ellipsis {
-		padding: 5px 10px;
+		height: 2rem;
+		width: 2rem;
+		text-align: center
 	}
 
 	&__page-link {
 		@include interactions.clickable;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		appearance: none;
-		background-color: transparent;
+		background: none;
 		border: 0;
-		border-radius: 3px;
-		display: inline-block;
-		margin: 0 5px;
-		padding: 5px 10px;
-		transition: background-color 150ms ease;
+		border-radius: $border-radius;
+		min-width: 2rem;
+		height: 2rem;
+		padding: 0 4px;
+		position: relative;
+
+		span {
+			z-index: 2;
+		}
+
+		&:after {
+			content: '';
+			border-radius: $border-radius;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+		}
+
+		&:hover,
+		&:active,
+		&.selected {
+			&:after {
+				opacity: 1;
+			}
+		}
 	}
 }
diff --git a/libs/design/src/molecules/paginator/paginator.component.ts b/libs/design/src/molecules/paginator/paginator.component.ts
@@ -8,7 +8,6 @@ import {
   OnChanges,
   ChangeDetectionStrategy,
   Renderer2,
-  OnInit,
 } from '@angular/core';
 import {
   faChevronRight,
@@ -17,7 +16,6 @@ import {
 
 import {
   daffColorMixin,
-  DaffPalette,
   DaffColorable,
 } from '../../core/colorable/public_api';
 import {
@@ -32,6 +30,9 @@ class DaffPaginatorBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
+/**
+ * @deprecated in v1.0.0
+ */
 const _daffPaginatorBase = daffColorMixin(DaffPaginatorBase);
 
 const visiblePageRange = 2;