From 8990b066d7672e989d87006fe9ac338d803d5d7a Mon Sep 17 00:00:00 2001 From: Peter Pal Hudak Date: Wed, 17 Dec 2025 15:07:46 +0100 Subject: [PATCH] feat(ui-table): migrate table to new theming system --- docs/guides/upgrade-guide.md | 34 ++++++++- packages/ui-table/package.json | 2 +- packages/ui-table/src/Table/Body/index.tsx | 5 +- packages/ui-table/src/Table/Body/props.ts | 9 +-- packages/ui-table/src/Table/Body/styles.ts | 6 +- packages/ui-table/src/Table/Body/theme.ts | 49 ------------- packages/ui-table/src/Table/Cell/index.tsx | 5 +- packages/ui-table/src/Table/Cell/props.ts | 10 +-- packages/ui-table/src/Table/Cell/styles.ts | 8 +-- packages/ui-table/src/Table/Cell/theme.ts | 55 --------------- .../ui-table/src/Table/ColHeader/index.tsx | 23 +++---- .../ui-table/src/Table/ColHeader/props.ts | 15 ++-- .../ui-table/src/Table/ColHeader/styles.ts | 24 +++---- .../ui-table/src/Table/ColHeader/theme.ts | 69 ------------------- packages/ui-table/src/Table/Head/index.tsx | 19 +++-- packages/ui-table/src/Table/Head/props.ts | 10 +-- packages/ui-table/src/Table/Head/styles.ts | 6 +- packages/ui-table/src/Table/Head/theme.ts | 50 -------------- packages/ui-table/src/Table/Row/index.tsx | 5 +- packages/ui-table/src/Table/Row/props.ts | 9 +-- packages/ui-table/src/Table/Row/styles.ts | 10 ++- packages/ui-table/src/Table/Row/theme.ts | 62 ----------------- .../ui-table/src/Table/RowHeader/index.tsx | 5 +- .../ui-table/src/Table/RowHeader/props.ts | 10 +-- .../ui-table/src/Table/RowHeader/styles.ts | 7 +- .../ui-table/src/Table/RowHeader/theme.ts | 55 --------------- .../src/Table/__tests__/Table.test.tsx | 6 +- packages/ui-table/src/Table/index.tsx | 5 +- packages/ui-table/src/Table/props.ts | 8 +-- packages/ui-table/src/Table/styles.ts | 9 +-- packages/ui-table/src/Table/theme.ts | 57 --------------- packages/ui-table/tsconfig.build.json | 2 +- pnpm-lock.yaml | 4 +- 33 files changed, 132 insertions(+), 521 deletions(-) delete mode 100644 packages/ui-table/src/Table/Body/theme.ts delete mode 100644 packages/ui-table/src/Table/Cell/theme.ts delete mode 100644 packages/ui-table/src/Table/ColHeader/theme.ts delete mode 100644 packages/ui-table/src/Table/Head/theme.ts delete mode 100644 packages/ui-table/src/Table/Row/theme.ts delete mode 100644 packages/ui-table/src/Table/RowHeader/theme.ts delete mode 100644 packages/ui-table/src/Table/theme.ts diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index 5519666d9d..8d6517b1eb 100644 --- a/docs/guides/upgrade-guide.md +++ b/docs/guides/upgrade-guide.md @@ -135,9 +135,10 @@ type: example ``` + ### Breadcrumb -#### New tokens +#### New tokens - gapSm - Gap spacing for small size breadcrumbs - gapMd - Gap spacing for medium size breadcrumbs @@ -281,6 +282,37 @@ type: example - theme variable `borderStyle` is now removed - theme variable `position` is now removed +### Table.Cell + +- theme variable `padding` is now removed +- theme variable `borderColor` is now removed +- theme variable `paddingVertical` has been added +- theme variable `paddingHorizontal` has been added + +### Table.ColHeader + +- theme variable `padding` is now removed +- theme variable `paddingVertical` has been added +- theme variable `paddingHorizontal` has been added +- theme variable `borderColor` is now removed +- theme variable `focusOutlineColor` is now removed +- theme variable `focusOutlineStyle` is now removed +- theme variable `focusOutlineWidth` is now removed +- theme variable `sortedIconColor` is now removed +- theme variable `unsortedIconColor` is now removed + +### Table.Row + +- theme variable `padding` is now removed +- theme variable `paddingVertical` has been added +- theme variable `paddingHorizontal` has been added + +### Table.RowHeader + +- theme variable `padding` is now removed +- theme variable `paddingVertical` has been added +- theme variable `paddingHorizontal` has been added + ## Codemods To ease the upgrade, we provide codemods that will automate most of the changes. Pay close attention to its output, it cannot refactor complex code! The codemod scripts can be run via the following commands: diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json index 5a869b4262..51da51f5ab 100644 --- a/packages/ui-table/package.json +++ b/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:*", diff --git a/packages/ui-table/src/Table/Body/index.tsx b/packages/ui-table/src/Table/Body/index.tsx index 058a50ee5b..d12434c05b 100644 --- a/packages/ui-table/src/Table/Body/index.tsx +++ b/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 { static readonly componentId = 'Table.Body' static contextType = TableContext diff --git a/packages/ui-table/src/Table/Body/props.ts b/packages/ui-table/src/Table/Body/props.ts index 75aff9fa4c..9256c207fd 100644 --- a/packages/ui-table/src/Table/Body/props.ts +++ b/packages/ui-table/src/Table/Body/props.ts @@ -22,11 +22,8 @@ * SOFTWARE. */ import React from 'react' -import type { - OtherHTMLAttributes, - TableBodyTheme -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { OtherHTMLAttributes } from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' type TableBodyOwnProps = { /** @@ -43,7 +40,7 @@ type PropKeys = keyof TableBodyOwnProps type AllowedPropKeys = Readonly> type TableBodyProps = TableBodyOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableBodyStyle = ComponentStyle<'body'> diff --git a/packages/ui-table/src/Table/Body/styles.ts b/packages/ui-table/src/Table/Body/styles.ts index 8215080c09..30cfda2dfe 100644 --- a/packages/ui-table/src/Table/Body/styles.ts +++ b/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', diff --git a/packages/ui-table/src/Table/Body/theme.ts b/packages/ui-table/src/Table/Body/theme.ts deleted file mode 100644 index 8c274171ce..0000000000 --- a/packages/ui-table/src/Table/Body/theme.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import type { Theme } from '@instructure/ui-themes' -import { TableBodyTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableBodyTheme => { - const { colors, typography } = theme - - const componentVariables: TableBodyTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010 - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/Cell/index.tsx b/packages/ui-table/src/Table/Cell/index.tsx index dd85df9f3b..475571129c 100644 --- a/packages/ui-table/src/Table/Cell/index.tsx +++ b/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 { static readonly componentId = 'Table.Cell' static contextType = TableContext diff --git a/packages/ui-table/src/Table/Cell/props.ts b/packages/ui-table/src/Table/Cell/props.ts index eceeabdd04..1ceb4131f7 100644 --- a/packages/ui-table/src/Table/Cell/props.ts +++ b/packages/ui-table/src/Table/Cell/props.ts @@ -22,12 +22,8 @@ * SOFTWARE. */ -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - Renderable, - TableCellTheme -} from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' +import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types' type TableCellOwnProps = { /** @@ -48,7 +44,7 @@ type PropKeys = keyof TableCellOwnProps type AllowedPropKeys = Readonly> type TableCellProps = TableCellOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableCellStyle = ComponentStyle<'cell'> diff --git a/packages/ui-table/src/Table/Cell/styles.ts b/packages/ui-table/src/Table/Cell/styles.ts index 25aabb3da0..d692927f82 100644 --- a/packages/ui-table/src/Table/Cell/styles.ts +++ b/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 }) } } diff --git a/packages/ui-table/src/Table/Cell/theme.ts b/packages/ui-table/src/Table/Cell/theme.ts deleted file mode 100644 index 8c098ea907..0000000000 --- a/packages/ui-table/src/Table/Cell/theme.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { TableCellTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableCellTheme => { - const { colors, typography, spacing } = theme - - const componentVariables: TableCellTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - borderColor: colors?.contrasts?.grey3045, - - lineHeight: typography?.lineHeightCondensed, - padding: `${spacing?.xSmall} ${spacing?.small}` - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/ColHeader/index.tsx b/packages/ui-table/src/Table/ColHeader/index.tsx index 62b29a468f..174c8f0dd5 100644 --- a/packages/ui-table/src/Table/ColHeader/index.tsx +++ b/packages/ui-table/src/Table/ColHeader/index.tsx @@ -25,18 +25,17 @@ 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' /** --- @@ -44,7 +43,7 @@ parent: Table id: Table.ColHeader --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class ColHeader extends Component { static readonly componentId = 'Table.ColHeader' @@ -72,16 +71,16 @@ class ColHeader extends Component { } renderSortArrow() { - const { sortDirection, onRequestSort, styles } = this.props + const { sortDirection, onRequestSort } = this.props if (sortDirection === 'ascending') { - return + return } if (sortDirection === 'descending') { - return + return } if (onRequestSort) { - return + return } return undefined } diff --git a/packages/ui-table/src/Table/ColHeader/props.ts b/packages/ui-table/src/Table/ColHeader/props.ts index 9acc7110ab..086b9bb8ac 100644 --- a/packages/ui-table/src/Table/ColHeader/props.ts +++ b/packages/ui-table/src/Table/ColHeader/props.ts @@ -23,11 +23,8 @@ */ import { ThHTMLAttributes } from 'react' -import type { - OtherHTMLAttributes, - TableColHeaderTheme -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { OtherHTMLAttributes } from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' type TableColHeaderOwnProps = { /** @@ -72,18 +69,14 @@ type PropKeys = keyof TableColHeaderOwnProps type AllowedPropKeys = Readonly> type TableColHeaderProps = TableColHeaderOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes< TableColHeaderOwnProps, ThHTMLAttributes > type TableColHeaderStyle = ComponentStyle< - | 'colHeader' - | 'button' - | 'buttonContent' - | 'unSortedIconColor' - | 'sortedIconColor' + 'colHeader' | 'button' | 'buttonContent' > const allowedProps: AllowedPropKeys = [ 'id', diff --git a/packages/ui-table/src/Table/ColHeader/styles.ts b/packages/ui-table/src/Table/ColHeader/styles.ts index f327ecabe9..a299723c61 100644 --- a/packages/ui-table/src/Table/ColHeader/styles.ts +++ b/packages/ui-table/src/Table/ColHeader/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { TableColHeaderTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { TableColHeaderProps, TableColHeaderStyle } from './props' /** @@ -32,11 +32,13 @@ import type { TableColHeaderProps, TableColHeaderStyle } 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. * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: TableColHeaderTheme, - props: TableColHeaderProps + componentTheme: NewComponentTypes['TableColHeader'], + props: TableColHeaderProps, + sharedTokens: SharedTokens ): TableColHeaderStyle => { const { onRequestSort, textAlign } = props @@ -46,7 +48,7 @@ const generateStyle = ( fontFamily: componentTheme.fontFamily, fontWeight: 'bold', lineHeight: componentTheme.lineHeight, - padding: componentTheme.padding + padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}` } const buttonTextAlignVariants = { @@ -62,7 +64,7 @@ const generateStyle = ( verticalAlign: 'middle', boxSizing: 'border-box', ...(!onRequestSort && headerStyle), - textAlign + textAlign: textAlign }, button: { label: 'colHeader__button', @@ -78,22 +80,14 @@ const generateStyle = ( outline: 'none', '&::-moz-focus-inner': { border: 0 }, '&:focus': { - outline: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}` + outline: `${sharedTokens.focusOutline.width} ${sharedTokens.focusOutline.style} ${sharedTokens.focusOutline.infoColor}` }, - ...buttonTextAlignVariants[textAlign!] + ...(textAlign && buttonTextAlignVariants[textAlign]) }, buttonContent: { label: 'colHeader__buttonContent', display: 'flex', alignItems: 'center' - }, - unSortedIconColor: { - label: 'colHeader__unSortedIconColor', - color: componentTheme.unSortedIconColor - }, - sortedIconColor: { - label: 'colHeader__sortedIconColor', - color: componentTheme.sortedIconColor } } } diff --git a/packages/ui-table/src/Table/ColHeader/theme.ts b/packages/ui-table/src/Table/ColHeader/theme.ts deleted file mode 100644 index 675f9db6b1..0000000000 --- a/packages/ui-table/src/Table/ColHeader/theme.ts +++ /dev/null @@ -1,69 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' -import { TableColHeaderTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableColHeaderTheme => { - const { typography, colors, borders, spacing, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - focusOutlineColor: theme['ic-brand-primary'], - sortedIconColor: theme['ic-brand-primary'] - } - } - - const componentVariables: TableColHeaderTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - borderColor: colors?.contrasts?.grey1214, - - lineHeight: typography?.lineHeightCondensed, - padding: `${spacing?.xSmall} ${spacing?.small}`, - - focusOutlineColor: colors?.contrasts?.blue4570, - focusOutlineWidth: borders?.widthMedium, - focusOutlineStyle: borders?.style, - - unSortedIconColor: colors?.contrasts?.grey3045, - sortedIconColor: colors?.contrasts?.blue4570 - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/Head/index.tsx b/packages/ui-table/src/Table/Head/index.tsx index 0c4091bd10..8e8d908565 100644 --- a/packages/ui-table/src/Table/Head/index.tsx +++ b/packages/ui-table/src/Table/Head/index.tsx @@ -28,13 +28,12 @@ import { omitProps, callRenderProp } from '@instructure/ui-react-utils' import { SimpleSelect } from '@instructure/ui-simple-select' import type { SimpleSelectProps } from '@instructure/ui-simple-select' import { ScreenReaderContent } from '@instructure/ui-a11y-content' -import { IconCheckLine } from '@instructure/ui-icons' +import { CheckInstUIIcon } from '@instructure/ui-icons-lucide' import { warn } from '@instructure/console' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import type { TableColHeaderProps } from '../ColHeader/props' import type { TableHeadProps } from './props' @@ -48,7 +47,7 @@ parent: Table id: Table.Head --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class Head extends Component { static readonly componentId = 'Table.Head' static contextType = TableContext @@ -154,7 +153,9 @@ class Head extends Component { ) } - renderBeforeInput={selectedOption && IconCheckLine} + renderBeforeInput={ + selectedOption ? () => : undefined + } value={selectedOption} onChange={handleSelect} > @@ -165,8 +166,12 @@ class Head extends Component { value={id} renderBeforeLabel={ id === selectedOption - ? IconCheckLine - : () => + ? () => + : () => ( + + + + ) } > {label} diff --git a/packages/ui-table/src/Table/Head/props.ts b/packages/ui-table/src/Table/Head/props.ts index db782c9ce6..74dfac427e 100644 --- a/packages/ui-table/src/Table/Head/props.ts +++ b/packages/ui-table/src/Table/Head/props.ts @@ -22,12 +22,8 @@ * SOFTWARE. */ -import type { - OtherHTMLAttributes, - Renderable, - TableHeadTheme -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' import { RowChild } from '../props' type TableHeadOwnProps = { @@ -58,7 +54,7 @@ type PropKeys = keyof TableHeadOwnProps type AllowedPropKeys = Readonly> type TableHeadProps = TableHeadOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableHeadStyle = ComponentStyle<'head'> diff --git a/packages/ui-table/src/Table/Head/styles.ts b/packages/ui-table/src/Table/Head/styles.ts index d4f6a0f260..3184e6a851 100644 --- a/packages/ui-table/src/Table/Head/styles.ts +++ b/packages/ui-table/src/Table/Head/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { TableHeadTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TableHeadStyle } from './props' /** @@ -33,7 +33,9 @@ import type { TableHeadStyle } 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: TableHeadTheme): TableHeadStyle => { +const generateStyle = ( + componentTheme: NewComponentTypes['TableHead'] +): TableHeadStyle => { return { head: { label: 'head', diff --git a/packages/ui-table/src/Table/Head/theme.ts b/packages/ui-table/src/Table/Head/theme.ts deleted file mode 100644 index e1eefaa20a..0000000000 --- a/packages/ui-table/src/Table/Head/theme.ts +++ /dev/null @@ -1,50 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { TableHeadTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableHeadTheme => { - const { colors, typography } = theme - - const componentVariables: TableHeadTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010 - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/Row/index.tsx b/packages/ui-table/src/Table/Row/index.tsx index edc7887085..002935ae54 100644 --- a/packages/ui-table/src/Table/Row/index.tsx +++ b/packages/ui-table/src/Table/Row/index.tsx @@ -33,10 +33,9 @@ import { import { omitProps, safeCloneElement } 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 { TableRowProps } from './props' import { allowedProps } from './props' @@ -48,7 +47,7 @@ parent: Table id: Table.Row --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class Row extends Component { static readonly componentId = 'Table.Row' static contextType = TableContext diff --git a/packages/ui-table/src/Table/Row/props.ts b/packages/ui-table/src/Table/Row/props.ts index 4fe15b5a72..77447b3cd6 100644 --- a/packages/ui-table/src/Table/Row/props.ts +++ b/packages/ui-table/src/Table/Row/props.ts @@ -23,11 +23,8 @@ */ import React from 'react' -import type { - OtherHTMLAttributes, - TableRowTheme -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { OtherHTMLAttributes } from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' type TableRowOwnProps = { /** @@ -59,7 +56,7 @@ type PropKeys = keyof TableRowOwnProps type AllowedPropKeys = Readonly> type TableRowProps = TableRowOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableRowStyle = ComponentStyle<'row'> diff --git a/packages/ui-table/src/Table/Row/styles.ts b/packages/ui-table/src/Table/Row/styles.ts index 8d80851cc3..933a973c00 100644 --- a/packages/ui-table/src/Table/Row/styles.ts +++ b/packages/ui-table/src/Table/Row/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { TableRowTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { TableRowProps, TableRowStyle } from './props' /** @@ -32,12 +32,14 @@ import type { TableRowProps, TableRowStyle } 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 (not used in this component) * @param {Object} extraArgs 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: TableRowTheme, + componentTheme: NewComponentTypes['TableRow'], props: TableRowProps, + _sharedTokens: SharedTokens, extraArgs: { isStacked: boolean; hover: boolean } ): TableRowStyle => { const { setHoverStateTo } = props @@ -66,7 +68,9 @@ const generateStyle = ( ...(setHoverStateTo === true ? hoverStyles : { '&:hover': hoverStyles }) }), - ...(extraArgs.isStacked && { padding: componentTheme.padding }) + ...(extraArgs.isStacked && { + padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}` + }) } } } diff --git a/packages/ui-table/src/Table/Row/theme.ts b/packages/ui-table/src/Table/Row/theme.ts deleted file mode 100644 index fc9c3b3f79..0000000000 --- a/packages/ui-table/src/Table/Row/theme.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' -import { TableRowTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableRowTheme => { - const { colors, typography, spacing, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - hoverBorderColor: theme['ic-brand-primary'] - } - } - - const componentVariables: TableRowTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - borderColor: colors?.contrasts?.grey3045, - hoverBorderColor: colors?.contrasts?.blue4570, - - padding: `${spacing?.xSmall} 0` - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/RowHeader/index.tsx b/packages/ui-table/src/Table/RowHeader/index.tsx index ff1771e20c..87f60d361e 100644 --- a/packages/ui-table/src/Table/RowHeader/index.tsx +++ b/packages/ui-table/src/Table/RowHeader/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 { TableRowHeaderProps } from './props' import { allowedProps } from './props' import TableContext from '../TableContext' @@ -41,7 +40,7 @@ parent: Table id: Table.RowHeader --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class RowHeader extends Component { static readonly componentId = 'Table.RowHeader' static contextType = TableContext diff --git a/packages/ui-table/src/Table/RowHeader/props.ts b/packages/ui-table/src/Table/RowHeader/props.ts index b4f7489f4b..e1e5a62f37 100644 --- a/packages/ui-table/src/Table/RowHeader/props.ts +++ b/packages/ui-table/src/Table/RowHeader/props.ts @@ -22,12 +22,8 @@ * SOFTWARE. */ -import type { - OtherHTMLAttributes, - Renderable, - TableRowHeaderTheme -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types' +import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' type TableRowHeaderOwnProps = { /** @@ -42,7 +38,7 @@ type PropKeys = keyof TableRowHeaderOwnProps type AllowedPropKeys = Readonly> type TableRowHeaderProps = TableRowHeaderOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableRowHeaderStyle = ComponentStyle<'rowHeader'> diff --git a/packages/ui-table/src/Table/RowHeader/styles.ts b/packages/ui-table/src/Table/RowHeader/styles.ts index ced09854ea..cc627f3fdc 100644 --- a/packages/ui-table/src/Table/RowHeader/styles.ts +++ b/packages/ui-table/src/Table/RowHeader/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { TableRowHeaderTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TableRowHeaderProps, TableRowHeaderStyle } from './props' /** @@ -32,11 +32,10 @@ import type { TableRowHeaderProps, TableRowHeaderStyle } 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: TableRowHeaderTheme, + componentTheme: NewComponentTypes['TableRowHeader'], props: TableRowHeaderProps ): TableRowHeaderStyle => { const { textAlign } = props @@ -52,7 +51,7 @@ const generateStyle = ( boxSizing: 'border-box', verticalAlign: 'middle', lineHeight: componentTheme.lineHeight, - padding: componentTheme.padding, + padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`, ...(textAlign && { textAlign }) } } diff --git a/packages/ui-table/src/Table/RowHeader/theme.ts b/packages/ui-table/src/Table/RowHeader/theme.ts deleted file mode 100644 index 0266f85702..0000000000 --- a/packages/ui-table/src/Table/RowHeader/theme.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { TableRowHeaderTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableRowHeaderTheme => { - const { colors, typography, spacing } = theme - - const componentVariables: TableRowHeaderTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightBold, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - borderColor: colors?.contrasts?.grey4570, - - lineHeight: typography?.lineHeightCondensed, - padding: `${spacing?.xSmall} ${spacing?.small}` - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/src/Table/__tests__/Table.test.tsx b/packages/ui-table/src/Table/__tests__/Table.test.tsx index ff50f75def..ffed0752cf 100644 --- a/packages/ui-table/src/Table/__tests__/Table.test.tsx +++ b/packages/ui-table/src/Table/__tests__/Table.test.tsx @@ -257,7 +257,7 @@ describe('', async () => { }) const arrow = container.querySelector('svg') - expect(arrow).toHaveAttribute('name', 'IconMiniArrowUp') + expect(arrow).toHaveAttribute('name', 'ChevronUp') }) it('can render down arrow for descending order', async () => { @@ -267,7 +267,7 @@ describe('
', async () => { }) const arrow = container.querySelector('svg') - expect(arrow).toHaveAttribute('name', 'IconMiniArrowDown') + expect(arrow).toHaveAttribute('name', 'ChevronDown') }) it('calls onRequestSort when column header is clicked', async () => { @@ -325,7 +325,7 @@ describe('
', async () => { ) const icon = container.querySelector('svg') - expect(icon).toHaveAttribute('name', 'IconCheck') + expect(icon).toHaveAttribute('name', 'Check') }) it('creates proper aria-sort attributes (ascending)', async () => { diff --git a/packages/ui-table/src/Table/index.tsx b/packages/ui-table/src/Table/index.tsx index f649a30977..6d670b7940 100644 --- a/packages/ui-table/src/Table/index.tsx +++ b/packages/ui-table/src/Table/index.tsx @@ -28,10 +28,9 @@ import { safeCloneElement, omitProps } from '@instructure/ui-react-utils' import { View } from '@instructure/ui-view' import { ScreenReaderContent } from '@instructure/ui-a11y-content' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import { Head } from './Head' import { Body } from './Body' @@ -51,7 +50,7 @@ import { error } from '@instructure/console' category: components --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class Table extends Component { static readonly componentId = 'Table' diff --git a/packages/ui-table/src/Table/props.ts b/packages/ui-table/src/Table/props.ts index e12bf523d7..055a7419ee 100644 --- a/packages/ui-table/src/Table/props.ts +++ b/packages/ui-table/src/Table/props.ts @@ -24,10 +24,10 @@ import React from 'react' import type { Spacing, - WithStyleProps, - ComponentStyle + ComponentStyle, + WithStyleProps } from '@instructure/emotion' -import type { OtherHTMLAttributes, TableTheme } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type RowChild = React.ReactElement<{ children: React.ReactElement }> @@ -71,7 +71,7 @@ type PropKeys = keyof TableOwnProps type AllowedPropKeys = Readonly> type TableProps = TableOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type TableStyle = ComponentStyle<'table'> diff --git a/packages/ui-table/src/Table/styles.ts b/packages/ui-table/src/Table/styles.ts index 29c8778b1a..12777cb0e6 100644 --- a/packages/ui-table/src/Table/styles.ts +++ b/packages/ui-table/src/Table/styles.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { TableTheme } from '@instructure/shared-types' import type { TableProps, TableStyle } from './props' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' /** * --- @@ -32,12 +32,13 @@ import type { TableProps, TableStyle } 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: TableTheme, - props: TableProps + componentTheme: NewComponentTypes['Table'], + props: TableProps, + _sharedTokens: SharedTokens ): TableStyle => { const { layout } = props diff --git a/packages/ui-table/src/Table/theme.ts b/packages/ui-table/src/Table/theme.ts deleted file mode 100644 index 38456766ff..0000000000 --- a/packages/ui-table/src/Table/theme.ts +++ /dev/null @@ -1,57 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' -import { TableTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): TableTheme => { - const { colors, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: TableTheme = { - fontSize: typography?.fontSizeMedium, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010 - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-table/tsconfig.build.json b/packages/ui-table/tsconfig.build.json index 49c59beb0a..1a23e79ce3 100644 --- a/packages/ui-table/tsconfig.build.json +++ b/packages/ui-table/tsconfig.build.json @@ -15,7 +15,7 @@ { "path": "../emotion/tsconfig.build.json" }, { "path": "../shared-types/tsconfig.build.json" }, { "path": "../ui-a11y-content/tsconfig.build.json" }, - { "path": "../ui-icons/tsconfig.build.json" }, + { "path": "../ui-icons-lucide/tsconfig.build.json" }, { "path": "../ui-react-utils/tsconfig.build.json" }, { "path": "../ui-simple-select/tsconfig.build.json" }, { "path": "../ui-utils/tsconfig.build.json" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b9f2b163a..d009b72ec3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4243,9 +4243,9 @@ importers: '@instructure/ui-a11y-content': specifier: workspace:* version: link:../ui-a11y-content - '@instructure/ui-icons': + '@instructure/ui-icons-lucide': specifier: workspace:* - version: link:../ui-icons + version: link:../ui-icons-lucide '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils