Skip to content

Commit 3ee1f26

Browse files
committed
refactor: use actual buttons in pager
BREAKING CHANGE: The pager component now uses buttons instead of anchors. We did this change to properly reflect the nature of those buttons, which have never been anchors in terms of behavior. This change affects custom themes. Please adjust them accordingly: ```scss // Before .datatable-pager li a { // styling } // After .datatable-pager .page-button { // Override default button styles border: 0; background none; // previous styling } ```
1 parent 34f5260 commit 3ee1f26

File tree

38 files changed

+153
-158
lines changed

38 files changed

+153
-158
lines changed

playwright/e2e/paging.spec.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Page } from '@playwright/test';
2+
23
import { expect, test } from '../support/test-helpers';
34

45
test.describe('paging', () => {
@@ -142,10 +143,10 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
142143
const pager = page.locator('datatable-pager');
143144
expect(pager).toBeTruthy();
144145

145-
const firstPageButton = page.getByLabel('go to first page').locator('..');
146-
const previousButton = page.getByLabel('go to previous page').locator('..');
147-
const nextButton = page.getByLabel('go to next page').locator('..');
148-
const lastButton = page.getByLabel('go to last page').locator('..');
146+
const firstPageButton = page.getByLabel('go to first page');
147+
const previousButton = page.getByLabel('go to previous page');
148+
const nextButton = page.getByLabel('go to next page');
149+
const lastButton = page.getByLabel('go to last page');
149150

150151
await page.waitForSelector('span[title="Ethel Price"]');
151152

@@ -155,11 +156,11 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
155156
await expect(page.getByRole('cell', { name: 'Ethel Price' })).toBeVisible();
156157
await expect(page.getByRole('cell', { name: 'Beryl Rice' })).toBeVisible();
157158

158-
await expect(firstPageButton).toHaveClass(/disabled/);
159-
await expect(previousButton).toHaveClass(/disabled/);
159+
await expect(firstPageButton).toBeDisabled();
160+
await expect(previousButton).toBeDisabled();
160161

161-
await expect(nextButton).not.toHaveClass(/disabled/);
162-
await expect(lastButton).not.toHaveClass(/disabled/);
162+
await expect(nextButton).not.toBeDisabled();
163+
await expect(lastButton).not.toBeDisabled();
163164

164165
await lastButton.click();
165166

@@ -168,11 +169,11 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
168169
await expect(page.getByRole('cell', { name: 'Ethel Price' })).not.toBeVisible();
169170
await expect(page.getByRole('cell', { name: 'Beryl Rice' })).not.toBeVisible();
170171

171-
await expect(firstPageButton).not.toHaveClass(/disabled/);
172-
await expect(previousButton).not.toHaveClass(/disabled/);
172+
await expect(firstPageButton).not.toBeDisabled();
173+
await expect(previousButton).not.toBeDisabled();
173174

174-
await expect(nextButton).toHaveClass(/disabled/);
175-
await expect(lastButton).toHaveClass(/disabled/);
175+
await expect(nextButton).toBeDisabled();
176+
await expect(lastButton).toBeDisabled();
176177

177178
await expect(page.getByRole('cell', { name: 'Humphrey Curtis' })).toBeVisible();
178179
await expect(page.getByRole('cell', { name: 'Christine Compton' })).toBeVisible();
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading

0 commit comments

Comments
 (0)