@plastic-js/tsumiki 0.1.61 → 0.1.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -40,7 +40,7 @@ var ellipsisClass = css({
|
|
|
40
40
|
display: "flex",
|
|
41
41
|
alignItems: "center",
|
|
42
42
|
justifyContent: "center",
|
|
43
|
-
width: "
|
|
43
|
+
width: "28px",
|
|
44
44
|
color: "var(--tsu-text-subtle)",
|
|
45
45
|
fontSize: "var(--tsu-font-size-sm)",
|
|
46
46
|
userSelect: "none"
|
|
@@ -59,7 +59,8 @@ var Pages = () => {
|
|
|
59
59
|
})) : jsx(Pagination.Ellipsis, mergeProps({
|
|
60
60
|
key: i,
|
|
61
61
|
index: i,
|
|
62
|
-
className: ellipsisClass
|
|
62
|
+
className: ellipsisClass,
|
|
63
|
+
children: "…"
|
|
63
64
|
}))) });
|
|
64
65
|
};
|
|
65
66
|
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Pagination renders an invisible ellipsis
|
|
2
|
+
|
|
3
|
+
**Status:** Known issue
|
|
4
|
+
**Affects:** `src/components/Pagination.jsx:55`
|
|
5
|
+
|
|
6
|
+
## Problem
|
|
7
|
+
|
|
8
|
+
The `Pages` renderer emits the ellipsis without any content:
|
|
9
|
+
|
|
10
|
+
```jsx
|
|
11
|
+
// src/components/Pagination.jsx:55
|
|
12
|
+
: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`ArkPagination.Ellipsis` renders a plain empty `div` (it only spreads
|
|
16
|
+
`getEllipsisProps` — id/data attrs — and never injects text). The tsumiki
|
|
17
|
+
`ellipsisClass` only sizes/colors the box, so the ellipsis shows up as a blank
|
|
18
|
+
gap with no `…` glyph.
|
|
19
|
+
|
|
20
|
+
With enough pages to trigger the collapsed range, the page-number pattern looks
|
|
21
|
+
random and buggy instead of standard, e.g. with 12 total pages and the default
|
|
22
|
+
`boundaryCount = 1` / `siblingCount = 1`:
|
|
23
|
+
|
|
24
|
+
- Page 1: `1 2 3 12` (should be `1 2 3 … 12`)
|
|
25
|
+
- Page 4: `1 4 12` (should be `1 … 4 … 12`)
|
|
26
|
+
- Page 10: `1 10 11 12` (should be `1 … 10 11 12`)
|
|
27
|
+
|
|
28
|
+
Each gap is where the invisible ellipsis box sits.
|
|
29
|
+
|
|
30
|
+
## Fix
|
|
31
|
+
|
|
32
|
+
Pass the glyph as children so the ellipsis is visible:
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass}>…</ArkPagination.Ellipsis>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Consider tightening `ellipsisClass` width (e.g. `28px`) so the visible `…` does
|
|
39
|
+
not consume a full button-sized slot.
|
|
40
|
+
|
|
41
|
+
## Secondary note (related UX)
|
|
42
|
+
|
|
43
|
+
Prev/Next reuse `itemClass` (`minWidth: var(--tsu-level-primary-md)`, 40px),
|
|
44
|
+
which is a small tap target. If wider triggers are desired, they need their own
|
|
45
|
+
class, since `Pagination` currently exposes no per-trigger className override.
|