Skip to content

Commit 028e93a

Browse files
ToMESSKaToMESSKa
committed
chore(ui-codemods): add codemod to remove maxWidth style variable from Tag
1 parent f415df8 commit 028e93a

File tree

8 files changed

+673
-2
lines changed

8 files changed

+673
-2
lines changed

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/removeMaxWidthFromTag/test1.input.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
// @ts-nocheck
2+
3+
import { Tag } from '@instructure/ui-tag'
4+
import { InstUISettingsProvider } from '@instructure/emotion'
5+
6+
function test() {
7+
return (
8+
<div>
9+
<Tag
10+
text="hello"
11+
themeOverride={{
12+
maxWidth: '10px',
13+
defaultBackground: 'custom value'
14+
}}
15+
/>
16+
<Tag
17+
text="hello"
18+
themeOverride={() => ({
19+
maxWidth: '10px',
20+
defaultBackground: 'custom value'
21+
})}
22+
/>
23+
<Tag
24+
text="hello"
25+
themeOverride={{
26+
defaultBackground: 'custom value'
27+
}}
28+
/>
29+
<Button
30+
text="hello"
31+
themeOverride={{
32+
maxWidth: '10px'
33+
}}
34+
/>
35+
<Tag
36+
text="hello"
37+
themeOverride={{
38+
maxWidth: '10px'
39+
}}
40+
/>
41+
<Tag
42+
text="hello"
43+
themeOverride={{
44+
...someOverrides
45+
}}
46+
/>
47+
<Tag
48+
text="hello"
49+
themeOverride={{
50+
...someOverrides,
51+
maxWidth: '10px'
52+
}}
53+
/>
54+
<Tag themeOverride={getThemeOverride()} />
55+
<Tag themeOverride={theme} />
56+
<InstUISettingsProvider
57+
theme={{
58+
componentOverrides: {
59+
Tag: {
60+
maxWidth: '10px',
61+
defaultBackground: 'custom value'
62+
}
63+
}
64+
}}
65+
>
66+
<Tag text="hello" />
67+
</InstUISettingsProvider>
68+
<InstUISettingsProvider
69+
theme={{
70+
componentOverrides: {
71+
Tag: {
72+
maxWidth: '10px'
73+
}
74+
}
75+
}}
76+
>
77+
<Tag text="hello" />
78+
</InstUISettingsProvider>
79+
<InstUISettingsProvider
80+
theme={(theme) => {
81+
return {
82+
componentOverrides: {
83+
Tag: {
84+
maxWidth: '10px',
85+
defaultBackground: 'custom value'
86+
}
87+
}
88+
}
89+
}}
90+
>
91+
<Tag text="hello" />
92+
</InstUISettingsProvider>
93+
<InstUISettingsProvider
94+
theme={(theme) => {
95+
return {
96+
componentOverrides: {
97+
Tag: {
98+
maxWidth: '10px'
99+
}
100+
}
101+
}
102+
}}
103+
>
104+
<Tag text="hello" />
105+
</InstUISettingsProvider>
106+
<Tag
107+
themeOverride={isMobile ? { maxWidth: '100%' } : { width: '200px' }}
108+
/>
109+
</div>
110+
)
111+
}

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/removeMaxWidthFromTag/test1.output.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// @ts-nocheck
2+
3+
import { Tag } from '@instructure/ui-tag'
4+
import { InstUISettingsProvider } from '@instructure/emotion'
5+
6+
function test() {
7+
return (
8+
<div>
9+
<Tag
10+
text="hello"
11+
themeOverride={{
12+
defaultBackground: 'custom value'
13+
}}
14+
/>
15+
<Tag
16+
text="hello"
17+
themeOverride={() => ({
18+
defaultBackground: 'custom value'
19+
})}
20+
/>
21+
<Tag
22+
text="hello"
23+
themeOverride={{
24+
defaultBackground: 'custom value'
25+
}}
26+
/>
27+
<Button
28+
text="hello"
29+
themeOverride={{
30+
maxWidth: '10px'
31+
}}
32+
/>
33+
<Tag text="hello" />
34+
<Tag
35+
text="hello"
36+
themeOverride={{
37+
...someOverrides
38+
}}
39+
/>
40+
<Tag
41+
text="hello"
42+
themeOverride={{
43+
...someOverrides
44+
}}
45+
/>
46+
<Tag themeOverride={getThemeOverride()} />
47+
<Tag themeOverride={theme} />
48+
<InstUISettingsProvider
49+
theme={{
50+
componentOverrides: {
51+
Tag: {
52+
defaultBackground: 'custom value'
53+
}
54+
}
55+
}}
56+
>
57+
<Tag text="hello" />
58+
</InstUISettingsProvider>
59+
60+
<Tag text="hello" />
61+
62+
<InstUISettingsProvider
63+
theme={(theme) => {
64+
return {
65+
componentOverrides: {
66+
Tag: {
67+
defaultBackground: 'custom value'
68+
}
69+
}
70+
}
71+
}}
72+
>
73+
<Tag text="hello" />
74+
</InstUISettingsProvider>
75+
76+
<Tag text="hello" />
77+
78+
<Tag
79+
themeOverride={isMobile ? { maxWidth: '100%' } : { width: '200px' }}
80+
/>
81+
</div>
82+
)
83+
}

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/removeMaxWidthFromTag/test1.warning.input.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
// @ts-nocheck
2+
3+
import { Tag } from '@instructure/ui-tag'
4+
import { InstUISettingsProvider } from '@instructure/emotion'
5+
6+
function test() {
7+
return (
8+
<div>
9+
<Tag
10+
text="hello"
11+
themeOverride={{
12+
maxWidth: '10px',
13+
defaultBackground: 'custom value'
14+
}}
15+
/>
16+
<Tag
17+
text="hello"
18+
themeOverride={() => ({
19+
maxWidth: '10px',
20+
defaultBackground: 'custom value'
21+
})}
22+
/>
23+
<Tag
24+
text="hello"
25+
themeOverride={{
26+
defaultBackground: 'custom value'
27+
}}
28+
/>
29+
<Button
30+
text="hello"
31+
themeOverride={{
32+
maxWidth: '10px'
33+
}}
34+
/>
35+
<Tag
36+
text="hello"
37+
themeOverride={{
38+
maxWidth: '10px'
39+
}}
40+
/>
41+
<Tag
42+
text="hello"
43+
themeOverride={{
44+
...someOverrides
45+
}}
46+
/>
47+
<Tag
48+
text="hello"
49+
themeOverride={{
50+
...someOverrides,
51+
maxWidth: '10px'
52+
}}
53+
/>
54+
<Tag themeOverride={getThemeOverride()} />
55+
<Tag themeOverride={theme} />
56+
<InstUISettingsProvider
57+
theme={{
58+
componentOverrides: {
59+
Tag: {
60+
maxWidth: '10px',
61+
defaultBackground: 'custom value'
62+
}
63+
}
64+
}}
65+
>
66+
<Tag text="hello" />
67+
</InstUISettingsProvider>
68+
<InstUISettingsProvider
69+
theme={{
70+
componentOverrides: {
71+
Tag: {
72+
maxWidth: '10px'
73+
}
74+
}
75+
}}
76+
>
77+
<Tag text="hello" />
78+
</InstUISettingsProvider>
79+
<InstUISettingsProvider
80+
theme={(theme) => {
81+
return {
82+
componentOverrides: {
83+
Tag: {
84+
maxWidth: '10px',
85+
defaultBackground: 'custom value'
86+
}
87+
}
88+
}
89+
}}
90+
>
91+
<Tag text="hello" />
92+
</InstUISettingsProvider>
93+
<InstUISettingsProvider
94+
theme={(theme) => {
95+
return {
96+
componentOverrides: {
97+
Tag: {
98+
maxWidth: '10px'
99+
}
100+
}
101+
}
102+
}}
103+
>
104+
<Tag text="hello" />
105+
</InstUISettingsProvider>
106+
<Tag
107+
themeOverride={isMobile ? { maxWidth: '100%' } : { width: '200px' }}
108+
/>
109+
</div>
110+
)
111+
}

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/removeMaxWidthFromTag/test1.warning.output.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[
2+
'maxWidth could not be migrated automatically (spread operator usage). Manually check for hidden maxWidth references.',
3+
'maxWidth could not be migrated automatically (dynamic usage detected). Manually check for maxWidth in theme overrides.',
4+
'maxWidth could not be migrated automatically (dynamic usage detected). Manually check for maxWidth in theme overrides.',
5+
'maxWidth could not be migrated automatically (used in a conditional). Manually check for maxWidth in this expression.'
6+
]

