feat(ui-table): migrate table to new theming system

packages/ui-table/package.json

@@ -38,7 +38,7 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-a11y-content": "workspace:*",
-    "@instructure/ui-icons": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-simple-select": "workspace:*",
     "@instructure/ui-utils": "workspace:*",

packages/ui-table/src/Table/Body/index.tsx

@@ -32,10 +32,9 @@ import {
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 import type { TableBodyProps } from './props'
 import { allowedProps } from './props'
 import TableContext from '../TableContext'
@@ -46,7 +45,7 @@ parent: Table
 id: Table.Body
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Body extends Component<TableBodyProps> {
   static readonly componentId = 'Table.Body'
   static contextType = TableContext

packages/ui-table/src/Table/Body/props.ts

@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 import React from 'react'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type {
-  OtherHTMLAttributes,
-  TableBodyTheme
-} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+  ThemeOverrideValue,
+  ComponentStyle,
+  WithStyleProps
+} from '@instructure/emotion'
 
 type TableBodyOwnProps = {
   /**
@@ -43,8 +44,9 @@ type PropKeys = keyof TableBodyOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableBodyProps = TableBodyOwnProps &
-  WithStyleProps<TableBodyTheme, TableBodyStyle> &
-  OtherHTMLAttributes<TableBodyOwnProps>
+  WithStyleProps<null, TableBodyStyle> & {
+    themeOverride?: ThemeOverrideValue
+  } & OtherHTMLAttributes<TableBodyOwnProps>
 
 type TableBodyStyle = ComponentStyle<'body'>
 const allowedProps: AllowedPropKeys = ['children']

packages/ui-table/src/Table/Body/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { TableBodyTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { TableBodyStyle } from './props'
 
 /**
@@ -33,7 +33,9 @@ import type { TableBodyStyle } from './props'
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: TableBodyTheme): TableBodyStyle => {
+const generateStyle = (
+  componentTheme: NewComponentTypes['TableBody']
+): TableBodyStyle => {
   return {
     body: {
       label: 'body',

packages/ui-table/src/Table/Cell/index.tsx

@@ -27,10 +27,9 @@ import { Component, ContextType } from 'react'
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 import type { TableCellProps } from './props'
 import { allowedProps } from './props'
 import TableContext from '../TableContext'
@@ -41,7 +40,7 @@ parent: Table
 id: Table.Cell
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Cell extends Component<TableCellProps> {
   static readonly componentId = 'Table.Cell'
   static contextType = TableContext

packages/ui-table/src/Table/Cell/props.ts

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
-  OtherHTMLAttributes,
-  Renderable,
-  TableCellTheme
-} from '@instructure/shared-types'
+  ThemeOverrideValue,
+  ComponentStyle,
+  WithStyleProps
+} from '@instructure/emotion'
+import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
 
 type TableCellOwnProps = {
   /**
@@ -48,8 +48,9 @@ type PropKeys = keyof TableCellOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableCellProps = TableCellOwnProps &
-  WithStyleProps<TableCellTheme, TableCellStyle> &
-  OtherHTMLAttributes<TableCellOwnProps>
+  WithStyleProps<null, TableCellStyle> & {
+    themeOverride?: ThemeOverrideValue
+  } & OtherHTMLAttributes<TableCellOwnProps>
 
 type TableCellStyle = ComponentStyle<'cell'>
 const allowedProps: AllowedPropKeys = ['children', 'header', 'textAlign']

packages/ui-table/src/Table/Cell/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { TableCellTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { TableCellProps, TableCellStyle } from './props'
 
 /**
@@ -32,11 +32,11 @@ import type { TableCellProps, TableCellStyle } 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
+ * @param  {Object} sharedTokens Shared token object
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: TableCellTheme,
+  componentTheme: NewComponentTypes['TableCell'],
   props: TableCellProps
 ): TableCellStyle => {
   const { textAlign } = props
@@ -52,7 +52,7 @@ const generateStyle = (
       boxSizing: 'border-box',
       verticalAlign: 'middle',
       lineHeight: componentTheme.lineHeight,
-      padding: componentTheme.padding,
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
       ...(textAlign && { textAlign })
     }
   }

packages/ui-table/src/Table/ColHeader/index.tsx

@@ -25,26 +25,25 @@
 import { Component } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
-import {
-  IconMiniArrowUpLine,
-  IconMiniArrowDownLine,
-  IconMiniArrowDoubleLine
-} from '@instructure/ui-icons'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 import type { TableColHeaderProps } from './props'
 import { allowedProps } from './props'
+import {
+  ChevronsUpDownInstUIIcon,
+  ChevronUpInstUIIcon,
+  ChevronDownInstUIIcon
+} from '@instructure/ui-icons-lucide'
 
 /**
 ---
 parent: Table
 id: Table.ColHeader
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class ColHeader extends Component<TableColHeaderProps> {
   static readonly componentId = 'Table.ColHeader'
 
@@ -72,16 +71,16 @@ class ColHeader extends Component<TableColHeaderProps> {
   }
 
   renderSortArrow() {
-    const { sortDirection, onRequestSort, styles } = this.props
+    const { sortDirection, onRequestSort } = this.props
 
     if (sortDirection === 'ascending') {
-      return <IconMiniArrowUpLine css={styles?.sortedIconColor} />
+      return <ChevronUpInstUIIcon color="infoColor" size="sm" />
     }
     if (sortDirection === 'descending') {
-      return <IconMiniArrowDownLine css={styles?.sortedIconColor} />
+      return <ChevronDownInstUIIcon color="infoColor" size="sm" />
     }
     if (onRequestSort) {
-      return <IconMiniArrowDoubleLine css={styles?.unSortedIconColor} />
+      return <ChevronsUpDownInstUIIcon color="baseColor" size="sm" />
     }
     return undefined
   }

packages/ui-table/src/Table/ColHeader/props.ts

@@ -23,11 +23,12 @@
  */
 import { ThHTMLAttributes } from 'react'
 
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type {
-  OtherHTMLAttributes,
-  TableColHeaderTheme
-} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+  ThemeOverrideValue,
+  ComponentStyle,
+  WithStyleProps
+} from '@instructure/emotion'
 
 type TableColHeaderOwnProps = {
   /**
@@ -72,18 +73,15 @@ type PropKeys = keyof TableColHeaderOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableColHeaderProps = TableColHeaderOwnProps &
-  WithStyleProps<TableColHeaderTheme, TableColHeaderStyle> &
-  OtherHTMLAttributes<
+  WithStyleProps<null, TableColHeaderStyle> & {
+    themeOverride?: ThemeOverrideValue
+  } & OtherHTMLAttributes<
     TableColHeaderOwnProps,
     ThHTMLAttributes<TableColHeaderOwnProps>
   >
 
 type TableColHeaderStyle = ComponentStyle<
-  | 'colHeader'
-  | 'button'
-  | 'buttonContent'
-  | 'unSortedIconColor'
-  | 'sortedIconColor'
+  'colHeader' | 'button' | 'buttonContent'
 >
 const allowedProps: AllowedPropKeys = [
   'id',