Skip to content

Commit dd2fa88

Browse files
stevenpersiacnairi
stevenpersia
authored and
cnairi
committed
feat: redesign pagination component (#3035)
* feat: redesign Pagination component * fix: remove unnecessary whitespace in next page button
1 parent 723264f commit dd2fa88

File tree

15 files changed

+482
-48
lines changed

15 files changed

+482
-48
lines changed

‎lib/src/components/Icon/Sprite.tsx‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎lib/src/components/Icon/icons.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const arrows = [
1111
'arrow-to-right',
1212
'top-arrow-to-top',
1313
'arrow-to-bottom',
14+
'angle-double-left',
15+
'angle-double-right',
16+
'angle-left',
17+
'angle-right',
1418
] as const
1519

1620
export const actions = [

‎lib/src/components/Pagination/docs/examples/custom-texts.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useState } from 'react'
2+
3+
import { Pagination } from '@/components/Pagination'
4+
import type { PaginationProps } from '@/components/Pagination/types'
5+
6+
const Example = () => {
7+
const [page, setPage] = useState<PaginationProps['page']>(1)
8+
9+
return (
10+
<Pagination
11+
aria-label="Pagination with custom texts"
12+
navigationTexts={{
13+
firstPage: 'First',
14+
lastPage: 'Last',
15+
nextPage: 'Next',
16+
previousPage: 'Previous',
17+
}}
18+
onChange={page => setPage(Number(page))}
19+
page={page}
20+
pageCount={5}
21+
showEdgeControls
22+
/>
23+
)
24+
}
25+
26+
export default Example

‎lib/src/components/Pagination/docs/examples/first-last.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useState } from 'react'
2+
3+
import { Pagination } from '@/components/Pagination'
4+
import type { PaginationProps } from '@/components/Pagination/types'
5+
6+
const Example = () => {
7+
const [page, setPage] = useState<PaginationProps['page']>(5)
8+
9+
return (
10+
<Pagination
11+
aria-label="First Last Pagination"
12+
buttonFirstProps={{ title: 'Go to first page' }}
13+
buttonLastProps={{ title: 'Go to last page' }}
14+
onChange={page => setPage(Number(page))}
15+
page={page}
16+
pageCount={20}
17+
showEdgeControls={true}
18+
/>
19+
)
20+
}
21+
22+
export default Example

‎lib/src/components/Pagination/docs/examples/overview.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import * as React from 'react'
1+
import { useState } from 'react'
22

33
import { Pagination } from '@/components/Pagination'
44
import type { PaginationProps } from '@/components/Pagination/types'
55

