feat: add style props

razorpay · Feb 2, 2025 · fdb74de · fdb74de
1 parent b6c16a1
commit fdb74de
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx b/packages/blade/src/components/ChatBubble/ChatBubble.stories.tsx
@@ -17,11 +17,11 @@ const Template = (args) => (
     <ChatBubble
       senderType="other"
       leading={<RayIcon size="xlarge" color="surface.background.sea.intense" />}
-      style={{ alignSelf: 'flex-start' }}
+      alignSelf="flex-start"
     >
       Hi, my name is Ray. How can I help you today?
     </ChatBubble>
-    <ChatBubble senderType="self" style={{ alignSelf: 'flex-end' }}>
+    <ChatBubble senderType="self" alignSelf="flex-end">
       Can you help me with payment intregation?
     </ChatBubble>
     <ChatBubble
@@ -45,7 +45,7 @@ const Template = (args) => (
     </ChatBubble>
     <ChatBubble
       senderType="self"
-      style={{ alignSelf: 'flex-end' }}
+      alignSelf="flex-end"
       validationState="error"
       errorText="Unable to send the message"
       messageType="last"

diff --git a/packages/blade/src/components/ChatBubble/Rotate.web.tsx b/packages/blade/src/components/ChatBubble/Rotate.web.tsx
@@ -20,7 +20,6 @@ const Rotate = ({
         style={{
           display: 'flex',
         }}
-        // use animate prop to control the animation
         animate={{ rotate: animate ? 90 : 0 }}
         transition={{
           duration: msToSeconds(theme.motion.duration.gentle),

diff --git a/packages/blade/src/components/ChatBubble/types.ts b/packages/blade/src/components/ChatBubble/types.ts
@@ -1,5 +1,8 @@
 import type React from 'react';
+import type { BaseBoxProps } from '~components/Box/BaseBox';
 import type { StringChildrenType } from '~utils/types';
+
+type ChatBubbleStyleProps = BaseBoxProps;
 type ChatBubbleProps = {
   messageType?: 'last' | 'default';
   senderType?: 'self' | 'other';
@@ -11,8 +14,7 @@ type ChatBubbleProps = {
   children?: React.ReactNode | StringChildrenType;
   leading?: React.ReactNode;
   loadingText?: string;
-};
-
+} & ChatBubbleStyleProps;
 type DefaultMessageBubbleProps = {
   children: React.ReactNode | string;
   leading?: React.ReactNode;