Skip to content

Commit f256daf

Browse files
committed
docs(many): fix default theme variables sections on component doc pages
1 parent c60e824 commit f256daf

26 files changed

Lines changed: 62 additions & 19 deletions

File tree

packages/__docs__/buildScripts/build-docs.mts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -421,16 +421,34 @@ function parseThemes() {
421421
resource: { ...canvasHighContrast, resolvedComponents: resolveComponents(legacyCanvasHighContrast) }
422422
}
423423
parsed['canvas'] = {
424-
resource: { ...legacyCanvas, resolvedColors: resolveNewThemeColors(legacyCanvas), description: canvas.description }
424+
resource: {
425+
...legacyCanvas,
426+
resolvedColors: resolveNewThemeColors(legacyCanvas),
427+
resolvedComponents: resolveComponents(legacyCanvas),
428+
description: canvas.description
429+
}
425430
}
426431
parsed['canvas-high-contrast'] = {
427-
resource: { ...legacyCanvasHighContrast, resolvedColors: resolveNewThemeColors(legacyCanvasHighContrast), description: canvasHighContrast.description }
432+
resource: {
433+
...legacyCanvasHighContrast,
434+
resolvedColors: resolveNewThemeColors(legacyCanvasHighContrast),
435+
resolvedComponents: resolveComponents(legacyCanvasHighContrast),
436+
description: canvasHighContrast.description
437+
}
428438
}
429439
parsed[light.key] = {
430-
resource: { ...light, resolvedColors: resolveNewThemeColors(light.newTheme as typeof legacyCanvas) }
440+
resource: {
441+
...light,
442+
resolvedColors: resolveNewThemeColors(light.newTheme as typeof legacyCanvas),
443+
resolvedComponents: resolveComponents(light.newTheme as typeof legacyCanvas)
444+
}
431445
}
432446
parsed[dark.key] = {
433-
resource: { ...dark, resolvedColors: resolveNewThemeColors(dark.newTheme as typeof legacyCanvas) }
447+
resource: {
448+
...dark,
449+
resolvedColors: resolveNewThemeColors(dark.newTheme as typeof legacyCanvas),
450+
resolvedComponents: resolveComponents(dark.newTheme as typeof legacyCanvas)
451+
}
434452
}
435453
const canvasSemantics = legacyCanvas.semantics(legacyCanvas.primitives)
436454
parsed['shared-tokens'] = { resource: legacyCanvas.sharedTokens(canvasSemantics) }

