From 6c7faa54ec48ba2cf1f2be746f6d4c7306a2b6ef Mon Sep 17 00:00:00 2001 From: Matyas Forian-Szabo Date: Thu, 23 Apr 2026 15:48:25 +0200 Subject: [PATCH 1/2] refactor(many): better types for theming, small fixes --- packages/emotion/src/index.ts | 2 +- packages/emotion/src/withStyle.tsx | 24 +- packages/ui-alerts/src/Alert/v2/props.ts | 5 +- packages/ui-avatar/package.json | 2 +- packages/ui-badge/package.json | 2 +- packages/ui-badge/src/Badge/v2/props.ts | 5 +- packages/ui-billboard/package.json | 2 +- .../ui-billboard/src/Billboard/v2/props.ts | 4 +- packages/ui-breadcrumb/package.json | 2 +- packages/ui-buttons/package.json | 2 +- packages/ui-byline/package.json | 2 +- packages/ui-byline/src/Byline/v2/props.ts | 8 +- packages/ui-calendar/package.json | 2 +- .../ui-calendar/src/Calendar/v2/Day/props.ts | 7 +- packages/ui-calendar/src/Calendar/v2/props.ts | 4 +- packages/ui-checkbox/package.json | 2 +- .../src/Checkbox/v2/CheckboxFacade/props.ts | 4 +- .../src/Checkbox/v2/ToggleFacade/props.ts | 4 +- .../ui-checkbox/src/Checkbox/v2/index.tsx | 11 +- packages/ui-checkbox/src/Checkbox/v2/props.ts | 9 +- .../src/ColorContrast/v2/props.ts | 11 +- .../src/ColorIndicator/v2/props.ts | 11 +- .../src/ColorMixer/v2/ColorPalette/props.ts | 8 +- .../src/ColorMixer/v2/RGBAInput/props.ts | 8 +- .../src/ColorMixer/v2/Slider/props.ts | 8 +- .../src/ColorPicker/v2/props.ts | 11 +- .../src/ColorPreset/v2/props.ts | 11 +- packages/ui-drawer-layout/package.json | 2 +- .../DrawerLayout/v2/DrawerContent/props.ts | 11 +- .../src/DrawerLayout/v2/DrawerTray/props.ts | 7 +- packages/ui-drilldown/package.json | 2 +- .../src/Drilldown/v2/DrilldownGroup/props.ts | 4 +- .../src/Drilldown/v2/DrilldownOption/props.ts | 4 +- .../Drilldown/v2/DrilldownSeparator/props.ts | 6 +- .../ui-drilldown/src/Drilldown/v2/index.tsx | 2 +- .../ui-drilldown/src/Drilldown/v2/props.ts | 4 +- packages/ui-file-drop/package.json | 2 +- .../ui-file-drop/src/FileDrop/v2/props.ts | 8 +- packages/ui-flex/package.json | 2 +- packages/ui-flex/src/Flex/v2/props.ts | 4 +- packages/ui-form-field/package.json | 2 +- .../src/FormFieldGroup/v2/props.ts | 3 +- .../src/FormFieldGroup/v2/styles.ts | 6 +- .../src/FormFieldMessages/v2/props.ts | 7 +- .../src/FormFieldMessages/v2/styles.ts | 5 +- packages/ui-grid/package.json | 2 +- packages/ui-grid/src/Grid/v2/props.ts | 5 +- packages/ui-grid/src/GridCol/v2/props.ts | 5 +- packages/ui-grid/src/GridRow/v2/props.ts | 5 +- packages/ui-heading/package.json | 2 +- packages/ui-heading/src/Heading/v2/props.ts | 4 +- packages/ui-img/src/Img/v2/props.ts | 3 +- packages/ui-img/src/Img/v2/styles.ts | 16 +- packages/ui-instructure/package.json | 2 +- packages/ui-link/package.json | 2 +- packages/ui-link/src/Link/v2/props.ts | 4 +- packages/ui-list/package.json | 2 +- .../src/InlineList/v2/InlineListItem/props.ts | 11 +- .../ui-list/src/List/v2/ListItem/props.ts | 8 +- packages/ui-list/src/List/v2/props.ts | 5 +- packages/ui-menu/package.json | 2 +- .../ui-menu/src/Menu/v2/MenuItem/props.ts | 4 +- .../src/Menu/v2/MenuItemGroup/props.ts | 8 +- .../src/Menu/v2/MenuItemSeparator/props.ts | 11 +- packages/ui-menu/src/Menu/v2/props.ts | 5 +- packages/ui-metric/package.json | 4 +- packages/ui-metric/src/Metric/v2/props.ts | 9 +- packages/ui-modal/package.json | 2 +- .../ui-modal/src/Modal/v2/ModalBody/props.ts | 4 +- .../src/Modal/v2/ModalFooter/props.ts | 11 +- .../src/Modal/v2/ModalHeader/props.ts | 11 +- packages/ui-modal/src/Modal/v2/props.ts | 4 +- packages/ui-motion/package.json | 2 +- packages/ui-navigation/package.json | 2 +- .../ui-navigation/src/AppNav/v2/Item/props.ts | 4 +- packages/ui-navigation/src/AppNav/v2/props.ts | 8 +- packages/ui-number-input/package.json | 2 +- packages/ui-options/package.json | 2 +- .../ui-options/src/Options/v2/Item/props.ts | 7 +- .../src/Options/v2/Separator/props.ts | 7 +- packages/ui-options/src/Options/v2/props.ts | 4 +- packages/ui-overlays/package.json | 2 +- packages/ui-overlays/src/Mask/v2/props.ts | 5 +- packages/ui-pages/package.json | 2 +- .../v2/PaginationPageInput/props.ts | 7 +- packages/ui-pill/src/Pill/v2/props.ts | 4 +- packages/ui-popover/package.json | 2 +- packages/ui-popover/src/Popover/v2/props.ts | 6 +- packages/ui-position/package.json | 2 +- packages/ui-progress/package.json | 2 +- .../ui-progress/src/ProgressBar/v2/props.ts | 7 +- .../src/ProgressCircle/v2/props.ts | 7 +- packages/ui-radio-input/package.json | 4 +- packages/ui-range-input/package.json | 2 +- .../ui-range-input/src/RangeInput/v2/props.ts | 12 +- packages/ui-rating/package.json | 2 +- packages/ui-rating/src/RatingIcon/v2/props.ts | 4 +- packages/ui-select/package.json | 2 +- packages/ui-select/src/Select/v2/index.tsx | 251 ++++++++------- packages/ui-select/src/Select/v2/props.ts | 3 +- packages/ui-select/src/Select/v2/styles.ts | 6 +- packages/ui-side-nav-bar/package.json | 2 +- .../src/SideNavBar/v2/SideNavBarItem/props.ts | 7 +- .../src/SideNavBar/v2/props.ts | 8 +- .../src/SourceCodeEditor/v2/props.ts | 8 +- packages/ui-spinner/package.json | 2 +- packages/ui-svg-images/package.json | 2 +- packages/ui-table/package.json | 2 +- packages/ui-tabs/package.json | 2 +- packages/ui-tabs/src/Tabs/v2/Panel/props.ts | 8 +- packages/ui-tabs/src/Tabs/v2/Tab/props.ts | 9 +- packages/ui-tabs/src/Tabs/v2/props.ts | 5 +- packages/ui-tag/package.json | 2 +- packages/ui-tag/src/Tag/v2/props.ts | 5 +- packages/ui-text-area/package.json | 2 +- .../ui-text-input/src/TextInput/v2/props.ts | 3 +- .../ui-text-input/src/TextInput/v2/theme.ts | 84 ----- packages/ui-text/package.json | 4 +- packages/ui-text/src/Text/v2/props.ts | 4 +- packages/ui-toggle-details/package.json | 2 +- .../src/ToggleDetails/v2/props.ts | 11 +- .../src/ToggleGroup/v2/props.ts | 6 +- packages/ui-tooltip/package.json | 2 +- packages/ui-tooltip/src/Tooltip/v2/props.ts | 4 +- packages/ui-top-nav-bar/package.json | 2 +- packages/ui-tray/package.json | 2 +- packages/ui-tray/src/Tray/v2/props.ts | 4 +- packages/ui-tree-browser/package.json | 2 +- .../src/TreeBrowser/v2/TreeButton/props.ts | 7 +- .../TreeBrowser/v2/TreeCollection/props.ts | 7 +- .../src/TreeBrowser/v2/TreeNode/props.ts | 7 +- .../src/TreeBrowser/v2/props.ts | 4 +- packages/ui-truncate-text/package.json | 2 +- .../src/TruncateText/v2/props.ts | 7 +- packages/ui-view/package.json | 4 +- packages/ui-view/src/ContextView/v2/props.ts | 7 +- packages/ui-view/src/View/v2/props.ts | 6 +- pnpm-lock.yaml | 294 +++++++++--------- 138 files changed, 621 insertions(+), 691 deletions(-) delete mode 100644 packages/ui-text-input/src/TextInput/v2/theme.ts diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts index 52a912f135..db81cbe83b 100644 --- a/packages/emotion/src/index.ts +++ b/packages/emotion/src/index.ts @@ -44,7 +44,7 @@ export { useStyle } from './useStyle' export { useTheme } from './useTheme' export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes' -export type { WithStyleProps } from './withStyleLegacy' +export type { WithStyleProps } from './withStyle' export type { ThemeOverrideValue } from './useStyle' export type { SpacingValues, diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx index 9eb74118ad..57d11e81f7 100644 --- a/packages/emotion/src/withStyle.tsx +++ b/packages/emotion/src/withStyle.tsx @@ -66,14 +66,14 @@ type WithStylePrivateProps< > = Style extends null ? object : { - styles?: Style - makeStyles?: (extraArgs?: Record) => void - } + styles?: Style + makeStyles?: (extraArgs?: Record) => void + } type ThemeOverrideProp = { themeOverride?: - | Partial - | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial) + | Partial + | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial) } type WithStyleProps< @@ -87,7 +87,7 @@ declare const process: Record | undefined const defaultValues = { styles: {}, - makeStyles: () => { } + makeStyles: () => {} } /** @@ -175,7 +175,7 @@ const withStyle = decorator( if (frozenTheme && !frozenTheme[themeKey]) { console.error( `The version of ${displayName} you are using does not support the currently applied "${themeKey}" theme. ` + - `Please upgrade to the latest version of ${displayName}.` + `Please upgrade to the latest version of ${displayName}.` ) } @@ -231,7 +231,7 @@ const withStyle = decorator( theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides ) - + // Note: Some components do not have a theme, e.g., FormFieldMessages const baseComponentTheme = theme.newTheme.components[componentId as keyof NewComponentTypes]?.( semantics @@ -247,9 +247,9 @@ const withStyle = decorator( // @ts-ignore TODO-theme-types: fix typing typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp( - componentThemeFromSettingsProvider, - themeInContext - ) + componentThemeFromSettingsProvider, + themeInContext + ) : componentOverridesFromThemeOverrideProp ) @@ -257,7 +257,7 @@ const withStyle = decorator( const [styles, setStyles] = useState( generateStyle ? // @ts-ignore TODO-theme-types: fix typing - generateStyle(componentTheme, componentProps, sharedTokens, {}) + generateStyle(componentTheme, componentProps, sharedTokens, {}) : {} ) diff --git a/packages/ui-alerts/src/Alert/v2/props.ts b/packages/ui-alerts/src/Alert/v2/props.ts index e93aefe82c..33a1966d06 100644 --- a/packages/ui-alerts/src/Alert/v2/props.ts +++ b/packages/ui-alerts/src/Alert/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { AlertTheme, Renderable } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type AlertOwnProps = { @@ -116,7 +117,7 @@ type PropKeys = keyof AlertOwnProps type AllowedPropKeys = Readonly> type AlertProps = AlertOwnProps & - WithStyleProps & + WithStyleProps, AlertStyle> & WithDeterministicIdProps type AlertStyle = ComponentStyle< diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json index 9fd06afd3f..922af43e7c 100644 --- a/packages/ui-avatar/package.json +++ b/packages/ui-avatar/package.json @@ -28,13 +28,13 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-badge/package.json b/packages/ui-badge/package.json index 983c17acce..79b0892241 100644 --- a/packages/ui-badge/package.json +++ b/packages/ui-badge/package.json @@ -29,12 +29,12 @@ "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-badge/src/Badge/v2/props.ts b/packages/ui-badge/src/Badge/v2/props.ts index a8812c69fc..dfdda5271d 100644 --- a/packages/ui-badge/src/Badge/v2/props.ts +++ b/packages/ui-badge/src/Badge/v2/props.ts @@ -23,12 +23,13 @@ */ import React from 'react' -import type { AsElementType, BadgeTheme } from '@instructure/shared-types' +import type { AsElementType } from '@instructure/shared-types' import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PlacementPropValues } from '@instructure/ui-position' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { PropsWithChildren } from 'react' @@ -87,7 +88,7 @@ type PropKeys = keyof BadgeOwnProps type AllowedPropKeys = Readonly> type BadgeProps = BadgeOwnProps & - WithStyleProps & + WithStyleProps, BadgeStyle> & WithDeterministicIdProps type BadgeStyle = ComponentStyle<'badge' | 'wrapper'> diff --git a/packages/ui-billboard/package.json b/packages/ui-billboard/package.json index 8f6ac3a5ba..bcdd8f83cd 100644 --- a/packages/ui-billboard/package.json +++ b/packages/ui-billboard/package.json @@ -29,6 +29,7 @@ "@instructure/ui-heading": "workspace:*", "@instructure/ui-img": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { @@ -36,7 +37,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-billboard/src/Billboard/v2/props.ts b/packages/ui-billboard/src/Billboard/v2/props.ts index 852e7876c9..085b147a46 100644 --- a/packages/ui-billboard/src/Billboard/v2/props.ts +++ b/packages/ui-billboard/src/Billboard/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - BillboardTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { ViewProps } from '@instructure/ui-view/latest' @@ -102,7 +102,7 @@ type PropKeys = keyof BillboardOwnProps type AllowedPropKeys = Readonly> type BillboardProps = BillboardOwnProps & - WithStyleProps & + WithStyleProps, BillboardStyle> & OtherHTMLAttributes type BillboardStyle = ComponentStyle< diff --git a/packages/ui-breadcrumb/package.json b/packages/ui-breadcrumb/package.json index fd5615ffe8..482f990f74 100644 --- a/packages/ui-breadcrumb/package.json +++ b/packages/ui-breadcrumb/package.json @@ -29,6 +29,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-link": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-truncate-text": "workspace:*", "@instructure/ui-utils": "workspace:*", @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-buttons/package.json b/packages/ui-buttons/package.json index 6206849548..086e9bc7e6 100644 --- a/packages/ui-buttons/package.json +++ b/packages/ui-buttons/package.json @@ -34,6 +34,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", @@ -42,7 +43,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-byline/package.json b/packages/ui-byline/package.json index f72ee597d0..d063d6c27d 100644 --- a/packages/ui-byline/package.json +++ b/packages/ui-byline/package.json @@ -27,13 +27,13 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-byline/src/Byline/v2/props.ts b/packages/ui-byline/src/Byline/v2/props.ts index 6d4b2ae646..3e8d73fe62 100644 --- a/packages/ui-byline/src/Byline/v2/props.ts +++ b/packages/ui-byline/src/Byline/v2/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - BylineTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' type BylineOwnProps = { /** @@ -71,7 +69,7 @@ type PropKeys = keyof BylineOwnProps type AllowedPropKeys = Readonly> type BylineProps = BylineOwnProps & - WithStyleProps & + WithStyleProps, BylineStyle> & OtherHTMLAttributes type BylineStyle = ComponentStyle< diff --git a/packages/ui-calendar/package.json b/packages/ui-calendar/package.json index b9f21022d1..3b7711c538 100644 --- a/packages/ui-calendar/package.json +++ b/packages/ui-calendar/package.json @@ -33,6 +33,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-simple-select": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -40,7 +41,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-calendar/src/Calendar/v2/Day/props.ts b/packages/ui-calendar/src/Calendar/v2/Day/props.ts index 9925a48f98..cd2c5da3c2 100644 --- a/packages/ui-calendar/src/Calendar/v2/Day/props.ts +++ b/packages/ui-calendar/src/Calendar/v2/Day/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - CalendarDayTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { KeyboardEvent, MouseEvent } from 'react' import type { ViewProps } from '@instructure/ui-view/latest' import { Renderable } from '@instructure/shared-types' @@ -104,7 +104,10 @@ type PropKeys = keyof CalendarDayOwnProps type AllowedPropKeys = Readonly> type CalendarDayProps = CalendarDayOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + CalendarDayStyle + > & OtherHTMLAttributes type CalendarDayStyle = ComponentStyle<'calendarDay' | 'day'> diff --git a/packages/ui-calendar/src/Calendar/v2/props.ts b/packages/ui-calendar/src/Calendar/v2/props.ts index c2d1397784..054998cb17 100644 --- a/packages/ui-calendar/src/Calendar/v2/props.ts +++ b/packages/ui-calendar/src/Calendar/v2/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - CalendarTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { ReactElement } from 'react' import type { CalendarDayProps } from './Day/props' import { Renderable } from '@instructure/shared-types' @@ -172,7 +172,7 @@ type PropKeys = keyof CalendarOwnProps type AllowedPropKeys = Readonly> type CalendarProps = CalendarOwnProps & - WithStyleProps & + WithStyleProps, CalendarStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-checkbox/package.json b/packages/ui-checkbox/package.json index 3d8c0a26a4..53263e63b0 100644 --- a/packages/ui-checkbox/package.json +++ b/packages/ui-checkbox/package.json @@ -32,6 +32,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-svg-images": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -41,7 +42,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts index 2a7efda6d7..0d3cdf3704 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { CheckboxFacadeTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type CheckboxFacadeOwnProps = { children: React.ReactNode @@ -48,7 +48,7 @@ type PropKeys = keyof CheckboxFacadeOwnProps type AllowedPropKeys = Readonly> type CheckboxFacadeProps = CheckboxFacadeOwnProps & - WithStyleProps + WithStyleProps, CheckboxFacadeStyle> type CheckboxFacadeStyle = ComponentStyle<'checkboxFacade' | 'facade' | 'label'> const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts index 281331aea8..03360d7271 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts @@ -23,8 +23,8 @@ */ import React from 'react' -import type { ToggleFacadeTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ToggleFacadeOwnProps = { children: React.ReactNode @@ -46,7 +46,7 @@ type PropKeys = keyof ToggleFacadeOwnProps type AllowedPropKeys = Readonly> type ToggleFacadeProps = ToggleFacadeOwnProps & - WithStyleProps + WithStyleProps, ToggleFacadeStyle> type ToggleFacadeStyle = ComponentStyle< 'toggleFacade' | 'facade' | 'icon' | 'iconToggle' | 'label' diff --git a/packages/ui-checkbox/src/Checkbox/v2/index.tsx b/packages/ui-checkbox/src/Checkbox/v2/index.tsx index 39c5adfbe7..a50c6fb0c3 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/index.tsx +++ b/packages/ui-checkbox/src/Checkbox/v2/index.tsx @@ -42,11 +42,6 @@ import generateStyle from './styles' import { allowedProps } from './props' import type { CheckboxProps, CheckboxState } from './props' -import type { - CheckboxFacadeTheme, - ToggleFacadeTheme -} from '@instructure/shared-types' - /** --- category: components @@ -231,7 +226,9 @@ class Checkbox extends Component { checked={this.checked} readOnly={readOnly} labelPlacement={labelPlacement} - themeOverride={themeOverride as Partial} + // @ts-ignore TODO: This will lead to buggy overrides, `Toggle`'s + // styles should be a superset of Checkbox's styles + themeOverride={themeOverride} invalid={this.invalid} > {label} @@ -256,7 +253,7 @@ class Checkbox extends Component { checked={this.checked} readOnly={readOnly} indeterminate={indeterminate} - themeOverride={themeOverride as Partial} + themeOverride={themeOverride} invalid={this.invalid} > {label} diff --git a/packages/ui-checkbox/src/Checkbox/v2/props.ts b/packages/ui-checkbox/src/Checkbox/v2/props.ts index 349de7069e..cc66568be5 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/props.ts @@ -23,12 +23,9 @@ */ import type { FormMessage } from '@instructure/ui-form-field/latest' -import type { - CheckboxFacadeTheme, - OtherHTMLAttributes, - ToggleFacadeTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type CheckboxOwnProps = { @@ -85,7 +82,7 @@ type PropKeys = keyof CheckboxOwnProps type AllowedPropKeys = Readonly> type CheckboxProps = CheckboxOwnProps & - WithStyleProps & + WithStyleProps, CheckboxStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-color-picker/src/ColorContrast/v2/props.ts b/packages/ui-color-picker/src/ColorContrast/v2/props.ts index c8abd09b60..3dac7c92be 100644 --- a/packages/ui-color-picker/src/ColorContrast/v2/props.ts +++ b/packages/ui-color-picker/src/ColorContrast/v2/props.ts @@ -24,10 +24,8 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorContrastTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type HeadingLevel = U @@ -134,7 +132,10 @@ type PropKeys = keyof ColorContrastOwnProps type AllowedPropKeys = Readonly> type ColorContrastProps = ColorContrastOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorContrastStyle + > & OtherHTMLAttributes type ColorContrastStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts index d404dae017..7fd1d3aeb8 100644 --- a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts +++ b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorIndicatorTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ColorIndicatorOwnProps = { /** @@ -48,7 +46,10 @@ type PropKeys = keyof ColorIndicatorOwnProps type AllowedPropKeys = Readonly> type ColorIndicatorProps = ColorIndicatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorIndicatorStyle + > & OtherHTMLAttributes type ColorIndicatorStyle = ComponentStyle<'colorIndicator'> diff --git a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts index 4ad7985376..63e98992c5 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts @@ -23,11 +23,9 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' -import type { - OtherHTMLAttributes, - ColorMixerPaletteTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { HSVType } from '@instructure/ui-color-utils' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -52,7 +50,7 @@ type PropKeys = keyof ColorPaletteOwnProps type AllowedPropKeys = Readonly> type ColorPaletteProps = ColorPaletteOwnProps & - WithStyleProps & + WithStyleProps, ColorPaletteStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts index a815a47fb2..fa95ee2d84 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts @@ -23,11 +23,9 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' -import type { - OtherHTMLAttributes, - ColorMixerRGBAInputTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { RGBAType } from '@instructure/ui-color-utils' type RGBAInputOwnProps = { @@ -53,7 +51,7 @@ type PropKeys = keyof RGBAInputOwnProps type AllowedPropKeys = Readonly> type RGBAInputProps = RGBAInputOwnProps & - WithStyleProps & + WithStyleProps, RGBAInputStyle> & OtherHTMLAttributes type RGBAInputStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts index 0a12bec596..706241d5c1 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorMixerSliderTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type SliderOwnProps = { isColorSlider?: boolean @@ -46,7 +44,7 @@ type PropKeys = keyof SliderOwnProps type AllowedPropKeys = Readonly> type SliderProps = SliderOwnProps & - WithStyleProps & + WithStyleProps, SliderStyle> & OtherHTMLAttributes type SliderStyleProps = { diff --git a/packages/ui-color-picker/src/ColorPicker/v2/props.ts b/packages/ui-color-picker/src/ColorPicker/v2/props.ts index acd94ad886..d61bf8afce 100644 --- a/packages/ui-color-picker/src/ColorPicker/v2/props.ts +++ b/packages/ui-color-picker/src/ColorPicker/v2/props.ts @@ -29,10 +29,8 @@ import type { ComponentStyle, Spacing } from '@instructure/emotion' -import type { - ColorPickerTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ContrastStrength = 'min' | 'mid' | 'max' type ColorPickerOwnProps = { @@ -253,7 +251,10 @@ type PropKeys = keyof ColorPickerOwnProps type AllowedPropKeys = Readonly> type ColorPickerProps = ColorPickerOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorPickerStyle + > & OtherHTMLAttributes type ColorPickerStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorPreset/v2/props.ts b/packages/ui-color-picker/src/ColorPreset/v2/props.ts index 31e132d0ab..adaeadf4c6 100644 --- a/packages/ui-color-picker/src/ColorPreset/v2/props.ts +++ b/packages/ui-color-picker/src/ColorPreset/v2/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorPresetTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { RGBAType } from '@instructure/ui-color-utils' type ContrastStrength = 'min' | 'mid' | 'max' @@ -125,7 +123,10 @@ type PropKeys = keyof ColorPresetOwnProps type AllowedPropKeys = Readonly> type ColorPresetProps = ColorPresetOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorPresetStyle + > & OtherHTMLAttributes type ColorPresetStyle = ComponentStyle< diff --git a/packages/ui-drawer-layout/package.json b/packages/ui-drawer-layout/package.json index e1839edd58..21fb14774d 100644 --- a/packages/ui-drawer-layout/package.json +++ b/packages/ui-drawer-layout/package.json @@ -35,6 +35,7 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -42,7 +43,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-buttons": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts index eef56c8421..ce202908ee 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts @@ -24,11 +24,9 @@ import { AriaRole } from 'react' -import type { - DrawerLayoutContentTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type DrawerContentSize = { width: number; height?: number } @@ -52,7 +50,10 @@ type PropKeys = keyof DrawerLayoutContentOwnProps type AllowedPropKeys = Readonly> type DrawerLayoutContentProps = DrawerLayoutContentOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + DrawerLayoutContentStyle + > & OtherHTMLAttributes type DrawerLayoutContentStyle = ComponentStyle<'drawerContent'> diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts index c6ea1b1ee6..decbe7dcdf 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts @@ -26,8 +26,8 @@ import React from 'react' import type { PositionMountNode } from '@instructure/ui-position' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { - DrawerLayoutTrayTheme, LiveRegion, OtherHTMLAttributes, UIElement @@ -183,7 +183,10 @@ type PropKeys = keyof DrawerLayoutTrayOwnProps type AllowedPropKeys = Readonly> type DrawerLayoutTrayProps = DrawerLayoutTrayOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + DrawerLayoutTrayStyle + > & OtherHTMLAttributes type DrawerLayoutTrayStyle = ComponentStyle< diff --git a/packages/ui-drilldown/package.json b/packages/ui-drilldown/package.json index 65e270ed3a..b4fdc8ca1e 100644 --- a/packages/ui-drilldown/package.json +++ b/packages/ui-drilldown/package.json @@ -34,6 +34,7 @@ "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-selectable": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -42,7 +43,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts index 61f33fbf0d..02fc6721ac 100644 --- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts +++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts @@ -26,7 +26,6 @@ import React from 'react' import type { OtherHTMLAttributes, - OptionsTheme, AsElementType } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' @@ -34,6 +33,7 @@ import type { WithStyleProps } from '@instructure/emotion' import Drilldown from '../index' import type { DrilldownOptionValue } from '../DrilldownOption/props' import type { OptionChild, SeparatorChild } from '../props' +import type { NewComponentTypes } from '@instructure/ui-themes' type GroupChildren = OptionChild | SeparatorChild @@ -113,7 +113,7 @@ type PropKeys = keyof DrilldownGroupOwnProps type AllowedPropKeys = Readonly> type DrilldownGroupProps = DrilldownGroupOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes const allowedProps: AllowedPropKeys = [ 'id', diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts index be7c1d7ad6..e803a18c52 100644 --- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts +++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts @@ -25,7 +25,6 @@ import React from 'react' import type { OtherHTMLAttributes, - OptionsItemTheme, AsElementType } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' @@ -36,6 +35,7 @@ import type { import Drilldown from '../index' import { Renderable } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' type DrilldownOptionValue = string | number | undefined @@ -182,7 +182,7 @@ type PropKeys = keyof DrilldownOptionOwnProps type AllowedPropKeys = Readonly> type DrilldownOptionProps = DrilldownOptionOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes const allowedProps: AllowedPropKeys = [ 'id', diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts index 823d4f83e6..2946ebe116 100644 --- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts +++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts @@ -25,11 +25,11 @@ import type { OtherHTMLAttributes, PickPropsWithExceptions, - AsElementType, - OptionsSeparatorTheme + AsElementType } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' import type { OptionsSeparatorProps } from '@instructure/ui-options' +import type { NewComponentTypes } from '@instructure/ui-themes' type DrilldownSeparatorOwnProps = { id: string @@ -48,7 +48,7 @@ type DrilldownSeparatorProps = // we are passing all props to Options.Separator PickPropsWithExceptions & DrilldownSeparatorOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes const allowedProps: AllowedPropKeys = ['id', 'as'] diff --git a/packages/ui-drilldown/src/Drilldown/v2/index.tsx b/packages/ui-drilldown/src/Drilldown/v2/index.tsx index 3fedf5bf1f..ed715e9f16 100644 --- a/packages/ui-drilldown/src/Drilldown/v2/index.tsx +++ b/packages/ui-drilldown/src/Drilldown/v2/index.tsx @@ -1198,7 +1198,7 @@ class Drilldown extends Component { // track as valid active option if not the title and the map doesn't already contain the id if (id !== this._headerTitleId && !this._activeOptionsMap[id]) { - // store index to know the order of ids later; js objects doesn't preserve order + // store index to know the order of ids later; js objects don't preserve order this._activeOptionsMap[id] = { ...option, ...optionData, diff --git a/packages/ui-drilldown/src/Drilldown/v2/props.ts b/packages/ui-drilldown/src/Drilldown/v2/props.ts index 34da6e9a27..14c3cd0fdf 100644 --- a/packages/ui-drilldown/src/Drilldown/v2/props.ts +++ b/packages/ui-drilldown/src/Drilldown/v2/props.ts @@ -33,7 +33,6 @@ import type { PositionMountNode } from '@instructure/ui-position' import type { - DrilldownTheme, OtherHTMLAttributes, AsElementType } from '@instructure/shared-types' @@ -51,6 +50,7 @@ import { DrilldownSeparator } from './DrilldownSeparator' import type { DrilldownSeparatorProps } from './DrilldownSeparator/props' import { Drilldown } from './index' +import type { NewComponentTypes } from '@instructure/ui-themes' type PageChild = React.ComponentElement type GroupChild = React.ComponentElement @@ -273,7 +273,7 @@ type PropKeys = keyof DrilldownOwnProps type AllowedPropKeys = Readonly> type DrilldownProps = DrilldownOwnProps & - WithStyleProps & + WithStyleProps, DrilldownStyle> & WithDeterministicIdProps & OtherHTMLAttributes diff --git a/packages/ui-file-drop/package.json b/packages/ui-file-drop/package.json index 1d34bfa7dc..5e69105c57 100644 --- a/packages/ui-file-drop/package.json +++ b/packages/ui-file-drop/package.json @@ -30,6 +30,7 @@ "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -38,7 +39,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-file-drop/src/FileDrop/v2/props.ts b/packages/ui-file-drop/src/FileDrop/v2/props.ts index 1462279c13..8e9e9633ee 100644 --- a/packages/ui-file-drop/src/FileDrop/v2/props.ts +++ b/packages/ui-file-drop/src/FileDrop/v2/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - FileDropTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' type RenderLabelProps = { @@ -173,7 +171,7 @@ type PropKeys = keyof FileDropOwnProps type AllowedPropKeys = Readonly> type FileDropProps = FileDropOwnProps & - WithStyleProps & + WithStyleProps, FileDropStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-flex/package.json b/packages/ui-flex/package.json index 8d4d229273..dbea5f8f73 100644 --- a/packages/ui-flex/package.json +++ b/packages/ui-flex/package.json @@ -28,12 +28,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-flex/src/Flex/v2/props.ts b/packages/ui-flex/src/Flex/v2/props.ts index 4fe5925cd5..2dbc4817f8 100644 --- a/packages/ui-flex/src/Flex/v2/props.ts +++ b/packages/ui-flex/src/Flex/v2/props.ts @@ -24,7 +24,6 @@ import type { AsElementType, - FlexTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -33,6 +32,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type FlexOwnProps = { /** @@ -127,7 +127,7 @@ type PropKeys = keyof FlexOwnProps type AllowedPropKeys = Readonly> type FlexProps = FlexOwnProps & - WithStyleProps & + WithStyleProps, FlexStyle> & OtherHTMLAttributes type FlexStyle = ComponentStyle<'flex'> diff --git a/packages/ui-form-field/package.json b/packages/ui-form-field/package.json index 584c6a2194..acbce74b29 100644 --- a/packages/ui-form-field/package.json +++ b/packages/ui-form-field/package.json @@ -32,13 +32,13 @@ "@instructure/ui-grid": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts index 5bae4f33a0..87320c6d14 100644 --- a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts +++ b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts @@ -24,7 +24,6 @@ import type { AsElementType, - FormFieldGroupTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' @@ -73,7 +72,7 @@ type PropKeys = keyof FormFieldGroupOwnProps type AllowedPropKeys = Readonly> type FormFieldGroupProps = FormFieldGroupOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes & // Adding other props that can be passed to FormFieldLayout, // excluding the ones we set manually diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts index f2d9ae2748..5ec5d0fb6e 100644 --- a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts @@ -29,14 +29,12 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props' * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. + * @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 = ( - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - _componentTheme: {}, + _componentTheme: never, props: FormFieldGroupProps ): FormFieldGroupStyle => { const { disabled } = props diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts index 02d98f198b..359ec11f42 100644 --- a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts +++ b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts @@ -22,10 +22,7 @@ * SOFTWARE. */ -import type { - FormFieldMessagesTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' import type { FormMessage } from '../../utils/v1/FormPropTypes' @@ -49,7 +46,7 @@ type PropKeys = keyof FormFieldMessagesOwnProps type AllowedPropKeys = Readonly> type FormFieldMessagesProps = FormFieldMessagesOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'> diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts index 3f245f18a3..d5d4325132 100644 --- a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts @@ -22,7 +22,6 @@ * SOFTWARE. */ -import type { FormFieldMessagesTheme } from '@instructure/shared-types' import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props' /** @@ -30,12 +29,12 @@ import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props' * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. + * @param {Object} _componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - _componentTheme: FormFieldMessagesTheme, + _componentTheme: never, props: FormFieldMessagesProps ): FormFieldMessagesStyle => { return { diff --git a/packages/ui-grid/package.json b/packages/ui-grid/package.json index 16f0f82c45..1f588ca463 100644 --- a/packages/ui-grid/package.json +++ b/packages/ui-grid/package.json @@ -29,12 +29,12 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-a11y-content": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-grid/src/Grid/v2/props.ts b/packages/ui-grid/src/Grid/v2/props.ts index f226df96b3..b9e1053cba 100644 --- a/packages/ui-grid/src/Grid/v2/props.ts +++ b/packages/ui-grid/src/Grid/v2/props.ts @@ -22,8 +22,9 @@ * SOFTWARE. */ -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type GridOwnProps = { @@ -44,7 +45,7 @@ type PropKeys = keyof GridOwnProps type AllowedPropKeys = Readonly> type GridProps = GridOwnProps & - WithStyleProps & + WithStyleProps, GridStyle> & OtherHTMLAttributes type GridStyle = ComponentStyle<'grid'> diff --git a/packages/ui-grid/src/GridCol/v2/props.ts b/packages/ui-grid/src/GridCol/v2/props.ts index 8820e80080..9472e6e316 100644 --- a/packages/ui-grid/src/GridCol/v2/props.ts +++ b/packages/ui-grid/src/GridCol/v2/props.ts @@ -23,7 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type ColWidths = 'auto' | number @@ -66,7 +67,7 @@ type PropKeys = keyof GridColOwnProps type AllowedPropKeys = Readonly> type GridColProps = GridColOwnProps & - WithStyleProps & + WithStyleProps, GridColStyle> & OtherHTMLAttributes type GridColStyle = ComponentStyle<'gridCol'> diff --git a/packages/ui-grid/src/GridRow/v2/props.ts b/packages/ui-grid/src/GridRow/v2/props.ts index 9c6f07ae50..1359a6ff24 100644 --- a/packages/ui-grid/src/GridRow/v2/props.ts +++ b/packages/ui-grid/src/GridRow/v2/props.ts @@ -24,8 +24,9 @@ import React from 'react' -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type GridRowOwnProps = { @@ -47,7 +48,7 @@ type PropKeys = keyof GridRowOwnProps type AllowedPropKeys = Readonly> type GridRowProps = GridRowOwnProps & - WithStyleProps & + WithStyleProps, GridRowStyle> & OtherHTMLAttributes type GridRowStyle = ComponentStyle<'gridRow'> diff --git a/packages/ui-heading/package.json b/packages/ui-heading/package.json index 5f5304124b..d546ab276a 100644 --- a/packages/ui-heading/package.json +++ b/packages/ui-heading/package.json @@ -29,12 +29,12 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-heading/src/Heading/v2/props.ts b/packages/ui-heading/src/Heading/v2/props.ts index a6677b3f74..44ab944f4c 100644 --- a/packages/ui-heading/src/Heading/v2/props.ts +++ b/packages/ui-heading/src/Heading/v2/props.ts @@ -25,7 +25,6 @@ import React from 'react' import type { AsElementType, - HeadingTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -34,6 +33,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type HeadingLevel = U @@ -111,7 +111,7 @@ type PropKeys = keyof HeadingOwnProps type AllowedPropKeys = Readonly> type HeadingProps = HeadingOwnProps & - WithStyleProps & + WithStyleProps, HeadingStyle> & OtherHTMLAttributes type HeadingStyle = ComponentStyle< diff --git a/packages/ui-img/src/Img/v2/props.ts b/packages/ui-img/src/Img/v2/props.ts index 87593daee6..abe9b9bee6 100644 --- a/packages/ui-img/src/Img/v2/props.ts +++ b/packages/ui-img/src/Img/v2/props.ts @@ -66,8 +66,7 @@ type PropKeys = keyof ImgOwnProps type AllowedPropKeys = Readonly> type ImgProps = ImgOwnProps & - //@ts-expect-error TODO-theme-types - WithStyleProps & + WithStyleProps, ImgStyle> & OtherHTMLAttributes type ImgStyle = ComponentStyle<'overlay' | 'container' | 'img'> diff --git a/packages/ui-img/src/Img/v2/styles.ts b/packages/ui-img/src/Img/v2/styles.ts index 6ba178b764..b47244d0eb 100644 --- a/packages/ui-img/src/Img/v2/styles.ts +++ b/packages/ui-img/src/Img/v2/styles.ts @@ -32,11 +32,10 @@ import type { ImgProps, ImgStyle } 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: NewComponentTypes['Img'], + componentTheme: ReturnType, props: ImgProps ): ImgStyle => { const { overlay, withBlur, withGrayscale, constrain } = props @@ -47,25 +46,22 @@ const generateStyle = ( // if overlay or filters are updated via props, // make the transition look smooth const transitionStyle = { - //@ts-expect-error TODO-theme-types transition: `all ${componentTheme.effectTransitionDuration}` } const getFilterStyle = () => { const filters = [] - - //@ts-expect-error TODO-theme-types withBlur && filters.push(`blur(${componentTheme.imageBlurAmount})`) withGrayscale && filters.push('grayscale(1)') return filters.length > 0 ? { - ...transitionStyle, - filter: filters.join(' ') - } + ...transitionStyle, + filter: filters.join(' ') + } : { - filter: 'none' - } + filter: 'none' + } } const fillContainer = { diff --git a/packages/ui-instructure/package.json b/packages/ui-instructure/package.json index 02f2456858..fe395ccbdc 100644 --- a/packages/ui-instructure/package.json +++ b/packages/ui-instructure/package.json @@ -34,13 +34,13 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-text": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-link/package.json b/packages/ui-link/package.json index 1ff9d679c9..8dbe3eaa91 100644 --- a/packages/ui-link/package.json +++ b/packages/ui-link/package.json @@ -32,13 +32,13 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-link/src/Link/v2/props.ts b/packages/ui-link/src/Link/v2/props.ts index feec4b6a22..c7598754da 100644 --- a/packages/ui-link/src/Link/v2/props.ts +++ b/packages/ui-link/src/Link/v2/props.ts @@ -26,7 +26,6 @@ import React from 'react' import type { ToProp, AsElementType, - LinkTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { @@ -34,6 +33,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewOwnProps } from '@instructure/ui-view/latest' import { Renderable } from '@instructure/shared-types' @@ -154,7 +154,7 @@ type LinkState = { } type LinkProps = LinkOwnProps & - WithStyleProps & + WithStyleProps, LinkStyle> & OtherHTMLAttributes & ToProp diff --git a/packages/ui-list/package.json b/packages/ui-list/package.json index d67dcf5953..1dd54c16de 100644 --- a/packages/ui-list/package.json +++ b/packages/ui-list/package.json @@ -28,13 +28,13 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts index 6dbf9b4153..7109b7bc73 100644 --- a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts +++ b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts @@ -29,10 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - InlineListItemTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type InlineListItemOwnProps = { /** @@ -80,7 +78,10 @@ type PropKeys = keyof InlineListItemOwnProps type AllowedPropKeys = Readonly> type InlineListItemProps = InlineListItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + InlineListItemStyle + > & OtherHTMLAttributes type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'> diff --git a/packages/ui-list/src/List/v2/ListItem/props.ts b/packages/ui-list/src/List/v2/ListItem/props.ts index 4875e44bb3..4d05833e4f 100644 --- a/packages/ui-list/src/List/v2/ListItem/props.ts +++ b/packages/ui-list/src/List/v2/ListItem/props.ts @@ -29,10 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - ListItemTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ListItemOwnProps = { /** @@ -76,7 +74,7 @@ type PropKeys = keyof ListItemOwnProps type AllowedPropKeys = Readonly> type ListItemProps = ListItemOwnProps & - WithStyleProps & + WithStyleProps, ListItemStyle> & OtherHTMLAttributes type ListItemStyle = ComponentStyle<'listItem'> diff --git a/packages/ui-list/src/List/v2/props.ts b/packages/ui-list/src/List/v2/props.ts index 8f057c7b87..2b46b58abb 100644 --- a/packages/ui-list/src/List/v2/props.ts +++ b/packages/ui-list/src/List/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ListOwnProps = { /** @@ -76,7 +77,7 @@ type PropKeys = keyof ListOwnProps type AllowedPropKeys = Readonly> type ListProps = ListOwnProps & - WithStyleProps & + WithStyleProps, ListStyle> & OtherHTMLAttributes type ListStyle = ComponentStyle<'list'> diff --git a/packages/ui-menu/package.json b/packages/ui-menu/package.json index fa65411887..e32de6cd92 100644 --- a/packages/ui-menu/package.json +++ b/packages/ui-menu/package.json @@ -33,6 +33,7 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "keycode": "^2" @@ -41,7 +42,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts index 61feb18c6a..e3d8a250b8 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts @@ -27,10 +27,10 @@ import MenuItem from '../MenuItem' import type { AsElementType, - MenuItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type OnMenuItemSelect = ( @@ -100,7 +100,7 @@ type PropKeys = keyof MenuItemOwnProps type AllowedPropKeys = Readonly> type MenuItemProps = MenuItemOwnProps & - WithStyleProps & + WithStyleProps, MenuItemStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts index 8e473de873..9d17035f07 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts @@ -26,11 +26,9 @@ import React from 'react' import { MenuItem } from '../MenuItem' -import type { - MenuGroupTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { MenuItemProps } from '../MenuItem/props' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -79,7 +77,7 @@ type PropKeys = keyof MenuGroupOwnProps type AllowedPropKeys = Readonly> type MenuGroupProps = MenuGroupOwnProps & - WithStyleProps & + WithStyleProps, MenuGroupStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts index 66b3ec3f1b..7939d0148f 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - MenuSeparatorTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' // keeping here to keep the structure of props.ts // eslint-disable-next-line @@ -37,7 +35,10 @@ type PropKeys = keyof MenuSeparatorOwnProps type AllowedPropKeys = Readonly> type MenuSeparatorProps = MenuSeparatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + MenuSeparatorStyle + > & OtherHTMLAttributes type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'> diff --git a/packages/ui-menu/src/Menu/v2/props.ts b/packages/ui-menu/src/Menu/v2/props.ts index 38d145d814..67be9e8ed6 100644 --- a/packages/ui-menu/src/Menu/v2/props.ts +++ b/packages/ui-menu/src/Menu/v2/props.ts @@ -24,8 +24,9 @@ import React from 'react' -import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PlacementPropValues, PositionConstraint, @@ -171,7 +172,7 @@ type PropKeys = keyof MenuOwnProps type AllowedPropKeys = Readonly> type MenuProps = MenuOwnProps & - WithStyleProps & + WithStyleProps, MenuStyle> & // controls can be passed in renderChildren and used later as aria-controls Omit, 'controls'> & { controls?: React.AriaAttributes['aria-controls'] diff --git a/packages/ui-metric/package.json b/packages/ui-metric/package.json index e70307c7b2..2a88f8a24d 100644 --- a/packages/ui-metric/package.json +++ b/packages/ui-metric/package.json @@ -27,13 +27,13 @@ "@instructure/console": "workspace:*", "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-metric/src/Metric/v2/props.ts b/packages/ui-metric/src/Metric/v2/props.ts index d8c6b32d41..0e7f6cfbe6 100644 --- a/packages/ui-metric/src/Metric/v2/props.ts +++ b/packages/ui-metric/src/Metric/v2/props.ts @@ -22,12 +22,9 @@ * SOFTWARE. */ -import type { - MetricTheme, - OtherHTMLAttributes, - Renderable -} from '@instructure/shared-types' +import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { ThemeOverrideValue } from '@instructure/emotion' type MetricOwnProps = { @@ -46,7 +43,7 @@ type PropKeys = keyof MetricOwnProps type AllowedPropKeys = Readonly> type MetricProps = MetricOwnProps & - WithStyleProps & + WithStyleProps, MetricStyle> & OtherHTMLAttributes & { themeOverride?: ThemeOverrideValue } diff --git a/packages/ui-modal/package.json b/packages/ui-modal/package.json index 80e5d1851e..ad2244d728 100644 --- a/packages/ui-modal/package.json +++ b/packages/ui-modal/package.json @@ -34,6 +34,7 @@ "@instructure/ui-overlays": "workspace:*", "@instructure/ui-portal": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -41,7 +42,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-position": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts index cab7d37854..25a344d0fc 100644 --- a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts @@ -28,9 +28,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ModalBodyTheme, OtherHTMLAttributes, UIElement } from '@instructure/shared-types' @@ -50,7 +50,7 @@ type PropKeys = keyof ModalBodyOwnProps type AllowedPropKeys = Readonly> type ModalBodyProps = ModalBodyOwnProps & - WithStyleProps & + WithStyleProps, ModalBodyStyle> & OtherHTMLAttributes type ModalBodyStyle = ComponentStyle<'modalBody'> diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts index 585051a3f9..011718441b 100644 --- a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - ModalFooterTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalFooterOwnProps = { children?: React.ReactNode @@ -40,7 +38,10 @@ type PropKeys = keyof ModalFooterOwnProps type AllowedPropKeys = Readonly> type ModalFooterProps = ModalFooterOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ModalFooterStyle + > & OtherHTMLAttributes type ModalFooterStyle = ComponentStyle<'modalFooter'> diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts index 7e75fafd86..0af11ea8b3 100644 --- a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - ModalHeaderTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalHeaderOwnProps = { children?: React.ReactNode @@ -44,7 +42,10 @@ type PropKeys = keyof ModalHeaderOwnProps type AllowedPropKeys = Readonly> type ModalHeaderProps = ModalHeaderOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ModalHeaderStyle + > & OtherHTMLAttributes type ModalHeaderStyle = ComponentStyle<'modalHeader'> diff --git a/packages/ui-modal/src/Modal/v2/props.ts b/packages/ui-modal/src/Modal/v2/props.ts index 6da48bdf20..78e795f10f 100644 --- a/packages/ui-modal/src/Modal/v2/props.ts +++ b/packages/ui-modal/src/Modal/v2/props.ts @@ -27,7 +27,6 @@ import { Dialog } from '@instructure/ui-dialog' import type { AsElementType, - ModalTheme, OtherHTMLAttributes, LiveRegion, UIElement @@ -35,6 +34,7 @@ import type { import type { PositionMountNode } from '@instructure/ui-position' import type { TransitionType } from '@instructure/ui-motion' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalPropsForPortal = { /** @@ -180,7 +180,7 @@ type PropKeys = keyof ModalOwnProps type AllowedPropKeys = Readonly> type ModalProps = ModalOwnProps & - WithStyleProps & + WithStyleProps, ModalStyle> & OtherHTMLAttributes type ModalStyle = ComponentStyle< diff --git a/packages/ui-motion/package.json b/packages/ui-motion/package.json index 15842f7eb4..31408bee73 100644 --- a/packages/ui-motion/package.json +++ b/packages/ui-motion/package.json @@ -28,11 +28,11 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-navigation/package.json b/packages/ui-navigation/package.json index caa34295a2..3b9b7c2c52 100644 --- a/packages/ui-navigation/package.json +++ b/packages/ui-navigation/package.json @@ -36,6 +36,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-menu": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-truncate-list": "workspace:*", "@instructure/ui-utils": "workspace:*", @@ -46,7 +47,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-navigation/src/AppNav/v2/Item/props.ts b/packages/ui-navigation/src/AppNav/v2/Item/props.ts index e65974acc8..06667b8cf1 100644 --- a/packages/ui-navigation/src/AppNav/v2/Item/props.ts +++ b/packages/ui-navigation/src/AppNav/v2/Item/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - AppNavItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { Cursor } from '@instructure/shared-types' import React from 'react' import { Renderable } from '@instructure/shared-types' @@ -82,7 +82,7 @@ type PropKeys = keyof AppNavItemOwnProps type AllowedPropKeys = Readonly> type AppNavItemProps = AppNavItemOwnProps & - WithStyleProps & + WithStyleProps, AppNavItemStyle> & OtherHTMLAttributes type AppNavItemStyle = ComponentStyle<'item' | 'label'> diff --git a/packages/ui-navigation/src/AppNav/v2/props.ts b/packages/ui-navigation/src/AppNav/v2/props.ts index 14a1a70e35..56aa43669d 100644 --- a/packages/ui-navigation/src/AppNav/v2/props.ts +++ b/packages/ui-navigation/src/AppNav/v2/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - AppNavTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import { Renderable } from '@instructure/shared-types' type AppNavOwnProps = { @@ -89,7 +87,7 @@ type PropKeys = keyof AppNavOwnProps type AllowedPropKeys = Readonly> type AppNavProps = AppNavOwnProps & - WithStyleProps & + WithStyleProps, AppNavStyle> & OtherHTMLAttributes type AppNavStyle = ComponentStyle<'appNav' | 'alignCenter' | 'list'> & { diff --git a/packages/ui-number-input/package.json b/packages/ui-number-input/package.json index 08396a5465..d1996ac2b3 100644 --- a/packages/ui-number-input/package.json +++ b/packages/ui-number-input/package.json @@ -30,6 +30,7 @@ "@instructure/ui-form-field": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*", "keycode": "^2" @@ -37,7 +38,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-options/package.json b/packages/ui-options/package.json index 33fa1eefd5..690cabe799 100644 --- a/packages/ui-options/package.json +++ b/packages/ui-options/package.json @@ -28,6 +28,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -35,7 +36,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-options/src/Options/v2/Item/props.ts b/packages/ui-options/src/Options/v2/Item/props.ts index dff1683997..85946099d7 100644 --- a/packages/ui-options/src/Options/v2/Item/props.ts +++ b/packages/ui-options/src/Options/v2/Item/props.ts @@ -24,12 +24,12 @@ import type { AsElementType, - OptionsItemTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type OptionsItemRenderProps = { children?: Renderable @@ -103,7 +103,10 @@ type PropKeys = keyof OptionsItemOwnProps type AllowedPropKeys = Readonly> type OptionsItemProps = OptionsItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + OptionsItemStyle + > & WithDeterministicIdProps & OtherHTMLAttributes diff --git a/packages/ui-options/src/Options/v2/Separator/props.ts b/packages/ui-options/src/Options/v2/Separator/props.ts index 97e45723d5..3d0846e0d2 100644 --- a/packages/ui-options/src/Options/v2/Separator/props.ts +++ b/packages/ui-options/src/Options/v2/Separator/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - OptionsSeparatorTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { AllHTMLAttributes } from 'react' type OptionsSeparatorOwnProps = { @@ -42,7 +42,10 @@ type PropKeys = keyof OptionsSeparatorOwnProps type AllowedPropKeys = Readonly> type OptionsSeparatorProps = OptionsSeparatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + OptionsSeparatorStyle + > & OtherHTMLAttributes> type OptionsSeparatorStyle = ComponentStyle<'separator'> diff --git a/packages/ui-options/src/Options/v2/props.ts b/packages/ui-options/src/Options/v2/props.ts index 64f85b1fff..43edcf7be7 100644 --- a/packages/ui-options/src/Options/v2/props.ts +++ b/packages/ui-options/src/Options/v2/props.ts @@ -24,10 +24,10 @@ import React from 'react' import type { AsElementType, - OptionsTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' @@ -59,7 +59,7 @@ type PropKeys = keyof OptionsOwnProps type AllowedPropKeys = Readonly> type OptionsProps = OptionsOwnProps & - WithStyleProps & + WithStyleProps, OptionsStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-overlays/package.json b/packages/ui-overlays/package.json index 1d6fc42a45..e76abfb85f 100644 --- a/packages/ui-overlays/package.json +++ b/packages/ui-overlays/package.json @@ -37,6 +37,7 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", @@ -45,7 +46,6 @@ }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-overlays/src/Mask/v2/props.ts b/packages/ui-overlays/src/Mask/v2/props.ts index e4830fccca..e06e9d3058 100644 --- a/packages/ui-overlays/src/Mask/v2/props.ts +++ b/packages/ui-overlays/src/Mask/v2/props.ts @@ -23,8 +23,9 @@ */ import React from 'react' -import type { MaskTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type MaskOwnProps = { children?: React.ReactNode @@ -42,7 +43,7 @@ type PropKeys = keyof MaskOwnProps type AllowedPropKeys = Readonly> type MaskProps = MaskOwnProps & - WithStyleProps & + WithStyleProps, MaskStyle> & OtherHTMLAttributes type MaskStyle = ComponentStyle<'mask'> diff --git a/packages/ui-pages/package.json b/packages/ui-pages/package.json index 39c3648afd..71429709a4 100644 --- a/packages/ui-pages/package.json +++ b/packages/ui-pages/package.json @@ -29,13 +29,13 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts index 898e7f1872..0b0b8ee9dc 100644 --- a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts +++ b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts @@ -23,7 +23,7 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { PaginationPageInputTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import React from 'react' type PaginationPageInputOwnProps = { /** @@ -67,7 +67,10 @@ type PropKeys = keyof PaginationPageInputOwnProps type AllowedPropKeys = Readonly> type PaginationPageInputProps = PaginationPageInputOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + PaginationPageInputStyle + > type PaginationPageInputStyle = ComponentStyle< 'paginationPageInput' | 'numberInput' | 'inputLabel' diff --git a/packages/ui-pill/src/Pill/v2/props.ts b/packages/ui-pill/src/Pill/v2/props.ts index a8a6776c98..caa9f4eeea 100644 --- a/packages/ui-pill/src/Pill/v2/props.ts +++ b/packages/ui-pill/src/Pill/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - PillTheme, OtherHTMLAttributes } from '@instructure/shared-types' @@ -63,7 +63,7 @@ type PropKeys = keyof PillOwnProps type AllowedPropKeys = Readonly> type PillProps = PillOwnProps & - WithStyleProps & + WithStyleProps, PillStyle> & OtherHTMLAttributes type PillStyle = ComponentStyle< diff --git a/packages/ui-popover/package.json b/packages/ui-popover/package.json index a675d64000..fa18a780bd 100644 --- a/packages/ui-popover/package.json +++ b/packages/ui-popover/package.json @@ -33,6 +33,7 @@ "@instructure/ui-i18n": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -42,7 +43,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-popover/src/Popover/v2/props.ts b/packages/ui-popover/src/Popover/v2/props.ts index ee3642dc74..842e184d5a 100644 --- a/packages/ui-popover/src/Popover/v2/props.ts +++ b/packages/ui-popover/src/Popover/v2/props.ts @@ -23,6 +23,7 @@ */ import React from 'react' import { BorderWidth } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion' @@ -36,8 +37,7 @@ import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { LiveRegion, UIElement, - Renderable, - PopoverTheme + Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -289,7 +289,7 @@ type PopoverOwnProps = { type PopoverProps = PopoverOwnProps & TextDirectionContextConsumerProps & WithDeterministicIdProps & - WithStyleProps + WithStyleProps, PopoverStyle> type PopoverState = { placement: PopoverOwnProps['placement'] diff --git a/packages/ui-position/package.json b/packages/ui-position/package.json index 50fb915659..29a093f785 100644 --- a/packages/ui-position/package.json +++ b/packages/ui-position/package.json @@ -30,13 +30,13 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-portal": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-progress/package.json b/packages/ui-progress/package.json index 96b933ef0e..9e58243412 100644 --- a/packages/ui-progress/package.json +++ b/packages/ui-progress/package.json @@ -30,12 +30,12 @@ "@instructure/ui-a11y-content": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-progress/src/ProgressBar/v2/props.ts b/packages/ui-progress/src/ProgressBar/v2/props.ts index 587d435032..5435e01a47 100644 --- a/packages/ui-progress/src/ProgressBar/v2/props.ts +++ b/packages/ui-progress/src/ProgressBar/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ProgressBarTheme, OtherHTMLAttributes } from '@instructure/shared-types' import { Renderable } from '@instructure/shared-types' @@ -125,7 +125,10 @@ type PropKeys = keyof ProgressBarOwnProps type AllowedPropKeys = Readonly> type ProgressBarProps = ProgressBarOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ProgressBarStyle + > & OtherHTMLAttributes type ProgressBarStyle = ComponentStyle< diff --git a/packages/ui-progress/src/ProgressCircle/v2/props.ts b/packages/ui-progress/src/ProgressCircle/v2/props.ts index b9247a4833..a4df44aa93 100644 --- a/packages/ui-progress/src/ProgressCircle/v2/props.ts +++ b/packages/ui-progress/src/ProgressCircle/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ProgressCircleTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -108,7 +108,10 @@ type PropKeys = keyof ProgressCircleOwnProps type AllowedPropKeys = Readonly> type ProgressCircleProps = ProgressCircleOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ProgressCircleStyle + > & OtherHTMLAttributes type ProgressCircleStyle = ComponentStyle< diff --git a/packages/ui-radio-input/package.json b/packages/ui-radio-input/package.json index 9213ed82a2..902509dcde 100644 --- a/packages/ui-radio-input/package.json +++ b/packages/ui-radio-input/package.json @@ -29,13 +29,13 @@ "@instructure/ui-a11y-utils": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-range-input/package.json b/packages/ui-range-input/package.json index 0c524c285d..ed62c65bf2 100644 --- a/packages/ui-range-input/package.json +++ b/packages/ui-range-input/package.json @@ -32,6 +32,7 @@ "@instructure/ui-form-field": "workspace:*", "@instructure/ui-i18n": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -39,7 +40,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-range-input/src/RangeInput/v2/props.ts b/packages/ui-range-input/src/RangeInput/v2/props.ts index f5a8c76486..1d8104491d 100644 --- a/packages/ui-range-input/src/RangeInput/v2/props.ts +++ b/packages/ui-range-input/src/RangeInput/v2/props.ts @@ -26,11 +26,14 @@ import React from 'react' import type { OtherHTMLAttributes, - RangeInputTheme, PickPropsWithExceptions } from '@instructure/shared-types' -import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field/latest' +import type { + FormFieldOwnProps, + FormMessage +} from '@instructure/ui-form-field/latest' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { InputHTMLAttributes } from 'react' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -110,7 +113,10 @@ type RangeInputProps = 'label' | 'inline' | 'id' | 'elementRef' > & RangeInputOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + RangeInputStyle + > & OtherHTMLAttributes< RangeInputOwnProps, InputHTMLAttributes diff --git a/packages/ui-rating/package.json b/packages/ui-rating/package.json index 9bfa2b889f..a7529f4169 100644 --- a/packages/ui-rating/package.json +++ b/packages/ui-rating/package.json @@ -32,12 +32,12 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-rating/src/RatingIcon/v2/props.ts b/packages/ui-rating/src/RatingIcon/v2/props.ts index 6c3992c796..87ad168ef8 100644 --- a/packages/ui-rating/src/RatingIcon/v2/props.ts +++ b/packages/ui-rating/src/RatingIcon/v2/props.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { RatingIconTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type RatingIconOwnProps = { animationDelay?: number @@ -41,7 +41,7 @@ type PropKeys = keyof RatingIconOwnProps type AllowedPropKeys = Readonly> type RatingIconProps = RatingIconOwnProps & - WithStyleProps + WithStyleProps, RatingIconStyle> type RatingIconStyle = ComponentStyle<'ratingIcon' | 'icon'> const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-select/package.json b/packages/ui-select/package.json index de9e4d5cae..07d7eea10f 100644 --- a/packages/ui-select/package.json +++ b/packages/ui-select/package.json @@ -35,6 +35,7 @@ "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-selectable": "workspace:*", "@instructure/ui-text-input": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -43,7 +44,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-select/src/Select/v2/index.tsx b/packages/ui-select/src/Select/v2/index.tsx index c6ab29fe7c..78785cfb20 100644 --- a/packages/ui-select/src/Select/v2/index.tsx +++ b/packages/ui-select/src/Select/v2/index.tsx @@ -112,18 +112,18 @@ const MemoedOption = memo( (prevProps, nextProps) => { return ( prevProps.selectOption.props.isHighlighted === - nextProps.selectOption.props.isHighlighted && + nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === - nextProps.selectOption.props.isSelected && + nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === - nextProps.selectOption.props.isDisabled && + nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === - nextProps.selectOption.props.children && + nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === - nextProps.selectOption.props.renderBeforeLabel && + nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === - nextProps.selectOption.props.renderAfterLabel && + nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children ) } @@ -334,59 +334,59 @@ class Select extends Component { return this.interaction === 'enabled' ? { - onRequestShowOptions: (event) => { - onRequestShowOptions?.(event) - const selectedOptionId = this.selectedOptionId + onRequestShowOptions: (event) => { + onRequestShowOptions?.(event) + const selectedOptionId = this.selectedOptionId - if (selectedOptionId && !Array.isArray(selectedOptionId)) { - // highlight selected option on show - this.highlightOption(event, selectedOptionId) - } - }, - onRequestHideOptions: (event) => { - onRequestHideOptions?.(event) - }, - onRequestHighlightOption: ( - event, - { id, direction }: { id?: string; direction?: number } - ) => { - if (!isShowingOptions) return - - const highlightedOptionId = this.highlightedOptionId - // if id exists, use that - let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined - if (!highlightId) { - if (!highlightedOptionId) { - // nothing highlighted yet, highlight first option - highlightId = this._optionIds[0] - } else { - // find next id based on direction - const index = this._optionIds.indexOf(highlightedOptionId) - highlightId = - index > -1 ? this._optionIds[index + direction!] : undefined + if (selectedOptionId && !Array.isArray(selectedOptionId)) { + // highlight selected option on show + this.highlightOption(event, selectedOptionId) } - } - if (highlightId) { - // only highlight if id exists as a valid option - this.highlightOption(event, highlightId) - } - }, - onRequestHighlightFirstOption: (event) => { - this.highlightOption(event, this._optionIds[0]) - }, - onRequestHighlightLastOption: (event) => { - this.highlightOption( + }, + onRequestHideOptions: (event) => { + onRequestHideOptions?.(event) + }, + onRequestHighlightOption: ( event, - this._optionIds[this._optionIds.length - 1] - ) - }, - onRequestSelectOption: (event, { id }) => { - if (id && this._optionIds.indexOf(id) !== -1) { - // only select if id exists as a valid option - onRequestSelectOption?.(event, { id }) + { id, direction }: { id?: string; direction?: number } + ) => { + if (!isShowingOptions) return + + const highlightedOptionId = this.highlightedOptionId + // if id exists, use that + let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined + if (!highlightId) { + if (!highlightedOptionId) { + // nothing highlighted yet, highlight first option + highlightId = this._optionIds[0] + } else { + // find next id based on direction + const index = this._optionIds.indexOf(highlightedOptionId) + highlightId = + index > -1 ? this._optionIds[index + direction!] : undefined + } + } + if (highlightId) { + // only highlight if id exists as a valid option + this.highlightOption(event, highlightId) + } + }, + onRequestHighlightFirstOption: (event) => { + this.highlightOption(event, this._optionIds[0]) + }, + onRequestHighlightLastOption: (event) => { + this.highlightOption( + event, + this._optionIds[this._optionIds.length - 1] + ) + }, + onRequestSelectOption: (event, { id }) => { + if (id && this._optionIds.indexOf(id) !== -1) { + // only select if id exists as a valid option + onRequestSelectOption?.(event, { id }) + } } } - } : {} } @@ -413,12 +413,12 @@ class Select extends Component { return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? (renderOptionLabel as any).bind(null, { - id, - isDisabled, - isSelected, - isHighlighted, - children - }) + id, + isDisabled, + isSelected, + isHighlighted, + children + }) : (renderOptionLabel as React.ReactNode) } @@ -539,18 +539,18 @@ class Select extends Component { const viewProps: Partial = isShowingOptions ? { - display: 'block', - overflowY: 'auto', - maxHeight: - optionsMaxHeight || - this._optionHeight * visibleOptionsCount! - - // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered - (utils.isChromium() ? this.SCROLL_TOLERANCE : 0), - maxWidth: optionsMaxWidth || this.width, - background: 'primary', - elementRef: (node: Element | null) => (this._listView = node), - borderRadius: 'inherit' - } + display: 'block', + overflowY: 'auto', + maxHeight: + optionsMaxHeight || + this._optionHeight * visibleOptionsCount! - + // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered + (utils.isChromium() ? this.SCROLL_TOLERANCE : 0), + maxWidth: optionsMaxWidth || this.width, + background: 'primary', + elementRef: (node: Element | null) => (this._listView = node), + borderRadius: 'inherit' + } : { maxHeight: 0 } return ( @@ -560,30 +560,30 @@ class Select extends Component { > {isShowingOptions ? Children.map(children as SelectChildren, (child, index) => { - if (!child || !matchComponentTypes(child, [Group, Option])) { - return // ignore invalid children - } - if (matchComponentTypes(child, [Option])) { - lastWasGroup = false - return this.renderOption(child, { - getOptionProps, - getDisabledOptionProps - }) - } - if (matchComponentTypes(child, [Group])) { - const afterGroup = lastWasGroup - lastWasGroup = true - return this.renderGroup(child, { - getOptionProps, - getDisabledOptionProps, - // for rendering separators appropriately - isFirstChild: index === 0, - isLastChild: index === Children.count(children) - 1, - afterGroup - }) - } - return - }) + if (!child || !matchComponentTypes(child, [Group, Option])) { + return // ignore invalid children + } + if (matchComponentTypes(child, [Option])) { + lastWasGroup = false + return this.renderOption(child, { + getOptionProps, + getDisabledOptionProps + }) + } + if (matchComponentTypes(child, [Group])) { + const afterGroup = lastWasGroup + lastWasGroup = true + return this.renderGroup(child, { + getOptionProps, + getDisabledOptionProps, + // for rendering separators appropriately + isFirstChild: index === 0, + isLastChild: index === Children.count(children) - 1, + afterGroup + }) + } + return + }) : null} @@ -622,8 +622,8 @@ class Select extends Component { return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel - ? option.props.renderAfterLabel - : this.renderIcon() + ? option.props.renderAfterLabel + : this.renderIcon() } } } else { @@ -632,8 +632,8 @@ class Select extends Component { return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel - ? child.props.renderAfterLabel - : this.renderIcon() + ? child.props.renderAfterLabel + : this.renderIcon() } } } @@ -730,26 +730,26 @@ class Select extends Component { // popup buttons rather than comboboxes. const overrideProps: Partial = !isEditable ? { - // We need role="combobox" for the 'open list' button shortcut to work - // with desktop screenreaders. - // But desktop Safari with Voiceover does not support proper combobox - // handling, a 'button' role is set as a workaround. - // See https://bugs.webkit.org/show_bug.cgi?id=236881 - // Also on iOS Chrome with role='combobox' it announces unnecessarily - // that its 'read-only' and that this is a 'textfield', see INSTUI-4500 - role: - utils.isSafari() || + // We need role="combobox" for the 'open list' button shortcut to work + // with desktop screenreaders. + // But desktop Safari with Voiceover does not support proper combobox + // handling, a 'button' role is set as a workaround. + // See https://bugs.webkit.org/show_bug.cgi?id=236881 + // Also on iOS Chrome with role='combobox' it announces unnecessarily + // that its 'read-only' and that this is a 'textfield', see INSTUI-4500 + role: + utils.isSafari() || utils.isAndroidOrIOS() || (interaction === 'disabled' && utils.isChromium()) - ? 'button' - : 'combobox', - title: inputValue, - 'aria-autocomplete': undefined, - 'aria-readonly': true - } + ? 'button' + : 'combobox', + title: inputValue, + 'aria-autocomplete': undefined, + 'aria-readonly': true + } : interaction === 'disabled' && utils.isChromium() - ? { role: 'button' } - : {} + ? { role: 'button' } + : {} // backdoor to autocomplete attr to work around chrome autofill issues if (passthroughProps['autoComplete']) { @@ -796,8 +796,8 @@ class Select extends Component { typeof onInputChange === 'function' ? onInputChange : inputValue - ? () => { } - : undefined, + ? () => {} + : undefined, onFocus, onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions), @@ -811,11 +811,10 @@ class Select extends Component { suppressHydrationWarning {...(interaction === 'enabled' && !isEditable && { - themeOverride: (componentTheme) => ({ - //@ts-expect-error TODO-theme-types - backgroundReadonlyColor: componentTheme.backgroundColor - }) - })} + themeOverride: (componentTheme) => ({ + backgroundReadonlyColor: componentTheme.backgroundColor + }) + })} /> ) } @@ -872,8 +871,8 @@ class Select extends Component { mountNode !== undefined ? mountNode : utils.isAndroidOrIOS() - ? this.ref - : undefined + ? this.ref + : undefined } positionTarget={this._inputContainer} isShowingContent={isShowingOptions} diff --git a/packages/ui-select/src/Select/v2/props.ts b/packages/ui-select/src/Select/v2/props.ts index 97eead8319..7a83964ad6 100644 --- a/packages/ui-select/src/Select/v2/props.ts +++ b/packages/ui-select/src/Select/v2/props.ts @@ -282,8 +282,7 @@ type PropKeys = keyof SelectOwnProps type AllowedPropKeys = Readonly> type SelectProps = SelectOwnProps & - //@ts-expect-error TODO-theme-types - WithStyleProps & + WithStyleProps, SelectStyle> & OtherHTMLAttributes< SelectOwnProps, InputHTMLAttributes diff --git a/packages/ui-select/src/Select/v2/styles.ts b/packages/ui-select/src/Select/v2/styles.ts index ad6d191afb..6db2d14b43 100644 --- a/packages/ui-select/src/Select/v2/styles.ts +++ b/packages/ui-select/src/Select/v2/styles.ts @@ -28,12 +28,11 @@ import type { SelectProps, SelectStyle } 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} _props the props of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Select'], + componentTheme: ReturnType, _props: SelectProps ): SelectStyle => { return { @@ -41,7 +40,6 @@ const generateStyle = ( label: 'select__assistiveText', display: 'none' }, - //@ts-expect-error TODO-theme-types popoverBorderWidth: componentTheme.popoverBorderWidth } } diff --git a/packages/ui-side-nav-bar/package.json b/packages/ui-side-nav-bar/package.json index d46fccf796..00ac31b6e2 100644 --- a/packages/ui-side-nav-bar/package.json +++ b/packages/ui-side-nav-bar/package.json @@ -32,13 +32,13 @@ "@instructure/ui-badge": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts index bebf6baf06..c54d83c67f 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts @@ -25,10 +25,10 @@ import React from 'react' import type { AsElementType, - SideNavBarItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type SideNavBarItemOwnProps = { /** @@ -70,7 +70,10 @@ type PropKeys = keyof SideNavBarItemOwnProps type AllowedPropKeys = Readonly> type SideNavBarItemProps = SideNavBarItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + SideNavBarItemStyle + > & OtherHTMLAttributes type SideNavBarItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'> diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts index b94d40fe81..4617369920 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - SideNavBarTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type SideNavBarOwnProps = { /** @@ -73,7 +71,7 @@ type PropKeys = keyof SideNavBarOwnProps type AllowedPropKeys = Readonly> type SideNavBarProps = SideNavBarOwnProps & - WithStyleProps & + WithStyleProps, SideNavBarStyle> & OtherHTMLAttributes type SideNavBarStyle = ComponentStyle< diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts index d221034545..a5e6b50b4a 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts @@ -24,15 +24,13 @@ import type { TagStyle } from '@codemirror/language' -import type { - CodeEditorTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, StyleObject, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { SearchConfig } from './SearchPanel' @@ -213,7 +211,7 @@ type AllowedPropKeys = Readonly> type SourceCodeEditorProps = SourceCodeEditorOwnProps & WithStyleProps< - CodeEditorTheme, + ReturnType, // The highlightStyle is a unique one, not compatible with our style syntax, // but isn't used for the css prop anyway Record diff --git a/packages/ui-spinner/package.json b/packages/ui-spinner/package.json index 6e318fe611..2a12c767b7 100644 --- a/packages/ui-spinner/package.json +++ b/packages/ui-spinner/package.json @@ -29,6 +29,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -36,7 +37,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-svg-images/package.json b/packages/ui-svg-images/package.json index e5c44ca125..7cb745ebb1 100644 --- a/packages/ui-svg-images/package.json +++ b/packages/ui-svg-images/package.json @@ -27,12 +27,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json index 0187491431..5fd6d5ddc9 100644 --- a/packages/ui-table/package.json +++ b/packages/ui-table/package.json @@ -31,6 +31,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-simple-select": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tabs/package.json b/packages/ui-tabs/package.json index 5dcece137f..899f1432dd 100644 --- a/packages/ui-tabs/package.json +++ b/packages/ui-tabs/package.json @@ -33,6 +33,7 @@ "@instructure/ui-i18n": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -42,7 +43,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts index 34fcdbcb66..4a16af5bde 100644 --- a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - TabsPanelTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type TabsPanelOwnProps = { /** @@ -74,7 +72,7 @@ type PropKeys = keyof TabsPanelOwnProps type AllowedPropKeys = Readonly> type TabsPanelProps = TabsPanelOwnProps & - WithStyleProps & + WithStyleProps, TabsPanelStyle> & OtherHTMLAttributes type TabsPanelStyle = ComponentStyle<'panel' | 'content'> diff --git a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts index 3c62bbe592..a3a7fbd780 100644 --- a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts @@ -23,12 +23,9 @@ */ import React from 'react' -import type { - OtherHTMLAttributes, - Renderable, - TabsTabTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewOwnProps } from '@instructure/ui-view/latest' type TabsTabOwnProps = { @@ -58,7 +55,7 @@ type PropKeys = keyof TabsTabOwnProps type AllowedPropKeys = Readonly> type TabsTabProps = TabsTabOwnProps & - WithStyleProps & + WithStyleProps, TabsTabStyle> & OtherHTMLAttributes type TabsTabStyle = ComponentStyle<'tab'> diff --git a/packages/ui-tabs/src/Tabs/v2/props.ts b/packages/ui-tabs/src/Tabs/v2/props.ts index 9c6a74b513..8a54504db6 100644 --- a/packages/ui-tabs/src/Tabs/v2/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/props.ts @@ -27,7 +27,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { OtherHTMLAttributes, TabsTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { ViewOwnProps } from '@instructure/ui-view/latest' @@ -85,7 +86,7 @@ type AllowedPropKeys = Readonly> type TabsProps = TabsOwnProps & TextDirectionContextConsumerProps & - WithStyleProps & + WithStyleProps, TabsStyle> & OtherHTMLAttributes type TabsStyle = ComponentStyle< diff --git a/packages/ui-tag/package.json b/packages/ui-tag/package.json index 1c77754cb0..ec5f9c435c 100644 --- a/packages/ui-tag/package.json +++ b/packages/ui-tag/package.json @@ -31,12 +31,12 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tag/src/Tag/v2/props.ts b/packages/ui-tag/src/Tag/v2/props.ts index efb45d8f31..1593a51a13 100644 --- a/packages/ui-tag/src/Tag/v2/props.ts +++ b/packages/ui-tag/src/Tag/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { OtherHTMLAttributes, TagTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type TagOwnProps = { className?: string @@ -71,7 +72,7 @@ type PropKeys = keyof TagOwnProps type AllowedPropKeys = Readonly> type TagProps = TagOwnProps & - WithStyleProps & + WithStyleProps, TagStyle> & OtherHTMLAttributes type TagStyle = ComponentStyle<'tag' | 'text' | 'icon'> diff --git a/packages/ui-text-area/package.json b/packages/ui-text-area/package.json index 567b91357e..07dbe3e80e 100644 --- a/packages/ui-text-area/package.json +++ b/packages/ui-text-area/package.json @@ -31,6 +31,7 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-text-input/src/TextInput/v2/props.ts b/packages/ui-text-input/src/TextInput/v2/props.ts index 8981c14df7..1411149fb9 100644 --- a/packages/ui-text-input/src/TextInput/v2/props.ts +++ b/packages/ui-text-input/src/TextInput/v2/props.ts @@ -184,8 +184,7 @@ type PropKeys = keyof TextInputOwnProps type AllowedPropKeys = Readonly> type TextInputProps = TextInputOwnProps & - //@ts-expect-error TODO-theme-types - WithStyleProps & + WithStyleProps, TextInputStyle> & OtherHTMLAttributes< TextInputOwnProps, InputHTMLAttributes diff --git a/packages/ui-text-input/src/TextInput/v2/theme.ts b/packages/ui-text-input/src/TextInput/v2/theme.ts deleted file mode 100644 index e1d77a78b3..0000000000 --- a/packages/ui-text-input/src/TextInput/v2/theme.ts +++ /dev/null @@ -1,84 +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 { TextInputTheme } 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): TextInputTheme => { - const { colors, typography, borders, spacing, forms, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'], - focusOutlineColor: theme['ic-brand-primary'] - } - } - - const componentVariables: TextInputTheme = { - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - borderWidth: borders?.widthSmall, - borderStyle: borders?.style, - borderColor: colors?.contrasts?.grey3045, - borderRadius: borders?.radiusMedium, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - requiredInvalidColor: colors?.contrasts?.red5782, - - padding: spacing?.small, - - focusOutlineWidth: borders?.widthMedium, - focusOutlineStyle: borders?.style, - focusOutlineColor: colors?.contrasts?.blue4570, - - errorBorderColor: colors?.contrasts?.red4570, - errorOutlineColor: colors?.contrasts?.red4570, - - placeholderColor: colors?.contrasts?.grey4570, - - smallFontSize: typography?.fontSizeSmall, - smallHeight: forms?.inputHeightSmall, - - mediumFontSize: typography?.fontSizeMedium, - mediumHeight: forms?.inputHeightMedium, - - largeFontSize: typography?.fontSizeLarge, - largeHeight: forms?.inputHeightLarge - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-text/package.json b/packages/ui-text/package.json index 67092c0c59..0dfcdc6f74 100644 --- a/packages/ui-text/package.json +++ b/packages/ui-text/package.json @@ -28,12 +28,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7" }, diff --git a/packages/ui-text/src/Text/v2/props.ts b/packages/ui-text/src/Text/v2/props.ts index b0c43f29e3..73e9b1ccea 100644 --- a/packages/ui-text/src/Text/v2/props.ts +++ b/packages/ui-text/src/Text/v2/props.ts @@ -25,10 +25,10 @@ import React from 'react' import type { AsElementType, - TextTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type TextOwnProps = { /** @@ -113,7 +113,7 @@ type PropKeys = keyof TextOwnProps type AllowedPropKeys = Readonly> type TextProps = TextOwnProps & - WithStyleProps & + WithStyleProps, TextStyle> & OtherHTMLAttributes type TextStyle = ComponentStyle<'text'> diff --git a/packages/ui-toggle-details/package.json b/packages/ui-toggle-details/package.json index a2e79dab05..ff6a33de94 100644 --- a/packages/ui-toggle-details/package.json +++ b/packages/ui-toggle-details/package.json @@ -33,6 +33,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -40,7 +41,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts index e34bb100d5..4766da69a0 100644 --- a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts +++ b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts @@ -24,11 +24,9 @@ import React from 'react' -import type { - OtherHTMLAttributes, - ToggleDetailsTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewProps } from '@instructure/ui-view/latest' type ToggleDetailsOwnProps = { @@ -80,7 +78,10 @@ type PropKeys = keyof ToggleDetailsOwnProps type AllowedPropKeys = Readonly> type ToggleDetailsProps = ToggleDetailsOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ToggleDetailsStyle + > & OtherHTMLAttributes type ToggleDetailsStyle = ComponentStyle< diff --git a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts index 8fcb428ccb..aea313a6b6 100644 --- a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts +++ b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts @@ -27,11 +27,11 @@ import React from 'react' import { AsElementType, OtherHTMLAttributes, - Renderable, - ToggleGroupTheme + Renderable } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ToggleGroupOwnProps = { /** @@ -94,7 +94,7 @@ type ToggleGroupStyle = { borderColor: string } type ToggleGroupProps = ToggleGroupOwnProps & OtherHTMLAttributes & - WithStyleProps + WithStyleProps, ToggleGroupStyle> const allowedProps: AllowedPropKeys = [ 'children', 'summary', diff --git a/packages/ui-tooltip/package.json b/packages/ui-tooltip/package.json index 53261f13d0..77565ca848 100644 --- a/packages/ui-tooltip/package.json +++ b/packages/ui-tooltip/package.json @@ -29,13 +29,13 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tooltip/src/Tooltip/v2/props.ts b/packages/ui-tooltip/src/Tooltip/v2/props.ts index 86de063066..f59ddd2226 100644 --- a/packages/ui-tooltip/src/Tooltip/v2/props.ts +++ b/packages/ui-tooltip/src/Tooltip/v2/props.ts @@ -26,7 +26,6 @@ import React from 'react' import type { AsElementType, - TooltipTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { @@ -35,6 +34,7 @@ import type { PositionMountNode } from '@instructure/ui-position' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PopoverOwnProps } from '@instructure/ui-popover/latest' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' @@ -183,7 +183,7 @@ type PropsPassableToPopover = Omit< type TooltipProps = PropsPassableToPopover & TooltipOwnProps & - WithStyleProps & + WithStyleProps, TooltipStyle> & // the OtherHTMLAttributes might be passed to the trigger or Popover OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-top-nav-bar/package.json b/packages/ui-top-nav-bar/package.json index 1801cecb3c..806e95955e 100644 --- a/packages/ui-top-nav-bar/package.json +++ b/packages/ui-top-nav-bar/package.json @@ -39,6 +39,7 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-responsive": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-tray": "workspace:*", "@instructure/ui-truncate-list": "workspace:*", @@ -50,7 +51,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tray/package.json b/packages/ui-tray/package.json index 4d3fcd1a42..1a88efeec2 100644 --- a/packages/ui-tray/package.json +++ b/packages/ui-tray/package.json @@ -34,11 +34,11 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tray/src/Tray/v2/props.ts b/packages/ui-tray/src/Tray/v2/props.ts index 924b7ab6f8..29f8a64f18 100644 --- a/packages/ui-tray/src/Tray/v2/props.ts +++ b/packages/ui-tray/src/Tray/v2/props.ts @@ -24,9 +24,9 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { OtherHTMLAttributes, - TrayTheme, LiveRegion, UIElement } from '@instructure/shared-types' @@ -166,7 +166,7 @@ type AllowedPropKeys = Readonly> type TrayProps = TrayOwnProps & TextDirectionContextConsumerProps & - WithStyleProps & + WithStyleProps, TrayStyle> & OtherHTMLAttributes type TrayStyle = ComponentStyle<'tray' | 'content'> diff --git a/packages/ui-tree-browser/package.json b/packages/ui-tree-browser/package.json index a01e78ede5..e30d07874e 100644 --- a/packages/ui-tree-browser/package.json +++ b/packages/ui-tree-browser/package.json @@ -29,6 +29,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-img": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "keycode": "^2" }, @@ -36,7 +37,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts index eeb48426a0..de715cf1b2 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts @@ -24,7 +24,7 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { TreeBrowserButtonTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TreeBrowserCommonProps } from '../props' type TreeBrowserButtonOwnProps = { @@ -58,7 +58,10 @@ type PropKeys = keyof TreeBrowserButtonOwnProps type AllowedPropKeys = Readonly> type TreeBrowserButtonProps = TreeBrowserButtonOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserButtonStyle + > type TreeBrowserButtonStyle = ComponentStyle< | 'treeButton' diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts index be2c0e6fe7..f1d968eb34 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts @@ -25,8 +25,8 @@ import React from 'react' import type { CollectionData } from '../props' -import type { TreeBrowserCollectionTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { CollectionProps, TreeBrowserBaseProps } from '../props' type TreeBrowserCollectionOwnProps = { @@ -45,7 +45,10 @@ type PropKeys = keyof TreeBrowserCollectionOwnProps type AllowedPropKeys = Readonly> type TreeBrowserCollectionProps = TreeBrowserCollectionOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserCollectionStyle + > type TreeBrowserCollectionStyle = ComponentStyle< 'treeCollection' | 'list' | 'item' diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts index fa45243090..146478cc82 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts @@ -23,8 +23,8 @@ */ import React from 'react' -import type { TreeBrowserButtonTheme } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TreeBrowserButtonProps, @@ -63,7 +63,10 @@ type PropKeys = keyof TreeBrowserNodeOwnProps type AllowedPropKeys = Readonly> type TreeBrowserNodeProps = TreeBrowserNodeOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserButtonStyle + > const allowedProps: AllowedPropKeys = [ 'id', 'size', diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts index 636b7f1c5b..27154299fd 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { TreeBrowserTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import React, { ReactElement } from 'react' import type { TreeBrowserButtonProps } from './TreeButton/props' import { Renderable } from '@instructure/shared-types' @@ -141,7 +141,7 @@ type AllowedPropKeys = Readonly> // For now it doesn't need the OtherHTMLAttributes, because the extra props // get passed to TreeCollection and it doesn't handle them type TreeBrowserProps = TreeBrowserOwnProps & - WithStyleProps + WithStyleProps, TreeBrowserStyle> type TreeBrowserStyle = ComponentStyle<'treeBrowser'> diff --git a/packages/ui-truncate-text/package.json b/packages/ui-truncate-text/package.json index a008695369..f510d9620e 100644 --- a/packages/ui-truncate-text/package.json +++ b/packages/ui-truncate-text/package.json @@ -30,6 +30,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "escape-html": "^1.0.3" }, @@ -38,7 +39,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-text": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@types/escape-html": "^1.0.4", diff --git a/packages/ui-truncate-text/src/TruncateText/v2/props.ts b/packages/ui-truncate-text/src/TruncateText/v2/props.ts index 4b0b2b2a61..8bcc15ecca 100644 --- a/packages/ui-truncate-text/src/TruncateText/v2/props.ts +++ b/packages/ui-truncate-text/src/TruncateText/v2/props.ts @@ -24,8 +24,8 @@ import { ReactNode } from 'react' -import type { TruncateTextTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type CleanDataOptions = { /** @@ -79,7 +79,10 @@ type PropKeys = keyof TruncateTextOwnProps type AllowedPropKeys = Readonly> type TruncateTextProps = TruncateTextOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TruncateTextStyle + > type TruncateTextStyle = ComponentStyle< 'truncateText' | 'auto' | 'spacer' | 'lineHeight' diff --git a/packages/ui-view/package.json b/packages/ui-view/package.json index afb37a584c..d7075a49be 100644 --- a/packages/ui-view/package.json +++ b/packages/ui-view/package.json @@ -31,12 +31,12 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-i18n": "workspace:*", "@instructure/ui-position": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-view/src/ContextView/v2/props.ts b/packages/ui-view/src/ContextView/v2/props.ts index 650b835a83..daa24c8c7f 100644 --- a/packages/ui-view/src/ContextView/v2/props.ts +++ b/packages/ui-view/src/ContextView/v2/props.ts @@ -25,7 +25,6 @@ import React from 'react' import type { AsElementType, - ContextViewTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { PlacementPropValues } from '@instructure/ui-position' @@ -36,6 +35,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ContextViewOwnProps = { as?: AsElementType @@ -63,7 +63,10 @@ type PropKeys = keyof ContextViewOwnProps type AllowedPropKeys = Readonly> type ContextViewProps = ContextViewOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ContextViewStyle + > & OtherHTMLAttributes type ContextViewStyle = ComponentStyle< diff --git a/packages/ui-view/src/View/v2/props.ts b/packages/ui-view/src/View/v2/props.ts index 31739e028b..69e25a0b5a 100644 --- a/packages/ui-view/src/View/v2/props.ts +++ b/packages/ui-view/src/View/v2/props.ts @@ -26,8 +26,7 @@ import React from 'react' import type { Cursor } from '@instructure/shared-types' import type { AsElementType, - OtherHTMLAttributes, - ViewTheme + OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, @@ -39,6 +38,7 @@ import type { ComponentStyle, StyleObject } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type BorderColor = | string @@ -223,7 +223,7 @@ type ViewOwnProps = { type PropKeys = keyof ViewOwnProps type ViewProps = ViewOwnProps & - WithStyleProps & + WithStyleProps, ViewStyle> & OtherHTMLAttributes type AllowedPropKeys = Readonly> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec6c5b4050..c429f1bf68 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1017,6 +1017,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1030,9 +1033,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1154,6 +1154,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1164,9 +1167,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1197,6 +1197,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1213,9 +1216,6 @@ importers: '@instructure/ui-icons': specifier: workspace:* version: link:../ui-icons - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1249,6 +1249,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -1271,9 +1274,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1319,6 +1319,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -1338,9 +1341,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1368,6 +1368,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1381,9 +1384,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1426,6 +1426,9 @@ importers: '@instructure/ui-simple-select': specifier: workspace:* version: link:../ui-simple-select + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1442,9 +1445,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1487,6 +1487,9 @@ importers: '@instructure/ui-svg-images': specifier: workspace:* version: link:../ui-svg-images + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1509,9 +1512,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1892,6 +1892,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1908,9 +1911,6 @@ importers: '@instructure/ui-buttons': specifier: workspace:* version: link:../ui-buttons - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1956,6 +1956,9 @@ importers: '@instructure/ui-selectable': specifier: workspace:* version: link:../ui-selectable + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1975,9 +1978,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2112,6 +2112,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2131,9 +2134,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2161,6 +2161,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2171,9 +2174,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2253,6 +2253,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2266,9 +2269,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2299,6 +2299,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2309,9 +2312,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2342,6 +2342,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2352,9 +2355,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2526,6 +2526,9 @@ importers: '@instructure/ui-text': specifier: workspace:* version: link:../ui-text + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2539,9 +2542,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2581,6 +2581,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2594,9 +2597,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2627,6 +2627,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2640,9 +2643,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2685,6 +2685,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2704,9 +2707,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2737,6 +2737,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -2747,9 +2750,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2795,6 +2795,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2811,9 +2814,6 @@ importers: '@instructure/ui-position': specifier: workspace:* version: link:../ui-position - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2844,6 +2844,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2851,9 +2854,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2905,6 +2905,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -2930,9 +2933,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2969,6 +2969,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2985,9 +2988,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3018,6 +3018,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3034,9 +3037,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3094,6 +3094,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -3113,9 +3116,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3152,6 +3152,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3165,9 +3168,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3344,6 +3344,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3366,9 +3369,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3442,6 +3442,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3455,9 +3458,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3491,6 +3491,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -3501,9 +3504,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3537,6 +3537,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -3547,9 +3550,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3592,6 +3592,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3608,9 +3611,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3650,6 +3650,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -3660,9 +3663,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3846,6 +3846,9 @@ importers: '@instructure/ui-text-input': specifier: workspace:* version: link:../ui-text-input + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3865,9 +3868,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3950,6 +3950,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -3963,9 +3966,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4145,6 +4145,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4161,9 +4164,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4188,6 +4188,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4198,9 +4201,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4240,6 +4240,9 @@ importers: '@instructure/ui-simple-select': specifier: workspace:* version: link:../ui-simple-select + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4256,9 +4259,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4304,6 +4304,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4326,9 +4329,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4368,6 +4368,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -4378,9 +4381,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4414,6 +4414,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -4421,9 +4424,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4457,6 +4457,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4473,9 +4476,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4657,6 +4657,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4673,9 +4676,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4709,6 +4709,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4722,9 +4725,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4788,6 +4788,9 @@ importers: '@instructure/ui-responsive': specifier: workspace:* version: link:../ui-responsive + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -4816,9 +4819,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4867,6 +4867,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4874,9 +4877,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4910,6 +4910,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4926,9 +4929,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -5011,6 +5011,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -5030,9 +5033,6 @@ importers: '@instructure/ui-text': specifier: workspace:* version: link:../ui-text - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -5115,6 +5115,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -5122,9 +5125,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 From db78998c90095b494de5333862656ae5d219f73b Mon Sep 17 00:00:00 2001 From: Matyas Forian-Szabo Date: Fri, 24 Apr 2026 22:27:32 +0200 Subject: [PATCH 2/2] refactor(ui-themes,shared-types,emotion): type the new themeOverride object correctly --- packages/__docs__/src/withStyleForDocs.tsx | 2 +- .../src/InstUISettingsProvider/index.tsx | 51 ++++++++++-- .../emotion/src/getComponentThemeOverride.ts | 8 +- packages/emotion/src/getTheme.ts | 15 +++- packages/emotion/src/index.ts | 3 +- packages/emotion/src/useStyle.ts | 79 +++++++++---------- packages/emotion/src/withStyle.tsx | 44 +++++------ packages/shared-types/src/BaseTheme.ts | 4 +- packages/ui-avatar/src/Avatar/v2/props.ts | 9 ++- .../src/ColorMixer/v2/styles.ts | 3 - .../src/DrawerLayout/v2/styles.ts | 5 +- .../ui-editable/src/InPlaceEdit/v2/styles.ts | 5 +- .../src/FormFieldLayout/v2/props.ts | 11 +-- .../src/FormFieldMessage/v2/props.ts | 8 +- .../src/FormFieldMessage/v2/styles.ts | 8 +- packages/ui-icons/src/props.ts | 11 +-- .../src/AiInformation/v2/props.ts | 10 ++- .../src/AiInformation/v2/styles.ts | 10 +-- .../src/DataPermissionLevels/v2/props.ts | 9 ++- .../src/DataPermissionLevels/v2/styles.ts | 13 +-- .../src/NutritionFacts/v2/props.ts | 9 ++- .../src/NutritionFacts/v2/styles.ts | 10 +-- packages/ui-metric/src/Metric/v2/props.ts | 9 +-- .../src/NumberInput/v2/props.ts | 11 +-- .../ui-pagination/src/Pagination/v2/props.ts | 3 +- .../ui-pagination/src/Pagination/v2/styles.ts | 3 - .../ui-radio-input/src/RadioInput/v2/props.ts | 9 ++- packages/ui-rating/src/Rating/v2/styles.ts | 5 +- packages/ui-spinner/src/Spinner/v2/props.ts | 9 ++- packages/ui-spinner/src/Spinner/v2/styles.ts | 4 +- packages/ui-table/src/Table/v2/Body/props.ts | 3 +- packages/ui-table/src/Table/v2/Cell/props.ts | 3 +- .../ui-table/src/Table/v2/ColHeader/props.ts | 6 +- packages/ui-table/src/Table/v2/Head/props.ts | 3 +- packages/ui-table/src/Table/v2/Row/props.ts | 3 +- .../ui-table/src/Table/v2/RowHeader/props.ts | 6 +- packages/ui-table/src/Table/v2/props.ts | 3 +- .../ui-text-area/src/TextArea/v2/props.ts | 16 ++-- .../ui-text-area/src/TextArea/v2/styles.ts | 7 +- packages/ui-themes/src/index.ts | 20 ++++- .../src/TruncateList/styles.ts | 2 - 41 files changed, 252 insertions(+), 200 deletions(-) diff --git a/packages/__docs__/src/withStyleForDocs.tsx b/packages/__docs__/src/withStyleForDocs.tsx index 0d7ed8e1e0..1a562c5b30 100644 --- a/packages/__docs__/src/withStyleForDocs.tsx +++ b/packages/__docs__/src/withStyleForDocs.tsx @@ -234,7 +234,7 @@ const withStyleForDocs = decorator( theme, displayName, ComposedComponent.componentId, - componentProps, + (componentProps as ThemeOverrideProp).themeOverride, componentTheme ) diff --git a/packages/emotion/src/InstUISettingsProvider/index.tsx b/packages/emotion/src/InstUISettingsProvider/index.tsx index a28ebb2631..1477097041 100644 --- a/packages/emotion/src/InstUISettingsProvider/index.tsx +++ b/packages/emotion/src/InstUISettingsProvider/index.tsx @@ -32,22 +32,61 @@ import { getTheme } from '../getTheme' import type { ThemeOrLegacyOverride } from '../EmotionTypes' import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils' +import type { NewThemeOverrideObject, Theme } from '@instructure/ui-themes' declare const process: Record | undefined type InstUIProviderProps = { children?: React.ReactNode /** - * A full theme or an override object + * A full theme or an override object. The override only works for legacy + * (v11.6 or earlier) themes, for newer ones use the `themeOverride` prop. */ theme?: ThemeOrLegacyOverride - // TODO-theme-types: fix override typing - // TODO explain the usage of this override object. It will be deep merged into theme.themeOverride and the shape has to be a partial of the "newTheme" object /** - * An override object for the new theming system. + * An override object for the new theming system. It will be deep merged into + * the theme. One can override primitives, semantics and individual component's + * themes, for example: + * ```js + * themeOverride={{ + * semantics: { + * color: { + * stroke: { + * error: 'purple' + * } + * } + * }, + * primitives: { + * color: { + * blue: { + * blue100: 'yellow' + * } + * } + * }, + * components: { + * Alert: { + * background: 'brown', + * infoIconBackground: 'darkblue', + * borderWidth: '0.5rem' + * }, + * Pill: { + * baseTextColor: 'purple', + * baseBorderColor: 'purple' + * } + * }, + * sharedTokens: { + * focusOutline: { + * width: '0.55rem', + * infoColor: 'deeppink' + * } + * } + * }} + * ``` */ - themeOverride?: any + themeOverride?: + | NewThemeOverrideObject + | ((theme: Theme) => NewThemeOverrideObject) /** * @deprecated the `instanceCounterMap` prop is deprecated. You don't need to supply the @@ -100,7 +139,6 @@ function InstUISettingsProvider({ * For backward compatibility reasons, the old way of passing a partial theme to the theme prop is still supported, however only for * legacy (pre v11_7) components. Overriding the newTheme this way could break the system. */ - let providers = ( @@ -120,3 +158,4 @@ function InstUISettingsProvider({ export default InstUISettingsProvider export { InstUISettingsProvider } +export type { InstUIProviderProps } diff --git a/packages/emotion/src/getComponentThemeOverride.ts b/packages/emotion/src/getComponentThemeOverride.ts index 6d4550d8ce..17473724fd 100644 --- a/packages/emotion/src/getComponentThemeOverride.ts +++ b/packages/emotion/src/getComponentThemeOverride.ts @@ -29,7 +29,7 @@ import type { } from './EmotionTypes' import type { ComponentTheme } from '@instructure/shared-types' import { ThemeOverrideProp } from './withStyle' -import { ThemeOverrideValue } from './useStyle' +import type { NewComponentTypes } from '@instructure/ui-themes' type ComponentName = keyof ComponentOverride | undefined @@ -51,8 +51,10 @@ const getComponentThemeOverride = ( theme: ThemeOverride, displayName: string, componentId?: string, - // ThemeOverrideProp is the old type, ThemeOverrideValue is the new one - themeOverride?: ThemeOverrideProp['themeOverride'] | ThemeOverrideValue, + // ThemeOverrideProp['themeOverride'] is the old type + themeOverride?: + | ThemeOverrideProp['themeOverride'] + | ReturnType, componentTheme?: ComponentTheme ): Partial => { const name = displayName as ComponentName diff --git a/packages/emotion/src/getTheme.ts b/packages/emotion/src/getTheme.ts index 8946ef13e9..0322d564ff 100644 --- a/packages/emotion/src/getTheme.ts +++ b/packages/emotion/src/getTheme.ts @@ -24,13 +24,14 @@ import canvas from '@instructure/ui-themes' import { isBaseTheme, mergeDeep } from '@instructure/ui-utils' -import type { BaseTheme } from '@instructure/shared-types' +import type { Theme } from '@instructure/ui-themes' import type { Overrides, ThemeOrLegacyOverride, SpecificThemeOverride } from './EmotionTypes' +import { InstUIProviderProps } from './InstUISettingsProvider' declare const process: Record | undefined /** @@ -45,14 +46,20 @@ declare const process: Record | undefined * the overrides merged together. * * @param themeOrLegacyOverride - A full theme or an override object - * @param themeOverride - if provided, it means it's a new theming-system override. This will be merged into theme.themeOverride and will be treated separately from the old way of applying overrides. This override will be applied in the withStyle.ts decorator + * @param themeOverride - if provided, it means it's a new theming-system override. + * This will be merged into theme.themeOverride and will be treated separately + * from the old way of applying overrides. This override will be applied in the + * `withStyle.ts` decorator * @returns A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype) * This function is called by Emotion on theme provider creation, where * `ancestorTheme` is a theme object from an ancestor `ThemeProvider` */ const getTheme = - (themeOrLegacyOverride: ThemeOrLegacyOverride, themeOverride?: any) => - (ancestorTheme = {} as BaseTheme) => { + ( + themeOrLegacyOverride: ThemeOrLegacyOverride, + themeOverride?: InstUIProviderProps['themeOverride'] + ) => + (ancestorTheme = {} as Theme) => { // we need to clone the ancestor theme not to override it let currentTheme if (Object.keys(ancestorTheme).length === 0) { diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts index db81cbe83b..c87581d0d1 100644 --- a/packages/emotion/src/index.ts +++ b/packages/emotion/src/index.ts @@ -43,9 +43,10 @@ export { useStyleLegacy } from './useStyleLegacy' export { useStyle } from './useStyle' export { useTheme } from './useTheme' +export type { InstUIProviderProps } from './InstUISettingsProvider' export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes' export type { WithStyleProps } from './withStyle' -export type { ThemeOverrideValue } from './useStyle' +export type { NewThemeOverrideProp } from './useStyle' export type { SpacingValues, Spacing, diff --git a/packages/emotion/src/useStyle.ts b/packages/emotion/src/useStyle.ts index 98c1f69fae..9d0df63837 100644 --- a/packages/emotion/src/useStyle.ts +++ b/packages/emotion/src/useStyle.ts @@ -25,8 +25,8 @@ import { useTheme } from './useTheme' import { mergeDeep } from '@instructure/ui-utils' import type { - SharedTokens, NewComponentTypes, + SharedTokens, Theme } from '@instructure/ui-themes' @@ -34,89 +34,84 @@ import type { type SecondParameter any> = Parameters[1] extends undefined ? never : Parameters[1] -type GenerateStyleParams = - | ((componentTheme: any, params: any, sharedTokens: SharedTokens) => any) - | ((componentTheme: any, params: any) => any) - | ((componentTheme: any) => any) +type NewThemeOverrideProp< + ComponentTheme extends ReturnType +> = { + themeOverride?: + | Partial + | ((compTheme: ComponentTheme, theme: Theme) => Partial) +} -/** - * Type for a theme override - */ -type ThemeOverrideValue = - | Partial +type GenerateStyleFn = | (( - componentTheme: Theme, - currentTheme: NewComponentTypes[keyof NewComponentTypes] - ) => Partial) + componentTheme: ComponentTheme, + params: any, + sharedTokens: SharedTokens + ) => any) + | ((componentTheme: ComponentTheme, params: any) => any) + | ((componentTheme: ComponentTheme) => any) /** - * new useStyle syntax, use this with v12 themes + * new useStyle syntax, use this with v11.7+ themes */ - // TODO: improve useStyle to handle generateStyle functions that don't // have a theme. -const useStyle =

(useStyleParams: { - generateStyle: P - params?: SecondParameter

+const useStyle = < + ComponentTheme extends ReturnType, + GenerateStyle extends GenerateStyleFn +>(useStyleParams: { + generateStyle: GenerateStyle + params?: SecondParameter // needs to be a string too because it might be a child component componentId: keyof NewComponentTypes | string - themeOverride: ThemeOverrideValue | undefined + themeOverride?: NewThemeOverrideProp['themeOverride'] displayName?: string - //in case of a child component needed to use it's parent's tokens, provide parent's name + //in case of a child component needed to use its parent's tokens, provide parent's name useTokensFrom?: keyof NewComponentTypes -}): ReturnType

=> { +}): ReturnType => { const { generateStyle, params, componentId, themeOverride } = useStyleParams const useTokensFrom = useStyleParams.useTokensFrom const themeInContext = useTheme() as Theme const themeOverrideFromProvider = themeInContext.themeOverride - const componentWithTokensId = useTokensFrom ?? componentId + const componentWithTokensId = + useTokensFrom ?? (componentId as keyof NewComponentTypes) // resolving the theming functions and applying the overrides const primitiveOverrides = themeOverrideFromProvider?.primitives const semanticsOverrides = themeOverrideFromProvider?.semantics - // @ts-ignore TODO-theme-types: fix typing const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens const componentOverridesFromSettingsProvider = - // @ts-ignore TODO-theme-types: fix typing - themeOverrideFromProvider?.components?.[ - componentWithTokensId as keyof NewComponentTypes - ] + themeOverrideFromProvider?.components?.[componentWithTokensId] const primitives = mergeDeep( themeInContext.newTheme.primitives, - primitiveOverrides + primitiveOverrides! ) const semantics = mergeDeep( themeInContext.newTheme.semantics?.(primitives), - semanticsOverrides + semanticsOverrides! ) const sharedTokens = mergeDeep( themeInContext.newTheme.sharedTokens?.(semantics), - sharedTokensOverrides + sharedTokensOverrides as Record ) const baseComponentTheme = - themeInContext.newTheme.components[ - componentWithTokensId as keyof NewComponentTypes - ]?.(semantics) + themeInContext.newTheme.components[componentWithTokensId]?.(semantics) const componentThemeFromSettingsProvider = mergeDeep( baseComponentTheme, - componentOverridesFromSettingsProvider - ) + componentOverridesFromSettingsProvider as Record + ) as ComponentTheme const componentTheme = mergeDeep( componentThemeFromSettingsProvider, - // @ts-ignore TODO-theme-types: fix typing typeof themeOverride === 'function' - ? themeOverride( - componentThemeFromSettingsProvider as Theme, - themeInContext as any - ) - : themeOverride + ? themeOverride(componentThemeFromSettingsProvider, themeInContext) + : themeOverride! ) // @ts-ignore TODO-theme-types: fix typing @@ -125,4 +120,4 @@ const useStyle =

(useStyleParams: { export default useStyle export { useStyle } -export type { ThemeOverrideValue } +export type { NewThemeOverrideProp } diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx index 57d11e81f7..923d138577 100644 --- a/packages/emotion/src/withStyle.tsx +++ b/packages/emotion/src/withStyle.tsx @@ -37,11 +37,7 @@ import { decorator } from '@instructure/ui-decorator' import { useTheme } from './useTheme' -import type { - BaseTheme, - ComponentTheme, - InstUIComponent -} from '@instructure/shared-types' +import type { ComponentTheme, InstUIComponent } from '@instructure/shared-types' import type { ComponentStyle, ComponentOverride, @@ -49,7 +45,11 @@ import type { Props } from './EmotionTypes' -import type { NewComponentTypes, Theme } from '@instructure/ui-themes' +import type { + NewComponentTypes, + SharedTokens, + Theme +} from '@instructure/ui-themes' // Extract is needed because it would allow number otherwise // https://stackoverflow.com/a/51808262/319473 @@ -70,18 +70,20 @@ type WithStylePrivateProps< makeStyles?: (extraArgs?: Record) => void } -type ThemeOverrideProp = { +type ThemeOverrideProp< + CompTheme extends ComponentTheme | null = ComponentTheme +> = { themeOverride?: - | Partial - | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial) + | Partial + | ((componentTheme: CompTheme, currentTheme: Theme) => Partial) } type WithStyleProps< - Theme extends ComponentTheme | null = ComponentTheme, + CompTheme extends ComponentTheme | null = ComponentTheme, Style extends ComponentStyle | null = ComponentStyle > = Theme extends null ? WithStylePrivateProps