feat: modernize drawer

docs/6.x/docs/components/Drawer/DrawerItem.mdx

@@ -141,7 +141,7 @@ export default MyComponent;
 
   ## Theme colors
 
-  <ThemeColorsTable themeColorsData={{"active":{"backgroundColor":"theme.colors.secondaryContainer","iconColor/textColor":"theme.colors.onSecondaryContainer"},"inactive":{"iconColor/textColor":"theme.colors.onSurfaceVariant"}}} componentName="Drawer.Item" />
+  <ThemeColorsTable themeColorsData={{"active":{"backgroundColor":"theme.colors.secondaryContainer","iconColor/textColor":"theme.colors.onSecondaryContainer"},"inactive":{"iconColor/textColor":"theme.colors.onSurfaceVariant"},"focused":{"focusIndicatorColor":"theme.colors.secondary"}}} componentName="Drawer.Item" />
 
 
 <span />

docs/6.x/docs/components/Drawer/DrawerSection.mdx

@@ -104,7 +104,7 @@ export default MyComponent;
 
   ## Theme colors
 
-  <ThemeColorsTable themeColorsData={{"-":{"titleColor":"theme.colors.onSurfaceVariant"}}} componentName="Drawer.Section" />
+  <ThemeColorsTable themeColorsData={{"-":{"titleColor":"theme.colors.onSurfaceVariant","dividerColor":"theme.colors.outlineVariant"}}} componentName="Drawer.Section" />
 
 
 <span />

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

@@ -6,6 +6,23 @@ TBC
 
 ## Components
 
+### Drawer
+
+The `Drawer` API is unchanged in Paper 6.x — no props were renamed, removed, or given new defaults. `Drawer.Item` and `Drawer.Section` were realigned with the current Material Design 3 navigation drawer spec, so their appearance changes:
+
+- **Trailing padding.** `Drawer.Item` reserved 36dp on the trailing edge and 28dp on the leading edge. Both are now 28dp, as the spec requires. Items sit 8dp wider.
+- **Active label weight.** The label of an active `Drawer.Item` now uses the prominent `labelLargeEmphasized` weight (700). Inactive labels are unchanged at 500.
+- **Section divider colour.** `Drawer.Section` drew its divider in a fixed grey that ignored the theme and was wrong in dark mode. It now uses `theme.colors.outlineVariant`, like every other `Divider`.
+- **Focus indicator.** `Drawer.Item` gains a keyboard focus ring in `theme.colors.secondary`. It appears only on keyboard focus, not on press.
+
+If you were pixel-matching a drawer against Paper 5.x, the first two points are the ones that will shift your layout. To restore the old trailing padding, pass it through `style`:
+
+```tsx
+<Drawer.Item label="Inbox" icon="inbox" style={{ marginEnd: 20 }} />
+```
+
+The theme also gains the 15 `*Emphasized` typescale keys (`labelLargeEmphasized`, `titleSmallEmphasized`, and so on). The values already existed in the token set; only the types were missing, so `<Text variant="labelLargeEmphasized">` now typechecks. This is additive — no existing key changed.
+
 ### 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

@@ -5646,7 +5646,7 @@
             "tsType": {
               "name": "boolean"
             },
