refactor(dialog): MD3 updates, updated Dialog API

docs/6.x/docs/components/Dialog/Dialog.mdx

@@ -21,7 +21,7 @@ To render the `Dialog` above other components, you'll need to wrap it with the [
 ```js
 import * as React from 'react';
 import { View } from 'react-native';
-import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
+import { Button, Dialog, Portal, PaperProvider } from 'react-native-paper';
 
 const MyComponent = () => {
   const [visible, setVisible] = React.useState(false);
@@ -35,15 +35,13 @@ const MyComponent = () => {
       <View>
         <Button onPress={showDialog}>Show Dialog</Button>
         <Portal>
-          <Dialog visible={visible} onDismiss={hideDialog}>
-            <Dialog.Title>Alert</Dialog.Title>
-            <Dialog.Content>
-              <Text variant="bodyMedium">This is simple dialog</Text>
-            </Dialog.Content>
-            <Dialog.Actions>
-              <Button onPress={hideDialog}>Done</Button>
-            </Dialog.Actions>
-          </Dialog>
+          <Dialog
+            visible={visible}
+            onDismiss={hideDialog}
+            title="Alert"
+            content="This is simple dialog"
+            actions={[{ label: 'Done', onPress: hideDialog }]}
+          />
         </Portal>
       </View>
     </PaperProvider>
@@ -93,11 +91,75 @@ export default MyComponent;
 
 <div>
 
-### children (required)
+### icon
 
 </div>
 
-  <PropTable componentLink="Dialog/Dialog" prop="children" />
+  <PropTable componentLink="Dialog/Dialog" prop="icon" />
+
+<div>
+
+### title
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="title" />
+
+<div>
+
+### content
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="content" />
+
+<div>
+
+### actions
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="actions" />
+
+<div>
+
+### scrollable
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="scrollable" />
+
+<div>
+
+### contentProps
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="contentProps" />
+
+<div>
+
+### scrollAreaProps
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="scrollAreaProps" />
+
+<div>
+
+### scrollViewProps
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="scrollViewProps" />
+
+<div>
+
+### aria-label
+
+</div>
+
+  <PropTable componentLink="Dialog/Dialog" prop="aria-label" />
 
 <div>
 

docs/6.x/docs/components/Dialog/DialogActions.mdx

@@ -28,12 +28,18 @@ const MyComponent = () => {
 
   return (
     <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Actions>
-          <Button onPress={() => console.log('Cancel')}>Cancel</Button>
-          <Button onPress={() => console.log('Ok')}>Ok</Button>
-        </Dialog.Actions>
-      </Dialog>
+      <Dialog
+					visible={visible}
+					onDismiss={hideDialog}
+					actions={[
+						<Button key="disagree-btn" onPress={close} textColor={Palette.error50}>
+							Disagree
+						</Button>,
+						<Button key="agree-btn" onPress={close}>
+							Agree
+ 					</Button>,
+					]}
+		   />
     </Portal>
   );
 };

docs/6.x/docs/components/Dialog/DialogContent.mdx

@@ -28,11 +28,7 @@ const MyComponent = () => {
 
   return (
     <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Content>
-          <Text variant="bodyMedium">This is simple dialog</Text>
-        </Dialog.Content>
-      </Dialog>
+      <Dialog visible={visible} onDismiss={hideDialog} content="This is simple dialog" />
     </Portal>
   );
 };

docs/6.x/docs/components/Dialog/DialogIcon.mdx

@@ -20,7 +20,6 @@ A component to show an icon in a Dialog.
 ## Usage
 ```js
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { Dialog, Portal, Text } from 'react-native-paper';
 
 const MyComponent = () => {
@@ -30,23 +29,11 @@ const MyComponent = () => {
 
   return (
     <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Icon icon="alert" />
-        <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
-        <Dialog.Content>
-          <Text variant="bodyMedium">This is simple dialog</Text>
-        </Dialog.Content>
-      </Dialog>
+      <Dialog visible={visible} onDismiss={hideDialog} icon="alert" content="This is simple dialog" />
     </Portal>
   );
 };
 
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-  },
-})
-
 export default MyComponent;
 ```
 

docs/6.x/docs/components/Dialog/DialogScrollArea.mdx

@@ -30,13 +30,7 @@ const MyComponent = () => {
 
   return (
     <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.ScrollArea>
-          <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
-            <Text>This is a scrollable area</Text>
-          </ScrollView>
-        </Dialog.ScrollArea>
-      </Dialog>
+      <Dialog visible={visible} onDismiss={hideDialog} scrollable content="This is a scrollable area" />
     </Portal>
   );
 };

docs/6.x/docs/components/Dialog/DialogTitle.mdx

@@ -28,12 +28,7 @@ const MyComponent = () => {
 
   return (
     <Portal>
-      <Dialog visible={visible} onDismiss={hideDialog}>
-        <Dialog.Title>This is a title</Dialog.Title>
-        <Dialog.Content>
-          <Text variant="bodyMedium">This is simple dialog</Text>
-        </Dialog.Content>
-      </Dialog>
+      <Dialog visible={visible} onDismiss={hideDialog} title="This is a title" content="This is simple dialog" />
     </Portal>
   );
 };

docs/6.x/docs/components/Modal.mdx

@@ -87,6 +87,14 @@ export default MyComponent;
 
 <div>
 
+### aria-label
+
+</div>
+
+  <PropTable componentLink="Modal" prop="aria-label" />
+
+<div>
+
 ### visible
 
 </div>

docs/6.x/docs/guides/migration.md

@@ -126,3 +126,55 @@ const theme = {
   style={{ fontSize: 16, color: '#1C1B1F' }}
 />
 ```
