Skip to content

Commit e13556a

Browse files
git-nandorgit-nandor
committed
feat(ui-list): migrate to new theming system
1 parent 61cbf4d commit e13556a

File tree

10 files changed

+52
-224
lines changed

10 files changed

+52
-224
lines changed

‎packages/ui-list/src/InlineList/InlineListItem/index.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,9 @@ import { Component } from 'react'
2626

2727
import { View } from '@instructure/ui-view'
2828
import { passthroughProps } from '@instructure/ui-react-utils'
29-
30-
import { withStyleRework as withStyle } from '@instructure/emotion'
29+
import { withStyle } from '@instructure/emotion'
3130

3231
import generateStyle from './styles'
33-
import generateComponentTheme from './theme'
34-
3532
import { allowedProps } from './props'
3633
import type { InlineListItemProps } from './props'
3734

@@ -41,7 +38,7 @@ parent: InlineList
4138
id: InlineList.Item
4239
---
4340
**/
44-
@withStyle(generateStyle, generateComponentTheme)
41+
@withStyle(generateStyle, 'InlineListInlineListItem')
4542
class InlineListItem extends Component<InlineListItemProps> {
4643
static readonly componentId = 'InlineList.Item'
4744

@@ -67,11 +64,20 @@ class InlineListItem extends Component<InlineListItemProps> {
6764
}
6865

6966
componentDidMount() {
70-
this.props.makeStyles?.()
67+
this.props.makeStyles?.(this.makeStyleProps())
7168
}
7269

7370
componentDidUpdate() {
74-
this.props.makeStyles?.()
71+
this.props.makeStyles?.(this.makeStyleProps())
72+
}
73+
74+
makeStyleProps = () => {
75+
const { size, delimiter, spacing } = this.props
76+
return {
77+
size,
78+
delimiter,
79+
spacing
80+
}
7581
}
7682

7783
render() {

‎packages/ui-list/src/InlineList/InlineListItem/styles.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
import { logError as error } from '@instructure/console'
2626

27-
import type { InlineListItemTheme } from '@instructure/shared-types'
27+
import type { NewComponentTypes } from '@instructure/ui-themes'
2828
import type { InlineListItemProps, InlineListItemStyle } from './props'
2929

3030
/**
@@ -40,7 +40,7 @@ import type { InlineListItemProps, InlineListItemStyle } from './props'
4040
* @return {Object} The final style object, which will be used in the component
4141
*/
4242
const generateStyle = (
43-
componentTheme: InlineListItemTheme,
43+
componentTheme: NewComponentTypes['InlineListInlineListItem'],
4444
props: InlineListItemProps
4545
): InlineListItemStyle => {
4646
const { size, delimiter, spacing } = props

‎packages/ui-list/src/InlineList/InlineListItem/theme.ts‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎packages/ui-list/src/InlineList/README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -95,49 +95,49 @@ type: example
9595
---
9696
<div>
9797
<InlineList itemSpacing="xxx-small">
98-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
98+
<InlineList.Item>Adding predefined space</InlineList.Item>
9999
<InlineList.Item>10pts</InlineList.Item>
100100
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
101101
<InlineList.Item><Link href="#">Set to xxx-small</Link></InlineList.Item>
102102
</InlineList>
103103
<InlineList itemSpacing="xx-small">
104-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
104+
<InlineList.Item>Adding predefined space</InlineList.Item>
105105
<InlineList.Item>10pts</InlineList.Item>
106106
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
107107
<InlineList.Item><Link href="#">Set to xx-small</Link></InlineList.Item>
108108
</InlineList>
109109
<InlineList itemSpacing="x-small">
110-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
110+
<InlineList.Item>Adding predefined space</InlineList.Item>
111111
<InlineList.Item>10pts</InlineList.Item>
112112
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
113113
<InlineList.Item><Link href="#">Set to x-small</Link></InlineList.Item>
114114
</InlineList>
115115
<InlineList itemSpacing="small">
116-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
116+
<InlineList.Item>Adding predefined space</InlineList.Item>
117117
<InlineList.Item>10pts</InlineList.Item>
118118
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
119119
<InlineList.Item><Link href="#">Set to small</Link></InlineList.Item>
120120
</InlineList>
121121
<InlineList itemSpacing="medium">
122-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
122+
<InlineList.Item>Adding predefined space</InlineList.Item>
123123
<InlineList.Item>10pts</InlineList.Item>
124124
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
125125
<InlineList.Item><Link href="#">Set to medium</Link></InlineList.Item>
126126
</InlineList>
127127
<InlineList itemSpacing="large">
128-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
128+
<InlineList.Item>Adding predefined space</InlineList.Item>
129129
<InlineList.Item>10pts</InlineList.Item>
130130
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
131131
<InlineList.Item><Link href="#">Set to large</Link></InlineList.Item>
132132
</InlineList>
133133
<InlineList itemSpacing="x-large">
134-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
134+
<InlineList.Item>Adding predefined space</InlineList.Item>
135135
<InlineList.Item>10pts</InlineList.Item>
136136
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
137137
<InlineList.Item><Link href="#">Set to x-large</Link></InlineList.Item>
138138
</InlineList>
139139
<InlineList itemSpacing="xx-large">
140-
<InlineList.Item>{lorem.sentence()}</InlineList.Item>
140+
<InlineList.Item>Adding predefined space</InlineList.Item>
141141
<InlineList.Item>10pts</InlineList.Item>
142142
<InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
143143
<InlineList.Item><Link href="#">Set to xx-large</Link></InlineList.Item>

‎packages/ui-list/src/List/ListItem/index.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,9 @@ import { Component } from 'react'
2626

2727
import { View } from '@instructure/ui-view'
2828
import { passthroughProps } from '@instructure/ui-react-utils'
29-
30-
import { withStyleRework as withStyle } from '@instructure/emotion'
29+
import { withStyle } from '@instructure/emotion'
3130

3231
import generateStyle from './styles'
33-
import generateComponentTheme from './theme'
34-
3532
import { allowedProps } from './props'
3633
import type { ListItemProps } from './props'
3734

@@ -41,7 +38,7 @@ parent: List
4138
id: List.Item
4239
---
4340
**/
44-
@withStyle(generateStyle, generateComponentTheme)
41+
@withStyle(generateStyle, 'ListListItem')
4542
class ListItem extends Component<ListItemProps> {
4643
static readonly componentId = 'List.Item'
4744

@@ -66,11 +63,20 @@ class ListItem extends Component<ListItemProps> {
6663
}
6764

6865
componentDidMount() {
69-
this.props.makeStyles?.()
66+
this.props.makeStyles?.(this.makeStyleProps())
7067
}
7168

7269
componentDidUpdate() {
73-
this.props.makeStyles?.()
70+
this.props.makeStyles?.(this.makeStyleProps())
71+
}
72+
73+
makeStyleProps = () => {
74+
const { size, delimiter, spacing } = this.props
75+
return {
76+
size,
77+
delimiter,
78+
spacing
79+
}
7480
}
7581

7682
render() {

‎packages/ui-list/src/List/ListItem/styles.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@
2323
*/
2424

2525
import { logError as error } from '@instructure/console'
26-
27-
import type { ListItemTheme } from '@instructure/shared-types'
26+
import type { NewComponentTypes } from '@instructure/ui-themes'
2827
import type { ListItemProps, ListItemStyle } from './props'
2928

3029
/**
@@ -40,7 +39,7 @@ import type { ListItemProps, ListItemStyle } from './props'
4039
* @return {Object} The final style object, which will be used in the component
4140
*/
4241
const generateStyle = (
43-
componentTheme: ListItemTheme,
42+
componentTheme: NewComponentTypes['ListListItem'],
4443
props: ListItemProps
4544
): ListItemStyle => {
4645
const { size, delimiter, spacing } = props

‎packages/ui-list/src/List/ListItem/theme.ts‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎packages/ui-list/src/List/index.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,10 @@ import { Children, Component, ReactElement } from 'react'
2626

2727
import { View } from '@instructure/ui-view'
2828
import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
29+
import { withStyle } from '@instructure/emotion'
2930

3031
import { ListItem } from './ListItem'
31-
32-
import { withStyleRework as withStyle } from '@instructure/emotion'
33-
3432
import generateStyle from './styles'
35-
import generateComponentTheme from './theme'
36-
3733
import { allowedProps } from './props'
3834
import type { ListProps } from './props'
3935

@@ -42,7 +38,7 @@ import type { ListProps } from './props'
4238
category: components
4339
---
4440
**/
45-
@withStyle(generateStyle, generateComponentTheme)
41+
@withStyle(generateStyle)
4642
class List extends Component<ListProps> {
4743
static readonly componentId = 'List'
4844

@@ -70,11 +66,19 @@ class List extends Component<ListProps> {
7066
}
7167

7268
componentDidMount() {
73-
this.props.makeStyles?.()
69+
this.props.makeStyles?.(this.makeStyleProps())
7470
}
7571

7672
componentDidUpdate() {
77-
this.props.makeStyles?.()
73+
this.props.makeStyles?.(this.makeStyleProps())
74+
}
75+
76+
makeStyleProps = () => {
77+
const { as, isUnstyled } = this.props
78+
return {
79+
as,
80+
isUnstyled
81+
}
7882
}
7983

8084
renderChildren() {

‎packages/ui-list/src/List/styles.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
* SOFTWARE.
2323
*/
2424

25-
import type { ListTheme } from '@instructure/shared-types'
2625
import type { ListProps, ListStyle } from './props'
26+
import type { NewComponentTypes } from '@instructure/ui-themes'
2727

2828
/**
2929
* ---
@@ -36,7 +36,7 @@ import type { ListProps, ListStyle } from './props'
3636
* @return {Object} The final style object, which will be used in the component
3737
*/
3838
const generateStyle = (
39-
componentTheme: ListTheme,
39+
componentTheme: NewComponentTypes['List'],
4040
props: ListProps
4141
): ListStyle => {
4242
const { isUnstyled, as } = props

0 commit comments

Comments
 (0)