woocommerce/plugins/woocommerce-blocks/assets/js/components/text-toolbar-button
Rua Haszard 6afd947631 allow merchant to toggle cart empty/full modes in block editor (https://github.com/woocommerce/woocommerce-blocks/pull/1327)
* allow merchant to toggle cart empty/full modes in block editor

* use text `Button` for empty/full toolbar buttons

* fix highlighting of current cart state (empty/full) in editor:
- use new custom TextToolbarButton for empty/full mode buttons

* use color variables from css/abstracts/_colors

* Update assets/js/components/text-toolbar-button/index.js

Co-Authored-By: Seghir Nadir <nadir.seghir@gmail.com>

* fix className now props is separated out
2019-12-06 10:08:48 +13:00
..
README.md allow merchant to toggle cart empty/full modes in block editor (https://github.com/woocommerce/woocommerce-blocks/pull/1327) 2019-12-06 10:08:48 +13:00
index.js allow merchant to toggle cart empty/full modes in block editor (https://github.com/woocommerce/woocommerce-blocks/pull/1327) 2019-12-06 10:08:48 +13:00
style.scss allow merchant to toggle cart empty/full modes in block editor (https://github.com/woocommerce/woocommerce-blocks/pull/1327) 2019-12-06 10:08:48 +13:00

README.md

TextToolbarButton

TextToolbarButton is used in Toolbar for text buttons which show isToggled state.

Note: Gutenberg core has ToolbarGroup and ToolbarButton in progress. When these are available this component may not be needed.

Usage

Example: two text buttons to select edit modes for cart block.

<BlockControls>
  <Toolbar>
    <TextToolbarButton
      onClick={ toggleFullCartMode }
      isToggled={ isFullCartMode }>
      {  __(
        'Full Cart',
        'woo-gutenberg-products-block'
      ) }
    </TextToolbarButton>
    <TextToolbarButton
      onClick={ toggleFullCartMode }
      isToggled={ ! isFullCartMode }>
      {  __(
        'Empty Cart',
        'woo-gutenberg-products-block'
      ) }
    </TextToolbarButton>
  </Toolbar>
</BlockControls>