From e5dbcb670b9658db43b56b9d24c922034787c8a4 Mon Sep 17 00:00:00 2001
From: Luke Walczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 23 May 2022 22:40:43 +0200
Subject: [PATCH] feat: adjust Dialog components, introduce DialogIcon (#3079)

---
 example/src/Examples/DialogExample.tsx        | 19 +++-
 .../Examples/Dialogs/DialogTextComponent.tsx  | 34 +++++++
 .../Dialogs/DialogWithCustomColors.tsx        | 62 +++++++-----
 .../src/Examples/Dialogs/DialogWithIcon.tsx   | 40 ++++++++
 .../Dialogs/DialogWithLoadingIndicator.tsx    | 46 +++++----
 .../Examples/Dialogs/DialogWithLongText.tsx   |  9 +-
 .../Examples/Dialogs/DialogWithRadioBtns.tsx  | 18 +++-
 .../Examples/Dialogs/UndismissableDialog.tsx  | 15 +--
 example/src/Examples/Dialogs/index.tsx        |  1 +
 src/components/Dialog/Dialog.tsx              | 97 ++++++++++++-------
 src/components/Dialog/DialogActions.tsx       | 43 +++++---
 src/components/Dialog/DialogIcon.tsx          | 88 +++++++++++++++++
 src/components/Dialog/DialogScrollArea.tsx    | 35 +++++--
 src/components/Dialog/DialogTitle.tsx         | 39 +++++---
 src/components/Modal.tsx                      |  4 +-
 15 files changed, 418 insertions(+), 132 deletions(-)
 create mode 100644 example/src/Examples/Dialogs/DialogTextComponent.tsx
 create mode 100644 example/src/Examples/Dialogs/DialogWithIcon.tsx
 create mode 100644 src/components/Dialog/DialogIcon.tsx

diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx
index 0d043ba470..add3a59427 100644
--- a/example/src/Examples/DialogExample.tsx
+++ b/example/src/Examples/DialogExample.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-paper';
+import { Button, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import {
   DialogWithCustomColors,
@@ -8,6 +8,7 @@ import {
   DialogWithLongText,
   DialogWithRadioBtns,
   UndismissableDialog,
+  DialogWithIcon,
 } from './Dialogs';
 
 type ButtonVisibility = {
@@ -16,6 +17,7 @@ type ButtonVisibility = {
 
 const DialogExample = () => {
   const [visible, setVisible] = React.useState<ButtonVisibility>({});
+  const { isV3 } = useTheme();
 
   const _toggleDialog = (name: string) => () =>
     setVisible({ ...visible, [name]: !visible[name] });
@@ -59,6 +61,15 @@ const DialogExample = () => {
       >
         Custom colors
       </Button>
+      {isV3 && (
+        <Button
+          mode="outlined"
+          onPress={_toggleDialog('dialog6')}
+          style={styles.button}
+        >
+          With icon
+        </Button>
+      )}
       <DialogWithLongText
         visible={_getVisible('dialog1')}
         close={_toggleDialog('dialog1')}
@@ -79,6 +90,12 @@ const DialogExample = () => {
         visible={_getVisible('dialog5')}
         close={_toggleDialog('dialog5')}
       />
+      {isV3 && (
+        <DialogWithIcon
+          visible={_getVisible('dialog6')}
+          close={_toggleDialog('dialog6')}
+        />
+      )}
     </ScreenWrapper>
   );
 };
diff --git a/example/src/Examples/Dialogs/DialogTextComponent.tsx b/example/src/Examples/Dialogs/DialogTextComponent.tsx
new file mode 100644
index 0000000000..0104c0041a
--- /dev/null
+++ b/example/src/Examples/Dialogs/DialogTextComponent.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import {
+  Paragraph,
+  Text,
+  Text as NativeText,
+  useTheme,
+  Subheading,
+} from 'react-native-paper';
+import type { MD3TypescaleKey } from '../../../../src/types';
+
+type Props = React.ComponentProps<typeof NativeText> & {
+  isSubheading?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  variant?: keyof typeof MD3TypescaleKey;
+};
+
+export const TextComponent = ({ isSubheading = false, ...props }: Props) => {
+  const theme = useTheme();
+
+  if (theme.isV3) {
+    return (
+      <Text
+        variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
+        style={{ color: theme.colors.onSurfaceVariant }}
+        {...props}
+      />
+    );
+  } else if (isSubheading) {
+    return <Subheading {...props} />;
+  }
+  return <Paragraph {...props} />;
+};
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
index a433586196..ed4ef3a453 100644
--- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
+++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -1,38 +1,54 @@
 import * as React from 'react';
 import {
-  Paragraph,
   Button,
   Portal,
   Dialog,
   MD2Colors,
+  useTheme,
+  MD3Colors,
 } from 'react-native-paper';
-
+import { TextComponent } from './DialogTextComponent';
 const DialogWithCustomColors = ({
   visible,
   close,
 }: {
   visible: boolean;
   close: () => void;
-}) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      style={{ backgroundColor: MD2Colors.purple900 }}
-      visible={visible}
-    >
-      <Dialog.Title style={{ color: MD2Colors.white }}>Alert</Dialog.Title>
-      <Dialog.Content>
-        <Paragraph style={{ color: MD2Colors.white }}>
-          This is a dialog with custom colors
-        </Paragraph>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button color={MD2Colors.white} onPress={close}>
-          OK
-        </Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
-);
+}) => {
+  const { isV3 } = useTheme();
+
+  return (
+    <Portal>
+      <Dialog
+        onDismiss={close}
+        style={{
+          backgroundColor: isV3 ? MD3Colors.primary10 : MD2Colors.purple900,
+        }}
+        visible={visible}
+      >
+        <Dialog.Title
+          style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+        >
+          Alert
+        </Dialog.Title>
+        <Dialog.Content>
+          <TextComponent
+            style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+          >
+            This is a dialog with custom colors
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button
+            color={isV3 ? MD3Colors.primary95 : MD2Colors.white}
+            onPress={close}
+          >
+            Ok
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
 
 export default DialogWithCustomColors;
diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx
new file mode 100644
index 0000000000..18a35b8d13
--- /dev/null
+++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithIcon = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Icon icon="alert" />
+        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+        <Dialog.Content>
+          <TextComponent>
+            This is a dialog with new component called DialogIcon. When icon is
+            displayed you should center the header.
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={close} color={MD3Colors.error50}>
+            Disagree
+          </Button>
+          <Button onPress={close}>Agree</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+  },
+});
+export default DialogWithIcon;
diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
index e70b4153de..5f6bad323c 100644
--- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
+++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { ActivityIndicator, Platform, View, StyleSheet } from 'react-native';
-import { Paragraph, MD2Colors, Portal, Dialog } from 'react-native-paper';
+import {
+  MD2Colors,
+  Portal,
+  Dialog,
+  useTheme,
+  MD3Colors,
+} from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -10,23 +17,26 @@ const DialogWithLoadingIndicator = ({
 }: {
   visible: boolean;
   close: () => void;
-}) => (
-  <Portal>
-    <Dialog onDismiss={close} visible={visible}>
-      <Dialog.Title>Progress Dialog</Dialog.Title>
-      <Dialog.Content>
-        <View style={styles.flexing}>
-          <ActivityIndicator
-            color={MD2Colors.indigo500}
-            size={isIOS ? 'large' : 48}
-            style={styles.marginRight}
-          />
-          <Paragraph>Loading.....</Paragraph>
-        </View>
-      </Dialog.Content>
-    </Dialog>
-  </Portal>
-);
+}) => {
+  const { isV3 } = useTheme();
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Title>Progress Dialog</Dialog.Title>
+        <Dialog.Content>
+          <View style={styles.flexing}>
+            <ActivityIndicator
+              color={isV3 ? MD3Colors.tertiary30 : MD2Colors.indigo500}
+              size={isIOS ? 'large' : 48}
+              style={styles.marginRight}
+            />
+            <TextComponent>Loading.....</TextComponent>
+          </View>
+        </Dialog.Content>
+      </Dialog>
+    </Portal>
+  );
+};
 
 const styles = StyleSheet.create({
   flexing: {
diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx
index c6d9de0076..90313aee5c 100644
--- a/example/src/Examples/Dialogs/DialogWithLongText.tsx
+++ b/example/src/Examples/Dialogs/DialogWithLongText.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dimensions, ScrollView, StyleSheet } from 'react-native';
-import { Paragraph, Button, Portal, Dialog } from 'react-native-paper';
+import { Button, Portal, Dialog } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 const DialogWithLongText = ({
   visible,
@@ -18,7 +19,7 @@ const DialogWithLongText = ({
       <Dialog.Title>Alert</Dialog.Title>
       <Dialog.ScrollArea style={styles.smallPadding}>
         <ScrollView contentContainerStyle={styles.biggerPadding}>
-          <Paragraph>
+          <TextComponent>
             Material is the metaphor
             {'\n'}
             {'\n'}A material metaphor is the unifying theory of a rationalized
@@ -56,11 +57,11 @@ const DialogWithLongText = ({
             conveying how objects move, interact, and exist in space and in
             relation to each other. Realistic lighting shows seams, divides
             space, and indicates moving parts.
-          </Paragraph>
+          </TextComponent>
         </ScrollView>
       </Dialog.ScrollArea>
       <Dialog.Actions>
-        <Button onPress={close}>OK</Button>
+        <Button onPress={close}>Ok</Button>
       </Dialog.Actions>
     </Dialog>
   </Portal>
diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
index 4d982a3a1a..ecc2cd626f 100644
--- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
+++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ScrollView, View, StyleSheet } from 'react-native';
 import {
-  Subheading,
   Button,
   Portal,
   Dialog,
   RadioButton,
   TouchableRipple,
 } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
 type Props = {
   visible: boolean;
@@ -34,7 +34,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'normal' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 1</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 1
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('second')}>
@@ -45,7 +47,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'second' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 2</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 2
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('third')}>
@@ -56,7 +60,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'third' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 3</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 3
+                  </TextComponent>
                 </View>
               </TouchableRipple>
               <TouchableRipple onPress={() => setChecked('fourth')}>
@@ -67,7 +73,9 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
                       status={checked === 'fourth' ? 'checked' : 'unchecked'}
                     />
                   </View>
-                  <Subheading style={styles.text}>Option 4</Subheading>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 4
+                  </TextComponent>
                 </View>
               </TouchableRipple>
             </View>
diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
index 41b3e6ea34..30724c5485 100644
--- a/example/src/Examples/Dialogs/UndismissableDialog.tsx
+++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -1,13 +1,8 @@
 import * as React from 'react';
-import {
-  Paragraph,
-  Button,
-  Portal,
-  Dialog,
-  MD2Colors,
-} from 'react-native-paper';
+import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+import { TextComponent } from './DialogTextComponent';
 
-const DialogWithLongText = ({
+const UndismissableDialog = ({
   visible,
   close,
 }: {
@@ -18,7 +13,7 @@ const DialogWithLongText = ({
     <Dialog onDismiss={close} visible={visible} dismissable={false}>
       <Dialog.Title>Alert</Dialog.Title>
       <Dialog.Content>
-        <Paragraph>This is an undismissable dialog!!</Paragraph>
+        <TextComponent>This is an undismissable dialog!!</TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
         <Button color={MD2Colors.teal500} disabled>
@@ -30,4 +25,4 @@ const DialogWithLongText = ({
   </Portal>
 );
 
-export default DialogWithLongText;
+export default UndismissableDialog;
diff --git a/example/src/Examples/Dialogs/index.tsx b/example/src/Examples/Dialogs/index.tsx
index 118c23a9fd..c7df1b308c 100644
--- a/example/src/Examples/Dialogs/index.tsx
+++ b/example/src/Examples/Dialogs/index.tsx
@@ -3,3 +3,4 @@ export { default as DialogWithLoadingIndicator } from './DialogWithLoadingIndica
 export { default as DialogWithLongText } from './DialogWithLongText';
 export { default as DialogWithRadioBtns } from './DialogWithRadioBtns';
 export { default as UndismissableDialog } from './UndismissableDialog';
+export { default as DialogWithIcon } from './DialogWithIcon';
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 4c9bd65c08..2e83fd0f17 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -3,8 +3,8 @@ import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
 import Modal from '../Modal';
 import DialogContent from './DialogContent';
 import DialogActions from './DialogActions';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import DialogTitle, { DialogTitle as _DialogTitle } from './DialogTitle';
+import DialogIcon from './DialogIcon';
+import DialogTitle from './DialogTitle';
 import DialogScrollArea from './DialogScrollArea';
 import { withTheme } from '../../core/theming';
 import overlay from '../../styles/overlay';
@@ -88,41 +88,64 @@ const Dialog = ({
   visible = false,
   style,
   theme,
-}: Props) => (
-  <Modal
-    dismissable={dismissable}
-    onDismiss={onDismiss}
-    visible={visible}
-    contentContainerStyle={[
-      {
-        borderRadius: theme.roundness,
-        backgroundColor:
-          theme.dark && theme.mode === 'adaptive'
-            ? overlay(DIALOG_ELEVATION, theme.colors?.surface)
-            : theme.colors?.surface,
-      },
-      styles.container,
-      style,
-    ]}
-  >
-    {React.Children.toArray(children)
-      .filter((child) => child != null && typeof child !== 'boolean')
-      .map((child, i) => {
-        if (
-          i === 0 &&
-          React.isValidElement(child) &&
-          child.type === DialogContent
-        ) {
-          // Dialog content is the first item, so we add a top padding
-          return React.cloneElement(child, {
-            style: [{ paddingTop: 24 }, child.props.style],
-          });
-        }
+}: Props) => {
+  const { isV3, dark, mode, colors, roundness } = theme;
 
-        return child;
-      })}
-  </Modal>
-);
+  const borderRadius = (isV3 ? 7 : 1) * roundness;
+
+  const backgroundColorV2 =
+    dark && mode === 'adaptive'
+      ? overlay(DIALOG_ELEVATION, colors?.surface)
+      : colors?.surface;
+  const backgroundColor = isV3
+    ? theme.colors.elevation.level3
+    : backgroundColorV2;
+
+  return (
+    <Modal
+      dismissable={dismissable}
+      onDismiss={onDismiss}
+      visible={visible}
+      contentContainerStyle={[
+        {
+          borderRadius,
+          backgroundColor,
+        },
+        styles.container,
+        style,
+      ]}
+    >
+      {React.Children.toArray(children)
+        .filter((child) => child != null && typeof child !== 'boolean')
+        .map((child, i) => {
+          if (
+            isV3 &&
+            i === 0 &&
+            React.isValidElement(child) &&
+            child.type === DialogTitle
+          ) {
+            // Dialog title is the first item, so we add a top padding
+            return React.cloneElement(child, {
+              style: [{ marginTop: 24 }, child.props.style],
+            });
+          }
+
+          if (
+            i === 0 &&
+            React.isValidElement(child) &&
+            child.type === DialogContent
+          ) {
+            // Dialog content is the first item, so we add a top padding
+            return React.cloneElement(child, {
+              style: [{ paddingTop: 24 }, child.props.style],
+            });
+          }
+
+          return child;
+        })}
+    </Modal>
+  );
+};
 
 // @component ./DialogContent.tsx
 Dialog.Content = DialogContent;
@@ -132,6 +155,8 @@ Dialog.Actions = DialogActions;
 Dialog.Title = DialogTitle;
 // @component ./DialogScrollArea.tsx
 Dialog.ScrollArea = DialogScrollArea;
+// @component ./DialogIcon.tsx
+Dialog.Icon = DialogIcon;
 
 const styles = StyleSheet.create({
   container: {
diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx
index 9c5c704080..3953e58930 100644
--- a/src/components/Dialog/DialogActions.tsx
+++ b/src/components/Dialog/DialogActions.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../core/theming';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -43,17 +44,29 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
  * export default MyComponent;
  * ```
  */
-const DialogActions = (props: Props) => (
-  <View {...props} style={[styles.container, props.style]}>
-    {React.Children.map(props.children, (child) =>
-      React.isValidElement(child)
-        ? React.cloneElement(child, {
-            compact: true,
-          })
-        : child
-    )}
-  </View>
-);
+const DialogActions = (props: Props) => {
+  const { isV3 } = useTheme();
+  const actionsLength = React.Children.toArray(props.children).length;
+
+  return (
+    <View
+      {...props}
+      style={[isV3 ? styles.v3Container : styles.container, props.style]}
+    >
+      {React.Children.map(props.children, (child, i) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              compact: true,
+              uppercase: !isV3,
+              style: isV3 && {
+                paddingRight: i + 1 === actionsLength ? 0 : 8,
+              },
+            })
+          : child
+      )}
+    </View>
+  );
+};
 
 DialogActions.displayName = 'Dialog.Actions';
 
@@ -64,6 +77,14 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     padding: 8,
   },
+  v3Container: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 24,
+    paddingHorizontal: 24,
+  },
 });
 
 export default DialogActions;
diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx
new file mode 100644
index 0000000000..fdd10e64c1
--- /dev/null
+++ b/src/components/Dialog/DialogIcon.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../core/theming';
+import Icon, { IconSource } from '../Icon';
+
+type Props = {
+  /**
+   *  Custom color for action icon.
+   */
+  color?: string;
+  /**
+   * Name of the icon to show.
+   */
+  icon: IconSource;
+  /**
+   * Optional icon size.
+   */
+  size?: number;
+};
+
+/**
+ * @supported Available in v3.x with theme version 3
+ * A component to show an icon in a Dialog.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { StyleSheet } from 'react-native';
+ * import { Paragraph, Dialog, Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const hideDialog = () => setVisible(false);
+ *
+ *   return (
+ *     <Portal>
+ *       <Dialog visible={visible} onDismiss={hideDialog}>
+ *         <Dialog.Icon icon="alert" />
+ *         <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
+ *         <Dialog.Content>
+ *           <Paragraph>This is simple dialog</Paragraph>
+ *         </Dialog.Content>
+ *       </Dialog>
+ *     </Portal>
+ *   );
+ * };
+ *
+ * const styles = StyleSheet.create({
+ *   title: {
+ *     textAlign: 'center',
+ *   },
+ * })
+ *
+ * export default MyComponent;
+ * ```
+ */
+const DialogIcon = ({ size = 24, color, icon }: Props) => {
+  const theme = useTheme();
+
+  if (!theme.isV3) {
+    return null;
+  }
+
+  //@ts-ignore
+  const iconColor = color || theme.colors.secondary;
+
+  return (
+    <View style={styles.wrapper}>
+      <Icon source={icon} color={iconColor} size={size} />
+    </View>
+  );
+};
+
+DialogIcon.displayName = 'Dialog.Icon';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 24,
+  },
+});
+
+export default DialogIcon;
+
+// @component-docs ignore-next-line
+export { DialogIcon };
diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx
index 735854bf47..9518ce2f81 100644
--- a/src/components/Dialog/DialogScrollArea.tsx
+++ b/src/components/Dialog/DialogScrollArea.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+import { useTheme } from '../../core/theming';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -46,23 +47,41 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
  * export default MyComponent;
  * ```
  */
-const DialogScrollArea = (props: Props) => (
-  <View {...props} style={[styles.container, props.style]}>
-    {props.children}
-  </View>
-);
+const DialogScrollArea = (props: Props) => {
+  const theme = useTheme();
+  const borderStyles = {
+    borderColor: theme.isV3
+      ? theme.colors.surfaceVariant
+      : 'rgba(0, 0, 0, .12)',
+    borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
+    borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
+  };
+  return (
+    <View
+      {...props}
+      style={[
+        styles.container,
+        borderStyles,
+        theme.isV3 && styles.v3Container,
+        props.style,
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+};
 
 DialogScrollArea.displayName = 'Dialog.ScrollArea';
 
 const styles = StyleSheet.create({
   container: {
-    borderColor: 'rgba(0, 0, 0, .12)',
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 24,
     flexGrow: 1,
     flexShrink: 1,
   },
+  v3Container: {
+    marginBottom: 24,
+  },
 });
 
 export default DialogScrollArea;
diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx
index 283cf3e16d..3ee0134e3b 100644
--- a/src/components/Dialog/DialogTitle.tsx
+++ b/src/components/Dialog/DialogTitle.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, StyleProp, TextStyle } from 'react-native';
 import Title from '../Typography/v2/Title';
+import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
@@ -50,21 +51,25 @@ type Props = React.ComponentPropsWithRef<typeof Title> & {
  * export default MyComponent;
  * ```
  */
-const DialogTitle = ({ children, theme, style, ...rest }: Props) => (
-  <Title
-    // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-    accessibilityTraits="header"
-    accessibilityRole="header"
-    style={[
-      styles.text,
-      { color: theme.isV3 ? theme.colors.onSurface : theme?.colors?.text },
-      style,
-    ]}
-    {...rest}
-  >
-    {children}
-  </Title>
-);
+const DialogTitle = ({ children, theme, style, ...rest }: Props) => {
+  const { isV3 } = theme;
+
+  const TextComponent = isV3 ? Text : Title;
+  const textColor = isV3 ? theme.colors.onSurface : theme.colors?.text;
+
+  return (
+    <TextComponent
+      variant="headlineSmall"
+      // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+      accessibilityTraits="header"
+      accessibilityRole="header"
+      style={[styles.text, isV3 && styles.v3Text, { color: textColor }, style]}
+      {...rest}
+    >
+      {children}
+    </TextComponent>
+  );
+};
 
 DialogTitle.displayName = 'Dialog.Title';
 
@@ -74,6 +79,10 @@ const styles = StyleSheet.create({
     marginBottom: 18,
     marginHorizontal: 24,
   },
+  v3Text: {
+    marginTop: 16,
+    marginBottom: 16,
+  },
 });
 
 export default withTheme(DialogTitle);
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 2d0749e8ab..1ac15279d5 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -10,6 +10,7 @@ import {
   View,
   NativeEventSubscription,
 } from 'react-native';
+import color from 'color';
 import {
   getStatusBarHeight,
   getBottomSpace,
@@ -18,6 +19,7 @@ import Surface from './Surface';
 import { useTheme } from '../core/theming';
 import useAnimatedValue from '../utils/useAnimatedValue';
 import { addEventListener } from '../utils/addEventListener';
+import { MD3Colors } from '../styles/themes/v3/tokens';
 
 type Props = {
   /**
@@ -220,7 +222,7 @@ export default function Modal({
             styles.backdrop,
             {
               backgroundColor: theme.isV3
-                ? theme.colors.onSurfaceVariant
+                ? color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string()
                 : theme.colors?.backdrop,
               opacity,
             },