fix: custom Button styles nested in Card.Actions (#3651)

callstack · Feb 6, 2023 · a3eb45c · a3eb45c
1 parent e4c2e9d
commit a3eb45c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
@@ -104,6 +104,20 @@ const CardExample = () => {
             </TextComponent>
           </Card.Content>
         </Card>
+        <Card style={styles.card} mode={selectedMode}>
+          <Card.Cover
+            source={require('../../assets/images/restaurant-1.jpg')}
+          />
+          <Card.Title title="Custom Button styles" />
+          <Card.Actions>
+            <Button style={styles.button} onPress={() => {}}>
+              Share
+            </Button>
+            <Button style={styles.button} onPress={() => {}}>
+              Explore
+            </Button>
+          </Card.Actions>
+        </Card>
         <Card style={styles.card} mode={selectedMode}>
           <Card.Cover
             source={require('../../assets/images/strawberries.jpg')}
@@ -201,6 +215,9 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 8,
   },
+  button: {
+    borderRadius: 12,
+  },
 });
 
 export default CardExample;
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
@@ -56,7 +56,7 @@ const CardActions = (props: Props) => {
               mode:
                 child.props.mode ||
                 (isV3 && (i === 0 ? 'outlined' : 'contained')),
-              style: isV3 && styles.button,
+              style: [isV3 && styles.button, child.props.style],
             })
           : child;
       })}

diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
@@ -89,6 +89,26 @@ describe('CardActions', () => {
       'contained'
     );
   });
+
+  it('renders button with custom styles', () => {
+    const { getByTestId } = render(
+      <Card>
+        <Card.Actions>
+          <Button
+            testID="card-actions-button"
+            mode="contained"
+            style={styles.customBorderRadius}
+          >
+            Agree
+          </Button>
+        </Card.Actions>
+      </Card>
+    );
+
+    expect(getByTestId('card-actions-button')).toHaveStyle({
+      borderRadius: 32,
+    });
+  });
 });
 
 describe('getCardColors - background color', () => {