Merge pull request #3878 from amutsch/fix/amutsch/3876/DialogTitleFixes

fix(base,example): Dialog.title not honoring theme in dark mode.
react-native-elements · Jan 21, 2024 · c87b7ec · c87b7ec
2 parents a3e52ad + f44d609
commit c87b7ec
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/example/src/views/dialogs.tsx b/example/src/views/dialogs.tsx
@@ -1,6 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Dialog, CheckBox, ListItem, Avatar } from '@rneui/themed';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+  Button,
+  Dialog,
+  CheckBox,
+  ListItem,
+  Avatar,
+  Text,
+} from '@rneui/themed';
+import { View, StyleSheet } from 'react-native';
 import { Header } from '../components/header';
 
 type DialogComponentProps = {};
@@ -118,7 +125,7 @@ const Dialogs: React.FunctionComponent<DialogComponentProps> = () => {
           <CheckBox
             key={i}
             title={l}
-            containerStyle={{ backgroundColor: 'white', borderWidth: 0 }}
+            containerStyle={{ borderWidth: 0 }}
             checkedIcon="dot-circle-o"
             uncheckedIcon="circle-o"
             checked={checked === i + 1}

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "lerna run build",
     "build:docs-api": "yarn workspace @rneui/doc-gen build",
-    "clean-build": "rm -rf packages/*/dist",
+    "clean-build": "rimraf packages/*/dist",
     "clean-install": "rimraf node_modules && yarn",
     "docs-build-api": "yarn workspace @rneui/doc-gen build",
     "docs-build": "yarn docs-build-api && cd website && yarn run build",

diff --git a/packages/base/src/Dialog/Dialog.Title.tsx b/packages/base/src/Dialog/Dialog.Title.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Text, StyleSheet, TextStyle, StyleProp, Platform } from 'react-native';
-import { RneFunctionComponent } from '../helpers';
-import { TextProps } from '../Text';
+import { StyleSheet, TextStyle, StyleProp, Platform } from 'react-native';
+import { defaultTheme, RneFunctionComponent } from '../helpers';
+import { TextProps, Text } from '../Text';
 
 export interface DialogTitleProps {
   /** Add Dialog title. */
@@ -19,11 +19,13 @@ export const DialogTitle: RneFunctionComponent<DialogTitleProps> = ({
   title,
   titleStyle,
   titleProps,
+  theme = defaultTheme,
 }) => {
   return (
     <Text
       style={StyleSheet.flatten([styles.title, titleStyle])}
       testID="Dialog__Title"
+      theme={theme}
       {...titleProps}
     >
       {title}

diff --git a/packages/themed/src/Dialog/__tests__/Dialog.test.tsx b/packages/themed/src/Dialog/__tests__/Dialog.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Dialog from '..';
-import { CreateThemeOptions } from '../..';
+import { CreateThemeOptions, darkColors, lightColors } from '../..';
 import { renderWithWrapper } from '../../../.ci/testHelper';
 
 describe('Dialog Component', () => {
@@ -19,4 +19,24 @@ describe('Dialog Component', () => {
     );
     expect(wrapper.props.transparent).toBeFalsy();
   });
+  it.each`
+    mode       | expectedColor
+    ${'dark'}  | ${darkColors.black}
+    ${'light'} | ${lightColors.black}
+  `('should apply $mode theme mode to Dialog', ({ mode, expectedColor }) => {
+    const theme: Partial<CreateThemeOptions> = {
+      lightColors,
+      darkColors,
+      mode,
+    };
+    const { getByText, toJSON } = renderWithWrapper(
+      <Dialog isVisible={true}>
+        <Dialog.Title title={'Unit Test Title'} />
+      </Dialog>,
+      'Dialog__Title',
+      theme
+    );
+    const textComponent = getByText('Unit Test Title');
+    expect(textComponent.props.style.color).toEqual(expectedColor);
+  });
 });