packages/__docs__/src/Document/index.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ class Document extends Component<DocumentProps, DocumentState> {
7878

7979
fetchGenerateComponentTheme = async () => {
8080
const { doc, themeVariables } = this.props
81-
let generateTheme
8281
// Doc IDs use dot notation (e.g. "Menu.Item") but theme component keys
8382
// use PascalCase without dots (e.g. "MenuItem").
8483
// New-theme entries are in themeVariables.newTheme.components.
@@ -89,36 +88,33 @@ class Document extends Component<DocumentProps, DocumentState> {
8988
? doc?.children?.find((value) => value.id === selectedId)
9089
: null
9190
// 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)
91+
const currentComponentInstance =
92+
selectedId === doc.id
93+
? doc?.componentInstance
94+
: childDoc?.componentInstance
95+
// `static themeId` on the component class lets it point at a different
96+
// entry in the theme registry (e.g. Button → 'BaseButton', ColorMixer.Slider → 'Slider')
9297
const themeKey: ComponentKey = (childDoc?.themeId ||
98+
currentComponentInstance?.themeId ||
9399
selectedId?.replace(/\./g, '')) as ComponentKey
94100
const isLegacyTheme = this.context?.componentVersion == 'v11_6'
95-
// new theme
101+
// new theme - use pre-computed theme object directly (functions can't survive JSON)
96102
if (!isLegacyTheme) {
97-
// resolvedComponents contains pre-computed plain objects (built at build time)
98103
const resolvedComponents = (themeVariables as Record<string, unknown>)
99104
?.resolvedComponents as Record<string, unknown> | undefined
100105
const newThemeEntry = resolvedComponents?.[themeKey as string]
101-
const componentInstance =
102-
selectedId === doc.id
103-
? doc?.componentInstance
104-
: childDoc?.componentInstance
105106
if (
106107
newThemeEntry &&
107-
typeof componentInstance?.generateComponentTheme !== 'function'
108+
typeof currentComponentInstance?.generateComponentTheme !== 'function'
108109
) {
109-
// new theme - use pre-computed theme object directly
110110
this.setState({
111111
componentTheme: newThemeEntry as DocumentState['componentTheme']
112112
})
113113
return
114114
}
115115
}
116-
// old theme - use generateComponentTheme function
117-
if (selectedId === doc.id) {
118-
generateTheme = doc?.componentInstance?.generateComponentTheme
119-
} else {
120-
generateTheme = childDoc?.componentInstance?.generateComponentTheme
121-
}
116+
// legacy path - call generateComponentTheme on the component
117+
const generateTheme = currentComponentInstance?.generateComponentTheme
122118
if (typeof generateTheme === 'function' && themeVariables) {
123119
this.setState({ componentTheme: generateTheme(themeVariables) })
124120
} else {

packages/ui-buttons/src/Button/v2/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ category: components
4141
@withStyleNew(null, 'BaseButton')
4242
class Button extends Component<ButtonProps> {
4343
static readonly componentId = 'Button'
44+
// Button v2 uses BaseButton's tokens; tell Document where to look for theme variables
45+
static readonly themeId = 'BaseButton'
4446

4547
static allowedProps = allowedProps
4648
static defaultProps = {

packages/ui-buttons/src/CloseButton/v2/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ category: components
4444
@withStyleNew(generateStyle, 'BaseButton')
4545
class CloseButton extends Component<CloseButtonProps> {
4646
static readonly componentId = 'CloseButton'
47+
// Uses BaseButton's tokens; tell Document where to look for theme variables
48+
static readonly themeId = 'BaseButton'
4749

4850
static allowedProps = allowedProps
4951
static defaultProps = {

packages/ui-buttons/src/CondensedButton/v2/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ category: components
4141
@withStyleNew(null, 'BaseButton')
4242
class CondensedButton extends Component<CondensedButtonProps> {
4343
static readonly componentId = 'CondensedButton'
44+
// Uses BaseButton's tokens; tell Document where to look for theme variables
45+
static readonly themeId = 'BaseButton'
4446

4547
static allowedProps = allowedProps
4648
static defaultProps = {

packages/ui-buttons/src/IconButton/v2/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ category: components
4444
@withStyleNew(null, 'BaseButton')
4545
class IconButton extends Component<IconButtonProps> {
4646
static readonly componentId = 'IconButton'
47+
// Uses BaseButton's tokens; tell Document where to look for theme variables
48+
static readonly themeId = 'BaseButton'
4749

4850
static allowedProps = allowedProps
4951
static defaultProps = {

packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ parent: Checkbox
4545
@withStyleNew(generateStyle, 'Checkbox')
4646
class CheckboxFacade extends Component<CheckboxFacadeProps> {
4747
static readonly componentId = 'CheckboxFacade'
48+
static readonly themeId = 'Checkbox'
4849

4950
static allowedProps = allowedProps
5051
static defaultProps = {

packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ parent: Checkbox
4545
@withStyleNew(generateStyle, 'Toggle')
4646
class ToggleFacade extends Component<ToggleFacadeProps> {
4747
static readonly componentId = 'ToggleFacade'
48+
static readonly themeId = 'Toggle'
4849

4950
static allowedProps = allowedProps
5051
static defaultProps = {

packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ private: true
5050
class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
5151
static allowedProps = allowedProps
5252
static readonly componentId = 'ColorMixer.Palette'
53+
static readonly themeId = 'Palette'
5354

5455
constructor(props: ColorPaletteProps) {
5556
super(props)

packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ private: true
4444
class RGBAInput extends Component<RGBAInputProps, RGBAInputState> {
4545
static allowedProps = allowedProps
4646
static readonly componentId = 'ColorMixer.RGBAInput'
47+
static readonly themeId = 'RgbaInput'
4748

4849
static defaultProps = {
4950
withAlpha: false

0 commit comments

Comments
 (0)