From eee41e728c9ecd120fe5d182e64b8a61a484b468 Mon Sep 17 00:00:00 2001 From: Nandor_Czegledi Date: Mon, 15 Dec 2025 17:33:11 +0100 Subject: [PATCH] feat(ui-list): migrate to new theming system --- .../src/InlineList/InlineListItem/index.tsx | 7 +- .../src/InlineList/InlineListItem/styles.ts | 4 +- .../src/InlineList/InlineListItem/theme.ts | 72 ------------------- packages/ui-list/src/InlineList/README.md | 16 ++--- packages/ui-list/src/List/ListItem/index.tsx | 7 +- packages/ui-list/src/List/ListItem/styles.ts | 5 +- packages/ui-list/src/List/ListItem/theme.ts | 68 ------------------ packages/ui-list/src/List/index.tsx | 8 +-- packages/ui-list/src/List/styles.ts | 4 +- packages/ui-list/src/List/theme.ts | 47 ------------ 10 files changed, 20 insertions(+), 218 deletions(-) delete mode 100644 packages/ui-list/src/InlineList/InlineListItem/theme.ts delete mode 100644 packages/ui-list/src/List/ListItem/theme.ts delete mode 100644 packages/ui-list/src/List/theme.ts diff --git a/packages/ui-list/src/InlineList/InlineListItem/index.tsx b/packages/ui-list/src/InlineList/InlineListItem/index.tsx index 3c61558065..a631a6a9c2 100644 --- a/packages/ui-list/src/InlineList/InlineListItem/index.tsx +++ b/packages/ui-list/src/InlineList/InlineListItem/index.tsx @@ -26,12 +26,9 @@ import { Component } from 'react' import { View } from '@instructure/ui-view' import { passthroughProps } from '@instructure/ui-react-utils' - -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' - import { allowedProps } from './props' import type { InlineListItemProps } from './props' @@ -41,7 +38,7 @@ parent: InlineList id: InlineList.Item --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle, 'InlineListInlineListItem') class InlineListItem extends Component { static readonly componentId = 'InlineList.Item' diff --git a/packages/ui-list/src/InlineList/InlineListItem/styles.ts b/packages/ui-list/src/InlineList/InlineListItem/styles.ts index a53e338722..e853cec0c1 100644 --- a/packages/ui-list/src/InlineList/InlineListItem/styles.ts +++ b/packages/ui-list/src/InlineList/InlineListItem/styles.ts @@ -24,7 +24,7 @@ import { logError as error } from '@instructure/console' -import type { InlineListItemTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { InlineListItemProps, InlineListItemStyle } from './props' /** @@ -40,7 +40,7 @@ import type { InlineListItemProps, InlineListItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: InlineListItemTheme, + componentTheme: NewComponentTypes['InlineListInlineListItem'], props: InlineListItemProps ): InlineListItemStyle => { const { size, delimiter, spacing } = props diff --git a/packages/ui-list/src/InlineList/InlineListItem/theme.ts b/packages/ui-list/src/InlineList/InlineListItem/theme.ts deleted file mode 100644 index 85d53ebe75..0000000000 --- a/packages/ui-list/src/InlineList/InlineListItem/theme.ts +++ /dev/null @@ -1,72 +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 { InlineListItemTheme } 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): InlineListItemTheme => { - const { colors, spacing, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: InlineListItemTheme = { - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - fontSizeSmall: typography?.fontSizeSmall, - fontSizeMedium: typography?.fontSizeMedium, - fontSizeLarge: typography?.fontSizeLarge, - color: colors?.contrasts?.grey4570, - delimiterColor: colors?.contrasts?.grey125125, - lineHeight: typography?.lineHeightCondensed, - noneSpacing: spacing?.xSmall, - pipeSpacing: spacing?.xSmall, - slashSpacing: spacing?.xSmall, - arrowSpacing: spacing?.xSmall, - marginBottomDefault: spacing?.xxxSmall, - spacingXXXSmall: spacing?.xxxSmall, - spacingXXSmall: spacing?.xxSmall, - spacingXSmall: spacing?.xSmall, - spacingSmall: spacing?.small, - spacingMedium: spacing?.medium, - spacingLarge: spacing?.large, - spacingXLarge: spacing?.xLarge, - spacingXXLarge: spacing?.xxLarge - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-list/src/InlineList/README.md b/packages/ui-list/src/InlineList/README.md index 020eaf434d..a5bb8fc670 100644 --- a/packages/ui-list/src/InlineList/README.md +++ b/packages/ui-list/src/InlineList/README.md @@ -95,49 +95,49 @@ type: example ---
- {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to xxx-small - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to xx-small - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to x-small - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to small - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to medium - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to large - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to x-large - {lorem.sentence()} + Adding predefined space 10pts Due: Oct 1, 2019 Set to xx-large diff --git a/packages/ui-list/src/List/ListItem/index.tsx b/packages/ui-list/src/List/ListItem/index.tsx index 894cabffdd..5ec05bd035 100644 --- a/packages/ui-list/src/List/ListItem/index.tsx +++ b/packages/ui-list/src/List/ListItem/index.tsx @@ -26,12 +26,9 @@ import { Component } from 'react' import { View } from '@instructure/ui-view' import { passthroughProps } from '@instructure/ui-react-utils' - -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' - import { allowedProps } from './props' import type { ListItemProps } from './props' @@ -41,7 +38,7 @@ parent: List id: List.Item --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle, 'ListListItem') class ListItem extends Component { static readonly componentId = 'List.Item' diff --git a/packages/ui-list/src/List/ListItem/styles.ts b/packages/ui-list/src/List/ListItem/styles.ts index 0c33a98500..a30fa4daee 100644 --- a/packages/ui-list/src/List/ListItem/styles.ts +++ b/packages/ui-list/src/List/ListItem/styles.ts @@ -23,8 +23,7 @@ */ import { logError as error } from '@instructure/console' - -import type { ListItemTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ListItemProps, ListItemStyle } from './props' /** @@ -40,7 +39,7 @@ import type { ListItemProps, ListItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: ListItemTheme, + componentTheme: NewComponentTypes['ListListItem'], props: ListItemProps ): ListItemStyle => { const { size, delimiter, spacing } = props diff --git a/packages/ui-list/src/List/ListItem/theme.ts b/packages/ui-list/src/List/ListItem/theme.ts deleted file mode 100644 index c5ee73bc83..0000000000 --- a/packages/ui-list/src/List/ListItem/theme.ts +++ /dev/null @@ -1,68 +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 { ListItemTheme } 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): ListItemTheme => { - const { borders, colors, spacing, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: ListItemTheme = { - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - lineHeight: typography?.lineHeight, - fontSizeSmall: typography?.fontSizeSmall, - fontSizeMedium: typography?.fontSizeMedium, - fontSizeLarge: typography?.fontSizeLarge, - color: colors?.contrasts?.grey125125, - spacingXXXSmall: spacing?.xxxSmall, - spacingXXSmall: spacing?.xxSmall, - spacingXSmall: spacing?.xSmall, - spacingSmall: spacing?.small, - spacingMedium: spacing?.medium, - spacingLarge: spacing?.large, - spacingXLarge: spacing?.xLarge, - spacingXXLarge: spacing?.xxLarge, - delimiterDashedBorder: `${borders?.widthSmall} dashed ${colors?.contrasts?.grey1214}`, - delimiterSolidBorder: `${borders?.widthSmall} solid ${colors?.contrasts?.grey1214}` - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-list/src/List/index.tsx b/packages/ui-list/src/List/index.tsx index 742658320d..45a8fa181f 100644 --- a/packages/ui-list/src/List/index.tsx +++ b/packages/ui-list/src/List/index.tsx @@ -26,14 +26,10 @@ import { Children, Component, ReactElement } from 'react' import { View } from '@instructure/ui-view' import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils' +import { withStyle } from '@instructure/emotion' import { ListItem } from './ListItem' - -import { withStyleRework as withStyle } from '@instructure/emotion' - import generateStyle from './styles' -import generateComponentTheme from './theme' - import { allowedProps } from './props' import type { ListProps } from './props' @@ -42,7 +38,7 @@ import type { ListProps } from './props' category: components --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class List extends Component { static readonly componentId = 'List' diff --git a/packages/ui-list/src/List/styles.ts b/packages/ui-list/src/List/styles.ts index ece4e27669..3d94ca8b25 100644 --- a/packages/ui-list/src/List/styles.ts +++ b/packages/ui-list/src/List/styles.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { ListTheme } from '@instructure/shared-types' import type { ListProps, ListStyle } from './props' +import type { NewComponentTypes } from '@instructure/ui-themes' /** * --- @@ -36,7 +36,7 @@ import type { ListProps, ListStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: ListTheme, + componentTheme: NewComponentTypes['List'], props: ListProps ): ListStyle => { const { isUnstyled, as } = props diff --git a/packages/ui-list/src/List/theme.ts b/packages/ui-list/src/List/theme.ts deleted file mode 100644 index b716643d2e..0000000000 --- a/packages/ui-list/src/List/theme.ts +++ /dev/null @@ -1,47 +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 { ListTheme } 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): ListTheme => { - const { spacing, typography } = theme - - const componentVariables: ListTheme = { - listPadding: spacing?.large, - orderedNumberFontWeight: typography?.fontWeightBold, - orderedNumberMargin: spacing?.xSmall - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme