fix: add support for styling dialog action buttons (#3760)

Author: lukewalczak

src/components/Dialog/Dialog.tsx

@@ -39,6 +39,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const DIALOG_ELEVATION: number = 24;
@@ -95,6 +99,7 @@ const Dialog = ({
   visible = false,
   style,
   theme: themeOverrides,
+  testID,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { isV3, dark, mode, colors, roundness } = theme;
@@ -122,6 +127,7 @@ const Dialog = ({
         style,
       ]}
       theme={theme}
+      testID={testID}
     >
       {React.Children.toArray(children)
         .filter((child) => child != null && typeof child !== 'boolean')

src/components/Dialog/DialogActions.tsx

@@ -65,9 +65,12 @@ const DialogActions = (props: Props) => {
           ? React.cloneElement(child as React.ReactElement<any>, {
               compact: true,
               uppercase: !isV3,
-              style: isV3 && {
-                paddingRight: i + 1 === actionsLength ? 0 : 8,
-              },
+              style: [
+                isV3 && {
+                  marginRight: i + 1 === actionsLength ? 0 : 8,
+                },
+                child.props.style,
+              ],
             })
           : child
       )}

src/components/__tests__/Dialog.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import Dialog from '../../components/Dialog/Dialog';
+import Button from '../Button/Button';
+
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
+}));
+
+describe('Dialog', () => {
+  it('should render passed children', () => {
+    const { getByTestId } = render(
+      <Dialog visible testID="dialog">
+        <Text>This is simple dialog</Text>
+      </Dialog>
+    );
+
+    expect(getByTestId('dialog')).toHaveTextContent('This is simple dialog');
+  });
+
+  it('should call onDismiss when dismissable', () => {
+    const onDismiss = jest.fn();
+    const { getByTestId } = render(
+      <Dialog visible onDismiss={onDismiss} dismissable testID="dialog">
+        <Text>This is simple dialog</Text>
+      </Dialog>
+    );
+
+    fireEvent.press(getByTestId('dialog-backdrop'));
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('should apply top margin to the first child if the dialog is V3', () => {
+    const { getByTestId } = render(
+      <Dialog visible={true}>
+        <Dialog.Title testID="dialog-content">
+          <Text>Test Dialog Content</Text>
+        </Dialog.Title>
+      </Dialog>
+    );
+
+    expect(getByTestId('dialog-content')).toHaveStyle({
+      marginTop: 24,
+    });
+  });
+});
+
+describe('DialogActions', () => {
+  it('should render passed children', () => {
+    const { getByTestId } = render(
+      <Dialog.Actions>
+        <Button testID="button-cancel">Cancel</Button>
+        <Button testID="button-ok">Ok</Button>
+      </Dialog.Actions>
+    );
+
+    expect(getByTestId('button-cancel')).toBeDefined();
+    expect(getByTestId('button-ok')).toBeDefined();
+  });
+
+  it('should apply default styles', () => {
+    const { getByTestId } = render(
+      <Dialog.Actions testID="dialog-actions">
+        <Button>Cancel</Button>
+        <Button>Ok</Button>
+      </Dialog.Actions>
+    );
+
+    const dialogActionsContainer = getByTestId('dialog-actions');
+    const dialogActionButtons = dialogActionsContainer.children;
+
+    expect(dialogActionsContainer).toHaveStyle({
+      paddingBottom: 24,
+      paddingHorizontal: 24,
+    });
+    expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 });
+    expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 });
+  });
+
+  it('should apply custom styles', () => {
+    const { getByTestId } = render(
+      <Dialog.Actions testID="dialog-actions">
+        <Button style={styles.spacing}>Cancel</Button>
+        <Button style={styles.noSpacing}>Ok</Button>
+      </Dialog.Actions>
+    );
+
+    const dialogActionsContainer = getByTestId('dialog-actions');
+    const dialogActionButtons = dialogActionsContainer.children;
+
+    expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 });
+    expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 });
+  });
+});
+
+const styles = StyleSheet.create({
+  spacing: {
+    margin: 10,
+  },
+  noSpacing: {
+    margin: 0,
+  },
+});