woocommerce/plugins/woocommerce-admin/client/components/split-button
Kelly Dwan d36511479e Docs Project: Add documentation parser + inline documentation (https://github.com/woocommerce/woocommerce-admin/pull/336)
* Switch all components to default exports

This ensures we can read all components for documentation generation (plus, standardizing is good)

* Add documentation to component file

* Fix table exports

* Move readme docs into inline docs

Includes updating new props, adding prop shapes

* Add doc-generation scripts to pull exported component docs into folder

* Remove key propType, causing react special-keys warning

* Fix proptype

* Update incorrect comment

* Remove template import, we can just use string concat

* Fix typo, update docs
2018-08-31 13:27:21 -04:00
..
README.md Add SplitButton Component (https://github.com/woocommerce/woocommerce-admin/pull/236) 2018-07-25 10:25:08 -04:00
index.js Docs Project: Add documentation parser + inline documentation (https://github.com/woocommerce/woocommerce-admin/pull/336) 2018-08-31 13:27:21 -04:00
style.scss Add Collapsed Review View (https://github.com/woocommerce/woocommerce-admin/pull/242) 2018-08-01 08:21:51 -04:00

README.md

SplitButton

A component for displaying a button with a main action plus a secondary set of actions behind a menu toggle.

How to use:

import SplitButton from 'components/split-button';

render: function() {
  return (
	<div>
		<SplitButton
			isPrimary
			mainLabel="Primary Button"
			menuLabel="Select an action"
			onClick={ () => alert( 'Primary Main Action clicked' ) }
			controls={ [
				{
					label: 'Up',
					onClick: () => alert( 'Primary Up clicked' ),
				},
				{
					label: 'Right',
					onClick: () => alert( 'Primary Right clicked' ),
				},
				{
					label: 'Down',
					icon: <Gridicon icon="arrow-down" />,
					onClick: () => alert( 'Primary Down clicked' ),
				},
				{
					label: 'Left',
					icon: <Gridicon icon="arrow-left" />,
					onClick: () => alert( 'Primary Left clicked' ),
				},
			] }
				/>
		<SplitButton
			mainIcon={ <Gridicon icon="pencil" /> }
			menuLabel="Select an action"
			onClick={ () => alert( 'Icon Only Action clicked' ) }
			controls={ [
				{
					label: 'Up',
					icon: <Gridicon icon="arrow-up" />,
					onClick: () => alert( 'Icon Only Up clicked' ),
				},
				{
					label: 'Right',
					onClick: () => alert( 'Icon Only Right clicked' ),
				},
				{
					label: 'Down',
					icon: <Gridicon icon="arrow-down" />,
					onClick: () => alert( 'Icon Only Down clicked' ),
				},
				{
					icon: <Gridicon icon="arrow-left" />,
					onClick: () => alert( 'Icon Only Left clicked' ),
				},
			] }
		/>
	</div>
  );
}

Props

  • isPrimary: Default false. Whether the button is styled as a primary button.
  • mainIcon: Icon for the main button.
  • mainLabel: Label for the main button.
  • onClick: Function to activate when the the main button is clicked.
  • menuLabel: Label to display for the menu of actions, used as a heading on the mobile popover and for accessible text.
  • controls: An array of additional actions. Accepts additional icon, label, and onClick props.
  • className: Additional CSS classes.