Skip to content

Commit d0d821e

Browse files
matyasfmatyasf
committed
fix: fix themes for subcomponents displaying wrong in the docs app
Also do not show properties if there arent any (like Menu.Separator) INSTUI-4833
1 parent 4a08572 commit d0d821e

File tree

4 files changed

+97
-75
lines changed

4 files changed

+97
-75
lines changed

‎packages/__docs__/src/Document/index.tsx‎

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -57,63 +57,66 @@ class Document extends Component<DocumentProps, DocumentState> {
5757
}
5858

5959
state: DocumentState = {
60-
selectedDetailsTabIndex: 0,
60+
selectedDetailsTabId: undefined,
6161
pageRef: null,
62-
componentTheme: {}
62+
componentTheme: undefined
6363
}
6464

6565
ref: HTMLDivElement | null = null
6666

6767
componentDidMount() {
6868
this.props.makeStyles?.()
69-
this.setState({ pageRef: this.ref })
70-
this.fetchGenerateComponentTheme()
69+
this.setState({
70+
pageRef: this.ref,
71+
selectedDetailsTabId: this.props.doc.id
72+
})
7173
}
7274

7375
fetchGenerateComponentTheme = async () => {
7476
const { doc, themeVariables } = this.props
75-
const generateTheme = doc?.componentInstance?.generateComponentTheme
77+
let generateTheme
78+
if (this.state.selectedDetailsTabId === doc.id) {
79+
generateTheme = doc?.componentInstance?.generateComponentTheme
80+
} else {
81+
generateTheme = doc?.children?.find(
82+
(value) => value.id === this.state.selectedDetailsTabId
83+
)?.componentInstance?.generateComponentTheme
84+
}
7685
const generateThemeFunctional =
7786
functionalComponentThemes[
7887
doc.id as keyof typeof functionalComponentThemes
7988
]
80-
if (
81-
generateTheme &&
82-
typeof generateTheme === 'function' &&
83-
themeVariables
84-
) {
89+
if (typeof generateTheme === 'function' && themeVariables) {
8590
this.setState({ componentTheme: generateTheme(themeVariables) })
8691
} else if (generateThemeFunctional && themeVariables) {
8792
const componentTheme = await generateThemeFunctional(themeVariables)
8893
this.setState({ componentTheme: componentTheme })
94+
} else {
95+
this.setState({ componentTheme: undefined })
8996
}
9097
}
9198

92-
componentDidUpdate(prevProps: typeof this.props) {
99+
componentDidUpdate(prevProps: typeof this.props, prevState: DocumentState) {
93100
this.props.makeStyles?.()
94-
if (this.props.themeVariables?.key !== prevProps.themeVariables?.key) {
101+
if (
102+
this.props.themeVariables?.key !== prevProps.themeVariables?.key ||
103+
this.state.selectedDetailsTabId != prevState.selectedDetailsTabId
104+
) {
95105
this.fetchGenerateComponentTheme()
96106
}
97107
}
98108

99109
handleDetailsTabChange: TabsProps['onRequestTabChange'] = (
100110
_event,
101-
{ index }
111+
tabData
102112
) => {
103-
this.setState({
104-
selectedDetailsTabIndex: index
105-
})
113+
this.setState({ selectedDetailsTabId: tabData.id })
106114
}
107115

108116
renderProps(doc: DocDataType) {
109-
const { id, props } = doc
117+
const { props } = doc
110118
return props ? (
111-
<View margin="x-large 0" display="block">
112-
<Heading level="h2" as="h3" id={`${id}Properties`} margin="0 0 small 0">
113-
Properties
114-
</Heading>
115-
<Properties props={props} layout={this.props.layout} />
116-
</View>
119+
<Properties props={props} layout={this.props.layout} />
117120
) : null
118121
}
119122

@@ -123,7 +126,10 @@ class Document extends Component<DocumentProps, DocumentState> {
123126

124127
const themeVariableKeys = componentTheme && Object.keys(componentTheme)
125128

126-
return themeVariables && componentTheme && themeVariableKeys.length > 0 ? (
129+
return themeVariables &&
130+
componentTheme &&
131+
themeVariableKeys &&
132+
themeVariableKeys.length > 0 ? (
127133
<View margin="x-large 0" display="block">
128134
<Heading level="h2" as="h3" id={`${doc.id}Theme`} margin="0 0 small 0">
129135
Default Theme Variables
@@ -345,20 +351,25 @@ import { ${importName} } from '${esPath}'
345351
<Tabs.Panel
346352
renderTitle={doc.title}
347353
key={`${doc.id}TabPanel`}
348-
isSelected={this.state.selectedDetailsTabIndex === 0}
354+
id={doc.id}
355+
isSelected={this.state.selectedDetailsTabId === doc.id}
349356
>
350357
{this.renderDetails(doc)}
351358
</Tabs.Panel>
352-
{children.map((child, index) => (
353-
<Tabs.Panel
354-
renderTitle={child.title}
355-
key={`${child.id}TabPanel`}
356-
isSelected={this.state.selectedDetailsTabIndex === index + 1}
357-
>
358-
{this.renderDescription(child, child.description)}
359-
{this.renderDetails(child)}
360-
</Tabs.Panel>
361-
))}
359+
{
360+
// Details of the child components (if any)
361+
children.map((child) => (
362+
<Tabs.Panel
363+
renderTitle={child.title}
364+
key={`${child.id}TabPanel`}
365+
id={child.id}
366+
isSelected={this.state.selectedDetailsTabId === child.id}
367+
>
368+
{this.renderDescription(child, child.description)}
369+
{this.renderDetails(child)}
370+
</Tabs.Panel>
371+
))
372+
}
362373
</Tabs>
363374
) : (
364375
this.renderDetails(doc)

‎packages/__docs__/src/Document/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ type DocumentProps = DocumentOwnProps & WithStyleProps<null, DocumentStyle>
4646
type DocumentStyle = ComponentStyle<'githubCornerOctoArm' | 'githubCorner'>
4747

4848
type DocumentState = {
49-
selectedDetailsTabIndex: number
49+
selectedDetailsTabId: string | undefined
5050
pageRef: HTMLDivElement | null
51-
componentTheme: Partial<ThemeVariables[keyof ThemeVariables]>
51+
componentTheme: Partial<ThemeVariables[keyof ThemeVariables]> | undefined
5252
}
5353

5454
const allowedProps: AllowedPropKeys = [

‎packages/__docs__/src/Properties/index.tsx‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ import type {
3939
TSFunctionSignatureType,
4040
TypeDescriptor
4141
} from 'react-docgen'
42+
import { Heading } from '@instructure/ui-heading'
43+
import { View } from '@instructure/ui-view'
4244

4345
@withStyle(generateStyle, null)
4446
class Properties extends Component<PropertiesProps> {
@@ -62,28 +64,28 @@ class Properties extends Component<PropertiesProps> {
6264
return string.includes('(...args: any[]) => any')
6365
}
6466

65-
renderRows(hasDefaultOrRequired: boolean) {
67+
getPropsToRender() {
6668
const { props } = this.props
6769
const propsToIgnore = ['styles', 'makeStyles', 'dir']
70+
return Object.keys(props).filter((name) => {
71+
const description = props[name].description || ''
72+
// we need to manually pass through the dir prop of InstUISettingsProvider
73+
if (name === 'dir' && props.theme && props.instanceCounterMap) {
74+
return true
75+
}
76+
return (
77+
description.indexOf('@private') < 0 &&
78+
description.indexOf('@deprecated') < 0 &&
79+
!propsToIgnore.includes(name)
80+
)
81+
})
82+
}
6883

69-
return Object.keys(props)
70-
.filter((name) => {
71-
const description = props[name].description || ''
72-
73-
// we need to manually pass through the dir prop of InstUISettingsProvider
74-
if (name === 'dir' && props.theme && props.instanceCounterMap) {
75-
return true
76-
}
77-
78-
return (
79-
description.indexOf('@private') < 0 &&
80-
description.indexOf('@deprecated') < 0 &&
81-
!propsToIgnore.includes(name)
82-
)
83-
})
84+
renderRows(hasDefaultOrRequired: boolean) {
85+
return this.getPropsToRender()
8486
.sort((a, b) => a.localeCompare(b))
8587
.map((name, idx) => {
86-
const prop = props[name]
88+
const prop = this.props.props[name]
8789
return (
8890
<Table.Row key={idx}>
8991
<Table.Cell>
@@ -264,8 +266,10 @@ class Properties extends Component<PropertiesProps> {
264266
}
265267

266268
render() {
267-
const { styles } = this.props
268-
const { layout } = this.props
269+
if (this.getPropsToRender().length == 0) {
270+
return null // e.g. Menu.Separator has no props
271+
}
272+
const { styles, layout } = this.props
269273
let hasDefaultOrRequired = false
270274
for (const i in this.props.props) {
271275
if (this.props.props[i].required || this.props.props[i].defaultValue) {
@@ -274,24 +278,29 @@ class Properties extends Component<PropertiesProps> {
274278
}
275279
}
276280
return (
277-
<div css={styles?.properties}>
278-
<Table
279-
caption="Component Properties"
280-
layout={layout === 'small' ? 'stacked' : 'auto'}
281-
>
282-
<Table.Head>
283-
<Table.Row>
284-
<Table.ColHeader id="Prop">Prop</Table.ColHeader>
285-
<Table.ColHeader id="Type">Type</Table.ColHeader>
286-
{hasDefaultOrRequired && (
287-
<Table.ColHeader id="Default">Default</Table.ColHeader>
288-
)}
289-
<Table.ColHeader id="Description">Description</Table.ColHeader>
290-
</Table.Row>
291-
</Table.Head>
292-
<Table.Body>{this.renderRows(hasDefaultOrRequired)}</Table.Body>
293-
</Table>
294-
</div>
281+
<View margin="x-large 0" display="block">
282+
<Heading level="h2" as="h3" margin="0 0 small 0">
283+
Properties
284+
</Heading>
285+
<div css={styles?.properties}>
286+
<Table
287+
caption="Component Properties"
288+
layout={layout === 'small' ? 'stacked' : 'auto'}
289+
>
290+
<Table.Head>
291+
<Table.Row>
292+
<Table.ColHeader id="Prop">Prop</Table.ColHeader>
293+
<Table.ColHeader id="Type">Type</Table.ColHeader>
294+
{hasDefaultOrRequired && (
295+
<Table.ColHeader id="Default">Default</Table.ColHeader>
296+
)}
297+
<Table.ColHeader id="Description">Description</Table.ColHeader>
298+
</Table.Row>
299+
</Table.Head>
300+
<Table.Body>{this.renderRows(hasDefaultOrRequired)}</Table.Body>
301+
</Table>
302+
</div>
303+
</View>
295304
)
296305
}
297306
}

‎packages/ui-tabs/src/Tabs/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ type TabsOwnProps = {
4242
*/
4343
screenReaderLabel?: string
4444
/**
45-
* Called when the selected tab should change
45+
* Called when the selected tab should change.
46+
* @param tabData.index - The zero-based index of the tab that was selected
47+
* @param tabData.id - The HTML `id` of the tab that was selected
4648
*/
4749
onRequestTabChange?: (
4850
event: React.MouseEvent<ViewOwnProps> | React.KeyboardEvent<ViewOwnProps>,

0 commit comments

Comments
 (0)