feat: update the color prop for Amount (#1980)

razorpay · Jan 18, 2024 · 1a1e72b · 1a1e72b
1 parent c96858b
commit 1a1e72b
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 27 deletions.
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
@@ -9,6 +9,12 @@ it('should migrate the Amount component', async () => {
         <>
           <Amount value={1234} intent="positive" />
 
+          <Amount value={1234} intent="negative" />
+
+          <Amount value={1234} intent="information" />
+
+          <Amount value={1234} intent="notice" />
+
           <Amount size="body-small" value={123456.789} />
 
           <Amount size="body-small-bold" value={123456.789} />
@@ -27,6 +33,14 @@ it('should migrate the Amount component', async () => {
  
           <Amount size="title-small" value={123456.789} />
 
+          <CardHeaderAmount value={1234} intent="positive" />
+
+          <CardHeaderAmount value={1234} intent="negative" />
+
+          <CardHeaderAmount value={1234} intent="information" />
+
+          <CardHeaderAmount value={1234} intent="notice" />
+
           <CardHeaderAmount size="title-medium" value={123456.789} />
 
           <CardHeaderAmount size="body-small" value={123456.789} />
@@ -57,7 +71,13 @@ it('should migrate the Amount component', async () => {
   expect(result).toMatchInlineSnapshot(`
     "const App = () => (
             <>
-              <Amount value={1234} color="positive" />
+              <Amount value={1234} color="feedback.text.positive.intense" />
+
+              <Amount value={1234} color="feedback.text.negative.intense" />
+
+              <Amount value={1234} color="feedback.text.information.intense" />
+
+              <Amount value={1234} color="feedback.text.notice.intense" />
 
               <Amount value={123456.789} type="body" size="small" />
 
@@ -77,6 +97,14 @@ it('should migrate the Amount component', async () => {
      
               <Amount value={123456.789} type="heading" size="large" />
 
+              <CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
+
+              <CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
+
+              <CardHeaderAmount value={1234} color="feedback.text.information.intense" />
+
+              <CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
+
               <CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
 
               <CardHeaderAmount value={123456.789} type="body" size="small" />

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
@@ -76,7 +76,9 @@ it('should migrate the Card component', async () => {
                         prefix={<CardHeaderIcon icon={InfoIcon} />}
                         suffix={<CardHeaderCounter intent="positive" value={12} />}
                     />
-                    <CardHeaderTrailing visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />} />
+                    <CardHeaderTrailing
+                        visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />}
+                    />
                 </CardHeader>
                 <CardBody>
                     <Text> Hello World</Text>
@@ -160,7 +162,13 @@ it('should migrate the Card component', async () => {
                             prefix={<CardHeaderIcon icon={InfoIcon} />}
                             suffix={<CardHeaderCounter value={12} color="positive" />}
                         />
-                        <CardHeaderTrailing visual={<CardHeaderAmount value={123} color="positive" type="heading" size="large" />} />
+                        <CardHeaderTrailing
+                            visual={<CardHeaderAmount
+                                value={123}
+                                color="feedback.text.positive.intense"
+                                type="heading"
+                                size="large" />}
+                        />
                     </CardHeader>
                     <CardBody>
                         <Text> Hello World</Text>

diff --git a/...ade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/...ade/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 () => {
               <Chip value="no" color="primary"> No </Chip>
             </ChipGroup>
 
-            <Amount value={1234} color="positive" />
+            <Amount color="feedback.text.positive.intense" value={1234} />
 
-            <CardHeaderAmount value={1234} color="positive" />
+            <CardHeaderAmount color="feedback.text.positive.intense" value={1234} />
 
             <ProgressBar label="Label" size="medium" value={10} color="positive" />
             <ProgressBar label="Label" size="medium" value={10} color="positive" />

diff --git 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 size=”heading-small-bold”> -> <Amount type=”heading” size=”small” weight=”semibold”>
+// Amount component: changes to intent & size props
 function migrateAmountComponent({ root, j, file }): void {
   try {
+    // <Amount size=”heading-small-bold”> -> <Amount type=”heading” size=”small” weight=”semibold”>
     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`,
+    );
+  }
+
+  // <Amount intent=”positive”> -> <Amount color="feedback.text.positive.intense">
+  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
@@ -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
@@ -13,7 +13,6 @@ const actionListPropsTables: {
   ActionListSection: PropsTableType<ActionListSectionProps>;
 } = {
   ActionList: {
-    surfaceLevel: '2 | 3',
     children: (
       <>
         <ScrollLink href="#actionlistitem">&lt;ActionListItem[] /&gt;</ScrollLink> |{' '}

diff --git 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
@@ -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<FeedbackColors, 'neutral'>;
+  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
@@ -75,13 +75,15 @@ describe('<Amount />', () => {
   });
 
   it('should render positive intent Amount ', () => {
-    const { toJSON } = renderWithTheme(<Amount color="positive" value={1000} />);
+    const { toJSON } = renderWithTheme(
+      <Amount color="feedback.text.positive.intense" value={1000} />,
+    );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render information intent Amount ', () => {
     const { toJSON } = renderWithTheme(
-      <Amount isAffixSubtle={false} color="information" value={1000} />,
+      <Amount isAffixSubtle={false} color="feedback.text.information.intense" value={1000} />,
     );
     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
@@ -91,13 +91,15 @@ describe('<Amount />', () => {
   });
 
   it('should render positive intent Amount ', () => {
-    const { container } = renderWithTheme(<Amount color="positive" value={1000} />);
+    const { container } = renderWithTheme(
+      <Amount color="feedback.text.positive.intense" value={1000} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
   it('should render negative intent Amount ', () => {
     const { container } = renderWithTheme(
-      <Amount isAffixSubtle={false} color="negative" value={1000} />,
+      <Amount isAffixSubtle={false} color="feedback.text.negative.intense" value={1000} />,
     );
     expect(container).toMatchSnapshot();
   });

diff --git 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
@@ -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
-  - <Amount intent="positive|negative|information|notice" value={123456.789} />
-  + <Amount color="positive|negative|information|notice" value={123456.789} />
+  - <Amount intent="positive" value={123456.789} />
+  + <Amount color="feedback.text.positive.intense" value={123456.789} />
+
+  - <Amount intent="negative" value={123456.789} />
+  + <Amount color="feedback.text.negative.intense" value={123456.789} />
+
+  - <Amount intent="information" value={123456.789} />
+  + <Amount color="feedback.text.information.intense" value={123456.789} />
+
+  - <Amount intent="notice" value={123456.789} />
+  + <Amount color="feedback.text.notice.intense" value={123456.789} />
   ```
 
 ### Alert