feat(dashboard,ui): Streamline spacing and sizing (#6061)

packages/design-system/ui/src/components/table/table.tsx

@@ -6,14 +6,14 @@ import { clx } from "@/utils/clx"
 
 /**
  * This component is based on the table element and its various children:
- * 
+ *
  * - `Table`: `table`
  * - `Table.Header`: `thead`
  * - `Table.Row`: `tr`
  * - `Table.HeaderCell`: `th`
  * - `Table.Body`: `tbody`
  * - `Table.Cell`: `td`
- * 
+ *
  * Each component supports the props or attributes of its equivalent HTML element.
  */
 const Root = React.forwardRef<
@@ -36,8 +36,8 @@ const Row = React.forwardRef<
     ref={ref}
     className={clx(
       "bg-ui-bg-base hover:bg-ui-bg-base-hover border-ui-border-base transition-fg border-b",
-      "[&_td:last-child]:pr-8 [&_th:last-child]:pr-8",
-      "[&_td:first-child]:pl-8 [&_th:first-child]:pl-8",
+      "[&_td:last-child]:pr-6 [&_th:last-child]:pr-6",
+      "[&_td:first-child]:pl-6 [&_th:first-child]:pl-6",
       className
     )}
     {...props}
@@ -72,7 +72,7 @@ const HeaderCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th ref={ref} className={clx("h-12 pr-3 text-left", className)} {...props} />
+  <th ref={ref} className={clx("h-10 pr-3 text-left", className)} {...props} />
 ))
 HeaderCell.displayName = "Table.HeaderCell"
 
@@ -95,6 +95,13 @@ interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
   pageCount: number
   canPreviousPage: boolean
   canNextPage: boolean
+  translations?: {
+    of?: string
+    results?: string
+    pages?: string
+    prev?: string
+    next?: string
+  }
   previousPage: () => void
   nextPage: () => void
 }
@@ -140,6 +147,17 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
        * This function should handle retrieving data for the previous page.
        */
       previousPage,
+      /**
+       * An optional object of words to use in the pagination component.
+       * Use this to override the default words, or translate them into another language.
+       */
+      translations = {
+        of: "of",
+        results: "results",
+        pages: "pages",
+        prev: "Prev",
+        next: "Next",
+      },
       ...props
     }: TablePaginationProps,
     ref
@@ -155,7 +173,7 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
       <div
         ref={ref}
         className={clx(
-          "text-ui-fg-subtle txt-compact-small-plus flex w-full items-center justify-between px-5 pb-6 pt-4",
+          "text-ui-fg-subtle txt-compact-small-plus flex w-full items-center justify-between px-3 py-4",
           className
         )}
         {...props}
@@ -163,27 +181,30 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
         <div className="inline-flex items-center gap-x-1 px-3 py-[5px]">
           <p>{from}</p>
           <Minus className="text-ui-fg-muted" />
-          <p>{`${to} of ${count} results`}</p>
+          <p>{`${to} ${translations.of} ${count} ${translations.results}`}</p>
         </div>
         <div className="flex items-center gap-x-2">
           <div className="inline-flex items-center gap-x-1 px-3 py-[5px]">
             <p>
-              {pageIndex + 1} of {Math.max(pageCount, 1)}
+              {pageIndex + 1} {translations.of} {Math.max(pageCount, 1)}{" "}
+              {translations.pages}
             </p>
           </div>
           <Button
+            type="button"
             variant={"transparent"}
             onClick={previousPage}
             disabled={!canPreviousPage}
           >
-            Prev
+            {translations.prev}
           </Button>
           <Button
+            type="button"
             variant={"transparent"}
             onClick={nextPage}
             disabled={!canNextPage}
           >
-            Next
+            {translations.next}
           </Button>
         </div>
       </div>