diff --git a/docs/contributing/transpile-diff.md b/docs/contributing/transpile-diff.md index bd735c6521..ebe5721fee 100644 --- a/docs/contributing/transpile-diff.md +++ b/docs/contributing/transpile-diff.md @@ -1,6 +1,7 @@ --- title: Comparing Transpiled Output -category: Contributor Guides +category: Contributing +order: 8 --- # Comparing Transpiled Output diff --git a/docs/theming/legacy-theme-overrides.md b/docs/theming/legacy-theme-overrides.md index a163a42961..7a118e0624 100644 --- a/docs/theming/legacy-theme-overrides.md +++ b/docs/theming/legacy-theme-overrides.md @@ -7,6 +7,15 @@ relevantForAI: true ## Using theme overrides +```js +--- +type: embed +--- + + The examples on this page use the legacy theming system and are designed for v11.6 components. If you are viewing the v11.7 version, switch to v11.6 to see the examples working correctly. + +``` + This document gives an overview on how you can customize Instructure UI components by tweaking their theme variables. While this gives you a level of flexibility on the look and feel of the components you should be aware of 2 things: diff --git a/docs/theming/new-theme-overrides.md b/docs/theming/new-theme-overrides.md index cbd36566a5..671cfaaf55 100644 --- a/docs/theming/new-theme-overrides.md +++ b/docs/theming/new-theme-overrides.md @@ -7,6 +7,15 @@ relevantForAI: true ## New Theme Override Patterns +```js +--- +type: embed +--- + + The examples on this page use the new theming system and require v11.7+ components. If you are viewing the v11.6 version, switch to v11.7 to see the examples working correctly. + +``` + This guide covers all the override patterns available in the new theming system (v11.7+). The new system uses a layered token architecture: **primitives** (raw values) -> **semantics** (meaning) -> **components** (per-component tokens). Overrides are applied via the `themeOverride` prop on `InstUISettingsProvider`, which is separate from the `theme` prop. The `theme` prop replaces the active theme entirely; `themeOverride` layers modifications on top. diff --git a/packages/__docs__/buildScripts/DataTypes.mts b/packages/__docs__/buildScripts/DataTypes.mts index f9f5f9c678..d04d721a55 100644 --- a/packages/__docs__/buildScripts/DataTypes.mts +++ b/packages/__docs__/buildScripts/DataTypes.mts @@ -149,11 +149,14 @@ type ResolvedColors = { semantic: Record } +// At runtime, build-docs.mts also attaches `resolvedComponents` (and on +// canvas / canvas-high-contrast: `key`, `description`) to the new-system +// entries. Not declared per-branch; surfaced as optional on `MainDocsData.themes`. type ThemeResource = | (BaseTheme & { resolvedComponents: Record }) // legacy-canvas, legacy-canvas-high-contrast | (NewBaseTheme & { resolvedColors: ResolvedColors }) // canvas, canvas-high-contrast - | (LightTheme & { resolvedColors: ResolvedColors }) - | (DarkTheme & { resolvedColors: ResolvedColors }) + | (LightTheme & { resolvedColors: ResolvedColors }) // light + | (DarkTheme & { resolvedColors: ResolvedColors }) // dark | SharedTokens type MainDocsData = { diff --git a/packages/__docs__/buildScripts/build-docs.mts b/packages/__docs__/buildScripts/build-docs.mts index 66b0dd3fac..399c7212a6 100644 --- a/packages/__docs__/buildScripts/build-docs.mts +++ b/packages/__docs__/buildScripts/build-docs.mts @@ -420,17 +420,44 @@ function parseThemes() { parsed['legacy-canvas-high-contrast'] = { resource: { ...canvasHighContrast, resolvedComponents: resolveComponents(legacyCanvasHighContrast) } } + // `key` is read by Document.tsx's `componentDidUpdate` to detect theme + // changes and refetch the Default Theme Variables. `legacyCanvas` / + // `legacyCanvasHighContrast` from `newThemeTokens` do not include a `key` + // field (unlike `light` / `dark`, which come through wrappers that set it). + // Without it, switching e.g. canvas (legacy) → canvas-high-contrast (legacy) + // on v11_7 leaves `themeVariables.key` `undefined` on both sides, so + // `undefined !== undefined` is false and the refetch never fires. parsed['canvas'] = { - resource: { ...legacyCanvas, resolvedColors: resolveNewThemeColors(legacyCanvas), description: canvas.description } + resource: { + ...legacyCanvas, + key: 'canvas', + resolvedColors: resolveNewThemeColors(legacyCanvas), + resolvedComponents: resolveComponents(legacyCanvas), + description: canvas.description + } } parsed['canvas-high-contrast'] = { - resource: { ...legacyCanvasHighContrast, resolvedColors: resolveNewThemeColors(legacyCanvasHighContrast), description: canvasHighContrast.description } + resource: { + ...legacyCanvasHighContrast, + key: 'canvas-high-contrast', + resolvedColors: resolveNewThemeColors(legacyCanvasHighContrast), + resolvedComponents: resolveComponents(legacyCanvasHighContrast), + description: canvasHighContrast.description + } } parsed[light.key] = { - resource: { ...light, resolvedColors: resolveNewThemeColors(light.newTheme as typeof legacyCanvas) } + resource: { + ...light, + resolvedColors: resolveNewThemeColors(light.newTheme as typeof legacyCanvas), + resolvedComponents: resolveComponents(light.newTheme as typeof legacyCanvas) + } } parsed[dark.key] = { - resource: { ...dark, resolvedColors: resolveNewThemeColors(dark.newTheme as typeof legacyCanvas) } + resource: { + ...dark, + resolvedColors: resolveNewThemeColors(dark.newTheme as typeof legacyCanvas), + resolvedComponents: resolveComponents(dark.newTheme as typeof legacyCanvas) + } } const canvasSemantics = legacyCanvas.semantics(legacyCanvas.primitives) parsed['shared-tokens'] = { resource: legacyCanvas.sharedTokens(canvasSemantics) } diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx index 56d300cfbd..1f5ae877bd 100644 --- a/packages/__docs__/src/App/index.tsx +++ b/packages/__docs__/src/App/index.tsx @@ -602,6 +602,13 @@ class App extends Component { const allThemeKeys = Object.keys(this.state.docsData!.themes) const showNewThemes = selectedMinorVersion !== 'v11_6' + // The `parsed.themes` map in build-docs.mts contains both: + // - `canvas` / `canvas-high-contrast` → new-system resources (primitives/semantics/sharedTokens/components`) + // - `legacy-canvas` / `legacy-canvas-high-contrast` → legacy wrappers (full theme object) + // v11_6 components' `generateComponentTheme(theme)` reads `theme.colors`, + // `theme.spacing`, etc., so v11_6 MUST be backed by the legacy wrappers. + // We pick `legacy-*` as the actual selected keys, and strip the prefix for + // display so the user still sees "canvas" / "canvas-high-contrast". const themeKeys = showNewThemes ? allThemeKeys.filter( (k) => @@ -610,7 +617,7 @@ class App extends Component { k !== 'legacy-canvas-high-contrast' ) : allThemeKeys.filter( - (k) => k === 'canvas' || k === 'canvas-high-contrast' + (k) => k === 'legacy-canvas' || k === 'legacy-canvas-high-contrast' ) const displayThemeName = (themeKey: string) => { @@ -620,6 +627,10 @@ class App extends Component { ) { return `${themeKey} (legacy)` } + // On v11_6 strip the `legacy-` prefix so the user sees the plain names. + if (!showNewThemes) { + return themeKey.replace(/^legacy-/, '') + } return themeKey } diff --git a/packages/__docs__/src/Document/index.tsx b/packages/__docs__/src/Document/index.tsx index 56ff844105..514110c73f 100644 --- a/packages/__docs__/src/Document/index.tsx +++ b/packages/__docs__/src/Document/index.tsx @@ -29,6 +29,7 @@ import { View } from '@instructure/ui-view' import { Tabs } from '@instructure/ui-tabs' import type { TabsProps } from '@instructure/ui-tabs' import type { NewBaseTheme } from '@instructure/ui-themes' +import type { ComponentTheme as ComponentThemeData } from '@instructure/shared-types' import { SourceCodeEditor } from '@instructure/ui-source-code-editor' import { withStyleForDocs as withStyleNew } from '../withStyleForDocs' @@ -80,47 +81,48 @@ class Document extends Component { fetchGenerateComponentTheme = async () => { const { doc, themeVariables } = this.props - let generateTheme - // Doc IDs use dot notation (e.g. "Menu.Item") but theme component keys - // use PascalCase without dots (e.g. "MenuItem"). - // New-theme entries are in themeVariables.newTheme.components. const selectedId = this.state.selectedDetailsTabId type ComponentKey = keyof NewBaseTheme['components'] + // When a child tab is selected, work from the child's doc/component; + // otherwise from the main doc's. const childDoc = selectedId !== doc.id ? doc?.children?.find((value) => value.id === selectedId) : null - // in case of some components, we need to display the theme variables of other components based on themeId (like displaying the theme variables of Options in Drillsdown.Group) + const currentComponentInstance = + selectedId === doc.id + ? doc?.componentInstance + : childDoc?.componentInstance + // Resolve the theme registry key. Default: doc id with dots stripped + // (e.g. "Menu.Item" → "MenuItem"). Two ways to override the default: + // - `themeId:` in YAML frontmatter (read from childDoc.themeId) — used + // when a doc page wants to show another component's tokens + // (e.g. Drilldown.Group → 'Options'). + // - `static themeId` on the component class — used when a component + // borrows another's tokens via `useTokensFrom` at runtime + // (e.g. Button → 'BaseButton', ColorMixer.Slider → 'Slider'). const themeKey: ComponentKey = (childDoc?.themeId || + currentComponentInstance?.themeId || selectedId?.replace(/\./g, '')) as ComponentKey const isLegacyTheme = this.context?.componentVersion == 'v11_6' - // new theme + // New theme: tokens are pre-resolved into plain objects at build time + // (the build emits JSON, so generator functions can't be carried through). if (!isLegacyTheme) { - // resolvedComponents contains pre-computed plain objects (built at build time) const resolvedComponents = (themeVariables as Record) ?.resolvedComponents as Record | undefined const newThemeEntry = resolvedComponents?.[themeKey as string] - const componentInstance = - selectedId === doc.id - ? doc?.componentInstance - : childDoc?.componentInstance if ( newThemeEntry && - typeof componentInstance?.generateComponentTheme !== 'function' + typeof currentComponentInstance?.generateComponentTheme !== 'function' ) { - // new theme - use pre-computed theme object directly this.setState({ componentTheme: newThemeEntry as DocumentState['componentTheme'] }) return } } - // old theme - use generateComponentTheme function - if (selectedId === doc.id) { - generateTheme = doc?.componentInstance?.generateComponentTheme - } else { - generateTheme = childDoc?.componentInstance?.generateComponentTheme - } + // Legacy theme: call the component's generateComponentTheme directly. + const generateTheme = currentComponentInstance?.generateComponentTheme if (typeof generateTheme === 'function' && themeVariables) { this.setState({ componentTheme: generateTheme(themeVariables) }) } else { @@ -158,6 +160,19 @@ class Document extends Component { const themeVariableKeys = componentTheme && Object.keys(componentTheme) + // The displayed token list comes from another component's registry when + // `themeId` (YAML frontmatter) or the component class's `static themeId` + // points at a different key than the doc's own id. In that case some of + // the listed tokens may not actually be used by this component. + const isLegacyTheme = this.context?.componentVersion === 'v11_6' + const dotStrippedId = doc.id?.replace(/\./g, '') + const borrowedThemeId = + doc.themeId || doc.componentInstance?.themeId + const borrowsTokens = + !isLegacyTheme && + borrowedThemeId && + borrowedThemeId !== dotStrippedId + return themeVariables && componentTheme && themeVariableKeys && @@ -166,6 +181,14 @@ class Document extends Component { Default Theme Variables + {borrowsTokens ? ( + + Note: {doc.id} shares its theme tokens with{' '} + {borrowedThemeId}, so the table below lists every + token of {borrowedThemeId}. Some of these may not + actually be used by {doc.id}. + + ) : null} {doc.themePath ? ( See which global theme variables are mapped to the component here:{' '} @@ -181,9 +204,7 @@ class Document extends Component { ) : null} - + type DocumentStyle = ComponentStyle<'githubCornerOctoArm' | 'githubCorner'> +type ResolvedNewComponentTheme = ReturnType< + NewBaseTheme['components'][keyof NewBaseTheme['components']] +> + type DocumentState = { selectedDetailsTabId: string | undefined pageRef: HTMLDivElement | null componentTheme: | ThemeVariables[keyof ThemeVariables] - | NewBaseTheme['components'][keyof NewBaseTheme['components']] + | ResolvedNewComponentTheme | undefined } diff --git a/packages/ui-buttons/src/Button/v2/index.tsx b/packages/ui-buttons/src/Button/v2/index.tsx index 07c156e2bc..d2d55ef689 100644 --- a/packages/ui-buttons/src/Button/v2/index.tsx +++ b/packages/ui-buttons/src/Button/v2/index.tsx @@ -42,6 +42,8 @@ category: components class Button extends Component { static displayName = 'Button' static readonly componentId = 'Button' + // Button v2 uses BaseButton's tokens; tell Document where to look for theme variables + static readonly themeId = 'BaseButton' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-buttons/src/CloseButton/v2/index.tsx b/packages/ui-buttons/src/CloseButton/v2/index.tsx index d3fbc142cf..43feb250bf 100644 --- a/packages/ui-buttons/src/CloseButton/v2/index.tsx +++ b/packages/ui-buttons/src/CloseButton/v2/index.tsx @@ -45,6 +45,8 @@ category: components class CloseButton extends Component { static displayName = 'CloseButton' static readonly componentId = 'CloseButton' + // Uses BaseButton's tokens; tell Document where to look for theme variables + static readonly themeId = 'BaseButton' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-buttons/src/CondensedButton/v2/index.tsx b/packages/ui-buttons/src/CondensedButton/v2/index.tsx index c1de7995b7..6baf0e5a3b 100644 --- a/packages/ui-buttons/src/CondensedButton/v2/index.tsx +++ b/packages/ui-buttons/src/CondensedButton/v2/index.tsx @@ -42,6 +42,8 @@ category: components class CondensedButton extends Component { static displayName = 'CondensedButton' static readonly componentId = 'CondensedButton' + // Uses BaseButton's tokens; tell Document where to look for theme variables + static readonly themeId = 'BaseButton' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-buttons/src/IconButton/v2/index.tsx b/packages/ui-buttons/src/IconButton/v2/index.tsx index 586777ef53..fed0794889 100644 --- a/packages/ui-buttons/src/IconButton/v2/index.tsx +++ b/packages/ui-buttons/src/IconButton/v2/index.tsx @@ -45,6 +45,8 @@ category: components class IconButton extends Component { static displayName = 'IconButton' static readonly componentId = 'IconButton' + // Uses BaseButton's tokens; tell Document where to look for theme variables + static readonly themeId = 'BaseButton' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/index.tsx b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/index.tsx index 6b66370018..6a8ed34382 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/index.tsx +++ b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/index.tsx @@ -46,6 +46,7 @@ parent: Checkbox class CheckboxFacade extends Component { static displayName = 'CheckboxFacade' static readonly componentId = 'CheckboxFacade' + static readonly themeId = 'Checkbox' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/index.tsx b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/index.tsx index 89a0e8ab46..6194ba280c 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/index.tsx +++ b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/index.tsx @@ -46,6 +46,7 @@ parent: Checkbox class ToggleFacade extends Component { static displayName = 'ToggleFacade' static readonly componentId = 'ToggleFacade' + static readonly themeId = 'Toggle' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/index.tsx b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/index.tsx index 7aa0387678..d1f9345316 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/index.tsx +++ b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/index.tsx @@ -51,6 +51,7 @@ class ColorPalette extends Component { static displayName = 'ColorPalette' static allowedProps = allowedProps static readonly componentId = 'ColorMixer.Palette' + static readonly themeId = 'Palette' constructor(props: ColorPaletteProps) { super(props) diff --git a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/index.tsx b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/index.tsx index f1d636d6fd..b7f0e27737 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/index.tsx +++ b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/index.tsx @@ -45,6 +45,7 @@ class RGBAInput extends Component { static displayName = 'RGBAInput' static allowedProps = allowedProps static readonly componentId = 'ColorMixer.RGBAInput' + static readonly themeId = 'RgbaInput' static defaultProps = { withAlpha: false diff --git a/packages/ui-color-picker/src/ColorMixer/v2/Slider/index.tsx b/packages/ui-color-picker/src/ColorMixer/v2/Slider/index.tsx index 808291d999..67d90fd958 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/Slider/index.tsx +++ b/packages/ui-color-picker/src/ColorMixer/v2/Slider/index.tsx @@ -45,6 +45,7 @@ class Slider extends Component { static displayName = 'Slider' static allowedProps = allowedProps static readonly componentId = 'ColorMixer.Slider' + static readonly themeId = 'Slider' static defaultProps = { isColorSlider: false diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/index.tsx b/packages/ui-modal/src/Modal/v2/ModalBody/index.tsx index 1bf2a48ba5..40e481609e 100644 --- a/packages/ui-modal/src/Modal/v2/ModalBody/index.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalBody/index.tsx @@ -46,6 +46,7 @@ id: Modal.Body class ModalBody extends Component { static displayName = 'ModalBody' static readonly componentId = 'Modal.Body' + static readonly themeId = 'ModalBody' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/index.tsx b/packages/ui-modal/src/Modal/v2/ModalFooter/index.tsx index bb77cde863..91882781f0 100644 --- a/packages/ui-modal/src/Modal/v2/ModalFooter/index.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalFooter/index.tsx @@ -41,6 +41,7 @@ id: Modal.Footer class ModalFooter extends Component { static displayName = 'ModalFooter' static readonly componentId = 'Modal.Footer' + static readonly themeId = 'ModalFooter' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/index.tsx b/packages/ui-modal/src/Modal/v2/ModalHeader/index.tsx index 496550d704..13403c8f6e 100644 --- a/packages/ui-modal/src/Modal/v2/ModalHeader/index.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalHeader/index.tsx @@ -52,6 +52,7 @@ id: Modal.Header class ModalHeader extends Component { static displayName = 'ModalHeader' static readonly componentId = 'Modal.Header' + static readonly themeId = 'ModalHeader' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-number-input/src/NumberInput/v2/index.tsx b/packages/ui-number-input/src/NumberInput/v2/index.tsx index cfdd9c7065..2fdde8b5f9 100644 --- a/packages/ui-number-input/src/NumberInput/v2/index.tsx +++ b/packages/ui-number-input/src/NumberInput/v2/index.tsx @@ -371,6 +371,8 @@ const NumberInput = forwardRef( ) NumberInput.displayName = 'NumberInput' +// Uses TextInput's tokens; tell Document where to look for theme variables +;(NumberInput as typeof NumberInput & { themeId: string }).themeId = 'TextInput' export interface NumberInputHandle { focus: () => void diff --git a/packages/ui-pagination/src/Pagination/v1/index.tsx b/packages/ui-pagination/src/Pagination/v1/index.tsx index 8dabbcc561..b1814125b0 100644 --- a/packages/ui-pagination/src/Pagination/v1/index.tsx +++ b/packages/ui-pagination/src/Pagination/v1/index.tsx @@ -114,6 +114,7 @@ class Pagination extends Component { static Page = PaginationButton static Navigation = PaginationArrowButton + static PageInput = PaginationPageInput private readonly _labelId: string diff --git a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/index.tsx b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/index.tsx index 52861f8576..5bfe132b31 100644 --- a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/index.tsx +++ b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/index.tsx @@ -50,6 +50,7 @@ class PaginationPageInput extends Component< > { static displayName = 'PaginationPageInput' static readonly componentId = 'Pagination.PageInput' + static readonly themeId = 'PaginationPageInput' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/index.tsx b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/index.tsx index 396b6afbad..d54d7155e5 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/index.tsx +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/index.tsx @@ -43,6 +43,7 @@ id: SideNavBar.Item class SideNavBarItem extends Component { static displayName = 'SideNavBarItem' static readonly componentId = 'SideNavBar.Item' + static readonly themeId = 'SideNavBarItem' static allowedProps = allowedProps diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarActionItems/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarActionItems/index.tsx index f71194115b..dd169514b1 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarActionItems/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarActionItems/index.tsx @@ -72,6 +72,7 @@ class TopNavBarActionItems extends Component< > { static displayName = 'TopNavBarActionItems' static readonly componentId = 'TopNavBar.ActionItems' + static readonly themeId = 'TopNavBarActionItems' static allowedProps = allowedProps static defaultProps = {} diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarBrand/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarBrand/index.tsx index 244c7934df..007d87bfbd 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarBrand/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarBrand/index.tsx @@ -49,6 +49,7 @@ id: TopNavBar.Brand class TopNavBarBrand extends Component { static displayName = 'TopNavBarBrand' static readonly componentId = 'TopNavBar.Brand' + static readonly themeId = 'TopNavBarBrand' // TODO: add to the docs: making it static on parent and jsdocs parent/module settings, dont export child on its own static allowedProps = allowedProps diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarItem/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarItem/index.tsx index bf5d76483e..c8cd7d1e35 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarItem/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarItem/index.tsx @@ -81,6 +81,7 @@ id: TopNavBar.Item class TopNavBarItem extends Component { static displayName = 'TopNavBarItem' static readonly componentId = 'TopNavBar.Item' + static readonly themeId = 'TopNavBarItem' static allowedProps = allowedProps static defaultProps = { diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/DesktopLayout/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/DesktopLayout/index.tsx index d2761a22cc..a5f6f197e9 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/DesktopLayout/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/DesktopLayout/index.tsx @@ -47,6 +47,7 @@ private: true class TopNavBarDesktopLayout extends Component { static displayName = 'TopNavBarDesktopLayout' static readonly componentId = 'TopNavBar.DesktopLayout' + static readonly themeId = 'TopNavBarLayout' static allowedProps = allowedProps static defaultProps = {} diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/SmallViewportLayout/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/SmallViewportLayout/index.tsx index 465021c520..d59dd3d1ac 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/SmallViewportLayout/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/SmallViewportLayout/index.tsx @@ -84,6 +84,7 @@ class TopNavBarSmallViewportLayout extends Component< > { static displayName = 'TopNavBarSmallViewportLayout' static readonly componentId = 'TopNavBar.SmallViewportLayout' + static readonly themeId = 'TopNavBarLayout' static allowedProps = allowedProps static defaultProps = {} diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarMenuItems/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarMenuItems/index.tsx index 92a27b453e..ffc5f36c94 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarMenuItems/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarMenuItems/index.tsx @@ -67,6 +67,7 @@ class TopNavBarMenuItems extends Component< > { static displayName = 'TopNavBarMenuItems' static readonly componentId = 'TopNavBar.MenuItems' + static readonly themeId = 'TopNavBarMenuItems' static allowedProps = allowedProps static defaultProps = {} diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/index.tsx b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/index.tsx index 6859435281..8914c7751d 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/index.tsx +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/index.tsx @@ -55,6 +55,7 @@ class TreeButton extends Component< > { static displayName = 'TreeButton' static readonly componentId = 'TreeBrowser.Button' + static readonly themeId = 'TreeBrowserTreeButton' static allowedProps = allowedProps diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/index.tsx b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/index.tsx index ab2b617a94..6392564e19 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/index.tsx +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/index.tsx @@ -51,6 +51,7 @@ class TreeCollection extends Component< > { static displayName = 'TreeCollection' static readonly componentId = 'TreeBrowser.Collection' + static readonly themeId = 'TreeBrowserTreeCollection' static allowedProps = allowedProps diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/index.tsx b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/index.tsx index 3e57b5f3ce..2c380297b5 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/index.tsx +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/index.tsx @@ -54,6 +54,7 @@ in the TreeBrowser. class TreeNode extends Component { static displayName = 'TreeNode' static readonly componentId = 'TreeBrowser.Node' + static readonly themeId = 'TreeBrowserTreeButton' static allowedProps = allowedProps