fix(Box): remove js check that allows brand token for Box backgroundC…

…olor (#2457) * fix: remove js check that allows brand token for Box backgroundColor * Create mean-guests-reflect.md * update test * fix: update snapshot --------- Co-authored-by: saurabhdaware <[email protected]>
razorpay · Feb 11, 2025 · 9dda151 · 9dda151
1 parent df06f31
commit 9dda151
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/.changeset/mean-guests-reflect.md b/.changeset/mean-guests-reflect.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: remove js check that allows brand token for Box backgroundColor
diff --git a/packages/blade/src/components/Box/Box.tsx b/packages/blade/src/components/Box/Box.tsx
@@ -13,12 +13,11 @@ const validateBackgroundString = (stringBackgroundColorValue: string): void => {
   if (__DEV__) {
     if (
       !stringBackgroundColorValue.startsWith('surface.background') &&
-      !stringBackgroundColorValue.startsWith('brand.') &&
       !stringBackgroundColorValue.startsWith('overlay.') &&
       stringBackgroundColorValue !== 'transparent'
     ) {
       throwBladeError({
-        message: `Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`${stringBackgroundColorValue}\` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,
+        message: `Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`${stringBackgroundColorValue}\` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,
         moduleName: 'Box',
       });
     }

diff --git a/packages/blade/src/components/Box/__tests__/Box.native.test.tsx b/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
@@ -61,7 +61,7 @@ describe('<Box />', () => {
       );
     } catch (err: unknown) {
       expect(err).toMatchInlineSnapshot(`
-        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`red\` instead.
+        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`red\` instead.
 
          Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨]
       `);

diff --git a/packages/blade/src/components/Box/__tests__/Box.web.test.tsx b/packages/blade/src/components/Box/__tests__/Box.web.test.tsx
@@ -71,7 +71,7 @@ describe('<Box />', () => {
       );
     } catch (err: unknown) {
       expect(err).toMatchInlineSnapshot(`
-        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, \`overlay.*\` and \`brand.*\` tokens with backgroundColor property but we received \`red\` instead.
+        [Error: [Blade: Box]: Oops! Currently you can only use \`transparent\`, \`surface.background.*\`, and \`overlay.*\` tokens with backgroundColor property but we received \`red\` instead.
 
          Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨]
       `);