K0ndee/split button

docs/6.x/docs/components/SplitButton/SplitButton.mdx

@@ -0,0 +1,343 @@
+---
+title: SplitButton
+---
+
+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';
+
+Split buttons let people trigger a primary action from the leading button
+and open or trigger a contextual action from the trailing button.
+
+
+
+
+  <ScreenshotTabs screenshotData={{"collapsed":"screenshots/split-button-collapsed.png","expanded":"screenshots/split-button-expanded.png"}}/>
+
+
+## Usage
+```js
+import * as React from 'react';
+import { SplitButton } from 'react-native-paper';
+
+const MyComponent = () => (
+  <SplitButton
+    mode="filled"
+    icon="send"
+    label="Send"
+    trailingAccessibilityLabel="Show send options"
+    onPress={() => console.log('Send')}
+    onTrailingPress={() => console.log('Show options')}
+  />
+);
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### mode
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="mode" />
+
+<div>
+
+### size
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="size" />
+
+<div>
+
+### label (required)
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="label" />
+
+<div>
+
+### icon
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="icon" />
+
+<div>
+
+### trailingIcon
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingIcon" />
+
+<div>
+
+### loading
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="loading" />
+
+<div>
+
+### disabled
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="disabled" />
+
+<div>
+
+### buttonColor
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="buttonColor" />
+
+<div>
+
+### textColor
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="textColor" />
+
+<div>
+
+### rippleColor
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="rippleColor" />
+
+<div>
+
+### onPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onPress" />
+
+<div>
+
+### onTrailingPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onTrailingPress" />
+
+<div>
+
+### onPressIn
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onPressIn" />
+
+<div>
+
+### onPressOut
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onPressOut" />
+
+<div>
+
+### onTrailingPressIn
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onTrailingPressIn" />
+
+<div>
+
+### onTrailingPressOut
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onTrailingPressOut" />
+
+<div>
+
+### onLongPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onLongPress" />
+
+<div>
+
+### onTrailingLongPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="onTrailingLongPress" />
+
+<div>
+
+### delayLongPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="delayLongPress" />
+
+<div>
+
+### trailingDelayLongPress
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingDelayLongPress" />
+
+<div>
+
+### accessibilityLabel
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="accessibilityLabel" />
+
+<div>
+
+### trailingAccessibilityLabel
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingAccessibilityLabel" />
+
+<div>
+
+### accessibilityState
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="accessibilityState" />
+
+<div>
+
+### trailingAccessibilityState
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingAccessibilityState" />
+
+<div>
+
+### background
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="background" />
+
+<div>
+
+### style
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="style" />
+
+<div>
+
+### buttonStyle
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="buttonStyle" />
+
+<div>
+
+### leadingButtonStyle
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="leadingButtonStyle" />
+
+<div>
+
+### trailingButtonStyle
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingButtonStyle" />
+
+<div>
+
+### contentStyle
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="contentStyle" />
+
+<div>
+
+### labelStyle
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="labelStyle" />
+
+<div>
+
+### maxFontSizeMultiplier
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="maxFontSizeMultiplier" />
+
+<div>
+
+### hitSlop
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="hitSlop" />
+
+<div>
+
+### trailingHitSlop
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="trailingHitSlop" />
+
+<div>
+
+### theme
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="theme" />
+
+<div>
+
+### testID
+
+</div>
+
+  <PropTable componentLink="SplitButton/SplitButton" prop="testID" />
+
+
+
+<span />
+
+
+  ## Theme colors
+
+  <ThemeColorsTable themeColorsData={{"active":{"filled":{"backgroundColor":"theme.colors.primary","textColor":"theme.colors.onPrimary"},"tonal":{"backgroundColor":"theme.colors.secondaryContainer","textColor":"theme.colors.onSecondaryContainer"},"elevated":{"backgroundColor":"theme.colors.surfaceContainerLow","textColor":"theme.colors.primary"},"outlined":{"textColor":"theme.colors.onSurfaceVariant","borderColor":"theme.colors.outlineVariant"}},"disabled":{"-":{"backgroundColor":"theme.colors.onSurface","textColor":"theme.colors.onSurface"},"outlined":{"backgroundColor":"transparent","textColor":"theme.colors.outlineVariant","borderColor":"theme.colors.outlineVariant"}}}} componentName="SplitButton" />
+
+
+<span />

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

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

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

@@ -127,6 +127,13 @@
     "collapsed": false
   },
   "Snackbar",
+  {
+    "type": "dir",
+    "name": "SplitButton",
+    "label": "SplitButton",
+    "collapsible": true,
+    "collapsed": false
+  },
   "Surface",
   {
     "type": "dir",

docs/component-docs.config.ts

@@ -120,6 +120,9 @@ const pages = {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },
   Snackbar: 'Snackbar',
+  SplitButton: {
+    SplitButton: 'SplitButton/SplitButton',
+  },
   Surface: 'Surface',
   Switch: {
     Switch: 'Switch/Switch',