fix(ui-pagination): make Pagination wrap on smaller screen sizes and prevent scrollbars

INSTUI-4461

Author: ToMESSKa

cypress/component/Pagination.cy.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React from 'react'
-import { Pagination, ScreenReaderContent } from '../../packages/ui'
+import { Pagination, ScreenReaderContent } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
@@ -68,4 +68,54 @@ describe('<Pagination/>', () => {
       })
     })
   })
+
+  it('should wrap at a small viewport width', () => {
+    cy.mount(
+      <Pagination
+        as="nav"
+        margin="small"
+        variant="compact"
+        currentPage={4}
+        totalPageNumber={100000}
+        siblingCount={3}
+        boundaryCount={2}
+      />
+    )
+
+    cy.viewport(1000, 800)
+
+    cy.get('[role="navigation"]').within(() => {
+      cy.get('button').then(($items) => {
+        const firstItem = $items[0]
+        const firstItemTop = firstItem.getBoundingClientRect().top
+
+        let hasWrapped = false
+        $items.each((index, item) => {
+          const itemTop = item.getBoundingClientRect().top
+          if (index > 0 && itemTop > firstItemTop) {
+            hasWrapped = true
+          }
+        })
+        expect(hasWrapped).to.be.false
+      })
+    })
+
+    cy.viewport(300, 800)
+
+    cy.get('[role="navigation"]').within(() => {
+      cy.get('button').then(($items) => {
+        const firstItem = $items[0]
+        const firstItemTop = firstItem.getBoundingClientRect().top
+
+        let hasWrapped = false
+        $items.each((index, item) => {
+          const itemTop = item.getBoundingClientRect().top
+          if (index > 0 && itemTop > firstItemTop) {
+            hasWrapped = true
+          }
+        })
+        expect(hasWrapped).to.be.true
+      })
+    })
+  })
 })

packages/ui-pagination/src/Pagination/index.tsx

@@ -105,7 +105,8 @@ class Pagination extends Component<PaginationProps> {
     siblingCount: 1,
     boundaryCount: 1,
     ellipsis: '…',
-    renderPageIndicator: (page: number) => page
+    renderPageIndicator: (page: number) => page,
+    margin: 'space8'
   }
 
   static Page = PaginationButton

packages/ui-pagination/src/Pagination/props.ts

@@ -118,9 +118,9 @@ type PaginationOwnProps = {
   variant?: 'full' | 'compact' | 'input'
 
   /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   * Spacing token values can be found here: [Spacing Tokens](https://instructure.design/#layout-spacing/%23Tokens)
+   *
+   * Apply these values via familiar CSS-like shorthand. For example: `margin="space8 0 space12"`.
    */
   margin?: Spacing
 

packages/ui-pagination/src/Pagination/styles.ts

@@ -41,7 +41,9 @@ const generateStyle = (componentTheme: PaginationTheme): PaginationStyle => {
       all: 'unset',
       display: 'flex',
       alignItems: 'center',
-      gap: componentTheme.pageIndicatorGap
+      gap: componentTheme.pageIndicatorGap,
+      flexWrap: 'wrap',
+      justifyContent: 'center'
     },
     pagination: {
       label: 'pagination',