refactor: modernize Divider to latest MD3 spec

docs/6.x/docs/components/Divider.mdx

@@ -10,6 +10,10 @@ import ExtendedExample from '@docs/components/ExtendedExample.tsx';
 
 A divider is a thin, lightweight separator that groups content in lists and page layouts.
 
+Dividers are decorative, so screen readers skip them. If a divider means
+something on its own, pass `accessible`, `aria-hidden={false}` and
+`role="separator"`.
+
 
 
 
@@ -42,27 +46,27 @@ export default MyComponent;
 
 <div>
 
-### leftInset  <span class="badge badge-renamed "><span class="badge-text">Renamed from 'inset' to 'leftInset` in v5.x</span></span>
+### orientation
 
 </div>
 
-  <PropTable componentLink="Divider" prop="leftInset" />
+  <PropTable componentLink="Divider" prop="orientation" />
 
 <div>
 
-### horizontalInset  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+### startInset
 
 </div>
 
-  <PropTable componentLink="Divider" prop="horizontalInset" />
+  <PropTable componentLink="Divider" prop="startInset" />
 
 <div>
 
-### bold  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+### horizontalInset
 
 </div>
 
-  <PropTable componentLink="Divider" prop="bold" />
+  <PropTable componentLink="Divider" prop="horizontalInset" />
 
 <div>
 

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

@@ -6,6 +6,64 @@ TBC
 
 ## Components
 
+### Divider
+
+| v5 | v6 |
+| --- | --- |
+| `leftInset` | `startInset` |
+| `bold` | removed, dividers are 1dp thick by default |
+| - | `orientation="vertical"` |
+
+#### Thickness
+
+Dividers are 1dp thick now, which is what the Material Design 3 spec asks for. In v5 the default was `StyleSheet.hairlineWidth`, thinner than 1dp on most screens, and `bold` was the only way to get a full 1dp line. The `bold` prop is gone.
+
+```diff
+- <Divider bold />
++ <Divider />
+```
+
+If you want the hairline back, set it in `style`:
+
+```diff
+- <Divider />
++ <Divider style={{ height: StyleSheet.hairlineWidth }} />
+```
+
+#### Inset
+
+`leftInset` set `marginLeft`, so in RTL the inset stayed on the left instead of moving to the leading edge. Use `startInset` instead. It insets the leading edge and follows the writing direction.
+
+```diff
+- <Divider leftInset />
++ <Divider startInset />
+```
+
+`horizontalInset` works the same as before.
+
+#### Orientation
+
+Dividers can be vertical now. A vertical divider is 1dp wide and stretches to the height of its parent, so the parent has to lay its children out in a row.
+
+```tsx
+<View style={{ flexDirection: 'row' }}>
+  <Text>Lemon</Text>
+  <Divider orientation="vertical" />
+  <Text>Mango</Text>
+</View>
+```
+
+Insets follow the orientation. On a vertical divider, `startInset` insets the top edge, and `horizontalInset` insets the top and bottom edges.
+
+#### Accessibility
+
+Dividers are decorative, so screen readers skip them and they stay out of the focus order. If a divider means something on its own, opt back in:
+
+```diff
+- <Divider />
++ <Divider accessible aria-hidden={false} role="separator" />
+```
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.

docs/src/data/componentDocs6x.json

