From ee53805af60fdd3da519769bc6abd461cc5e71b2 Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Fri, 3 Jan 2025 12:32:41 +0100 Subject: [PATCH 01/15] fix(Pagination): use empty li for ellipsis --- packages/css/src/button.css | 1 + packages/css/src/pagination.css | 22 +++++-------- .../Pagination/Pagination.stories.tsx | 24 ++++++++------ .../components/Pagination/Pagination.test.tsx | 4 +-- .../components/Pagination/usePagination.ts | 4 +-- packages/react/src/components/Table/Table.tsx | 33 +++++++++++++++++++ 6 files changed, 60 insertions(+), 28 deletions(-) diff --git a/packages/css/src/button.css b/packages/css/src/button.css index 380582e44d..0338d51b13 100644 --- a/packages/css/src/button.css +++ b/packages/css/src/button.css @@ -42,6 +42,7 @@ } align-items: center; + align-self: center; /* If placed in flex container */ background: var(--dsc-button-background); border-radius: var(--ds-border-radius-default); border: var(--ds-border-width-default) solid var(--dsc-button-border-color); 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.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx index 90242a4098..a3e12d19ba 100644 --- a/packages/react/src/components/Pagination/Pagination.stories.tsx +++ b/packages/react/src/components/Pagination/Pagination.stories.tsx @@ -28,9 +28,11 @@ export const Preview: StoryFn = (args) => { {pages.map(({ page, itemKey, buttonProps }) => ( - - {page} - + {page && ( + + {page} + + )} ))} @@ -68,13 +70,15 @@ export const WithAnchor: StoryFn = (args) => { {pages.map(({ page, itemKey, buttonProps }) => ( - - {page} - + {page && ( + + {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..6c4cbfbd69 100644 --- a/packages/react/src/components/Pagination/usePagination.ts +++ b/packages/react/src/components/Pagination/usePagination.ts @@ -64,13 +64,13 @@ export const usePagination = ({ (page, index) => ({ page: page || '', itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility - buttonProps: { + buttonProps: (page ? { '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, + } : null) as (PaginationButtonProps | null), }), ), /** Properties to spread on Pagination.Button used for previous naviagation */ diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx index df7013ed9d..687d9b7e9f 100644 --- a/packages/react/src/components/Table/Table.tsx +++ b/packages/react/src/components/Table/Table.tsx @@ -53,3 +53,36 @@ export const Table = forwardRef(function Table( ); }); + +const styles: Record = {}; +const noPrev = false; +const noNext = false; +const pages = Array<{ current: 'page' | 'false'; key: string; page: string }>(); + +; From c2757bafc0f30982e87abb667f73f54cdd81e40b Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Fri, 3 Jan 2025 12:33:49 +0100 Subject: [PATCH 02/15] fix(Pagination): buttonProps cleanup --- packages/react/src/components/Pagination/usePagination.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts index 6c4cbfbd69..40a8f2d172 100644 --- a/packages/react/src/components/Pagination/usePagination.ts +++ b/packages/react/src/components/Pagination/usePagination.ts @@ -66,9 +66,7 @@ export const usePagination = ({ itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility buttonProps: (page ? { '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', } : null) as (PaginationButtonProps | null), }), From 654ba064c970fcf68ec747102a0e6884cbf39630 Mon Sep 17 00:00:00 2001 From: Eirik Backer Date: Fri, 3 Jan 2025 12:34:35 +0100 Subject: [PATCH 03/15] Create cold-seals-draw.md --- .changeset/cold-seals-draw.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/cold-seals-draw.md 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 From e4f00673a985524805a9cf5ff6cc71dea7ed2aa0 Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Fri, 3 Jan 2025 12:49:48 +0100 Subject: [PATCH 04/15] docs(Pagination): update example --- packages/react/src/components/Pagination/Pagination.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx index 85e96d592c..b73e410f66 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} - + {page && ( + + {page} + + )} ))} From 3acedfe50f39cde84c2aeb19a2e8890aedcdc359 Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Fri, 3 Jan 2025 13:01:43 +0100 Subject: [PATCH 05/15] chore: lint --- .../react/src/components/Pagination/usePagination.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts index 40a8f2d172..35050cfd28 100644 --- a/packages/react/src/components/Pagination/usePagination.ts +++ b/packages/react/src/components/Pagination/usePagination.ts @@ -64,11 +64,13 @@ export const usePagination = ({ (page, index) => ({ page: page || '', itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility - buttonProps: (page ? { - 'aria-current': page === currentPage ? 'page' : undefined, - onClick: handleClick(page), - variant: page === currentPage ? 'primary' : 'tertiary', - } : null) as (PaginationButtonProps | null), + 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 */ From 6c33f3eb7c83716d38d2365acbd556a40982a493 Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Mon, 6 Jan 2025 09:29:10 +0100 Subject: [PATCH 06/15] fix(Button): use height: fit-content --- packages/css/src/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/button.css b/packages/css/src/button.css index 0338d51b13..4aa7ce1f1b 100644 --- a/packages/css/src/button.css +++ b/packages/css/src/button.css @@ -42,7 +42,6 @@ } align-items: center; - align-self: center; /* If placed in flex container */ background: var(--dsc-button-background); border-radius: var(--ds-border-radius-default); border: var(--ds-border-width-default) solid var(--dsc-button-border-color); @@ -52,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); From 2604b46ca76f8a9e56b5b44bf9c6c0c459213f92 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 6 Jan 2025 12:00:59 +0100 Subject: [PATCH 07/15] fix pagination story --- .../src/components/Pagination/Pagination.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx index a3e12d19ba..bb2eba6c22 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(3); const { pages, nextButtonProps, prevButtonProps } = usePagination({ - currentPage: 4, - onChange: console.log, + currentPage: page, totalPages: 10, showPages: 7, - setCurrentPage: (currentPage) => updateArgs({ currentPage }), + setCurrentPage, }); return ( @@ -28,7 +28,7 @@ export const Preview: StoryFn = (args) => { {pages.map(({ page, itemKey, buttonProps }) => ( - {page && ( + {typeof page === 'number' && ( {page} From c25fa40383fb1c5d11b90b7ba891ca37005c97b5 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 6 Jan 2025 12:03:29 +0100 Subject: [PATCH 08/15] update pagination showcase --- apps/_components/src/Showcase/Showcase.tsx | 9 ++++++++- packages/react/src/components/Pagination/Pagination.mdx | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) 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/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx index b73e410f66..a1d68f2c82 100644 --- a/packages/react/src/components/Pagination/Pagination.mdx +++ b/packages/react/src/components/Pagination/Pagination.mdx @@ -49,7 +49,7 @@ const { pages, prevButtonProps, nextButtonProps, hasNext, hasPrevious } = usePag {pages.map(({ page, itemKey, buttonProps }) => ( - {page && ( + {typeof page === 'number' && ( {page} From 877f9146a699777b9d193ba560b96f69ba679e3d Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Mon, 6 Jan 2025 12:04:16 +0100 Subject: [PATCH 09/15] Create bright-eyes-beam.md --- .changeset/bright-eyes-beam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bright-eyes-beam.md diff --git a/.changeset/bright-eyes-beam.md b/.changeset/bright-eyes-beam.md new file mode 100644 index 0000000000..3f88d38719 --- /dev/null +++ b/.changeset/bright-eyes-beam.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-css": patch +--- + +Button: ass `height: fit-content` From d75a66f5ea5bf6f4d3047cd0b4092330d7076796 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 6 Jan 2025 12:07:50 +0100 Subject: [PATCH 10/15] update testing stories --- .../src/components/Pagination/Pagination.stories.tsx | 2 +- packages/react/stories/testing.stories.tsx | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx index bb2eba6c22..420035f1ed 100644 --- a/packages/react/src/components/Pagination/Pagination.stories.tsx +++ b/packages/react/src/components/Pagination/Pagination.stories.tsx @@ -10,7 +10,7 @@ export default { } as Meta; export const Preview: StoryFn = (args) => { - const [page, setCurrentPage] = useState(3); + const [page, setCurrentPage] = useState(4); const { pages, nextButtonProps, prevButtonProps } = usePagination({ currentPage: page, totalPages: 10, 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} + + )} ))} From 7aac3011031971ba29ba9c330a918b7a38da4285 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 6 Jan 2025 12:34:05 +0100 Subject: [PATCH 11/15] remove unwanted code in table..? --- packages/react/src/components/Table/Table.tsx | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx index 687d9b7e9f..df7013ed9d 100644 --- a/packages/react/src/components/Table/Table.tsx +++ b/packages/react/src/components/Table/Table.tsx @@ -53,36 +53,3 @@ export const Table = forwardRef(function Table( ); }); - -const styles: Record = {}; -const noPrev = false; -const noNext = false; -const pages = Array<{ current: 'page' | 'false'; key: string; page: string }>(); - -; From 76d830d130e2a3eb38b1e28a724028da6d3b663c Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 6 Jan 2025 12:38:00 +0100 Subject: [PATCH 12/15] update changeset --- .changeset/bright-eyes-beam.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/bright-eyes-beam.md b/.changeset/bright-eyes-beam.md index 3f88d38719..c7e611f06d 100644 --- a/.changeset/bright-eyes-beam.md +++ b/.changeset/bright-eyes-beam.md @@ -2,4 +2,4 @@ "@digdir/designsystemet-css": patch --- -Button: ass `height: fit-content` +Button: add `height: fit-content` From 80cbfb152c55411ebe18075b0d64c4600e407295 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 7 Jan 2025 12:05:48 +0100 Subject: [PATCH 13/15] Update packages/react/src/components/Pagination/usePagination.ts --- packages/react/src/components/Pagination/usePagination.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts index 35050cfd28..b361a43a4d 100644 --- a/packages/react/src/components/Pagination/usePagination.ts +++ b/packages/react/src/components/Pagination/usePagination.ts @@ -62,7 +62,7 @@ export const usePagination = ({ /** Number of steps */ pages: getSteps(currentPage, totalPages, showPages).map( (page, index) => ({ - page: page || '', + page || 'ellipsis', itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility buttonProps: (page ? { From a8f4b20850ba232cb6afb49bbf4f102d024291a6 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 7 Jan 2025 12:16:04 +0100 Subject: [PATCH 14/15] fix typo --- packages/react/src/components/Pagination/usePagination.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/usePagination.ts b/packages/react/src/components/Pagination/usePagination.ts index b361a43a4d..09b1f529f0 100644 --- a/packages/react/src/components/Pagination/usePagination.ts +++ b/packages/react/src/components/Pagination/usePagination.ts @@ -62,7 +62,7 @@ export const usePagination = ({ /** Number of steps */ pages: getSteps(currentPage, totalPages, showPages).map( (page, index) => ({ - page || 'ellipsis', + page: page || 'ellipsis', itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility buttonProps: (page ? { From e71d269cedc8f758c48981cdac1137e60c845f12 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 7 Jan 2025 12:23:04 +0100 Subject: [PATCH 15/15] fix story --- packages/react/src/components/Pagination/Pagination.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx index 420035f1ed..1b1bf64a00 100644 --- a/packages/react/src/components/Pagination/Pagination.stories.tsx +++ b/packages/react/src/components/Pagination/Pagination.stories.tsx @@ -70,7 +70,7 @@ export const WithAnchor: StoryFn = (args) => { {pages.map(({ page, itemKey, buttonProps }) => ( - {page && ( + {typeof page === 'number' && (