chore: udpate tabel codemod

packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts

@@ -96,7 +96,7 @@ it('should migrate the ActionList component', async () => {
   expect(result).toMatchInlineSnapshot(`
     "const App = () => (
             <>
-                <Table {...args} data={data} backgroundColor="surface.background.gray.intense">
+                <Table {...args} data={data}>
                     {(tableData) => (
                         <>
                             <TableHeader>
@@ -123,7 +123,7 @@ it('should migrate the ActionList component', async () => {
                     )}
                 </Table>
 
-                <Table {...args} data={data} backgroundColor="surface.background.gray.moderate">
+                <Table {...args} data={data}>
                     {(tableData) => (
                         <>
                             <TableHeader>
@@ -150,7 +150,7 @@ it('should migrate the ActionList component', async () => {
                     )}
                 </Table>
 
-                <Table {...args} data={data} backgroundColor="surface.background.subtle">
+                <Table {...args} data={data}>
                     {(tableData) => (
                         <>
                             <TableHeader>

packages/blade/codemods/brand-refresh/transformers/index.ts

@@ -1,11 +1,11 @@
 import type { Transform } from 'jscodeshift';
 import migrateAmountComponent from './migrate-amount';
 import migrateDividerComponent from './migrate-divider';
-import migrateCardAndTableComponent from './migrate-card-and-table';
+import migrateCardComponent from './migrate-card';
 import migrateBadgeComponent from './migrate-badge';
 import migrateContrastIntentAndColorProps from './migrate-contrast-intent-color-props';
 import migrateTypographyComponents from './migrate-typography';
-import migrateActionListComponent from './migrate-actionlist';
+import migrateActionListAndTable from './migrate-actionlist-and-table';
 import { red, isExpression } from './utils';
 // eslint-disable-next-line import/extensions
 import colorTokensMapping from './colorTokensMapping.json';
@@ -109,7 +109,7 @@
 
         return node;
       });
   } catch (error) {
     console.error(
       red(
         `⛔️ ${file.path}: Oops! Ran into an issue while updating the themeTokens prop in BladeProvider.`,
@@ -173,7 +173,7 @@
 
         return node;
       });
   } catch (error) {
     console.error(
       red(
         `⛔️ ${file.path}: Oops! Ran into an issue while updating the color token value based on the context.`,
@@ -185,10 +185,10 @@
   migrateTypographyComponents({ root, j, file });
   migrateContrastIntentAndColorProps({ root, j, file });
   migrateBadgeComponent({ root, j, file });
-  migrateCardAndTableComponent({ root, j, file });
+  migrateCardComponent({ root, j, file });
   migrateAmountComponent({ root, j, file });
   migrateDividerComponent({ root, j, file });
-  migrateActionListComponent({ root, j, file });
+  migrateActionListAndTable({ root, j, file });
   migrateDropdownComponent({ root, j, file });
 
   // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme"
@@ -209,7 +209,7 @@
 
         return path.node;
       });
   } catch (error) {
     console.error(
       red(
         `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme".`,

packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts → packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts

@@ -1,6 +1,6 @@
 import { red } from './utils';
 
-function migrateActionListComponent({ root, j, file }): void {
+function migrateActionListAndTable({ root, j, file }): void {
   // ActionList & Table components: Remove the `surfaceLevel` prop
   // <ActionList surfaceLevel={2}> -> <ActionList >
   // <Table surfaceLevel={2}> -> <Table >
@@ -9,7 +9,7 @@
       .find(j.JSXElement, {
         openingElement: {
           name: {
-            name: 'ActionList',
+            name: (name) => ['ActionList', 'Table'].includes(name),
           },
         },
       })
@@ -19,7 +19,7 @@
         },
       })
       .remove();
   } catch (error) {
     console.error(
       red(
         `⛔️ ${file.path}: Oops! Ran into an issue while removing the "surfaceLevel" prop from "ActionList"/"Table".`,
@@ -29,4 +29,4 @@
   }
 }
 
-export default migrateActionListComponent;
+export default migrateActionListAndTable;

packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts → packages/blade/codemods/brand-refresh/transformers/migrate-card.ts

@@ -1,15 +1,14 @@
 import { red } from './utils';
 
-// Card & Table components Migration
+// Card components Migration
 // <Card surfaceLevel={2|3} > -> <Card backgroundColor=”surface.background.gray.moderate”|surface.background.gray.intense>
-// <Table surfaceLevel={2|3} > -> <Table backgroundColor=”surface.background.gray.subtle|surface.background.gray.moderate|surface.background.gray.intense”>
 function migrateCardAndTable({ root, j, file }): void {
   try {
     root
       .find(j.JSXElement, {
         openingElement: {
           name: {
-            name: (name) => ['Card', 'Table'].includes(name),
+            name: 'Card',
           },
         },
       })
@@ -33,7 +32,7 @@
 
         return node;
       });
   } catch (error) {
     console.error(
       red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Card component.`),
       `\n${red(error.stack)}\n`,

packages/blade/upgrade-v11.md

@@ -460,15 +460,9 @@ Only use this if you're unable to run the codemod described above.
 
 ### Table
 
-- **The `surfaceLevel` prop has been removed in favor of the `backgroundColor` prop.**
+- **The `surfaceLevel` prop has been removed without replacement.**
 
   ```diff
-  - <Table data={tableData} surfaceLevel={1}>
-  + <Table backgroundColor="surface.background.gray.subtle">
-
-  - <Table data={tableData} surfaceLevel={2}>
-  + <Table backgroundColor="surface.background.gray.moderate">
-
-  - <Table data={tableData} surfaceLevel={3}>
-  + <Table backgroundColor="surface.background.gray.intense">
+  - <Table data={tableData} surfaceLevel={1/2/3} >
+  + <Table data={tableData} >
   ```