woocommerce/plugins/woocommerce-admin/client/components/dropdown-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 span instead of p 2018-07-03 11:58:05 +12: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 Animation mixin + add `prefers-reduced-motion` support to existing animations (https://github.com/woocommerce/woocommerce-admin/pull/317) 2018-08-23 13:47:27 -04:00

README.md

Dropdown Button

A button useful for a launcher of a dropdown component. The button is 100% width of its container and displays single or multiple lines rendered as <span/> elments.

How to use:

import { Dropdown } from '@wordpress/components';
import DropdownButton from 'components/dropdown-button';

render: function() {
  return (
    <Dropdown
		renderToggle={ ( { isOpen, onToggle } ) => (
			<DropdownButton
				onClick={ onToggle }
				isOpen={ isOpen }
				labels={ [ 'All Products Sold' ] }
			/>
		) }
		renderContent={ () => (
			<p>Dropdown content here</p>
		) }
	/>
  );
}

Props

  • labels: An array of elements to be rendered as the content of the button
  • isOpen: boolean describing if the dropdown in open or not
  • *: All other props are passed to Gutenberg's <Button /> component