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

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

@@ -28,10 +28,11 @@ import { IconButton } from '@instructure/ui-buttons'
 import { PresentationContent } from '@instructure/ui-a11y-content'
 import { Tooltip } from '@instructure/ui-tooltip'
 import {
-  IconArrowOpenStartSolid,
-  IconArrowOpenEndSolid,
-  IconArrowDoubleStartSolid,
-  IconArrowDoubleEndSolid
+  ChevronLeftInstUIIcon,
+  ChevronRightInstUIIcon,
+  ChevronsLeftInstUIIcon,
+  ChevronsRightInstUIIcon,
+  renderIconWithProps
 } from '@instructure/ui-icons'
 
 import type { PaginationNavigationProps } from './props'
@@ -70,18 +71,24 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
   get Icon() {
     switch (this.props.direction) {
       case 'first':
-        return IconArrowDoubleStartSolid
+        return ChevronsLeftInstUIIcon
       case 'prev':
-        return IconArrowOpenStartSolid
+        return ChevronLeftInstUIIcon
       case 'next':
-        return IconArrowOpenEndSolid
+        return ChevronRightInstUIIcon
       case 'last':
-        return IconArrowDoubleEndSolid
+        return ChevronsRightInstUIIcon
       default:
         return null
     }
   }
 
+  renderIcon() {
+    const icon = this.Icon
+    if (!icon) return null
+    return renderIconWithProps(icon, 'md', 'baseColor')
+  }
+
   render() {
     const { label, direction, buttonRef, ...props } = this.props
 
@@ -102,7 +109,7 @@ class PaginationArrowButton extends Component<PaginationNavigationProps> {
           margin={this.margin}
           data-cid="PaginationArrowButton"
         >
-          {this.Icon}
+          {this.renderIcon()}
         </IconButton>
       </Tooltip>
     )

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

@@ -24,12 +24,11 @@
 
 import { Component } from 'react'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import { NumberInput } from '@instructure/ui-number-input'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type {
@@ -43,7 +42,7 @@ parent: Pagination
 id: Pagination.PageInput
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle, 'PaginationPageInput')
 class PaginationPageInput extends Component<
   PaginationPageInputProps,
   PaginationPageInputState

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

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { PaginationPageInputTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { PaginationPageInputStyle } from './props'
 
 /**
@@ -31,12 +31,10 @@ 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} 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 = (
-  componentTheme: PaginationPageInputTheme
+  componentTheme: NewComponentTypes['PaginationPageInput']
 ): PaginationPageInputStyle => {
   return {
     paginationPageInput: {

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

@@ -33,14 +33,13 @@ import { View } from '@instructure/ui-view'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { PaginationButton } from './PaginationButton'
 import { PaginationArrowButton } from './PaginationArrowButton'
 import { PaginationPageInput } from './PaginationPageInput'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import type { PaginationPageProps } from './PaginationButton/props'
 import type { PaginationArrowDirections } from './PaginationArrowButton/props'
@@ -85,7 +84,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Pagination extends Component<PaginationProps> {
   static readonly componentId = 'Pagination'
 

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

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { PaginationTheme } from '@instructure/shared-types'
-import type { PaginationStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { PaginationStyle, PaginationProps } from './props'
 
 /**
  * ---
@@ -32,10 +32,15 @@ import type { PaginationStyle } 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 = (componentTheme: PaginationTheme): PaginationStyle => {
+const generateStyle = (
+  componentTheme: NewComponentTypes['Pagination'],
+  _props: PaginationProps,
+  _sharedTokens: SharedTokens
+): PaginationStyle => {
   return {
     pageIndicatorList: {
       all: 'unset',