fix: table pagination description adjustments for all screen sizes [W…

…D-8561]

Signed-off-by: Mason Hu <mason.hu@canonical.com>

src/components/TablePagination/TablePaginationControls/TablePaginationControls.tsx

@@ -2,7 +2,7 @@ import Button from "components/Button";
 import Icon from "components/Icon";
 import Input from "components/Input";
 import Select from "components/Select";
-import React, { ChangeEvent, HTMLAttributes, useRef } from "react";
+import React, { ChangeEvent, HTMLAttributes } from "react";
 import classnames from "classnames";
 import {
   generatePagingOptions,
@@ -38,8 +38,7 @@ const TablePaginationControls = ({
   onPageSizeChange,
   ...divProps
 }: Props): JSX.Element => {
-  const descriptionRef = useRef<HTMLDivElement>(null);
-  const isSmallScreen = useFigureSmallScreen({ descriptionRef });
+  const isSmallScreen = useFigureSmallScreen();
 
   const totalPages = Math.ceil(totalItems / pageSize);
   const descriptionDisplay = getDescription({
@@ -77,7 +76,7 @@ const TablePaginationControls = ({
       {...divProps}
       role="navigation"
     >
-      <div className="description" ref={descriptionRef}>
+      <div className="description" id="pagination-description">
         {descriptionDisplay}
       </div>
       <Button
@@ -111,7 +110,7 @@ const TablePaginationControls = ({
         <Icon name="chevron-down" />
       </Button>
       <Select
-        className="items-per-page"
+        className="u-no-margin--bottom"
         label="Items per page"
         labelClassName="u-off-screen"
         id="itemsPerPage"

src/components/TablePagination/__snapshots__/TablePagination.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`<TablePagination /> renders table pagination and matches the snapshot 1
 >
   <div
     class="description"
+    id="pagination-description"
   >
     Showing all 5 items
   </div>
@@ -72,7 +73,7 @@ exports[`<TablePagination /> renders table pagination and matches the snapshot 1
         <select
           aria-describedby=""
           aria-invalid="false"
-          class="p-form-validation__input items-per-page"
+          class="p-form-validation__input u-no-margin--bottom"
           id="itemsPerPage"
         >
           <option

src/components/TablePagination/utils.tsx

@@ -2,26 +2,11 @@ import {
   Children,
   ReactElement,
   ReactNode,
-  RefObject,
   cloneElement,
   useEffect,
   useState,
 } from "react";
 
-/**
- * Determine if we are working with a small screen.
- * 'small screen' in this case is relative to the width of the description div
- */
-export const figureSmallScreen = (
-  descriptionRef: RefObject<HTMLDivElement>
-) => {
-  const descriptionElement = descriptionRef.current;
-  if (!descriptionElement) {
-    return true;
-  }
-  return descriptionElement.getBoundingClientRect().width < 230;
-};
-
 /**
  * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
  * for those child components.
@@ -78,20 +63,17 @@ export const getDescription = ({
   }`;
 };
 
-export const useFigureSmallScreen = (args: {
-  descriptionRef: RefObject<HTMLDivElement>;
-}) => {
-  const { descriptionRef } = args;
+export const useFigureSmallScreen = () => {
   const [isSmallScreen, setSmallScreen] = useState(false);
   useEffect(() => {
     const handleResize = () => {
-      setSmallScreen(figureSmallScreen(descriptionRef));
+      setSmallScreen(window.innerWidth < 620);
     };
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [isSmallScreen, descriptionRef]);
+  }, []);
 
   return isSmallScreen;
 };