A design system in a box.
hip-ui.tngl.io/docs/introduction
pagination a11y
+174
-132
+87
-66
apps/docs/src/components/pagination/index.tsx
+87
-66
apps/docs/src/components/pagination/index.tsx
···
14
14
import { SizeContext } from "../context";
15
15
import { Flex } from "../flex";
16
16
import { IconButton } from "../icon-button";
17
+
import { spacing } from "../theme/spacing.stylex";
17
18
import { Size, StyleXComponentProps } from "../theme/types";
18
19
19
20
const styles = stylex.create({
20
-
wrapper: {
21
+
list: {
22
+
alignItems: "center",
21
23
containerType: "inline-size",
24
+
display: "flex",
25
+
gap: spacing["4"],
22
26
},
23
27
pages: {
24
28
flexGrow: 1,
29
+
},
30
+
listItem: {
31
+
listStyleType: "none",
25
32
},
26
33
mobileButton: {
27
34
display: {
···
85
92
const visiblePages = sliceRange(page, totalPages, maxVisiblePages);
86
93
87
94
return (
88
-
<Flex {...props} style={[styles.wrapper, style]} align="center" gap="4">
89
-
<IconButton
90
-
style={styles.mobileButton as unknown as stylex.StyleXStyles}
91
-
size={size}
92
-
label="Previous page"
93
-
isDisabled={page === 1}
94
-
onClick={() => setPage(page - 1)}
95
-
variant="tertiary"
96
-
>
97
-
<ChevronLeft />
98
-
</IconButton>
99
-
<Button
100
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
101
-
variant="tertiary"
102
-
size={size}
103
-
isDisabled={page === 1}
104
-
onClick={() => setPage(page - 1)}
105
-
>
106
-
<ArrowLeft />
107
-
Previous
108
-
</Button>
109
-
<Flex align="center" justify="center" gap="1" style={styles.pages}>
110
-
{visiblePages[0] !== 1 && (
95
+
<nav {...props} {...stylex.props(style)}>
96
+
<ul {...stylex.props(styles.list)}>
97
+
<li {...stylex.props(styles.listItem, styles.mobileButton)}>
98
+
<IconButton
99
+
size={size}
100
+
label="Previous page"
101
+
isDisabled={page === 1}
102
+
onClick={() => setPage(page - 1)}
103
+
variant="tertiary"
104
+
>
105
+
<ChevronLeft />
106
+
</IconButton>
107
+
</li>
108
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
111
109
<Button
112
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
113
110
variant="tertiary"
114
111
size={size}
115
-
onClick={() => setPage(page - maxVisiblePages)}
112
+
isDisabled={page === 1}
113
+
onClick={() => setPage(page - 1)}
116
114
>
117
-
<Ellipsis />
115
+
<ArrowLeft />
116
+
Previous
118
117
</Button>
119
-
)}
120
-
{visiblePages.map((visiblePage) => (
121
-
<Button
122
-
variant={page === visiblePage ? "outline" : "tertiary"}
118
+
</li>
119
+
<li {...stylex.props(styles.listItem, styles.pages)}>
120
+
<ul>
121
+
<Flex align="center" justify="center" gap="1">
122
+
{visiblePages[0] !== 1 && (
123
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
124
+
<Button
125
+
variant="tertiary"
126
+
size={size}
127
+
onClick={() => setPage(page - maxVisiblePages)}
128
+
>
129
+
<Ellipsis />
130
+
</Button>
131
+
</li>
132
+
)}
133
+
{visiblePages.map((visiblePage) => (
134
+
<li key={visiblePage} {...stylex.props(styles.listItem)}>
135
+
<Button
136
+
variant={page === visiblePage ? "outline" : "tertiary"}
137
+
aria-current={page === visiblePage ? "page" : undefined}
138
+
size={size}
139
+
onClick={() => setPage(visiblePage)}
140
+
>
141
+
{visiblePage}
142
+
</Button>
143
+
</li>
144
+
))}
145
+
{visiblePages.at(-1) !== totalPages && (
146
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
147
+
<IconButton
148
+
label="More pages"
149
+
variant="tertiary"
150
+
size={size}
151
+
onClick={() => setPage(page + maxVisiblePages)}
152
+
>
153
+
<Ellipsis />
154
+
</IconButton>
155
+
</li>
156
+
)}
157
+
</Flex>
158
+
</ul>
159
+
</li>
160
+
<li {...stylex.props(styles.listItem, styles.mobileButton)}>
161
+
<IconButton
123
162
size={size}
124
-
key={visiblePage}
125
-
onClick={() => setPage(visiblePage)}
163
+
label="Next page"
164
+
isDisabled={page === totalPages}
165
+
onClick={() => setPage(page + 1)}
166
+
variant="tertiary"
126
167
>
127
-
{visiblePage}
128
-
</Button>
129
-
))}
130
-
{visiblePages.at(-1) !== totalPages && (
131
-
<IconButton
132
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
133
-
label="More pages"
168
+
<ChevronRight />
169
+
</IconButton>
170
+
</li>
171
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
172
+
<Button
134
173
variant="tertiary"
135
174
size={size}
136
-
onClick={() => setPage(page + maxVisiblePages)}
175
+
isDisabled={page === totalPages}
176
+
onClick={() => setPage(page + 1)}
137
177
>
138
-
<Ellipsis />
139
-
</IconButton>
140
-
)}
141
-
</Flex>
142
-
<IconButton
143
-
style={styles.mobileButton as unknown as stylex.StyleXStyles}
144
-
size={size}
145
-
label="Next page"
146
-
isDisabled={page === totalPages}
147
-
onClick={() => setPage(page + 1)}
148
-
variant="tertiary"
149
-
>
150
-
<ChevronRight />
151
-
</IconButton>
152
-
<Button
153
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
154
-
variant="tertiary"
155
-
size={size}
156
-
isDisabled={page === totalPages}
157
-
onClick={() => setPage(page + 1)}
158
-
>
159
-
Next
160
-
<ArrowRight />
161
-
</Button>
162
-
</Flex>
178
+
Next
179
+
<ArrowRight />
180
+
</Button>
181
+
</li>
182
+
</ul>
183
+
</nav>
163
184
);
164
185
}
+87
-66
packages/hip-ui/src/components/pagination/index.tsx
+87
-66
packages/hip-ui/src/components/pagination/index.tsx
···
14
14
import { SizeContext } from "../context";
15
15
import { Flex } from "../flex";
16
16
import { IconButton } from "../icon-button";
17
+
import { spacing } from "../theme/spacing.stylex";
17
18
import { Size, StyleXComponentProps } from "../theme/types";
18
19
19
20
const styles = stylex.create({
20
-
wrapper: {
21
+
list: {
22
+
alignItems: "center",
21
23
containerType: "inline-size",
24
+
display: "flex",
25
+
gap: spacing["4"],
22
26
},
23
27
pages: {
24
28
flexGrow: 1,
29
+
},
30
+
listItem: {
31
+
listStyleType: "none",
25
32
},
26
33
mobileButton: {
27
34
display: {
···
85
92
const visiblePages = sliceRange(page, totalPages, maxVisiblePages);
86
93
87
94
return (
88
-
<Flex {...props} style={[styles.wrapper, style]} align="center" gap="4">
89
-
<IconButton
90
-
style={styles.mobileButton as unknown as stylex.StyleXStyles}
91
-
size={size}
92
-
label="Previous page"
93
-
isDisabled={page === 1}
94
-
onClick={() => setPage(page - 1)}
95
-
variant="tertiary"
96
-
>
97
-
<ChevronLeft />
98
-
</IconButton>
99
-
<Button
100
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
101
-
variant="tertiary"
102
-
size={size}
103
-
isDisabled={page === 1}
104
-
onClick={() => setPage(page - 1)}
105
-
>
106
-
<ArrowLeft />
107
-
Previous
108
-
</Button>
109
-
<Flex align="center" justify="center" gap="1" style={styles.pages}>
110
-
{visiblePages[0] !== 1 && (
95
+
<nav {...props} {...stylex.props(style)}>
96
+
<ul {...stylex.props(styles.list)}>
97
+
<li {...stylex.props(styles.listItem, styles.mobileButton)}>
98
+
<IconButton
99
+
size={size}
100
+
label="Previous page"
101
+
isDisabled={page === 1}
102
+
onClick={() => setPage(page - 1)}
103
+
variant="tertiary"
104
+
>
105
+
<ChevronLeft />
106
+
</IconButton>
107
+
</li>
108
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
111
109
<Button
112
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
113
110
variant="tertiary"
114
111
size={size}
115
-
onClick={() => setPage(page - maxVisiblePages)}
112
+
isDisabled={page === 1}
113
+
onClick={() => setPage(page - 1)}
116
114
>
117
-
<Ellipsis />
115
+
<ArrowLeft />
116
+
Previous
118
117
</Button>
119
-
)}
120
-
{visiblePages.map((visiblePage) => (
121
-
<Button
122
-
variant={page === visiblePage ? "outline" : "tertiary"}
118
+
</li>
119
+
<li {...stylex.props(styles.listItem, styles.pages)}>
120
+
<ul>
121
+
<Flex align="center" justify="center" gap="1">
122
+
{visiblePages[0] !== 1 && (
123
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
124
+
<Button
125
+
variant="tertiary"
126
+
size={size}
127
+
onClick={() => setPage(page - maxVisiblePages)}
128
+
>
129
+
<Ellipsis />
130
+
</Button>
131
+
</li>
132
+
)}
133
+
{visiblePages.map((visiblePage) => (
134
+
<li key={visiblePage} {...stylex.props(styles.listItem)}>
135
+
<Button
136
+
variant={page === visiblePage ? "outline" : "tertiary"}
137
+
aria-current={page === visiblePage ? "page" : undefined}
138
+
size={size}
139
+
onClick={() => setPage(visiblePage)}
140
+
>
141
+
{visiblePage}
142
+
</Button>
143
+
</li>
144
+
))}
145
+
{visiblePages.at(-1) !== totalPages && (
146
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
147
+
<IconButton
148
+
label="More pages"
149
+
variant="tertiary"
150
+
size={size}
151
+
onClick={() => setPage(page + maxVisiblePages)}
152
+
>
153
+
<Ellipsis />
154
+
</IconButton>
155
+
</li>
156
+
)}
157
+
</Flex>
158
+
</ul>
159
+
</li>
160
+
<li {...stylex.props(styles.listItem, styles.mobileButton)}>
161
+
<IconButton
123
162
size={size}
124
-
key={visiblePage}
125
-
onClick={() => setPage(visiblePage)}
163
+
label="Next page"
164
+
isDisabled={page === totalPages}
165
+
onClick={() => setPage(page + 1)}
166
+
variant="tertiary"
126
167
>
127
-
{visiblePage}
128
-
</Button>
129
-
))}
130
-
{visiblePages.at(-1) !== totalPages && (
131
-
<IconButton
132
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
133
-
label="More pages"
168
+
<ChevronRight />
169
+
</IconButton>
170
+
</li>
171
+
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
172
+
<Button
134
173
variant="tertiary"
135
174
size={size}
136
-
onClick={() => setPage(page + maxVisiblePages)}
175
+
isDisabled={page === totalPages}
176
+
onClick={() => setPage(page + 1)}
137
177
>
138
-
<Ellipsis />
139
-
</IconButton>
140
-
)}
141
-
</Flex>
142
-
<IconButton
143
-
style={styles.mobileButton as unknown as stylex.StyleXStyles}
144
-
size={size}
145
-
label="Next page"
146
-
isDisabled={page === totalPages}
147
-
onClick={() => setPage(page + 1)}
148
-
variant="tertiary"
149
-
>
150
-
<ChevronRight />
151
-
</IconButton>
152
-
<Button
153
-
style={styles.desktopButton as unknown as stylex.StyleXStyles}
154
-
variant="tertiary"
155
-
size={size}
156
-
isDisabled={page === totalPages}
157
-
onClick={() => setPage(page + 1)}
158
-
>
159
-
Next
160
-
<ArrowRight />
161
-
</Button>
162
-
</Flex>
178
+
Next
179
+
<ArrowRight />
180
+
</Button>
181
+
</li>
182
+
</ul>
183
+
</nav>
163
184
);
164
185
}