Skip to content

Commit 7f94400

Browse files
ToMESSKaToMESSKa
committed
feat(ui-codemods): update tokens and move theme.componentOverrides to themeOverride.components
INSTUI-4840
1 parent 0dad569 commit 7f94400

260 files changed

Lines changed: 6449 additions & 76 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/upgrading/upgrade-guide.md‎

Lines changed: 190 additions & 66 deletions
Large diffs are not rendered by default.

‎packages/ui-avatar/src/Avatar/v2/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ const generateStyle = (
173173
: colorVariants[color!].text,
174174
borderColor: componentTheme.borderColor,
175175
fontWeight: componentTheme.fontWeight,
176+
fontFamily: componentTheme.fontFamily,
176177
overflow: 'hidden',
177178
// TODO handle the merging on tokens inside the util
178179
margin: calcSpacingFromShorthand(margin, {

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// @ts-nocheck
2+
// InstUISettingsProvider `theme.componentOverrides`:
3+
// Spinner `xSmallBorderWidth` -> `strokeWidthXs` (rename) and `smallSize` removed
4+
// (warns), Alert override (unmapped, unchanged); the whole block is relocated to
5+
// `themeOverride.components`. The sibling per-instance Spinner `themeOverride` is
6+
// renamed the same way.
7+
import { Spinner } from '@instructure/ui-spinner/v11_7'
8+
import { Alert } from '@instructure/ui-alerts/v11_7'
9+
import { InstUISettingsProvider } from '@instructure/emotion'
10+
11+
function test() {
12+
return (
13+
<div>
14+
<InstUISettingsProvider
15+
theme={{
16+
componentOverrides: {
17+
Spinner: {
18+
xSmallBorderWidth: '2rem',
19+
smallSize: '2rem'
20+
},
21+
Alert: {
22+
background: 'pink'
23+
}
24+
}
25+
}}
26+
>
27+
<Spinner renderTitle="Loading" />
28+
</InstUISettingsProvider>
29+
30+
<Spinner
31+
renderTitle="Loading"
32+
themeOverride={{
33+
xSmallBorderWidth: '2rem'
34+
}}
35+
/>
36+
</div>
37+
)
38+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// @ts-nocheck
2+
// InstUISettingsProvider `theme.componentOverrides`:
3+
// Spinner `xSmallBorderWidth` -> `strokeWidthXs` (rename) and `smallSize` removed
4+
// (warns), Alert override (unmapped, unchanged); the whole block is relocated to
5+
// `themeOverride.components`. The sibling per-instance Spinner `themeOverride` is
6+
// renamed the same way.
7+
import { Spinner } from '@instructure/ui-spinner/v11_7'
8+
import { Alert } from '@instructure/ui-alerts/v11_7'
9+
import { InstUISettingsProvider } from '@instructure/emotion'
10+
11+
function test() {
12+
return (
13+
<div>
14+
<InstUISettingsProvider
15+
themeOverride={{
16+
components: {
17+
Spinner: {
18+
strokeWidthXs: '2rem'
19+
},
20+
Alert: {
21+
background: 'pink'
22+
}
23+
}
24+
}}
25+
>
26+
<Spinner renderTitle="Loading" />
27+
</InstUISettingsProvider>
28+
<Spinner
29+
renderTitle="Loading"
30+
themeOverride={{
31+
strokeWidthXs: '2rem'
32+
}}
33+
/>
34+
</div>
35+
)
36+
}

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test10.input.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// @ts-nocheck
2+
// Per-instance Metric `themeOverride` set to a ternary: can't be inspected, left
3+
// unchanged and warned. Sibling Spinner anchor `xSmallBorderWidth` ->
4+
// `strokeWidthXs` (control).
5+
import { Spinner } from '@instructure/ui-spinner/v11_7'
6+
import { Metric } from '@instructure/ui-metric/v11_7'
7+
8+
const test = () => (
9+
<div>
10+
<Spinner
11+
renderTitle="anchor"
12+
themeOverride={{ xSmallBorderWidth: '2rem' }}
13+
/>
14+
<Metric
15+
renderLabel="x"
16+
renderValue="y"
17+
themeOverride={isMobile ? { padding: '5px' } : { padding: '10px' }}
18+
/>
19+
</div>
20+
)

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test10.output.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @ts-nocheck
2+
// Per-instance Metric `themeOverride` set to a ternary: can't be inspected, left
3+
// unchanged and warned. Sibling Spinner anchor `xSmallBorderWidth` ->
4+
// `strokeWidthXs` (control).
5+
import { Spinner } from '@instructure/ui-spinner/v11_7'
6+
import { Metric } from '@instructure/ui-metric/v11_7'
7+
8+
const test = () => (
9+
<div>
10+
<Spinner renderTitle="anchor" themeOverride={{ strokeWidthXs: '2rem' }} />
11+
<Metric
12+
renderLabel="x"
13+
renderValue="y"
14+
themeOverride={isMobile ? { padding: '5px' } : { padding: '10px' }}
15+
/>
16+
</div>
17+
)

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test10w.warning.input.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// @ts-nocheck
2+
// Per-instance Metric `themeOverride` set to a ternary: can't be inspected, left
3+
// unchanged and warned. Sibling Spinner anchor `xSmallBorderWidth` ->
4+
// `strokeWidthXs` (control).
5+
import { Spinner } from '@instructure/ui-spinner/v11_7'
6+
import { Metric } from '@instructure/ui-metric/v11_7'
7+
8+
const test = () => (
9+
<div>
10+
<Spinner
11+
renderTitle="anchor"
12+
themeOverride={{ xSmallBorderWidth: '2rem' }}
13+
/>
14+
<Metric
15+
renderLabel="x"
16+
renderValue="y"
17+
themeOverride={isMobile ? { padding: '5px' } : { padding: '10px' }}
18+
/>
19+
</div>
20+
)

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test10w.warning.output.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[
2+
"Theme variables for Metric could not be migrated automatically because a dynamic expression is used in themeOverride prop. Manually check these affected tokens in the expression: `padding`, `fontFamily`."
3+
]

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test11.input.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// @ts-nocheck
2+
// Per-instance Metric `themeOverride` set to a function call: can't be inspected,
3+
// left unchanged and warned. Sibling Spinner anchor `xSmallBorderWidth` ->
4+
// `strokeWidthXs` (control).
5+
import { Spinner } from '@instructure/ui-spinner/v11_7'
6+
import { Metric } from '@instructure/ui-metric/v11_7'
7+
8+
const test = () => (
9+
<div>
10+
<Spinner
11+
renderTitle="anchor"
12+
themeOverride={{ xSmallBorderWidth: '2rem' }}
13+
/>
14+
<Metric renderLabel="x" renderValue="y" themeOverride={getOverride()} />
15+
</div>
16+
)

‎packages/ui-codemods/lib/__node_tests__/__testfixtures__/multiVersionThemeVariablesCodemod/test11.output.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @ts-nocheck
2+
// Per-instance Metric `themeOverride` set to a function call: can't be inspected,
3+
// left unchanged and warned. Sibling Spinner anchor `xSmallBorderWidth` ->
4+
// `strokeWidthXs` (control).
5+
import { Spinner } from '@instructure/ui-spinner/v11_7'
6+
import { Metric } from '@instructure/ui-metric/v11_7'
7+
8+
const test = () => (
9+
<div>
10+
<Spinner renderTitle="anchor" themeOverride={{ strokeWidthXs: '2rem' }} />
11+
<Metric renderLabel="x" renderValue="y" themeOverride={getOverride()} />
12+
</div>
13+
)

0 commit comments

Comments
 (0)