diff --git a/.changeset/bright-eyes-beam.md b/.changeset/bright-eyes-beam.md
new file mode 100644
index 0000000000..c7e611f06d
--- /dev/null
+++ b/.changeset/bright-eyes-beam.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Button: add `height: fit-content`
diff --git a/.changeset/cold-seals-draw.md b/.changeset/cold-seals-draw.md
new file mode 100644
index 0000000000..6a1a2efc45
--- /dev/null
+++ b/.changeset/cold-seals-draw.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Pagination: Use empty `li` for ellipsis
diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
index ccd787b266..499712eea8 100644
--- a/apps/_components/src/Showcase/Showcase.tsx
+++ b/apps/_components/src/Showcase/Showcase.tsx
@@ -137,7 +137,14 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
{pagination.pages.map(({ itemKey, buttonProps, page }) => (
- {page}
+ {typeof page === 'number' && (
+
+ {page}
+
+ )}
))}
diff --git a/packages/css/src/button.css b/packages/css/src/button.css
index 380582e44d..4aa7ce1f1b 100644
--- a/packages/css/src/button.css
+++ b/packages/css/src/button.css
@@ -51,6 +51,7 @@
font-family: inherit;
font-weight: var(--ds-font-weight-medium);
gap: var(--dsc-button-gap);
+ height: fit-content; /* If placed in flex container */
justify-content: center;
line-height: var(--ds-line-height-sm);
min-height: var(--dsc-button-size);
diff --git a/packages/css/src/pagination.css b/packages/css/src/pagination.css
index 125fc047e4..401129c1b8 100644
--- a/packages/css/src/pagination.css
+++ b/packages/css/src/pagination.css
@@ -6,6 +6,7 @@
& > :is(ol, ul) {
display: flex;
+ align-items: center;
flex-wrap: wrap;
gap: var(--dsc-pagination-gap);
list-style: none;
@@ -13,12 +14,13 @@
padding: 0;
& > li:first-child > ::before,
- & > li:last-child > ::after {
+ & > li:last-child > ::before {
content: '';
background: currentcolor;
height: var(--dsc-pagination-chevron-size);
mask: center / contain no-repeat var(--dsc-pagination-icon-url);
width: var(--dsc-pagination-chevron-size);
+ order: 1;
@media (forced-colors: active) {
background: LinkText;
@@ -27,21 +29,15 @@
& > li:first-child > ::before {
rotate: 180deg;
+ order: 0;
}
/* Style as non-interactive ellipsis when empty */
- & > li > :empty {
- color: inherit;
- padding: 0; /* Make ellipsis element square */
- pointer-events: none;
-
- &::before {
- content: '\2026'; /* ellipsis */
- }
+ & > li:empty::before {
+ content: '\2026'; /* ellipsis */
+ display: block;
+ min-width: var(--ds-size-12);
+ text-align: center;
}
}
-
- &[data-compact] {
- --dsc-pagination-gap: var(--ds-size-0);
- }
}
diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx
index 85e96d592c..a1d68f2c82 100644
--- a/packages/react/src/components/Pagination/Pagination.mdx
+++ b/packages/react/src/components/Pagination/Pagination.mdx
@@ -49,9 +49,11 @@ const { pages, prevButtonProps, nextButtonProps, hasNext, hasPrevious } = usePag
{pages.map(({ page, itemKey, buttonProps }) => (
-
- {page}
-
+ {typeof page === 'number' && (
+
+ {page}
+
+ )}
))}
diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx
index 90242a4098..1b1bf64a00 100644
--- a/packages/react/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/components/Pagination/Pagination.stories.tsx
@@ -1,6 +1,7 @@
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
import { Pagination, type UsePaginationProps, usePagination } from '.';
export default {
@@ -9,13 +10,12 @@ export default {
} as Meta;
export const Preview: StoryFn = (args) => {
- const [, updateArgs] = useArgs();
+ const [page, setCurrentPage] = useState(4);
const { pages, nextButtonProps, prevButtonProps } = usePagination({
- currentPage: 4,
- onChange: console.log,
+ currentPage: page,
totalPages: 10,
showPages: 7,
- setCurrentPage: (currentPage) => updateArgs({ currentPage }),
+ setCurrentPage,
});
return (
@@ -28,9 +28,11 @@ export const Preview: StoryFn = (args) => {
{pages.map(({ page, itemKey, buttonProps }) => (
-
- {page}
-
+ {typeof page === 'number' && (
+
+ {page}
+
+ )}
))}
@@ -68,13 +70,15 @@ export const WithAnchor: StoryFn = (args) => {
{pages.map(({ page, itemKey, buttonProps }) => (
-
- {page}
-
+ {typeof page === 'number' && (
+
+ {page}
+
+ )}
))}
diff --git a/packages/react/src/components/Pagination/Pagination.test.tsx b/packages/react/src/components/Pagination/Pagination.test.tsx
index 504e694231..1426eec490 100644
--- a/packages/react/src/components/Pagination/Pagination.test.tsx
+++ b/packages/react/src/components/Pagination/Pagination.test.tsx
@@ -25,9 +25,7 @@ const renderWithRoot = (props: PaginationProps) => {
3
-
-
-
+
6
diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts
index 3ec03d9939..09b1f529f0 100644
--- a/packages/react/src/components/Pagination/usePagination.ts
+++ b/packages/react/src/components/Pagination/usePagination.ts
@@ -62,15 +62,15 @@ export const usePagination = ({
/** Number of steps */
pages: getSteps(currentPage, totalPages, showPages).map(
(page, index) => ({
- page: page || '',
+ page: page || 'ellipsis',
itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
- buttonProps: {
- 'aria-current': page === currentPage ? 'page' : undefined,
- 'aria-hidden': !page || undefined, // Hide ellipsis from screen reader
- onClick: handleClick(page),
- tabIndex: page ? undefined : -1, // Hide ellipsis keyboard
- variant: page === currentPage ? 'primary' : 'tertiary',
- } as PaginationButtonProps,
+ buttonProps: (page
+ ? {
+ 'aria-current': page === currentPage ? 'page' : undefined,
+ onClick: handleClick(page),
+ variant: page === currentPage ? 'primary' : 'tertiary',
+ }
+ : null) as PaginationButtonProps | null,
}),
),
/** Properties to spread on Pagination.Button used for previous naviagation */
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 5425a57c0d..e43da57c0c 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -363,9 +363,14 @@ export const Sizes: StoryFn = () => {
{pages.map(({ page, itemKey, buttonProps }) => (
-
- {page}
-
+ {typeof page === 'number' && (
+
+ {page}
+
+ )}
))}