feat(pagination): styling corrections

ovh · Jul 29, 2024 · 003271a · 003271a
1 parent f173935
commit 003271a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 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
@@ -9,6 +9,11 @@
   }
 }
 
+:host([isDisabled]) {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
 .ods-pagination {
   &__results,
   &__list {
@@ -21,6 +26,11 @@
 
   &__results {
     gap: 8px;
+    color: var(--ods-color-primary-500);
+
+    &--disabled {
+      color: var(--ods-color-neutral-500);
+    }
   }
 
   &__list {
@@ -32,19 +42,27 @@
 
     &__arrow {
       padding: 0 8px;
+
+      &__button::part(button) {
+        display: flex;
+        justify-content: center;
+        width: 2.5rem;
+      }
     }
 
     &__page {
       &__ellipsis {
+        display: flex;
+        justify-content: center;
         cursor: not-allowed;
+        width: 2.5rem;
         pointer-events: auto;
       }
 
-      &__button::part(button),
-      &__arrow__button::part(button) {
+      &__button::part(button) {
         display: flex;
         justify-content: center;
-        width: 2.25rem;
+        width: 2.5rem;
       }
     }
   }

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
@@ -257,10 +257,13 @@ export class OdsPagination {
     }
 
     return (
-      <Host class="ods-pagination">
+      <Host class="ods-pagination" isDisabled={this.isDisabled}>
         {
           !!this.totalItems &&
-            <div class="ods-pagination__results">
+            <div class={{
+              'ods-pagination__results': true,
+              'ods-pagination__results--disabled': this.isDisabled,
+            }}>
               {
                 this.totalItems >= ODS_PAGINATION_PER_PAGE.min &&
                   <ods-select isDisabled={this.isDisabled}
@@ -274,7 +277,7 @@ export class OdsPagination {
                     }
                   </ods-select>
               }
-              <ods-text preset={ ODS_TEXT_PRESET.span }>
+              <ods-text preset={ ODS_TEXT_PRESET.label }>
                 <slot name="before-total-items"></slot>
                 {this.totalItems}
                 <slot name="after-total-items"></slot>