[Pagination] Update UI (#11637)

### WHY are these changes introduced?

Addresses Shopify/web#119227

Reliant on #11622 merging before
this can merge.

Updates the table variant of the Pagination component to match the new
required UI. [Figma for
reference](https://www.figma.com/file/shC6hyM1MC60abgslhpUib/Index-bulk-actions?type=design&node-id=11-207471&mode=design&t=alwlAtMB43g2Kk1h-0).

### WHAT is this pull request doing?

- Centre-align buttons
- Add prominence to buttons with background color that's different to
surrounding box.

### How to 🎩

Spin URL:
https://admin.web.pagination-refresh.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: mrcthms

.changeset/selfish-ladybugs-battle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated Pagination table variant to have more prominent and centrally-aligned actions

polaris-react/src/components/Pagination/Pagination.module.scss

@@ -28,11 +28,12 @@
 
     button {
       --button-min-height: var(--p-height-700);
-      background-color: var(--p-color-bg-surface-secondary);
+      background-color: var(--p-color-bg-surface-secondary-selected);
       min-height: var(--button-min-height);
       min-width: var(--button-min-height);
       height: var(--button-min-height);
       width: var(--button-min-height);
+      display: flex;
       padding: unset;
 
       /* stylelint-disable -- override pagination buttons in tables  */
@@ -62,3 +63,10 @@
     }
   }
 }
+
+.TablePaginationActions {
+  display: flex;
+  gap: var(--p-space-025);
+  align-items: center;
+  justify-content: center;
+}

polaris-react/src/components/Pagination/Pagination.stories.tsx

@@ -80,3 +80,26 @@ export function WithTableType() {
     </div>
   );
 }
+
+export function WithTableTypeAndNoLabel() {
+  return (
+    <div
+      style={{
+        maxWidth: 'calc(700px + (2 * var(--p-space-400)))',
+        margin: '0 auto',
+      }}
+    >
+      <Pagination
+        onPrevious={() => {
+          console.log('Previous');
+        }}
+        onNext={() => {
+          console.log('Next');
+        }}
+        type="table"
+        hasNext
+        hasPrevious
+      />
+    </div>
+  );
+}

polaris-react/src/components/Pagination/Pagination.tsx

@@ -163,9 +163,11 @@ export function Pagination({
 
   if (type === 'table') {
     const labelMarkup = label ? (
-      <Text as="span" variant="bodySm" fontWeight="medium">
-        {label}
-      </Text>
+      <Box padding="300" paddingBlockStart="0" paddingBlockEnd="0">
+        <Text as="span" variant="bodySm" fontWeight="medium">
+          {label}
+        </Text>
+      </Box>
     ) : null;
 
     return (
@@ -183,15 +185,15 @@ export function Pagination({
           paddingInlineStart="300"
           paddingInlineEnd="200"
         >
-          <InlineStack
-            align={labelMarkup ? 'space-between' : 'end'}
-            blockAlign="center"
-          >
-            {labelMarkup}
-            <ButtonGroup variant="segmented">
-              {constructedPrevious}
-              {constructedNext}
-            </ButtonGroup>
+          <InlineStack align="center" blockAlign="center">
+            <div
+              className={styles.TablePaginationActions}
+              data-buttongroup-variant="segmented"
+            >
+              <div>{constructedPrevious}</div>
+              {labelMarkup}
+              <div>{constructedNext}</div>
+            </div>
           </InlineStack>
         </Box>
       </nav>

polaris-react/src/components/Pagination/tests/Pagination.test.tsx

@@ -272,14 +272,11 @@ describe('<Pagination />', () => {
         });
       });
 
-      it('uses Button and ButtonGroup as subcomponents', () => {
+      it('uses Button as subcomponent', () => {
         const pagination = mountWithApp(
           <Pagination nextURL="/next" previousURL="/prev" type={type} />,
         );
 
-        expect(pagination).toContainReactComponent(ButtonGroup, {
-          variant: 'segmented',
-        });
         expect(pagination).toContainReactComponent(Button, {url: '/prev'});
         expect(pagination).toContainReactComponent(Button, {url: '/next'});
       });
@@ -316,19 +313,19 @@ describe('<Pagination />', () => {
   });
 
   describe('type: table', () => {
-    it('places the content at the end of the container', () => {
+    it('places the content centreally within the container', () => {
       const pagination = mountWithApp(
         <Pagination hasNext nextURL="/next" previousURL="/prev" type="table" />,
       );
 
       expect(pagination).toContainReactComponent(InlineStack, {
-        align: 'end',
+        align: 'center',
         blockAlign: 'center',
       });
     });
 
     describe('label', () => {
-      it('spaces the content apart within the container', () => {
+      it('spaces the content centrally within the container', () => {
         const pagination = mountWithApp(
           <Pagination
             hasNext
@@ -340,7 +337,7 @@ describe('<Pagination />', () => {
         );
 
         expect(pagination).toContainReactComponent(InlineStack, {
-          align: 'space-between',
+          align: 'center',
           blockAlign: 'center',
         });
       });