fix: pagination consistent width across html and react platforms (#337)

ogcio · Nov 26, 2024 · 0d8cef1 · 0d8cef1
1 parent dde8465
commit 0d8cef1
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 24 deletions.
diff --git a/apps/docs/content/3-components/2-library/pagination.mdx b/apps/docs/content/3-components/2-library/pagination.mdx
@@ -44,22 +44,24 @@ libraries:
    data-total-pages="10"
    data-testid="govie-pagination"
    data-module="gieds-pagination"
-  >
+   >
    <a
       href="#"
       target="_self"
       data-testid="govie-pagination-prev-btn"
       data-element="button-container"
       data-module="gieds-button"
-      class="gi-btn gi-btn-flat-dark gi-btn-large"
+      class="gi-pagination-prev-btn gi-btn gi-btn-flat-dark gi-btn-large"
    >
-      <span data-testid="govie-icon" role="presentation" class="material-symbols-outlined gi-block gi-text-[24px]">arrow_left_alt</span>
-      <span class="sm:gi-block gi-hidden">Previous</span>
+      <span data-testid="govie-icon" role="presentation" class="material-symbols-outlined gi-block gi-text-[24px]">arrow_left_alt</span> <span class='sm:gi-block gi-hidden'>Previous</span>
    </a>
    <div class="xs:gi-hidden gi-block gi-text-md">
-      <span class="gi-font-bold">Page 5</span> of 10
+   <span class="gi-font-bold">Page 5</span> of 10
    </div>
-   <div class="sm:gi-flex xs:gi-flex gi-items-center gi-justify-between gi-gap-2 md:gi-hidden gi-hidden">
+
+   <div
+      class="sm:gi-flex xs:gi-flex gi-items-center gi-justify-between gi-gap-2 md:gi-hidden gi-hidden"
+   >
       <a
          href="#"
          target="_self"
@@ -70,7 +72,14 @@ libraries:
       >
          1
       </a>
-      <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
+
+      <span
+         data-testid="govie-icon"
+         class="material-symbols-outlined gi-gray-700"
+      >
+         more_horiz
+      </span>
+
       <a
          href="#"
          target="_self"
@@ -81,7 +90,14 @@ libraries:
       >
          5
       </a>
-      <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
+
+      <span
+         data-testid="govie-icon"
+         class="material-symbols-outlined gi-gray-700"
+      >
+         more_horiz
+      </span>
+
       <a
          href="#"
          target="_self"
@@ -92,7 +108,9 @@ libraries:
       >
          10
       </a>
+
    </div>
+
    <div class="md:gi-flex gi-items-center gi-justify-between gi-gap-2 gi-hidden">
       <a
          href="#"
@@ -104,7 +122,14 @@ libraries:
       >
          1
       </a>
-      <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
+
+      <span
+         data-testid="govie-icon"
+         class="material-symbols-outlined gi-gray-700"
+      >
+         more_horiz
+      </span>
+
       <a
          href="#"
          target="_self"
@@ -115,6 +140,7 @@ libraries:
       >
          3
       </a>
+
       <a
          href="#"
          target="_self"
@@ -125,6 +151,7 @@ libraries:
       >
          4
       </a>
+
       <a
          href="#"
          target="_self"
@@ -135,6 +162,7 @@ libraries:
       >
          5
       </a>
+
       <a
          href="#"
          target="_self"
@@ -145,6 +173,7 @@ libraries:
       >
          6
       </a>
+
       <a
          href="#"
          target="_self"
@@ -155,7 +184,14 @@ libraries:
       >
          7
       </a>
-      <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
+
+      <span
+         data-testid="govie-icon"
+         class="material-symbols-outlined gi-gray-700"
+      >
+         more_horiz
+      </span>
+
       <a
          href="#"
          target="_self"
@@ -166,19 +202,20 @@ libraries:
       >
          10
       </a>
+
    </div>
+
    <a
       href="#"
       target="_self"
       data-testid="govie-pagination-next-btn"
       data-element="button-container"
       data-module="gieds-button"
-      class="gi-btn gi-btn-flat-dark gi-btn-large"
+      class="gi-pagination-next-btn gi-btn gi-btn-flat-dark gi-btn-large"
    >
-      <span class="sm:gi-block gi-hidden">Next</span>
-      <span data-testid="govie-icon" role="presentation" class="material-symbols-outlined gi-block gi-text-[24px]">arrow_right_alt</span>
+      <span class='sm:gi-block gi-hidden'>Next</span> <span data-testid="govie-icon" role="presentation" class="material-symbols-outlined gi-block gi-text-[24px]">arrow_right_alt</span>
    </a>
-  </div>
+   </div>
   ```
   </TabPanel>
   <TabPanel value="tab13">

diff --git a/apps/docs/dictionary.txt b/apps/docs/dictionary.txt
@@ -122,4 +122,8 @@ itemsDistribution
 fixedHeight
 groupId
 hideToc
-Dismissible
+Dismissible
+gi-pagination-next-btn
+gi-btn
+gi-btn-flat-dark
+gi-btn-large
diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
@@ -904,10 +904,21 @@ input[type='file' i] {
 }
 
 /* End of Toast */
+
 /* Pagination */
 
 .gi-pagination {
-  @apply gi-flex xs:gi-justify-center gi-justify-between gi-items-center  gi-gap-2;
+  @apply gi-flex xs:gi-justify-center gi-justify-between gi-items-center gi-gap-2;
 }
 
+@media (max-width: 640px) {
+  .gi-pagination-next-btn,
+  .gi-pagination-prev-btn {
+    padding: var(--gieds-space-3);
+    height: var(--gieds-space-12);
+    width: var(--gieds-space-12);
+    justify-content: center;
+  }
+}
 /* End of Pagination */
+
diff --git a/packages/html/ds/src/button/button.html b/packages/html/ds/src/button/button.html
@@ -6,6 +6,10 @@
   {% set size = props.size or 'medium' %}
   {% set isDisabled = 'disabled' if props.disabled else 'notDisabled' %}
   {% set testId = props.testId or 'govieButton-' ~ appearance ~ '-' ~ variant ~ '-' ~ size ~ '-' ~ isDisabled %}
+  {% set commonClasses = getVariantAppearanceClass(props.disabled, props.variant, props.appearance) | trim %}
+  {% set sizeClasses = getSizeClass(props.size) | trim %}
+  {% set disabledClasses = isButtonDisabled(props.disabled, props.variant, props.appearance) | trim %}
+  {% set allClasses = (props.className or '') ~ ' ' ~ 'gi-btn ' ~ commonClasses ~ ' ' ~ sizeClasses ~ ' ' ~ disabledClasses %}
 
   {% if props.href %}
     <a
@@ -19,7 +23,7 @@
       data-testid="{{ testId }}"
       data-element="button-container"
       data-module="gieds-button"
-      class="gi-btn {{ getVariantAppearanceClass(props.disabled, props.variant, props.appearance) | trim }} {{ getSizeClass(props.size) | trim }} {{ isButtonDisabled(props.disabled, props.variant, props.appearance) | trim }}"
+      class="{{ allClasses | trim }}"
     >
       {{ props.content | safe | trim }}
     </a>
@@ -32,7 +36,7 @@
       data-testid="{{ testId }}"
       data-element="button-container"
       data-module="gieds-button"
-      class="gi-btn {{ getVariantAppearanceClass(props.disabled, props.variant, props.appearance) | trim }} {{ getSizeClass(props.size) | trim }} {{ isButtonDisabled(props.disabled, props.variant, props.appearance) | trim }}"
+      class="{{ allClasses | trim }}"
     >
       {{ props.content | safe | trim }}
     </button>

diff --git a/packages/html/ds/src/pagination/pagination.html b/packages/html/ds/src/pagination/pagination.html
@@ -18,7 +18,8 @@
         "href": "#",
         "target": "_self",
         "testId": "govie-pagination-prev-btn",
-        "data-current-page": props.currentPage - 1
+        "data-current-page": props.currentPage - 1,
+        "className": "gi-pagination-prev-btn"
       })
     }}
 
@@ -41,7 +42,8 @@
         "target": "_self",
         "disabled": props.currentPage == props.totalPages,
         "testId": "govie-pagination-next-btn",
-        "data-current-page": props.currentPage + 1
+        "data-current-page": props.currentPage + 1,
+        "className": "gi-pagination-next-btn"
       })
     }}
   </div>

diff --git a/packages/react/ds/src/pagination/pagination.tsx b/packages/react/ds/src/pagination/pagination.tsx
@@ -18,8 +18,8 @@ export const Pagination: React.FC<PaginationProps> = ({
   onPageChange,
 }) => {
   const { breakpoint, width } = useBreakpoint();
-  const isCompactView = breakpoint === Breakpoint.XS; // Custom breakpoint for compact view.
-  const showLabel = width < 639;
+  const isCompactView = breakpoint === Breakpoint.XS;
+  const isSMWidth = width < 639;
 
   const displayedPages = getDisplayPages(currentPage, totalPages, breakpoint);
 
@@ -57,11 +57,12 @@ export const Pagination: React.FC<PaginationProps> = ({
         appearance="dark"
         disabled={currentPage === 1}
         onClick={() => onPageChange(currentPage - 1)}
+        className={isSMWidth ? 'gi-icon-btn-large' : ''}
       >
         <React.Fragment key="previous-btn-pagination">
           <Icon icon="arrow_left_alt" />
         </React.Fragment>
-        {!showLabel && 'Previous'}
+        {!isSMWidth && 'Previous'}
       </Button>
 
       {isCompactView ? renderPaginationLabel() : renderPaginationBtns()}
@@ -72,8 +73,9 @@ export const Pagination: React.FC<PaginationProps> = ({
         size="large"
         appearance="dark"
         onClick={() => onPageChange(currentPage + 1)}
+        className={isSMWidth ? 'gi-icon-btn-large' : ''}
       >
-        {!showLabel && 'Next'}
+        {!isSMWidth && 'Next'}
         <React.Fragment key="next-btn-pagination">
           <Icon icon="arrow_right_alt" />
         </React.Fragment>