Merge pull request #581 from teamsnap/SO-4361-center-pagination

center all elements of bottom pagination

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Fixed` for any bug fixes.
 - `Security`
 
+## [3.10.5] - 2021-04-06
+- https://github.com/teamsnap/teamsnap-ui/pull/581
+- `Updated` Center paginated table elements as a group
+
 ## [3.10.5] - 2021-04-06
 - https://github.com/teamsnap/teamsnap-ui/pull/564
 - `Added` Allow paginated table to export placement options type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamsnap/teamsnap-ui",
-  "version": "3.10.5",
+  "version": "3.10.6",
   "description": "a CSS component library for TeamSnap",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/js/components/Table/Paginated/PaginatedTable.tsx

@@ -188,8 +188,8 @@ const PaginatedTable: React.FunctionComponent<Props> & { PaginationPlacement: ty
   }, [customFilter]);
 
   const paginationItems = (
-  <div className={ `Grid-cell u-spaceTopSm u-flex u-flexJustifyEnd ${paginationPlacement == Placement.Bottom ? "u-sizeFill u-sizeFull" : "u-sizeFit"}` }>
-    <div className="u-spaceAuto u-spaceRightSm">
+  <div className={ `Grid-cell u-spaceTopSm u-flex u-flexAlignItemsCenter ${paginationPlacement == Placement.Bottom ? " u-flexJustifyCenter u-sizeFill u-sizeFull" : " u-flexJustifyEnd u-sizeFit"}` }>
+    <div className="u-spaceRightSm">
       <PaginationCurrentSubsetDisplay
         itemsPerPage={ itemsPerPage }
         currentPage={ currentPage }
@@ -201,7 +201,6 @@ const PaginatedTable: React.FunctionComponent<Props> & { PaginationPlacement: ty
       itemsPerPage={ itemsPerPage }
       currentPage={ currentPage }
       setCurrentPage={ setCurrentPage }
-      mods={ paginationPlacement == Placement.Bottom ? "u-flexJustifyCenter u-flexGrow1" : "" }
     />
     { !hideRowsSelect ? (
       <div className="u-spaceLeftSm">