sts-sponsors team mailing list archive

[Jones Ogolo <mp+441441@xxxxxxxxxxxxxxxxxx>]

Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1562-fix-pagination-component into maas-site-manager:main.

Commit message:
fix pagination component on MAAS site manager

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/441441

Made pagination-bar text bolder and removed overflow on smaller screens

QA Steps:
- Goto /tokens or /requests
- Test the pagination bar on different screens to ensure it doesn't overflow.
- Description text should also be semi-bold (as in MAAS UI)
-- 
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1562-fix-pagination-component into maas-site-manager:main.

diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
index 59a93da..ce7cf69 100644
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -12,12 +12,26 @@
 .u-flex--justify-end {
   justify-content: flex-end !important;
 }
+.u-flex--justify-between {
+  justify-content: space-between !important;
+}
 .u-flex--column {
   flex-direction: column !important;
 }
+.u-flex--column-x-small {
+  @media (max-width: $breakpoint-x-small) {
+    flex-direction: column !important;
+  }
+}
 .u-flex--grow {
   flex-grow: 1 !important;
 }
+.u-flex--wrap {
+  flex-wrap: wrap !important;
+}
 .u-capitalize {
   text-transform: capitalize !important;
 }
+.u-no-wrap {
+  white-space: nowrap !important;
+}
diff --git a/frontend/src/components/base/PaginationBar/PaginationBar.tsx b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
index 9dd4989..3c7395a 100644
--- a/frontend/src/components/base/PaginationBar/PaginationBar.tsx
+++ b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useMemo } from "react";
 
-import { Col, Row, Select } from "@canonical/react-components";
+import { Select } from "@canonical/react-components";
 
 import type { AppPaginationProps } from "@/components/base/TablePagination/TablePagination";
 import TablePagination from "@/components/base/TablePagination/TablePagination";
@@ -48,13 +48,12 @@ const PaginationBar = ({
   };
 
   return (
-    <Row className="pagination-bar">
-      <Col medium={6} size={7} small={4}>
-        <p className="pagination-bar__description">
-          Showing {getDisplayedDataCount()} out of {totalItems} {dataContext}
-        </p>
-      </Col>
-      <Col medium={3} size={3} small={4}>
+    <section className="pagination-bar u-flex u-flex--justify-between u-flex--wrap">
+      <strong className="pagination-bar__description">
+        Showing {getDisplayedDataCount()} out of {totalItems} {dataContext}
+      </strong>
+
+      <div className="u-flex u-flex--wrap u-flex--column-x-small pagination-bar__right">
         <TablePagination
           currentPage={currentPage}
           isLoading={isLoading}
@@ -64,8 +63,7 @@ const PaginationBar = ({
           setCurrentPage={setCurrentPage}
           totalItems={totalItems}
         />
-      </Col>
-      <Col medium={3} size={2} small={4}>
+
         <Select
           aria-label="Tokens per page"
           name="Tokens per page"
@@ -73,8 +71,8 @@ const PaginationBar = ({
           options={pageOptions}
           value={itemsPerPage}
         />
-      </Col>
-    </Row>
+      </div>
+    </section>
   );
 };
 
diff --git a/frontend/src/components/base/PaginationBar/_PaginationBar.scss.scss b/frontend/src/components/base/PaginationBar/_PaginationBar.scss.scss
index 204acbd..2a76986 100644
--- a/frontend/src/components/base/PaginationBar/_PaginationBar.scss.scss
+++ b/frontend/src/components/base/PaginationBar/_PaginationBar.scss.scss
@@ -15,6 +15,12 @@
     padding: 0;
   }
 
+  .pagination-bar__right {
+    @media screen and (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+  }
+
   select {
     margin-bottom: 0;
   }
diff --git a/frontend/src/components/base/TablePagination/TablePagination.tsx b/frontend/src/components/base/TablePagination/TablePagination.tsx
index e9b4fbf..5da3674 100644
--- a/frontend/src/components/base/TablePagination/TablePagination.tsx
+++ b/frontend/src/components/base/TablePagination/TablePagination.tsx
@@ -71,7 +71,7 @@ const TablePagination = ({
             <Icon className="u__left-rotate" name="chevron-down" />
           </Button>
         </li>
-        <span>Page</span>
+        <strong>Page</strong>
         <Input
           aria-label="current page"
           className="current-page"
@@ -83,8 +83,7 @@ const TablePagination = ({
           type="number"
           value={pageNumber}
         />
-        <span>of</span>
-        <span>{totalPages}</span>
+        <strong className="u-no-wrap"> of {totalPages}</strong>
         <li>
           <Button
             appearance="base"
diff --git a/frontend/src/components/base/TablePagination/_TablePagination.scss b/frontend/src/components/base/TablePagination/_TablePagination.scss
index 2015d67..0375ec5 100644
--- a/frontend/src/components/base/TablePagination/_TablePagination.scss
+++ b/frontend/src/components/base/TablePagination/_TablePagination.scss
@@ -1,5 +1,6 @@
 .table-pagination {
   position: relative;
+  margin-right: $sph--x-large;
 
   @media screen and (max-width: $breakpoint-small) {
     margin-bottom: $spv--large;