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