Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/assets/js/icons
History
Roy Ho 038ef3d751
[Experimental] Add Product filters overlay settings (#48732) 
* Add overlay settings

* Tweak icon size slider

* Add overlay template part link

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix scss linting

* Fix php linting

* Remove preview

* Rename setting props to be more clear

* Remove unused import

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/editor.scss

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Move experimental controls to last of list

* Improve typescript code

* Remove unneeded constructor code

* Extract icons into own component

* Moved overlay template part link to the bottom

* Add apply button

* Hide overlay settings when in always mode

* Remove overlay template part from list and put into general area

* Update api version to 3

* Update plugins/woocommerce-blocks/assets/js/icons/library/filter.tsx

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/icons/library/filter-three-lines.tsx

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Fix overlay button link style and clickable

* Remove edit overlay link from never mode

* Add e2e tests for the filters overlay settings

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
 		2024-07-18 11:33:25 -07:00
..
docs Add Notices Documentation to Storybook and upgrade to Storybook 7 (https://github.com/woocommerce/woocommerce-blocks/pull/11524) 2023-11-02 13:01:42 +00:00
library [Experimental] Add Product filters overlay settings (#48732) 2024-07-18 11:33:25 -07:00
README.md Update Woo.com references to WooCommerce.com (#46259) 2024-04-09 09:50:15 +01:00
index.js [Experimental] Add Product filters overlay settings (#48732) 2024-07-18 11:33:25 -07:00

README.md

Icons

Table of contents

WooCommerce Blocks Icons Library.

Usage

Note we use the Icon component from @wordpress/icons. We use some SVG icons from @woocommerce/icons for WC Blocks specific icons, but we also use existing icons from @wordpress/icons.

import { woo } from '@woocommerce/icons';
import { Icon, postComments } from '@wordpress/icons';

<Icon icon={ woo } /> // icon  from '@woocommerce/icons'
<Icon icon={ postComments } /> // icon from '@wordpress/icons'
<Icon icon={ woo } size={ 16 } />
<Icon icon={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />

Adding Icons

Before adding a new icon, make sure the icon is not already included in the Library that comes with @wordpress/icons package. If there is no existing icon suitable:

  1. Add the icon file to ./library folder.
  2. Make sure to use SVG primitive from @wordpress/primitives and not a native svg. SVG offers more accessibility features.
  3. Remove width and height since they're handled by Icon.
  4. Remove any hardcoded colors on the svg. If necessary, use CurrentColor.
  5. Export the Icon in ./library/index.js.

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.