66
const Example = () => {
7-
const [page, setPage] = React.useState<PaginationProps['page']>(8)
7+
const [page, setPage] = useState<PaginationProps['page']>(8)
88

99
return (
1010
<Pagination
1111
aria-label="Example Pagination"
12-
dataTestId="pagination"
1312
getHref={page => `?page=${page}`}
1413
onChange={page => setPage(Number(page))}
1514
page={page}

‎lib/src/components/Pagination/docs/examples/range.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import * as React from 'react'
1+
import { useState } from 'react'
22

33
import { Pagination } from '@/components/Pagination'
44
import type { PaginationProps } from '@/components/Pagination/types'
55

66
const Example = () => {
7-
const [page, setPage] = React.useState<PaginationProps['page']>(8)
7+
const [page, setPage] = useState<PaginationProps['page']>(8)
88

99
return (
1010
<Pagination
1111
aria-label="Range Pagination"
12-
getHref={page => `?page=${page}`}
1312
onChange={page => setPage(Number(page))}
1413
page={page}
1514
pageCount={10}

‎lib/src/components/Pagination/docs/examples/size.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useState } from 'react'
2+
3+
import { Pagination } from '@/components/Pagination'
4+
import type { PaginationProps } from '@/components/Pagination/types'
5+
6+
const Example = () => {
7+
const [page, setPage] = useState<PaginationProps['page']>(3)
8+
9+
return (
10+
<Pagination
11+
aria-label="Medium Size Pagination"
12+
onChange={page => setPage(Number(page))}
13+
page={page}
14+
pageCount={10}
15+
size="md"
16+
/>
17+
)
18+
}
19+
20+
export default Example

‎lib/src/components/Pagination/docs/index.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,21 @@ title: Pagination
1010
When your range display is above your pageCount, all the pages are shown.<br />Change range with `rangeDisplay`, by default it is `5`.
1111

1212
<div data-playground="range.tsx" data-component="Pagination"></div>
13+
14+
### First and Last buttons
15+
16+
You can optionally display First and Last buttons by setting `showEdgeControls` to `true`. These buttons allow users to quickly jump to the first or last page, which is especially useful for large datasets with many pages.
17+
18+
<div data-playground="first-last.tsx" data-component="Pagination"></div>
19+
20+
### Size
21+
22+
The Pagination component supports two different sizes: `md` and `lg` (default). Use the `size` prop to control the overall size of the pagination controls.
23+
24+
<div data-playground="size.tsx" data-component="Pagination"></div>
25+
26+
### Custom texts
27+
28+
You can customize the text displayed on all navigation buttons using the `navigationTexts` prop.
29+
30+
<div data-playground="custom-texts.tsx" data-component="Pagination"></div>

‎lib/src/components/Pagination/docs/properties.json‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,44 @@
11
{
22
"Pagination": {
33
"props": {
4+
"buttonFirstProps": {
5+
"defaultValue": null,
6+
"description": "",
7+
"name": "buttonFirstProps",
8+
"parent": {
9+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
10+
"name": "PaginationOptions"
11+
},
12+
"declarations": [
13+
{
14+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
15+
"name": "PaginationOptions"
16+
}
17+
],
18+
"required": false,
19+
"type": {
20+
"name": "ButtonHTMLAttributes<HTMLButtonElement>"
21+
}
22+
},
23+
"buttonLastProps": {
24+
"defaultValue": null,
25+
"description": "",
26+
"name": "buttonLastProps",
27+
"parent": {
28+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
29+
"name": "PaginationOptions"
30+
},
31+
"declarations": [
32+
{
33+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
34+
"name": "PaginationOptions"
35+
}
36+
],
37+
"required": false,
38+
"type": {
39+
"name": "ButtonHTMLAttributes<HTMLButtonElement>"
40+
}
41+
},
442
"buttonNextProps": {
543
"defaultValue": null,
644
"description": "",
@@ -96,6 +134,25 @@
96134
"name": "OlHTMLAttributes<HTMLOListElement>"
97135
}
98136
},
137+
"navigationTexts": {
138+
"defaultValue": null,
139+
"description": "",
140+
"name": "navigationTexts",
141+
"parent": {
142+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
143+
"name": "PaginationOptions"
144+
},
145+
"declarations": [
146+
{
147+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
148+
"name": "PaginationOptions"
149+
}
150+
],
151+
"required": false,
152+
"type": {
153+
"name": "NavigationTexts"
154+
}
155+
},
99156
"onChange": {
100157
"defaultValue": null,
101158
"description": "",
@@ -173,6 +230,66 @@
173230
"type": {
174231
"name": "number"
175232
}
233+
},
234+
"showEdgeControls": {
235+
"defaultValue": {
236+
"value": false
237+
},
238+
"description": "",
239+
"name": "showEdgeControls",
240+
"parent": {
241+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
242+
"name": "PaginationOptions"
243+
},
244+
"declarations": [
245+
{
246+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
247+
"name": "PaginationOptions"
248+
}
249+
],
250+
"required": false,
251+
"type": {
252+
"name": "enum",
253+
"raw": "boolean",
254+
"value": [
255+
{
256+
"value": "false"
257+
},
258+
{
259+
"value": "true"
260+
}
261+
]
262+
}
263+
},
264+
"size": {
265+
"defaultValue": {
266+
"value": "lg"
267+
},
268+
"description": "",
269+
"name": "size",
270+
"parent": {
271+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
272+
"name": "PaginationOptions"
273+
},
274+
"declarations": [
275+
{
276+
"fileName": "welcome-ui/lib/src/components/Pagination/types.ts",
277+
"name": "PaginationOptions"
278+
}
279+
],
280+
"required": false,
281+
"type": {
282+
"name": "enum",
283+
"raw": "\"lg\" | \"md\"",
284+
"value": [
285+
{
286+
"value": "\"lg\""
287+
},
288+
{
289+
"value": "\"md\""
290+
}
291+
]
292+
}
176293
}
177294
}
178295
}

0 commit comments

Comments
 (0)