History

Albert Juhé Lluveras 10ceda5851 Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300 ) * Use colors variables instead of hardcoded values when possible * Update WC colors from @automattic/color-studio * Decrease specificity of price-slider CSS selectors * Update colors to WC purple * Update bright colors * Update grays * Update blacks and whites * Add @todo comment * Remove unnecessary blank line * Remove purple color from price slider handle * Fix colors not shown in SVG background * Remove unnecessary box-shadow declaration * Add theming docs * Refactor/remove SCSS variables * Add @todo comment to breakpoints * Update package-lock.json		2020-10-22 12:40:32 +02:00
..
README.md	Rename js/components to js/editor-components (https://github.com/woocommerce/woocommerce-blocks/pull/3069 )	2020-09-02 10:21:46 +02:00
index.js	Rename js/components to js/editor-components (https://github.com/woocommerce/woocommerce-blocks/pull/3069 )	2020-09-02 10:21:46 +02:00
style.scss	Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300 )	2020-10-22 12:40:32 +02:00

README.md

TextToolbarButton

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

Notes:

Gutenberg core has ToolbarGroup and ToolbarButton in progress. When these are available this component may not be needed.
Gutenberg core html block uses regular Button in toolbar, and sets is-active class to trigger "active" styling when button is toggled on.

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>