Skip to content

Commit

Permalink
Introduce the Icons package (#17055)
Browse files Browse the repository at this point in the history
  • Loading branch information
senadir authored and youknowriad committed Jan 22, 2020
1 parent 76304dd commit 46fcca7
Show file tree
Hide file tree
Showing 28 changed files with 317 additions and 37 deletions.
6 changes: 6 additions & 0 deletions docs/manifest-devhub.json
Original file line number Diff line number Diff line change
Expand Up @@ -1325,6 +1325,12 @@
"markdown_source": "../packages/i18n/README.md",
"parent": "packages"
},
{
"title": "@wordpress/icons",
"slug": "packages-icons",
"markdown_source": "../packages/icons/README.md",
"parent": "packages"
},
{
"title": "@wordpress/is-shallow-equal",
"slug": "packages-is-shallow-equal",
Expand Down
22 changes: 22 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"@wordpress/hooks": "file:packages/hooks",
"@wordpress/html-entities": "file:packages/html-entities",
"@wordpress/i18n": "file:packages/i18n",
"@wordpress/icons": "file:packages/icons",
"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
"@wordpress/keycodes": "file:packages/keycodes",
Expand Down
2 changes: 1 addition & 1 deletion packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ $z-layers: (

".components-circular-option-picker__option.is-pressed": 1,
// Needs to be higher than .components-circular-option-picker__option.is-pressed.
".components-circular-option-picker__option.is-pressed + .dashicons-saved": 2
".components-circular-option-picker__option.is-pressed + svg": 2
);

@function z-index( $key ) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
/>
<svg
aria-hidden="true"
className="dashicon dashicons-saved"
focusable="false"
height={20}
height={24}
role="img"
viewBox="0 0 20 20"
width={20}
viewBox="-2 -2 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"@wordpress/element": "file:../element",
"@wordpress/escape-html": "file:../escape-html",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/rich-text": "file:../rich-text",
Expand Down
8 changes: 0 additions & 8 deletions packages/block-library/src/paragraph/icon.js

This file was deleted.

2 changes: 1 addition & 1 deletion packages/block-library/src/paragraph/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import { isEmpty } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { paragraph as icon } from '@wordpress/icons';

/**
* Internal dependencies
*/
import deprecated from './deprecated';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';
Expand Down
1 change: 1 addition & 0 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/primitives": "file:../primitives",
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/circular-option-picker/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __experimentalIcon as Icon, check } from '@wordpress/icons';

/**
* Internal dependencies
*/
import Button from '../button';
import Dropdown from '../dropdown';
import Tooltip from '../tooltip';
import Dashicon from '../dashicon';

function Option( {
className,
Expand All @@ -33,7 +37,7 @@ function Option( {
( <Tooltip text={ tooltipText }>{ optionButton }</Tooltip> ) :
optionButton
}
{ isSelected && <Dashicon icon="saved" /> }
{ isSelected && <Icon icon={ check } /> }
</div>
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/circular-option-picker/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,12 @@ $color-palette-circle-spacing: 12px;
position: relative;
z-index: z-index(".components-circular-option-picker__option.is-pressed");

& + .dashicons-saved {
& + svg {
position: absolute;
left: 4px;
top: 4px;
left: 2px;
top: 2px;
border-radius: 50%;
z-index: z-index(".components-circular-option-picker__option.is-pressed + .dashicons-saved");
z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
background: $white;
pointer-events: none;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -318,27 +318,37 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
/>
</ForwardRef(Button)>
</Tooltip>
<Dashicon
icon="saved"
<Icon
icon={
<SVG
aria-hidden={true}
focusable="false"
role="img"
viewBox="-2 -2 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
/>
</SVG>
}
>
<SVG
aria-hidden={true}
className="dashicon dashicons-saved"
focusable="false"
height={20}
height={24}
role="img"
viewBox="0 0 20 20"
width={20}
viewBox="-2 -2 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="dashicon dashicons-saved"
focusable="false"
height={20}
height={24}
role="img"
viewBox="0 0 20 20"
width={20}
viewBox="-2 -2 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<Path
Expand All @@ -350,7 +360,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
</Path>
</svg>
</SVG>
</Dashicon>
</Icon>
</div>
</Option>
<Option
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/custom-select-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
import { useSelect } from 'downshift';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __experimentalIcon as Icon, check } from '@wordpress/icons';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -126,8 +130,8 @@ export default function CustomSelectControl( {
} ) }
>
{ item === selectedItem && (
<Dashicon
icon="saved"
<Icon
icon={ check }
className="components-custom-select-control__item-icon"
/>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"@wordpress/hooks": "file:../hooks",
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
"@wordpress/keycodes": "file:../keycodes",
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/post-saved-state/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
import { displayShortcut } from '@wordpress/keycodes';
import { withSafeTimeout, compose } from '@wordpress/compose';
import { withViewportMatch } from '@wordpress/viewport';
import { __experimentalIcon as Icon, check } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -88,7 +89,7 @@ export class PostSavedState extends Component {
if ( forceSavedMessage || ( ! isNew && ! isDirty ) ) {
return (
<span className="editor-post-saved-state is-saved">
<Dashicon icon="saved" />
<Icon icon={ check } />
{ __( 'Saved' ) }
</span>
);
Expand Down
5 changes: 3 additions & 2 deletions packages/editor/src/components/post-saved-state/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
overflow: hidden;
white-space: nowrap;

.dashicon {
svg {
display: inline-block;
flex: 0 0 auto;
margin-right: $grid-size;
margin-right: $grid-size-small;
fill: currentColor;
}

@include break-small() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe( 'PostSavedState', () => {
isSaveable={ true } />
);

expect( wrapper.childAt( 0 ).name() ).toBe( 'Dashicon' );
expect( wrapper.childAt( 0 ).name() ).toBe( 'Icon' );
expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
} );

Expand Down
1 change: 1 addition & 0 deletions packages/icons/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
3 changes: 3 additions & 0 deletions packages/icons/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 1.0.0 (2019-08-15)

- Initial release
30 changes: 30 additions & 0 deletions packages/icons/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Icons

WordPress Icons Library.

## Installation

Install the module:

```bash
npm install @wordpress/icons --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Usage

```js
import { __experimentalIcon as Icon, check } from '@wordpress/icons';

<Icon icon={ check } />
```

## Props

Name | Type | Default | Description
--- | --- | --- | ---
`size` | `integer` | `24` | Size of icon in pixels.


<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
31 changes: 31 additions & 0 deletions packages/icons/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"name": "@wordpress/icons",
"version": "1.0.0",
"description": "WordPress Icons package, based on dashicon.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"keywords": [
"icons",
"dashicon",
"wordpress"
],
"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/icons/README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/WordPress/gutenberg.git",
"directory": "packages/icons"
},
"sideEffects": false,
"bugs": {
"url": "https://github.com/WordPress/gutenberg/issues"
},
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@wordpress/element": "../element",
"@wordpress/primitives": "../primitives"
},
"publishConfig": {
"access": "public"
}
}
14 changes: 14 additions & 0 deletions packages/icons/src/icon/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/
import { cloneElement } from '@wordpress/element';

function Icon( { icon, size = 24, ...props } ) {
return cloneElement( icon, {
width: size,
height: size,
...props,
} );
}

export default Icon;
Loading

0 comments on commit 46fcca7

Please sign in to comment.