diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts index 9d3424ca278..61b18b82c5e 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts @@ -7,7 +7,7 @@ it('should update token values contextually', async () => { ` const App = () => ( <> - + diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts index 2f8c121b1da..508710b9901 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts @@ -7,17 +7,22 @@ it('should migrate contrast prop to emphasis', async () => { ` const App = () => ( <> - Hello - Hello + Hello + Hello - Lorem Ipsum Hello + Lorem Ipsum Hello - Hello - Hello + Hello + Hello - console.log('Clicked')} /> - console.log('Clicked')} /> - + console.log('Clicked')} /> + console.log('Clicked')} /> + + + + + + ); `, @@ -27,17 +32,22 @@ it('should migrate contrast prop to emphasis', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - Hello - Hello + Hello + Hello + + Lorem Ipsum Hello - Lorem Ipsum Hello + Hello + Hello - Hello - Hello + console.log('Clicked')} /> + console.log('Clicked')} /> + + + - console.log('Clicked')} /> - console.log('Clicked')} /> - + + );" `); diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts index 7d9882f34f2..88051824816 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts @@ -33,12 +33,12 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } - // Bade/Counter/IconButton Components: Change `contrast` prop to `emphasis` + // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis` try { root .find(j.JSXElement) .filter((path) => - ['Badge', 'Counter', 'IconButton'].includes(path.value.openingElement.name.name), + ['Badge', 'Counter', 'IconButton', 'Alert'].includes(path.value.openingElement.name.name), ) .find(j.JSXAttribute) .filter((path) => path.node.name.name === 'contrast') @@ -46,6 +46,10 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { path.node.name.name = 'emphasis'; const contrastToEmphasisMap = { + alert: { + low: 'subtle', + high: 'intense', + }, badge: { low: 'subtle', high: 'intense', @@ -74,6 +78,23 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } + // Remove 'contrast' prop from the Skeleton Component + try { + root + .find(j.JSXElement) + .filter((path) => path.value.openingElement.name.name === 'Skeleton') + .find(j.JSXAttribute) + .filter((path) => path.node.name.name === 'contrast') + .remove(); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while removing the "contrast" prop from Skeleton.`, + ), + `\n${red(error.stack)}\n`, + ); + } + // Remove deprecated 'intent'/'variant' props in favor of color try { root