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} + + )} ))}