Refactor Pagination styling to Sass modules.

fortanix · Jan 16, 2025 · fa40ec1 · fa40ec1
1 parent e5722d3
commit fa40ec1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 79 deletions.
diff --git 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
@@ -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/...bles/DataTable/pagination/Pagination.scss → ...taTable/pagination/Pagination.module.scss b/...bles/DataTable/pagination/Pagination.scss → ...taTable/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
@@ -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 (
-    <div className="bk-pagination">
+    <div className={cx(cl['bk-pagination'])}>
       <PaginationSizeSelector pageSizeOptions={pageSizeOptions} />
 
-      <div className="pager pager--indexed">
+      <div className={cx(cl['pager'], cl['pager--indexed'])}>
         <Button
           unstyled
-          disabled={!table.canPreviousPage}
-          className="pager__nav"
+          nonactive={!table.canPreviousPage}
+          className={cx(cl['pager__nav'])}
           onPress={() => {
             table.gotoPage(0)
             setPageIndexIndicator(1);
           }}
         >
-          <Icon
-            icon="page-backward"
-            className={cx("pager__nav--prev")}
-          />
+          <Icon icon="page-backward"/>
         </Button>
-        <div className="pagination-main">
+        <div className={cx(cl['pagination-main'])}>
           <Button
             unstyled
-            disabled={!table.canPreviousPage}
-            className="pager__nav"
+            nonactive={!table.canPreviousPage}
+            className={cx(cl['pager__nav'])}
             onPress={() => {
               table.previousPage();
               setPageIndexIndicator(pageIndexIndicator - 1);
             }}
           >
-            <Icon
-              icon="caret-left"
-              className={cx("pager__nav--prev")}
-            />
+            <Icon icon="caret-left"/>
           </Button>
 
           <Input
             type="number"
-            className="pagination__page-input"
+            className={cx(cl['pagination__page-input'])}
             value={pageIndexIndicator}
             max={table.pageCount}
             onChange={(event) => 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)}
           <Button
             unstyled
-            disabled={!table.canNextPage}
-            className="pager__nav"
+            nonactive={!table.canNextPage}
+            className={cx(cl['pager__nav'])}
             onPress={() => {
               table.nextPage();
               setPageIndexIndicator(pageIndexIndicator + 1);
             }}
           >
-            <Icon
-              icon="caret-right"
-              className={cx("pager__nav--next")}
-            />
+            <Icon icon="caret-right"/>
           </Button>
         </div>
         <Button
           unstyled
-          disabled={!table.canNextPage}
-          className="pager__nav"
+          nonactive={!table.canNextPage}
+          className={cx(cl['pager__nav'])}
           onPress={() => {
             table.gotoPage(table.pageCount - 1)
             setPageIndexIndicator(table.pageCount);
           }}
         >
-          <Icon
-            name="chevron-right"
-            icon="page-forward"
-            className={cx("pager__nav--next")}
-          />
+          <Icon icon="page-forward"/>
         </Button>
       </div>
     </div>

diff --git a/...ataTable/pagination/PaginationStream.scss → ...e/pagination/PaginationStream.module.scss b/...ataTable/pagination/PaginationStream.scss → ...e/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
@@ -11,56 +11,43 @@ 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<React.ComponentPropsWithRef<typeof Icon>>,
-};
-const IconDoubleChevronLeft = ({ iconProps = {}, ...props }: IconDoubleChevronLeftProps) => {
-  return (
-    <span className="icon-double-chevron-left" {...props}>
-      <Icon name="chevron-left" icon="page-backward" className="icon"
-        {...iconProps}
-      />
-    </span>
-  );
-};
-
 type PaginationStreamPagerProps = {
   pageSizeOptions?: PageSizeOption,
 };
 export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPagerProps) => {
   const { table } = useTable();
 
   return (
-    <div className="pagination__pager">
-      <Button
-        className={cx('pager__nav pager__nav--first', { 'disabled': !table.canPreviousPage })}
+    <div className={cx(cl['pagination__pager'])}>
+      <Button unstyled
+        className={cx(cl['pager__nav'], cl['pager__nav--first'])}
         onPress={() => { table.gotoPage(0); }}
-        disabled={!table.canPreviousPage}
+        nonactive={!table.canPreviousPage}
       >
-        <IconDoubleChevronLeft/>
+        <Icon icon="page-backward"/>
       </Button>
 
-      <Button
+      <Button trimmed
         variant="tertiary"
-        className={cx('pager__nav pager__nav--prev', { 'disabled': !table.canPreviousPage })}
+        className={cx(cl['pager__nav'], cl['pager__nav--prev'])}
         onPress={() => { table.previousPage(); }}
-        disabled={!table.canPreviousPage}
+        nonactive={!table.canPreviousPage}
       >
-        <Icon name="chevron-left" icon="caret-left" className="icon"/>
+        <Icon icon="caret-left"/>
         Previous
       </Button>
 
-      <Button 
+      <Button trimmed
         variant="tertiary"
-        className={cx('pager__nav pager__nav--next', { 'disabled': !table.canNextPage })}
+        className={cx(cl['pager__nav'], cl['pager__nav--next'])}
         onPress={() => { table.nextPage(); }}
-        disabled={!table.canNextPage}
+        nonactive={!table.canNextPage}
       >
         Next
-        <Icon name="chevron-right" icon="caret-right" className="icon"/>
+        <Icon icon="caret-right"/>
       </Button>
     </div>
   );
@@ -73,9 +60,9 @@ type PaginationStreamProps = {
 };
 export const PaginationStream = ({ renderLoadMoreResults, pageSizeOptions, pageSizeLabel }: PaginationStreamProps) => {
   return (
-    <div className="bk-pagination bk-pagination--stream">
+    <div className={cx(cl['bk-pagination'], cl['bk-pagination--stream'])}>
       {renderLoadMoreResults && (
-        <div className="pagination__load-more-action">{renderLoadMoreResults?.()}</div>
+        <div className={cx(cl['pagination__load-more-action'])}>{renderLoadMoreResults?.()}</div>
       )}
       <PaginationSizeSelector pageSizeOptions={pageSizeOptions} pageSizeLabel={pageSizeLabel}/>
       <PaginationStreamPager/>