‎packages/ui-codemods/lib/__node_tests__/codemods.test.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import updateV10Breaking from '../updateV10Breaking'
2727
import removeAsFromInstUISettingsProvider from '../removeAsFromInstUISettingsProvider'
2828
import renameCanvasThemesCodemod from '../renameCanvasThemesCodemod'
2929
import updateCodeEditorImport from '../updateCodeEditorImport'
30+
import removeMaxWidthFromTag from '../removeMaxWidthFromTag'
3031

3132
describe('test codemods', () => {
3233
it('test InstUI v10 color codemods', () => {
@@ -44,4 +45,8 @@ describe('test codemods', () => {
4445
it('test removing CodeEditor', () => {
4546
runTest(updateCodeEditorImport)
4647
})
48+
49+
it('test removing "maxWidth" from Tag', () => {
50+
runTest(removeMaxWidthFromTag)
51+
})
4752
})

‎packages/ui-codemods/lib/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ import instUIv11Codemods from './instUIv11Codemods'
2727
import removeAsFromInstUISettingsProvider from './removeAsFromInstUISettingsProvider'
2828
import { renameCanvasThemes } from './renameCanvasThemesCodemod'
2929
import updateCodeEditorImport from './updateCodeEditorImport'
30+
import removeMaxWidthFromTag from './removeMaxWidthFromTag'
3031

3132
export {
3233
updateV10Breaking,
3334
instUIv11Codemods,
3435
removeAsFromInstUISettingsProvider,
3536
renameCanvasThemes,
36-
updateCodeEditorImport
37+
updateCodeEditorImport,
38+
removeMaxWidthFromTag
3739
}

‎packages/ui-codemods/lib/instUIv11Codemods.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import instUICodemodExecutor from './utils/instUICodemodExecutor'
2727
import { removeAsProp } from './removeAsFromInstUISettingsProvider'
2828
import { renameCanvasThemes } from './renameCanvasThemesCodemod'
2929
import { updateCodeEditor } from './updateCodeEditorImport'
30+
import { removeMaxWidth } from './removeMaxWidthFromTag'
3031

3132
/**
3233
* Runs all InstUI v10 -> v11 upgrade codemods
@@ -38,7 +39,7 @@ const InstUIv11Codemods: Transform = (
3839
) => {
3940
// TODO add other v11 codemods to this array
4041
return instUICodemodExecutor(
41-
[removeAsProp, renameCanvasThemes, updateCodeEditor],
42+
[removeAsProp, renameCanvasThemes, updateCodeEditor, removeMaxWidth],
4243
file,
4344
api,
4445
options

0 commit comments

Comments
 (0)