-            "description": "Whether the item is disabled."
+            "description": "Whether the item is disabled. Disabled items are dimmed and don't respond to touch."
           },
           "focusedIcon": {
             "required": false,
@@ -5781,7 +5781,7 @@
             "tsType": {
               "name": "boolean"
             },
-            "description": "Whether the item is disabled."
+            "description": "Whether the item is disabled. Disabled items are dimmed and don't respond to touch."
           },
           "onPress": {
             "required": false,

docs/src/data/themeColors.ts

@@ -140,10 +140,15 @@ export const themeColors = {
     inactive: {
       'iconColor/textColor': 'theme.colors.onSurfaceVariant',
     },
+    focused: {
+      focusIndicatorColor: 'theme.colors.secondary',
+      'iconColor/textColor (inactive)': 'theme.colors.onSurface',
+    },
   },
   'Drawer.Section': {
     '-': {
       titleColor: 'theme.colors.onSurfaceVariant',
+      dividerColor: 'theme.colors.outlineVariant',
     },
   },
   FAB: {

example/src/DrawerItems.tsx

@@ -135,11 +135,10 @@ function DrawerItems() {
 
   return (
     <DrawerContentScrollView
-      alwaysBounceVertical={false}
       style={[
         styles.drawerContent,
         {
-          backgroundColor: colors.surface,
+          backgroundColor: colors.surfaceContainerLow,
         },
       ]}
     >
@@ -175,7 +174,7 @@ function DrawerItems() {
           <Drawer.Section title="Preferences">
             {dynamicThemeSupported ? (
               <TouchableRipple onPress={toggleShouldUseDynamicTheme}>
-                <View style={[styles.preference, styles.v3Preference]}>
+                <View style={styles.preference}>
                   <Text variant="labelLarge">Use Dynamic Theme</Text>
                   <View pointerEvents="none">
                     <Switch value={shouldUseDynamicTheme} />
@@ -184,7 +183,7 @@ function DrawerItems() {
               </TouchableRipple>
             ) : null}
             <TouchableRipple onPress={toggleTheme}>
-              <View style={[styles.preference, styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">Dark Theme</Text>
                 <View pointerEvents="none">
                   <Switch value={isDarkTheme} />
@@ -193,7 +192,7 @@ function DrawerItems() {
             </TouchableRipple>
 
             <TouchableRipple onPress={_handleToggleRTL}>
-              <View style={[styles.preference, styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">RTL</Text>
                 <View pointerEvents="none">
                   <Switch value={isRTL} />
@@ -202,7 +201,7 @@ function DrawerItems() {
             </TouchableRipple>
 
             <TouchableRipple onPress={toggleCollapsed}>
-              <View style={[styles.preference, styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">Collapsed drawer *</Text>
                 <View pointerEvents="none">
                   <Switch value={collapsed} />
@@ -211,7 +210,7 @@ function DrawerItems() {
             </TouchableRipple>
 
             <TouchableRipple onPress={toggleCustomFont}>
-              <View style={[styles.preference, styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">Custom font *</Text>
                 <View pointerEvents="none">
                   <Switch value={customFontLoaded} />
@@ -220,7 +219,7 @@ function DrawerItems() {
             </TouchableRipple>
 
             <TouchableRipple onPress={toggleRippleEffect}>
-              <View style={[styles.preference, styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">
                   {isIOS ? 'Highlight' : 'Ripple'} effect *
                 </Text>
@@ -271,10 +270,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  v3Preference: {
     height: 56,
     paddingHorizontal: 28,
   },

example/src/ExampleList.tsx

@@ -19,6 +19,7 @@ import ChipExample from './Examples/ChipExample';
 import DataTableExample from './Examples/DataTableExample';
 import DialogExample from './Examples/DialogExample';
 import DividerExample from './Examples/DividerExample';
+import DrawerExample from './Examples/DrawerExample';
 import FABExample from './Examples/FABExample';
 import IconButtonExample from './Examples/IconButtonExample';
 import IconExample from './Examples/IconExample';
@@ -64,6 +65,7 @@ export const mainExamples = {
   DataTable: DataTableExample,
   Dialog: DialogExample,
   Divider: DividerExample,
+  Drawer: DrawerExample,
   FAB: FABExample,
   IconButton: IconButtonExample,
   Icon: IconExample,

example/src/Examples/DrawerExample.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
+
+import { Badge, Drawer, Text, useTheme } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const DRAWER_WIDTH = 360;
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.section}>
+      <Text
+        variant="labelSmall"
+        style={[styles.caption, { color: theme.colors.onSurfaceVariant }]}
+      >
+        {title}
+      </Text>
+      <View
+        style={[
+          styles.drawer,
+          { backgroundColor: theme.colors.surfaceContainerLow },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const Destinations = () => {
+  const [active, setActive] = React.useState('inbox');
+
+  return (
+    <Drawer.Section title="Mail" showDivider={false}>
+      <Drawer.Item
+        icon="inbox"
+        label="Inbox"
+        active={active === 'inbox'}
+        onPress={() => setActive('inbox')}
+        right={() => <Text variant="labelLarge">24</Text>}
+      />
+      <Drawer.Item
+        icon="star"
+        label="Starred"
+        active={active === 'starred'}
+        onPress={() => setActive('starred')}
+      />
+      <Drawer.Item
+        icon="send"
+        label="Sent"
+        active={active === 'sent'}
+        onPress={() => setActive('sent')}
+      />
+    </Drawer.Section>
+  );
+};
+
+const DrawerExample = () => {
+  const [collapsed, setCollapsed] = React.useState('inbox');
+
+  return (
+    <ScreenWrapper contentContainerStyle={styles.content}>
+      <Section title="Destinations — tap to change the active one">
+        <Destinations />
+      </Section>
+
+      <Section title="Without an icon, and with a truncated label">
+        <Drawer.Section showDivider={false}>
+          <Drawer.Item label="No icon" />
+          <Drawer.Item
+            icon="delete"
+            label="A very long destination label that will be truncated"
+          />
+        </Drawer.Section>
+      </Section>
+
+      <Section title="Disabled">
+        <Drawer.Section showDivider={false}>
+          <Drawer.Item icon="archive" label="Archive" disabled />
+          <Drawer.Item
+            icon="star"
+            label="Active and disabled"
+            active
+            disabled
+            right={() => <Text variant="labelLarge">24</Text>}
+          />
+        </Drawer.Section>
+      </Section>
+
+      <Section title="Trailing slot">
+        <Drawer.Section showDivider={false}>
+          <Drawer.Item
+            icon="alert"
+            label="Badge"
+            right={() => <Badge visible style={styles.badge} />}
+          />
+          <Drawer.Item
+            icon="palette"
+            label="Coloured dot"
+            right={({ color }: { color: ColorValue }) => (
+              <Badge
+                visible
+                style={[styles.badge, { backgroundColor: color }]}
+              />
+            )}
+          />
+        </Drawer.Section>
+      </Section>
+
+      <Section title="Sections separated by a divider">
+        <Drawer.Section title="Mailboxes">
+          <Drawer.Item icon="inbox" label="Inbox" />
+        </Drawer.Section>
+        <Drawer.Section title="Labels" showDivider={false}>
+          <Drawer.Item icon="tag" label="Work" />
+        </Drawer.Section>
+      </Section>
+
+      <Section title="Collapsed destinations">
+        <View style={styles.collapsed}>
+          <Drawer.CollapsedItem
+            focusedIcon="inbox"
+            unfocusedIcon="inbox-outline"
+            label="Inbox"
+            badge={24}
+            active={collapsed === 'inbox'}
+            onPress={() => setCollapsed('inbox')}
+          />
+          <Drawer.CollapsedItem
+            focusedIcon="star"
+            unfocusedIcon="star-outline"
+            label="Starred"
+            active={collapsed === 'starred'}
+            onPress={() => setCollapsed('starred')}
+          />
+          <Drawer.CollapsedItem
+            focusedIcon="bell"
+            unfocusedIcon="bell-outline"
+            badge
+            active={collapsed === 'alerts'}
+            onPress={() => setCollapsed('alerts')}
+          />
+          <Drawer.CollapsedItem
+            focusedIcon="archive"
+            unfocusedIcon="archive-outline"
+            label="Disabled"
+            disabled
+          />
+        </View>
+      </Section>
+    </ScreenWrapper>
+  );
+};
+
+DrawerExample.title = 'Drawer';
+
+const styles = StyleSheet.create({
+  content: {
+    paddingVertical: 16,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  caption: {
+    marginBottom: 8,
+    marginHorizontal: 16,
+  },
+  drawer: {
+    width: DRAWER_WIDTH,
+    maxWidth: '100%',
+    alignSelf: 'center',
+    paddingVertical: 8,
+    borderTopEndRadius: 16,
+    borderBottomEndRadius: 16,
+  },
+  badge: {
+    alignSelf: 'center',
+  },
+  collapsed: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingVertical: 8,
+  },
+});
+
+export default DrawerExample;