+
+### Dialog
+
+The Paper 6.x `Dialog` now supports a simplified prop-based API for common dialog layouts. If your dialog previously composed `Dialog.Title`, `Dialog.Content`, and `Dialog.Actions` via `children`, migrate to the dedicated `icon`, `title`, `content`, and `actions` props.
+
+#### Removed props
+
+- **`children`** was removed from `Dialog`
+
+Use the dedicated props instead:
+
+- **`Dialog.Icon`** → **`icon`**
+- **`Dialog.Title`** → **`title`**
+- **`Dialog.Content`** → **`content`**
+- **`Dialog.Actions`** → **`actions`**
+
+The new **`actions`** prop is more customizable because it accepts **`React.ReactNode[]`**. Unlike the previous `Dialog.Actions` children behavior, the dialog no longer injects **`compact`** and **`uppercase`** into action components automatically. When **`actions`** is provided, the passed components are rendered through **`Dialog.Actions`** internally.
+
+#### New props
+
+- **`scrollable`** renders the dialog content inside a scrollable area.
+- **`contentProps`** passes props to the internal `Dialog.Content` when `scrollable` is not enabled.
+- **`scrollAreaProps`** passes props to the internal `Dialog.ScrollArea` when `scrollable` is enabled.
+- **`scrollViewProps`** passes props to the internal `ScrollView` when `scrollable` is enabled.
+- **`aria-label`** provides an accessibility label when the dialog title is not a string.
+
+```tsx
+// Before (v5)
+<Portal>
+  <Dialog visible={visible} onDismiss={hideDialog}>
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <Text variant="bodyMedium">This is a simple dialog</Text>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button onPress={hideDialog}>Done</Button>
+    </Dialog.Actions>
+  </Dialog>
+</Portal>
+
+// After (v6)
+<Portal>
+  <Dialog
+    visible={visible}
+    onDismiss={hideDialog}
+    icon="alert"
+    title="Alert"
+    content="This is a simple dialog"
+    actions={[<Button key="done" onPress={hideDialog}>Done</Button>]}
+  />
+</Portal>
+```