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 e6d3c5b4c91..d47dc56660a 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 @@ -9,6 +9,12 @@ it('should migrate the Amount component', async () => { <> + + + + + + @@ -27,6 +33,14 @@ it('should migrate the Amount component', async () => { + + + + + + + + @@ -57,7 +71,13 @@ it('should migrate the Amount component', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - + + + + + + + @@ -77,6 +97,14 @@ it('should migrate the Amount component', async () => { + + + + + + + + diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts index dae4db91728..03bc95e15da 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts @@ -76,7 +76,9 @@ it('should migrate the Card component', async () => { prefix={} suffix={} /> - } /> + } + /> Hello World @@ -160,7 +162,13 @@ it('should migrate the Card component', async () => { prefix={} suffix={} /> - } /> + } + /> Hello World 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 4e06a82e59c..c3a8ebc9d7d 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 @@ -189,9 +189,9 @@ it('should remove variant/intent prop in favor of color prop', async () => { No - + - + diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts index d2193c41284..fe3244cecf0 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts @@ -1,8 +1,9 @@ import { red, isExpression } from './utils'; -// Amount component -> +// Amount component: changes to intent & size props function migrateAmountComponent({ root, j, file }): void { try { + // -> root .find(j.JSXElement, { openingElement: { @@ -98,7 +99,41 @@ function migrateAmountComponent({ root, j, file }): void { }); } catch (error) { console.error( - red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Amount component.`), + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "size" prop in "Amount" component.`, + ), + `\n${red(error.stack)}\n`, + ); + } + + // -> + try { + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Amount', 'CardHeaderAmount'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: (name) => name === 'intent', + }, + }) + .replaceWith((path) => { + const { node } = path; + + node.name.name = 'color'; + node.value.value = `feedback.text.${node.value.value}.intense`; + + return node; + }); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "intent" prop in "Amount" component.`, + ), `\n${red(error.stack)}\n`, ); } 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 f08e0b5f36e..576e7973b70 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 @@ -173,10 +173,8 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { 'ChipGroup', 'Indicator', 'ProgressBar', - 'Amount', 'CardHeaderBadge', 'CardHeaderCounter', - 'CardHeaderAmount', ].includes(name), }, }, diff --git a/packages/blade/src/components/ActionList/docs/propsTable.tsx b/packages/blade/src/components/ActionList/docs/propsTable.tsx index ec8717e1360..903810fb716 100644 --- a/packages/blade/src/components/ActionList/docs/propsTable.tsx +++ b/packages/blade/src/components/ActionList/docs/propsTable.tsx @@ -13,7 +13,6 @@ const actionListPropsTables: { ActionListSection: PropsTableType; } = { ActionList: { - surfaceLevel: '2 | 3', children: ( <> <ActionListItem[] /> |{' '} diff --git a/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts b/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts index 62009af1e07..705156fe510 100644 --- a/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts +++ b/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts @@ -1,24 +1,19 @@ import type { CSSObject } from 'styled-components'; -import type { ActionListProps } from '../ActionList'; import type { Theme } from '~components/BladeProvider'; import { makeSize } from '~utils/makeSize'; import { castWebType, isReactNative } from '~utils'; type StyledActionListProps = { - surfaceLevel: ActionListProps['surfaceLevel']; id?: string; isInBottomSheet?: boolean; }; const getBaseActionListStyles = (props: StyledActionListProps & { theme: Theme }): CSSObject => { - const { theme, surfaceLevel = 2, isInBottomSheet } = props; - - const backgroundColor = theme.colors.surface.background[`level${surfaceLevel}`].lowContrast; + const { theme, isInBottomSheet } = props; return { - backgroundColor, borderWidth: isInBottomSheet ? undefined : theme.border.width.thin, - borderColor: theme.colors.surface.border.normal.lowContrast, + borderColor: theme.colors.surface.border.gray.normal, borderStyle: isInBottomSheet ? undefined : 'solid', borderRadius: makeSize(theme.border.radius.medium), boxShadow: diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index f78db2a20fa..4cb5b7b5759 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -8,7 +8,6 @@ import { subtleFontSizes, amountLineHeights, } from './amountTokens'; -import type { FeedbackColors } from '~tokens/theme/theme'; import type { BaseTextProps } from '~components/Typography/BaseText/types'; import BaseBox from '~components/Box/BaseBox'; import type { TestID } from '~utils/types'; @@ -34,7 +33,7 @@ type AmountCommonProps = { * * @default undefined */ - color?: Exclude; + color?: BaseTextProps['color']; /** * Indicates what the suffix of amount should be * @@ -74,7 +73,7 @@ const getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorPro amountValueColor: 'surface.text.gray.normal', }; if (!color) return props; - props.amountValueColor = `feedback.text.${color}.intense`; + props.amountValueColor = color; return props; }; diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index 580d0c1a824..a288d7abbb5 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -75,13 +75,15 @@ describe('', () => { }); it('should render positive intent Amount ', () => { - const { toJSON } = renderWithTheme(); + const { toJSON } = renderWithTheme( + , + ); expect(toJSON()).toMatchSnapshot(); }); it('should render information intent Amount ', () => { const { toJSON } = renderWithTheme( - , + , ); expect(toJSON()).toMatchSnapshot(); }); diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index d1a86b1d688..0b54bc9243e 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -91,13 +91,15 @@ describe('', () => { }); it('should render positive intent Amount ', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme( + , + ); expect(container).toMatchSnapshot(); }); it('should render negative intent Amount ', () => { const { container } = renderWithTheme( - , + , ); expect(container).toMatchSnapshot(); }); diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts index 82c9e420d45..e9331fdf3b4 100644 --- a/packages/blade/src/tokens/theme/theme.ts +++ b/packages/blade/src/tokens/theme/theme.ts @@ -10,7 +10,6 @@ import type { export type ColorSchemeNames = 'dark' | 'light'; export type ColorSchemeNamesInput = ColorSchemeNames | 'system'; -export type SurfaceLevels = 1 | 2 | 3; export type ColorSchemeModes = 'onDark' | 'onLight'; diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index 084a9d86386..b19cf622848 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -127,8 +127,17 @@ Only use this if you're unable to run the codemod described above. - **The `intent` prop has been removed in favor of the `color` prop.** ```diff - - - + + - + + + + - + + + + - + + + + - + + ``` ### Alert