feat: implement Toolbar component

docs/6.x/docs/components/Toolbar/Toolbar.mdx

@@ -0,0 +1,163 @@
+---
+title: Toolbar
+---
+
+import PropTable from '@docs/components/PropTable.tsx';
+import ExtendsLink from '@docs/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@docs/components/ExtendedExample.tsx';
+
+A toolbar groups icon actions behind a shared surface.
+
+It comes in two `variant`s: `floating`, a self-positioned pill anchored wherever you place it
+(similar to a `FAB`), and `docked`, a full-width bar pinned to the bottom edge that extends
+into the safe-area insets automatically. A floating toolbar can also be laid out vertically
+via `orientation`.
+
+The `colorScheme` prop controls how contained `IconButton`/`Button` children are colored. By
+default: `standard` keeps them neutral against a surface-colored container, while `vibrant`
+gives the toolbar itself a bold, primary-tinted container and switches selected/unselected
+children to matching vibrant colors, making the toolbar stand out as a focal point on the
+screen.
+
+
+
+
+  <ScreenshotTabs screenshotData={{"floating horizontal":"screenshots/toolbar_floating_horizontal_standard.png","floating horizontal - vibrant":"screenshots/toolbar_floating_horizontal_vibrant.png","floating vertical":"screenshots/toolbar_floating_vertical_standard.png","floating vertical - vibrant":"screenshots/toolbar_floating_vertical_vibrant.png","docked":"screenshots/toolbar_docked_standard.png","docked - vibrant":"screenshots/toolbar_docked_vibrant.png"}}/>
+
+
+## Usage
+```js
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Toolbar, IconButton } from 'react-native-paper';
+
+const MyComponent = () => (
+  <View style={styles.anchor} pointerEvents="box-none">
+    <Toolbar>
+      <IconButton icon="format-bold" aria-label="Bold" onPress={() => {}} />
+      <IconButton icon="format-italic" aria-label="Italic" onPress={() => {}} />
+      <IconButton icon="format-underline" aria-label="Underline" onPress={() => {}} />
+    </Toolbar>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  anchor: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 24,
+    alignItems: 'center',
+  },
+});
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### children (required)
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="children" />
+
+<div>
+
+### variant
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="variant" />
+
+<div>
+
+### orientation
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="orientation" />
+
+<div>
+
+### colorScheme
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="colorScheme" />
+
+<div>
+
+### containerColor
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="containerColor" />
+
+<div>
+
+### style
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="style" />
+
+<div>
+
+### contentContainerStyle
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="contentContainerStyle" />
+
+<div>
+
+### testID
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="testID" />
+
+<div>
+
+### aria-label
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="aria-label" />
+
+<div>
+
+### theme
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="theme" />
+
+<div>
+
+### ref
+
+</div>
+
+  <PropTable componentLink="Toolbar/Toolbar" prop="ref" />
+
+
+
+<span />
+
+
+  ## Theme colors
+
+  <ThemeColorsTable themeColorsData={{"standard":{"unselected":{"backgroundColor":"theme.colors.surfaceContainer","iconColor":"theme.colors.onSurfaceVariant","textColor":"theme.colors.onSurfaceVariant"},"selected":{"backgroundColor":"theme.colors.secondaryContainer","iconColor":"theme.colors.onSecondaryFixedVariant (light) / theme.colors.onSecondaryContainer (dark)"}},"vibrant":{"unselected":{"backgroundColor":"theme.colors.primaryContainer","iconColor":"theme.colors.onPrimaryFixedVariant (light) / theme.colors.onPrimaryContainer (dark)","textColor":"theme.colors.onPrimaryFixedVariant (light) / theme.colors.onPrimaryContainer (dark)"},"selected":{"backgroundColor":"theme.colors.surfaceContainer","iconColor":"theme.colors.onSurface"}}}} componentName="Toolbar" />
+
+
+<span />

docs/6.x/docs/components/Toolbar/_meta.json

@@ -0,0 +1,3 @@
+[
+  "Toolbar"
+]

docs/6.x/docs/components/_meta.json

@@ -149,6 +149,13 @@
     "collapsible": true,
     "collapsed": false
   },
+  {
+    "type": "dir",
+    "name": "Toolbar",
+    "label": "Toolbar",
+    "collapsible": true,
+    "collapsed": false
+  },
   {
     "type": "dir",
     "name": "Tooltip",

docs/component-docs.config.ts

@@ -133,6 +133,9 @@ const pages = {
     ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',
     ToggleButtonRow: 'ToggleButton/ToggleButtonRow',
   },
+  Toolbar: {
+    Toolbar: 'Toolbar/Toolbar',
+  },
   Tooltip: {
     Tooltip: 'Tooltip/Tooltip',
   },

docs/scripts/generate-rspress-content.ts

@@ -128,8 +128,20 @@ const getVersionComponentOrder = (version: string): MetaEntry[] => {
     return fromConfig;
   }
 
+  // `componentDocsConfig.pages` is shared across versions, but components
+  // added there for 6.x-only features (e.g. `Toolbar`) have no docs source
+  // under 5.x keep them out of the 5.x nav rather than linking to an
+  // empty/missing page.
+  const componentsDir = path.join(getVersionDocsDir(version), 'components');
+  const existsForVersion = (name: string) =>
+    fs.existsSync(path.join(componentsDir, name)) ||
+    fs.existsSync(path.join(componentsDir, `${name}.mdx`)) ||
+    fs.existsSync(path.join(componentsDir, `${name}.md`));
+
   return [
-    ...fromConfig,
+    ...fromConfig.filter((entry) =>
+      existsForVersion(typeof entry === 'string' ? entry : entry.name)
+    ),
     {
       type: 'dir',
       name: 'HelperText',

docs/src/data/componentDocs6x.json

@@ -11955,6 +11955,136 @@
       ],
       "group": "ToggleButton"
     },
+    "Toolbar/Toolbar": {
+      "filepath": "Toolbar/Toolbar.tsx",
+      "title": "Toolbar",
+      "description": "A toolbar groups icon actions behind a shared surface.\n\nIt comes in two `variant`s: `floating`, a self-positioned pill anchored wherever you place it\n(similar to a `FAB`), and `docked`, a full-width bar pinned to the bottom edge that extends\ninto the safe-area insets automatically. A floating toolbar can also be laid out vertically\nvia `orientation`.\n\nThe `colorScheme` prop controls how contained `IconButton`/`Button` children are colored. By\ndefault: `standard` keeps them neutral against a surface-colored container, while `vibrant`\ngives the toolbar itself a bold, primary-tinted container and switches selected/unselected\nchildren to matching vibrant colors, making the toolbar stand out as a focal point on the\nscreen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Toolbar, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View style={styles.anchor} pointerEvents=\"box-none\">\n    <Toolbar>\n      <IconButton icon=\"format-bold\" aria-label=\"Bold\" onPress={() => {}} />\n      <IconButton icon=\"format-italic\" aria-label=\"Italic\" onPress={() => {}} />\n      <IconButton icon=\"format-underline\" aria-label=\"Underline\" onPress={() => {}} />\n    </Toolbar>\n  </View>\n);\n\nconst styles = StyleSheet.create({\n  anchor: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 24,\n    alignItems: 'center',\n  },\n});\n\nexport default MyComponent;\n```",
+      "link": "toolbar",
+      "data": {
+        "description": "A toolbar groups icon actions behind a shared surface.\n\nIt comes in two `variant`s: `floating`, a self-positioned pill anchored wherever you place it\n(similar to a `FAB`), and `docked`, a full-width bar pinned to the bottom edge that extends\ninto the safe-area insets automatically. A floating toolbar can also be laid out vertically\nvia `orientation`.\n\nThe `colorScheme` prop controls how contained `IconButton`/`Button` children are colored. By\ndefault: `standard` keeps them neutral against a surface-colored container, while `vibrant`\ngives the toolbar itself a bold, primary-tinted container and switches selected/unselected\nchildren to matching vibrant colors, making the toolbar stand out as a focal point on the\nscreen.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Toolbar, IconButton } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View style={styles.anchor} pointerEvents=\"box-none\">\n    <Toolbar>\n      <IconButton icon=\"format-bold\" aria-label=\"Bold\" onPress={() => {}} />\n      <IconButton icon=\"format-italic\" aria-label=\"Italic\" onPress={() => {}} />\n      <IconButton icon=\"format-underline\" aria-label=\"Underline\" onPress={() => {}} />\n    </Toolbar>\n  </View>\n);\n\nconst styles = StyleSheet.create({\n  anchor: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 24,\n    alignItems: 'center',\n  },\n});\n\nexport default MyComponent;\n```",
+        "displayName": "Toolbar",
+        "methods": [],
+        "statics": [],
+        "props": {
+          "children": {
+            "required": true,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Content of the toolbar, typically a row of `IconButton`s."
+          },
+          "variant": {
+            "required": false,
+            "tsType": {
+              "name": "Variant"
+            },
+            "description": "`floating` is a self-positioned pill (like a `FAB`); `docked` is a\nfull-width bar anchored to the bottom edge, extending into safe-area\ninsets automatically. Defaults to `floating`.",
+            "defaultValue": {
+              "value": "'floating'",
+              "computed": false
+            }
+          },
+          "orientation": {
+            "required": false,
+            "tsType": {
+              "name": "Orientation"
+            },
+            "description": "Layout axis for `floating` (`docked` is always horizontal, per spec).\nDefaults to `horizontal`.",
+            "defaultValue": {
+              "value": "'horizontal'",
+              "computed": false
+            }
+          },
+          "colorScheme": {
+            "required": false,
+            "tsType": {
+              "name": "ColorScheme"
+            },
+            "description": "Role-color preset. Sets default colors on direct, mode-less `IconButton`/`Button`\nchildren, unless they already set their own. Defaults to `standard`.",
+            "defaultValue": {
+              "value": "'standard'",
+              "computed": false
+            }
+          },
+          "containerColor": {
+            "required": false,
+            "tsType": {
+              "name": "ColorValue"
+            },
+            "description": "Override the container (background) color."
+          },
+          "style": {
+            "required": false,
+            "tsType": {
+              "name": "StyleProp",
+              "elements": [
+                {
+                  "name": "ViewStyle"
+                }
+              ],
+              "raw": "StyleProp<ViewStyle>"
+            },
+            "description": "Style for positioning `floating`'s pill, or overriding `docked`'s\ndefault anchoring."
+          },
+          "contentContainerStyle": {
+            "required": false,
+            "tsType": {
+              "name": "StyleProp",
+              "elements": [
+                {
+                  "name": "ViewStyle"
+                }
+              ],
+              "raw": "StyleProp<ViewStyle>"
+            },
+            "description": "Style for the row/column wrapping `children`. Overrides the default\npadding/gap."
+          },
+          "testID": {
+            "required": false,
+            "tsType": {
+              "name": "string"
+            },
+            "description": "TestID used for testing purposes.",
+            "defaultValue": {
+              "value": "'toolbar'",
+              "computed": false
+            }
+          },
+          "aria-label": {
+            "required": false,
+            "tsType": {
+              "name": "string"
+            },
+            "description": "Accessibility label for the toolbar group. `children` still need\ntheir own `aria-label`s."
+          },
+          "theme": {
+            "required": false,
+            "tsType": {
+              "name": "ThemeProp"
+            },
+            "description": ""
+          },
+          "ref": {
+            "required": false,
+            "tsType": {
+              "name": "ReactRefObject",
+              "raw": "React.RefObject<View>",
+              "elements": [
+                {
+                  "name": "View"
+                }
+              ]
+            },
+            "description": ""
+          }
+        }
+      },
+      "type": "component",
+      "dependencies": [
+        "src/components/Toolbar/Toolbar.tsx"
+      ]
+    },
     "Tooltip/Tooltip": {
       "filepath": "Tooltip/Tooltip.tsx",
       "title": "Tooltip",

docs/src/data/screenshots.ts

@@ -152,6 +152,17 @@ export const screenshots = {
   ToggleButton: 'screenshots/toggle-button.png',
   'ToggleButton.Group': 'screenshots/toggle-button-group.gif',
   'ToggleButton.Row': 'screenshots/toggle-button-row.gif',
+  Toolbar: {
+    'floating horizontal':
+      'screenshots/toolbar_floating_horizontal_standard.png',
+    'floating horizontal - vibrant':
+      'screenshots/toolbar_floating_horizontal_vibrant.png',
+    'floating vertical': 'screenshots/toolbar_floating_vertical_standard.png',
+    'floating vertical - vibrant':
+      'screenshots/toolbar_floating_vertical_vibrant.png',
+    docked: 'screenshots/toolbar_docked_standard.png',
+    'docked - vibrant': 'screenshots/toolbar_docked_vibrant.png',
+  },
   Tooltip: 'screenshots/tooltip.png',
   TouchableRipple: 'screenshots/touchable-ripple.gif',
 };