feat(pagination): code improvement and total pages/items stabilisation

ovh · Jul 29, 2024 · 126d0f1 · 126d0f1
1 parent 58ce14b
commit 126d0f1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.scss b/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.scss
@@ -61,11 +61,21 @@
 
       &__button--visible::part(button) {
         display: flex;
+
+        &:focus-visible {
+          z-index: 1;
+        }
       }
 
-      &__button--selected::part(button) {
-        border-color: var(--ods-color-primary-800);
-        background-color: var(--ods-color-primary-800);
+      &__button--selected {
+        &::part(button) {
+          border-color: var(--ods-color-primary-800);
+          background-color: var(--ods-color-primary-800);
+        }
+
+        &.ods-pagination__list__page__button--disabled::part(button) {
+          color: var(--ods-color-neutral-000);
+        }
       }
     }
   }

diff --git a/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx b/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx
@@ -176,9 +176,9 @@ export class OdsPagination {
             }
 
             if (isLeft) {
-              this.handlePreviousClick(Number(this.current));
+              this.handlePreviousClick(this.current);
             } else {
-              this.handleNextClick(Number(this.current));
+              this.handleNextClick(this.current);
             }
           }}
           variant={ODS_BUTTON_VARIANT.ghost}
@@ -263,6 +263,7 @@ export class OdsPagination {
                   'ods-pagination__list__page__button': true,
                   'ods-pagination__list__page__button--selected': this.current === 1,
                   'ods-pagination__list__page__button--visible': true,
+                  'ods-pagination__list__page__button--disabled': this.isDisabled,
                 }}
                 variant={this.current === 1 ? ODS_BUTTON_VARIANT.default : ODS_BUTTON_VARIANT.ghost}
                 isDisabled={this.isDisabled}
@@ -286,6 +287,7 @@ export class OdsPagination {
                     'ods-pagination__list__page__button': true,
                     'ods-pagination__list__page__button--selected': this.current === pageId,
                     'ods-pagination__list__page__button--visible': page.active,
+                    'ods-pagination__list__page__button--disabled': this.isDisabled,
                   }}
                   variant={this.current === pageId ? ODS_BUTTON_VARIANT.default : ODS_BUTTON_VARIANT.ghost}
                   isDisabled={this.isDisabled}
@@ -308,6 +310,7 @@ export class OdsPagination {
                   'ods-pagination__list__page__button': true,
                   'ods-pagination__list__page__button--selected': this.current === this.actualTotalPages,
                   'ods-pagination__list__page__button--visible': true,
+                  'ods-pagination__list__page__button--disabled': this.isDisabled,
                 }}
                 variant={this.current === this.actualTotalPages ? ODS_BUTTON_VARIANT.default : ODS_BUTTON_VARIANT.ghost}
                 isDisabled={this.isDisabled}

diff --git a/packages/ods/src/components/pagination/src/controller/ods-pagination.ts b/packages/ods/src/components/pagination/src/controller/ods-pagination.ts
@@ -53,17 +53,20 @@ function createPageList(totalPages: number, pageSelected: number): OdsPagination
       pageList[totalPages - 1].active = true;
     }
   }
+
   return pageList;
 }
 
 function getActualPage(defaultCurrentPage: number, actualTotalPages: number, current: number): number {
   if (defaultCurrentPage > actualTotalPages) {
     return actualTotalPages;
-  } else if (defaultCurrentPage < 1) {
+  }
+
+  if (defaultCurrentPage < 1) {
     return 1;
-  } else {
-    return defaultCurrentPage || current;
   }
+
+  return defaultCurrentPage || current;
 }
 
 export {