From fa40ec1e86d0080885fab809776912b7b5523aca Mon Sep 17 00:00:00 2001 From: mkrause Date: Thu, 16 Jan 2025 19:22:02 +0100 Subject: [PATCH] Refactor Pagination styling to Sass modules. --- .../actions/Button/Button.module.scss | 10 ++-- src/components/actions/Button/Button.tsx | 3 +- ...Pagination.scss => Pagination.module.scss} | 14 ++--- .../DataTable/pagination/Pagination.tsx | 51 +++++++------------ ...ream.scss => PaginationStream.module.scss} | 17 ++++--- .../DataTable/pagination/PaginationStream.tsx | 45 ++++++---------- 6 files changed, 61 insertions(+), 79 deletions(-) rename src/components/tables/DataTable/pagination/{Pagination.scss => Pagination.module.scss} (88%) rename src/components/tables/DataTable/pagination/{PaginationStream.scss => PaginationStream.module.scss} (85%) diff --git a/src/components/actions/Button/Button.module.scss b/src/components/actions/Button/Button.module.scss index e27b1637..457e8a9c 100644 --- a/src/components/actions/Button/Button.module.scss +++ b/src/components/actions/Button/Button.module.scss @@ -15,16 +15,18 @@ user-select: none; margin: 0; - padding: 0; - &:not(.bk-button--trimmed) { - padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */ - } + padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */ /* Transparent border for consistency with other variants that have a border */ border: bk.$size-1 solid transparent; border-radius: bk.$radius-s; background: transparent; + &.bk-button--trimmed { + padding: 0; + border: none; + } + display: inline-flex; flex-flow: row wrap; align-items: center; diff --git a/src/components/actions/Button/Button.tsx b/src/components/actions/Button/Button.tsx index a990ec51..a09c1f4c 100644 --- a/src/components/actions/Button/Button.tsx +++ b/src/components/actions/Button/Button.tsx @@ -147,8 +147,9 @@ export const Button = (props: ButtonProps) => { [cl['bk-button--trimmed']]: trimmed, [cl['bk-button--primary']]: variant === 'primary', [cl['bk-button--secondary']]: variant === 'secondary', - [cl['bk-button--nonactive']]: isNonactive, [cl['bk-button--disabled']]: !isInteractive, + [cl['bk-button--nonactive']]: isNonactive, + 'nonactive': isNonactive, // Global class name so that consumers can style nonactive states }, props.className)} onClick={handleClick} > diff --git a/src/components/tables/DataTable/pagination/Pagination.scss b/src/components/tables/DataTable/pagination/Pagination.module.scss similarity index 88% rename from src/components/tables/DataTable/pagination/Pagination.scss rename to src/components/tables/DataTable/pagination/Pagination.module.scss index 4c165e98..fc4b1a20 100644 --- a/src/components/tables/DataTable/pagination/Pagination.scss +++ b/src/components/tables/DataTable/pagination/Pagination.module.scss @@ -21,17 +21,19 @@ gap: bk.$spacing-1; padding-left: bk.$spacing-6; border-left: bk.$size-1 solid bk.$theme-pagination-border-default; - - .pager__nav { - &:not(:disabled) { + + .pager__nav { + display: flex; + + &:not(:global(.nonactive)) { cursor: pointer; } - &:disabled { + &:global(.nonactive) { opacity: 0.34; } } } - .pagination__page-input{ + .pagination__page-input { text-align: center; border: bk.$size-1 solid bk.$theme-pagination-border-default; border-radius: bk.$size-2; @@ -43,7 +45,7 @@ margin: 0; } } - .pagination-main{ + .pagination-main { display: flex; gap: bk.$spacing-1; align-items: center; diff --git a/src/components/tables/DataTable/pagination/Pagination.tsx b/src/components/tables/DataTable/pagination/Pagination.tsx index 606ca1aa..434f3330 100644 --- a/src/components/tables/DataTable/pagination/Pagination.tsx +++ b/src/components/tables/DataTable/pagination/Pagination.tsx @@ -15,7 +15,7 @@ import { } from './PaginationSizeSelector.tsx'; import { useTable } from '../DataTableContext.tsx'; -import './Pagination.scss'; +import cl from './Pagination.module.scss'; type PaginationProps = { @@ -39,47 +39,41 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => { */ return ( -
+
-
+
-
+
setPageIndexIndicator(Number.parseInt(event.target.value))} - onBlur={(event) => { + onBlur={() => { if(pageIndexIndicator > 0 && pageIndexIndicator <= table.pageCount){ table.gotoPage(pageIndexIndicator - 1); } else { @@ -88,36 +82,29 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => { } }} /> - of {table.pageCount} + of {Math.max(table.pageCount, 1)}
diff --git a/src/components/tables/DataTable/pagination/PaginationStream.scss b/src/components/tables/DataTable/pagination/PaginationStream.module.scss similarity index 85% rename from src/components/tables/DataTable/pagination/PaginationStream.scss rename to src/components/tables/DataTable/pagination/PaginationStream.module.scss index e97440eb..d5317faa 100644 --- a/src/components/tables/DataTable/pagination/PaginationStream.scss +++ b/src/components/tables/DataTable/pagination/PaginationStream.module.scss @@ -4,35 +4,38 @@ @use '../../../../styling/defs.scss' as bk; -@use './Pagination.scss'; +@use './Pagination.module.scss'; @layer baklava.components { .bk-pagination--stream { @include bk.component-base(bk-pagination-stream); - + .pagination__load-more-action { display: flex; align-items: center; margin-right: auto; } - + .pagination__pager { display: flex; align-items: center; gap: bk.$spacing-5; padding-left: bk.$spacing-6; border-left: bk.$size-1 solid bk.$theme-pagination-border-default; - + .pager__nav { color: bk.$theme-pagination-text-default; padding-left: 0; padding-right: 0; - - &.disabled { + + display: flex; + + &:global(.nonactive) { opacity: 0.4; } - + + &.pager__nav--first { --keep: ; } &.pager__nav--prev, &.pager__nav--next { display: flex; diff --git a/src/components/tables/DataTable/pagination/PaginationStream.tsx b/src/components/tables/DataTable/pagination/PaginationStream.tsx index 78ddbcfe..61d531b3 100644 --- a/src/components/tables/DataTable/pagination/PaginationStream.tsx +++ b/src/components/tables/DataTable/pagination/PaginationStream.tsx @@ -11,22 +11,9 @@ import { Button } from '../../../actions/Button/Button.tsx'; import { type PageSizeOption, PaginationSizeSelector } from './PaginationSizeSelector.tsx'; import { useTable } from '../DataTableContext.tsx'; -import './PaginationStream.scss'; +import cl from './PaginationStream.module.scss'; -type IconDoubleChevronLeftProps = React.ComponentPropsWithoutRef<'span'> & { - iconProps?: Partial>, -}; -const IconDoubleChevronLeft = ({ iconProps = {}, ...props }: IconDoubleChevronLeftProps) => { - return ( - - - - ); -}; - type PaginationStreamPagerProps = { pageSizeOptions?: PageSizeOption, }; @@ -34,33 +21,33 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager const { table } = useTable(); return ( -
- - -
); @@ -73,9 +60,9 @@ type PaginationStreamProps = { }; export const PaginationStream = ({ renderLoadMoreResults, pageSizeOptions, pageSizeLabel }: PaginationStreamProps) => { return ( -
+
{renderLoadMoreResults && ( -
{renderLoadMoreResults?.()}
+
{renderLoadMoreResults?.()}
)}