@@ -5545,38 +5545,53 @@
     "Divider": {
       "filepath": "Divider.tsx",
       "title": "Divider",
-      "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Lemon</Text>\n    <Divider />\n    <Text>Mango</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",
+      "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\nDividers are decorative, so screen readers skip them. If a divider means\nsomething on its own, pass `accessible`, `aria-hidden={false}` and\n`role=\"separator\"`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Lemon</Text>\n    <Divider />\n    <Text>Mango</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",
       "link": "divider",
       "data": {
-        "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Lemon</Text>\n    <Divider />\n    <Text>Mango</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",
+        "description": "A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\nDividers are decorative, so screen readers skip them. If a divider means\nsomething on its own, pass `accessible`, `aria-hidden={false}` and\n`role=\"separator\"`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Lemon</Text>\n    <Divider />\n    <Text>Mango</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",
         "displayName": "Divider",
         "methods": [],
         "statics": [],
         "props": {
-          "leftInset": {
+          "orientation": {
             "required": false,
             "tsType": {
-              "name": "boolean"
+              "name": "union",
+              "raw": "'horizontal' | 'vertical'",
+              "elements": [
+                {
+                  "name": "literal",
+                  "value": "'horizontal'"
+                },
+                {
+                  "name": "literal",
+                  "value": "'vertical'"
+                }
+              ]
             },
-            "description": "@renamed Renamed from 'inset' to 'leftInset` in v5.x\nWhether divider has a left inset."
+            "description": "Orientation of the divider. A vertical divider stretches to the height of\nits parent, so the parent has to lay its children out in a row.",
+            "defaultValue": {
+              "value": "'horizontal'",
+              "computed": false
+            }
           },
-          "horizontalInset": {
+          "startInset": {
             "required": false,
             "tsType": {
               "name": "boolean"
             },
-            "description": "@supported Available in v5.x with theme version 3\n Whether divider has a horizontal inset on both sides.",
+            "description": "Whether the divider is inset from the leading edge, which is the left edge\nin LTR and the right edge in RTL. On a vertical divider it's the top edge.",
             "defaultValue": {
               "value": "false",
               "computed": false
             }
           },
-          "bold": {
+          "horizontalInset": {
             "required": false,
             "tsType": {
               "name": "boolean"
             },
-            "description": "@supported Available in v5.x with theme version 3\n Whether divider should be bolded.",
+            "description": "Whether the divider is inset from both edges: left and right on a\nhorizontal divider, top and bottom on a vertical one.",
             "defaultValue": {
               "value": "false",
               "computed": false

example/src/Examples/DividerExample.tsx

@@ -1,28 +1,67 @@
-import { FlatList } from 'react-native';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 
-import { Divider, List, useTheme } from 'react-native-paper';
+import { Divider, List, Text } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
-const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach'];
+const items = ['Apple', 'Banana', 'Coconut'];
 
 const DividerExample = () => {
-  const { colors } = useTheme();
-
   return (
-    <ScreenWrapper withScrollView={false}>
-      <FlatList
-        style={{ backgroundColor: colors?.background }}
-        renderItem={({ item }) => <List.Item title={item} />}
-        keyExtractor={(item) => item}
-        ItemSeparatorComponent={Divider}
-        data={items}
-        alwaysBounceVertical={false}
-      />
+    <ScreenWrapper>
+      <List.Section title="Full width">
+        {items.map((item) => (
+          <React.Fragment key={item}>
+            <List.Item title={item} />
+            <Divider />
+          </React.Fragment>
+        ))}
+      </List.Section>
+      <List.Section title="Inset from the start">
+        {items.map((item) => (
+          <React.Fragment key={item}>
+            <List.Item title={item} />
+            <Divider startInset />
+          </React.Fragment>
+        ))}
+      </List.Section>
+      <List.Section title="Inset from both sides">
+        {items.map((item) => (
+          <React.Fragment key={item}>
+            <List.Item title={item} />
+            <Divider horizontalInset />
+          </React.Fragment>
+        ))}
+      </List.Section>
+      <List.Section title="Vertical">
+        <View style={styles.row}>
+          {items.map((item, index) => (
+            <React.Fragment key={item}>
+              {index > 0 && <Divider orientation="vertical" horizontalInset />}
+              <Text variant="bodyLarge" style={styles.column}>
+                {item}
+              </Text>
+            </React.Fragment>
+          ))}
+        </View>
+      </List.Section>
     </ScreenWrapper>
   );
 };
 
 DividerExample.title = 'Divider';
 
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    marginHorizontal: 16,
+  },
+  column: {
+    flex: 1,
+    paddingVertical: 24,
+    textAlign: 'center',
+  },
+});
+
 export default DividerExample;

example/src/Examples/FABExample.tsx

@@ -159,7 +159,7 @@ const FABExample = () => {
           )}
           onPress={() => setShowFab((v) => !v)}
         />
-        <Divider bold style={{ backgroundColor: colors.outline }} />
+        <Divider style={{ backgroundColor: colors.outline }} />
       </View>
       <FlatList
         data={rows}

src/components/Divider.tsx

@@ -4,22 +4,25 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { useInternalTheme } from '../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../types';
 
+const THICKNESS = 1;
+const INSET = 16;
+
 export type Props = $RemoveChildren<typeof View> & {
   /**
-   * @renamed Renamed from 'inset' to 'leftInset` in v5.x
-   * Whether divider has a left inset.
+   * Orientation of the divider. A vertical divider stretches to the height of
+   * its parent, so the parent has to lay its children out in a row.
    */
-  leftInset?: boolean;
+  orientation?: 'horizontal' | 'vertical';
   /**
-   * @supported Available in v5.x with theme version 3
-   *  Whether divider has a horizontal inset on both sides.
+   * Whether the divider is inset from the leading edge, which is the left edge
+   * in LTR and the right edge in RTL. On a vertical divider it's the top edge.
    */
-  horizontalInset?: boolean;
+  startInset?: boolean;
   /**
-   * @supported Available in v5.x with theme version 3
-   *  Whether divider should be bolded.
+   * Whether the divider is inset from both edges: left and right on a
+   * horizontal divider, top and bottom on a vertical one.
    */
-  bold?: boolean;
+  horizontalInset?: boolean;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -30,6 +33,10 @@ export type Props = $RemoveChildren<typeof View> & {
 /**
  * A divider is a thin, lightweight separator that groups content in lists and page layouts.
  *
+ * Dividers are decorative, so screen readers skip them. If a divider means
+ * something on its own, pass `accessible`, `aria-hidden={false}` and
+ * `role="separator"`.
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -49,41 +56,55 @@ export type Props = $RemoveChildren<typeof View> & {
  * ```
  */
 const Divider = ({
-  leftInset,
+  orientation = 'horizontal',
+  startInset = false,
   horizontalInset = false,
   style,
   theme: themeOverrides,
-  bold = false,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
-  const dividerColor = theme.colors.outlineVariant;
+  const isVertical = orientation === 'vertical';
 
   return (
     <View
+      aria-hidden
       {...rest}
       style={[
-        { height: StyleSheet.hairlineWidth, backgroundColor: dividerColor },
-        leftInset && styles.v3LeftInset,
-        horizontalInset && styles.horizontalInset,
-        bold && styles.bold,
+        isVertical ? styles.vertical : styles.horizontal,
+        { backgroundColor: theme.colors.outlineVariant },
+        startInset &&
+          (isVertical ? styles.verticalStartInset : styles.startInset),
+        horizontalInset &&
+          (isVertical ? styles.verticalInset : styles.horizontalInset),
         style,
       ]}
     />
   );
 };
 
 const styles = StyleSheet.create({
-  v3LeftInset: {
-    marginLeft: 16,
+  horizontal: {
+    height: THICKNESS,
+  },
+  vertical: {
+    width: THICKNESS,
+    alignSelf: 'stretch',
+  },
+  startInset: {
+    marginStart: INSET,
   },
   horizontalInset: {
-    marginLeft: 16,
-    marginRight: 16,
+    marginStart: INSET,
+    marginEnd: INSET,
+  },
+  verticalStartInset: {
+    marginTop: INSET,
   },
-  bold: {
-    height: 1,
+  verticalInset: {
+    marginTop: INSET,
+    marginBottom: INSET,
   },
 });
 

src/components/Drawer/DrawerSection.tsx

@@ -102,7 +102,6 @@ const DrawerSection = ({
       {showDivider && (
         <Divider
           horizontalInset
-          bold
           style={[styles.divider, styles.v3Divider]}
           theme={theme}
         />

src/components/Searchbar.tsx

@@ -343,7 +343,6 @@ const Searchbar = ({
         right?.({ color: textColor, style: styles.rightStyle, testID })}
       {!isBarMode && showDivider && (
         <Divider
-          bold
           style={[
             styles.divider,
             {