[v12] feat(ui-pagination): Pagination rework new v12

packages/ui-pagination/package.json

@@ -37,6 +37,7 @@
     "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
+    "@instructure/ui-text": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
   },

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

@@ -86,7 +86,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
   renderIcon() {
     const icon = this.Icon
     if (!icon) return null
-    return renderIconWithProps(icon, 'md', 'baseColor')
+    return renderIconWithProps(icon, 'md', 'actionTertiaryBaseColor')
   }
 
   render() {

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

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'
+import { Text } from '@instructure/ui-text/latest'
 import { NumberInput } from '@instructure/ui-number-input/latest'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
@@ -191,7 +192,9 @@ class PaginationPageInput extends Component<
     const { label, numberOfPages, styles } = this.props
 
     return typeof label === 'function' && label(numberOfPages) ? (
-      <span css={styles?.inputLabel}>{label(numberOfPages)}</span>
+      <Text variant="content">
+        <span css={styles?.inputLabel}>{label(numberOfPages)}</span>
+      </Text>
     ) : null
   }
 

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

@@ -31,6 +31,9 @@ import type { PaginationPageInputStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (

packages/ui-pagination/src/Pagination/v2/__tests__/Pagination.test.tsx

@@ -219,16 +219,17 @@ describe('<Pagination />', () => {
     const pagination = screen.getByRole('navigation')
     const allButtons = screen.queryAllByRole('button')
     const paginationButtons = screen.getAllByRole('button', { name: /^#\d$/ })
-    const ellipses = screen.getAllByText('…', {
-      selector: '[aria-hidden="true"]'
-    })
+    const ellipses = document.querySelectorAll('li[aria-hidden="true"]')
 
     expect(pagination).toBeInTheDocument()
     expect(pagination).toHaveTextContent('Prev#0…#2#3#4#5#6…#8Next')
 
     expect(allButtons.length).toEqual(9)
     expect(paginationButtons.length).toEqual(7)
     expect(ellipses.length).toEqual(2)
+    expect(Array.from(ellipses).every((el) => el.textContent === '…')).toBe(
+      true
+    )
   })
 
   it('should truncate start', async () => {
@@ -241,16 +242,17 @@ describe('<Pagination />', () => {
     const pagination = screen.getByRole('navigation')
     const allButtons = screen.queryAllByRole('button')
     const paginationButtons = screen.getAllByRole('button', { name: /^#\d$/ })
-    const ellipses = screen.getAllByText('…', {
-      selector: '[aria-hidden="true"]'
-    })
+    const ellipses = document.querySelectorAll('li[aria-hidden="true"]')
 
     expect(pagination).toBeInTheDocument()
     expect(pagination).toHaveTextContent('Prev#0…#5#6#7#8')
 
     expect(allButtons.length).toEqual(6)
     expect(paginationButtons.length).toEqual(5)
     expect(ellipses.length).toEqual(1)
+    expect(Array.from(ellipses).every((el) => el.textContent === '…')).toBe(
+      true
+    )
   })
 
   it('should truncate end', async () => {
@@ -263,16 +265,17 @@ describe('<Pagination />', () => {
     const pagination = screen.getByRole('navigation')
     const allButtons = screen.queryAllByRole('button')
     const paginationButtons = screen.getAllByRole('button', { name: /^#\d$/ })
-    const ellipses = screen.getAllByText('…', {
-      selector: '[aria-hidden="true"]'
-    })
+    const ellipses = document.querySelectorAll('li[aria-hidden="true"]')
 
     expect(pagination).toBeInTheDocument()
     expect(pagination).toHaveTextContent('#0#1#2#3…#5Next')
 
     expect(allButtons.length).toEqual(6)
     expect(paginationButtons.length).toEqual(5)
     expect(ellipses.length).toEqual(1)
+    expect(Array.from(ellipses).every((el) => el.textContent === '…')).toBe(
+      true
+    )
   })
 
   it('should omit ellipses when bounds included in context', async () => {

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

@@ -29,6 +29,7 @@ import {
   ReactNode
 } from 'react'
 
+import { Text } from '@instructure/ui-text/latest'
 import { View } from '@instructure/ui-view/latest'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
@@ -258,12 +259,11 @@ class Pagination extends Component<PaginationProps> {
 
     return (
       <View
-        as="span"
         padding={visibleLabel ? 'small' : '0'}
         display={visibleLabel ? display : 'auto'}
         id={this._labelId}
       >
-        {this.props.label}
+        <Text variant="content">{this.props.label}</Text>
       </View>
     )
   }
@@ -375,7 +375,7 @@ class Pagination extends Component<PaginationProps> {
       pages.push(this.renderPagesInInterval(1, boundaryCount!, currentPage!))
       pages.push(
         <li key="ellipsis1" style={{ all: 'unset' }}>
-          {ellipsis}
+          <Text>{ellipsis}</Text>
         </li>
       )
       if (
@@ -418,7 +418,7 @@ class Pagination extends Component<PaginationProps> {
       )
       pages.push(
         <li key="ellipsis2" style={{ all: 'unset' }}>
-          {ellipsis}
+          <Text>{ellipsis}</Text>
         </li>
       )
       pages.push(
@@ -463,14 +463,14 @@ class Pagination extends Component<PaginationProps> {
       if (sliceStart - firstIndex > 1)
         visiblePages.unshift(
           <li style={{ all: 'unset' }} key="first" aria-hidden="true">
-            {this.props.ellipsis}
+            <Text>{this.props.ellipsis}</Text>
           </li>
         )
       if (sliceStart - firstIndex > 0) visiblePages.unshift(firstPage)
       if (lastIndex - sliceEnd + 1 > 1)
         visiblePages.push(
           <li style={{ all: 'unset' }} key="last" aria-hidden="true">
-            {this.props.ellipsis}
+            <Text>{this.props.ellipsis}</Text>
           </li>
         )
       if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage)

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

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { PaginationStyle, PaginationProps } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { PaginationStyle } from './props'
 
 /**
  * ---
@@ -37,9 +37,7 @@ import type { PaginationStyle, PaginationProps } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Pagination'],
-  _props: PaginationProps,
-  _sharedTokens: SharedTokens
+  componentTheme: NewComponentTypes['Pagination']
 ): PaginationStyle => {
   return {
     pageIndicatorList: {
@@ -57,7 +55,8 @@ const generateStyle = (
     pages: {
       label: 'pagination__pages',
       display: 'inline-flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: componentTheme.pageIndicatorGap
     }
   }
 }

packages/ui-pagination/tsconfig.build.json

@@ -18,6 +18,7 @@
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-portal/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-text/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },