feat: add content style prop to the Card (#3657)

callstack · Feb 6, 2023 · 257f640 · 257f640
1 parent 787ba37
commit 257f640
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -67,7 +67,11 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Changes Card shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Style of card's inner content.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   /**
    * @optional
    */
@@ -133,6 +137,7 @@ const Card = ({
   mode: cardMode = 'elevated',
   children,
   style,
+  contentStyle,
   theme: themeOverrides,
   testID = 'card',
   accessible,
@@ -275,7 +280,7 @@ const Card = ({
         testID={testID}
         accessible={accessible}
       >
-        <View style={styles.innerContainer}>
+        <View style={[styles.innerContainer, contentStyle]}>
           {React.Children.map(children, (child, index) =>
             React.isValidElement(child)
               ? React.cloneElement(child as React.ReactElement<any>, {

diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { Animated, StyleSheet, Text } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -16,6 +16,9 @@ const styles = StyleSheet.create({
   customBorderRadius: {
     borderRadius: 32,
   },
+  contentStyle: {
+    flexDirection: 'column-reverse',
+  },
 });
 
 describe('Card', () => {
@@ -73,6 +76,16 @@ describe('Card', () => {
       backgroundColor: '#0000FF',
     });
   });
+
+  it('renders with a content style', () => {
+    const { getByTestId } = render(
+      <Card contentStyle={styles.contentStyle}>
+        <Text>Content</Text>
+      </Card>
+    );
+
+    expect(getByTestId('card')).toHaveStyle(styles.contentStyle);
+  });
 });
 
 describe('CardActions', () => {

diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -88,9 +88,12 @@ exports[`Card renders an outlined card 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "flexShrink": 1,
-          }
+          Array [
+            Object {
+              "flexShrink": 1,
+            },
+            undefined,
+          ]
         }
         testID="card"
       />