From 3cc078ed5ece9b2fdbd4059d71a7555661e15752 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:01:41 +0300
Subject: [PATCH 01/17] Components: Introduce RawIcon component

---
 packages/components/src/raw-icon/index.js | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 packages/components/src/raw-icon/index.js

diff --git a/packages/components/src/raw-icon/index.js b/packages/components/src/raw-icon/index.js
new file mode 100644
index 0000000000000..f47b2c7a6528d
--- /dev/null
+++ b/packages/components/src/raw-icon/index.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneElement, createElement, Component, isValidElement } from '@wordpress/element';
+import { Dashicon, SVG } from '../';
+
+function RawIcon( { icon = null, size = 24, className } ) {
+	if ( 'string' === typeof icon ) {
+		return <Dashicon icon={ icon } size={ size } className={ className } />;
+	} else if ( 'function' === typeof icon ) {
+		if ( icon.prototype instanceof Component ) {
+			return createElement( icon, { className, size } );
+		}
+
+		return icon();
+	} else if ( icon && icon.type === 'svg' ) {
+		const appliedProps = {
+			...icon.props,
+			className,
+			width: icon.props.width || size,
+			height: icon.props.height || size,
+		};
+
+		return <SVG { ...appliedProps } />;
+	} else if ( isValidElement( icon ) ) {
+		return cloneElement( icon, {
+			className,
+			size,
+		} );
+	}
+
+	return icon || null;
+}
+
+export default RawIcon;

From 6d72e8a5119e20afa2080d85781a90ec665d8f72 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:02:25 +0300
Subject: [PATCH 02/17] Components: Add tests for RawIcon

---
 .../components/src/raw-icon/test/index.js     | 132 ++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 packages/components/src/raw-icon/test/index.js

diff --git a/packages/components/src/raw-icon/test/index.js b/packages/components/src/raw-icon/test/index.js
new file mode 100644
index 0000000000000..021c7af8514d6
--- /dev/null
+++ b/packages/components/src/raw-icon/test/index.js
@@ -0,0 +1,132 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RawIcon from '../';
+
+describe( 'RawIcon', () => {
+	const className = 'example-class';
+	const svg = <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg>;
+
+	it( 'renders nothing when icon omitted', () => {
+		const wrapper = shallow( <RawIcon /> );
+
+		expect( wrapper.type() ).toBeNull();
+	} );
+
+	it( 'renders a dashicon by slug', () => {
+		const wrapper = shallow( <RawIcon icon="format-image" /> );
+
+		expect( wrapper.find( 'Dashicon' ).prop( 'icon' ) ).toBe( 'format-image' );
+	} );
+
+	it( 'renders a dashicon and passes the classname to it', () => {
+		const wrapper = shallow( <RawIcon icon="format-image" className={ className } /> );
+
+		expect( wrapper.find( 'Dashicon' ).prop( 'className' ) ).toBe( 'example-class' );
+	} );
+
+	it( 'renders a dashicon and passes the size to it', () => {
+		const wrapper = shallow( <RawIcon icon="format-image" size={ 32 } /> );
+
+		expect( wrapper.find( 'Dashicon' ).prop( 'size' ) ).toBe( 32 );
+	} );
+
+	it( 'renders a function', () => {
+		const wrapper = shallow( <RawIcon icon={ () => <span /> } /> );
+
+		expect( wrapper.name() ).toBe( 'span' );
+	} );
+
+	it( 'renders an element', () => {
+		const wrapper = shallow( <RawIcon icon={ <span /> } /> );
+
+		expect( wrapper.name() ).toBe( 'span' );
+	} );
+
+	it( 'renders an element and passes the classname to it', () => {
+		const wrapper = shallow( <RawIcon icon={ <span /> } className={ className } /> );
+
+		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
+	} );
+
+	it( 'renders an element and passes the size to it', () => {
+		const wrapper = shallow( <RawIcon icon="format-image" size={ 32 } /> );
+
+		expect( wrapper.prop( 'size' ) ).toBe( 32 );
+	} );
+
+	it( 'renders an svg element', () => {
+		const wrapper = shallow( <RawIcon icon={ svg } /> );
+
+		expect( wrapper.name() ).toBe( 'SVG' );
+	} );
+
+	it( 'renders an svg element and passes the classname to it', () => {
+		const wrapper = shallow( <RawIcon icon={ svg } className={ className } /> );
+
+		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
+	} );
+
+	it( 'renders an svg element and passes the size as its width and height', () => {
+		const wrapper = shallow( <RawIcon icon={ <svg width={ 64 } height={ 64 }><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } size={ 32 } /> );
+
+		expect( wrapper.prop( 'width' ) ).toBe( 64 );
+		expect( wrapper.prop( 'height' ) ).toBe( 64 );
+	} );
+
+	it( 'renders an svg element and does not override width and height if already specified', () => {
+		const wrapper = shallow( <RawIcon icon={ svg } size={ 32 } /> );
+
+		expect( wrapper.prop( 'width' ) ).toBe( 32 );
+		expect( wrapper.prop( 'height' ) ).toBe( 32 );
+	} );
+
+	it( 'renders a component', () => {
+		class MyComponent extends Component {
+			render() {
+				return <span />;
+			}
+		}
+		const wrapper = shallow(
+			<RawIcon icon={ MyComponent } />
+		);
+
+		expect( wrapper.name() ).toBe( 'MyComponent' );
+	} );
+
+	it( 'renders a component and passes the classname to it', () => {
+		class MyComponent extends Component {
+			render( ) {
+				return <span className={ this.props.className } />;
+			}
+		}
+		const wrapper = shallow(
+			<RawIcon icon={ MyComponent } className={ className } />
+		);
+
+		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
+	} );
+
+	it( 'renders a component and passes the size to it', () => {
+		class MyComponent extends Component {
+			render( ) {
+				return <span size={ this.props.size } />;
+			}
+		}
+		const wrapper = shallow(
+			<RawIcon icon={ MyComponent } size={ 32 } />
+		);
+
+		expect( wrapper.prop( 'size' ) ).toBe( 32 );
+	} );
+} );

From 7f7c859b7977bd45d96a6572a16e5852331bd4c6 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:02:54 +0300
Subject: [PATCH 03/17] Components: Add docs for RawIcon

---
 packages/components/src/raw-icon/README.md | 76 ++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/components/src/raw-icon/README.md

diff --git a/packages/components/src/raw-icon/README.md b/packages/components/src/raw-icon/README.md
new file mode 100644
index 0000000000000..ab7118e5718f6
--- /dev/null
+++ b/packages/components/src/raw-icon/README.md
@@ -0,0 +1,76 @@
+# RawIcon
+
+Allows you to render a raw icon without any initial styling or wrappers.
+
+## Usage
+
+#### With a Dashicon
+
+```jsx
+import { RawIcon } from '@wordpress/components';
+
+const MyIcon = () => (
+	<RawIcon icon="screenoptions" />
+);
+```
+
+#### With a function
+
+```jsx
+import { RawIcon } from '@wordpress/components';
+
+const MyIcon = () => (
+	<RawIcon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
+);
+```
+
+#### With a Component
+
+```jsx
+import { MyIconComponent } from '../my-icon-component';
+import { RawIcon } from '@wordpress/components';
+
+const MyIcon = () => (
+	<RawIcon icon={ MyIconComponent } />
+);
+```
+
+#### With an SVG
+
+```jsx
+import { RawIcon } from '@wordpress/components';
+
+const MyIcon = () => (
+	<RawIcon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
+);
+```
+
+#### Specifying a className
+
+```jsx
+import { RawIcon } from '@wordpress/components';
+
+const MyIcon = () => (
+	<RawIcon icon="screenoptions" className="example-class" />
+);
+```
+
+## Props
+
+The component accepts the following props:
+
+### icon
+
+The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+
+- Type: `String|Function|WPComponent|null`
+- Required: No
+- Default: `null`
+
+### className
+
+An optional additional class name to apply to the rendered icon.
+
+- Type: `String`
+- Required: No
+- Default: `null`

From 0280835842fd0f08090ca40b67e506d1f7108fdc Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:04:00 +0300
Subject: [PATCH 04/17] Components: Expose RawIcon component

---
 packages/components/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index a1a36393346d4..cd253d7a99173 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -44,6 +44,7 @@ export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
+export { default as RawIcon } from './raw-icon';
 export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';

From bd60c2f03c7ea417e5bdcfb1cfc479c17ecca119 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:05:29 +0300
Subject: [PATCH 05/17] Editor: Update BlockIcon to use RawIcon for rendering

---
 packages/components/src/raw-icon/index.js     | 18 ++++++----
 .../editor/src/components/block-icon/index.js | 33 +++----------------
 2 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/raw-icon/index.js b/packages/components/src/raw-icon/index.js
index f47b2c7a6528d..a7fcbde307f71 100644
--- a/packages/components/src/raw-icon/index.js
+++ b/packages/components/src/raw-icon/index.js
@@ -7,22 +7,28 @@ import { Dashicon, SVG } from '../';
 function RawIcon( { icon = null, size = 24, className } ) {
 	if ( 'string' === typeof icon ) {
 		return <Dashicon icon={ icon } size={ size } className={ className } />;
-	} else if ( 'function' === typeof icon ) {
+	}
+
+	if ( 'function' === typeof icon ) {
 		if ( icon.prototype instanceof Component ) {
 			return createElement( icon, { className, size } );
 		}
 
 		return icon();
-	} else if ( icon && icon.type === 'svg' ) {
+	}
+
+	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
 		const appliedProps = {
-			...icon.props,
 			className,
-			width: icon.props.width || size,
-			height: icon.props.height || size,
+			width: size,
+			height: size,
+			...icon.props,
 		};
 
 		return <SVG { ...appliedProps } />;
-	} else if ( isValidElement( icon ) ) {
+	}
+
+	if ( isValidElement( icon ) ) {
 		return cloneElement( icon, {
 			className,
 			size,
diff --git a/packages/editor/src/components/block-icon/index.js b/packages/editor/src/components/block-icon/index.js
index 7314dc6375eda..77da94c6de110 100644
--- a/packages/editor/src/components/block-icon/index.js
+++ b/packages/editor/src/components/block-icon/index.js
@@ -6,37 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Dashicon, Path, SVG } from '@wordpress/components';
-import { createElement, Component } from '@wordpress/element';
+import { Path, RawIcon, SVG } from '@wordpress/components';
 
-function renderIcon( icon ) {
-	if ( 'string' === typeof icon ) {
-		if ( icon !== 'block-default' ) {
-			return <Dashicon icon={ icon } size={ 20 } />;
-		}
-		icon = 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>;
-	}
-	if ( 'function' === typeof icon ) {
-		if ( icon.prototype instanceof Component ) {
-			return createElement( icon );
-		}
-
-		return icon();
-	}
-	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
-		const appliedProps = {
-			width: 24,
-			height: 24,
-			...icon.props,
-		};
-		return <SVG { ...appliedProps } />;
+export default function BlockIcon( { icon, showColors = false, className } ) {
+	if ( icon === 'block-default' ) {
+		return <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>;
 	}
 
-	return icon || null;
-}
-
-export default function BlockIcon( { icon, showColors = false, className } ) {
-	const renderedIcon = renderIcon( icon && icon.src ? icon.src : icon );
+	const renderedIcon = <RawIcon icon={ icon && icon.src ? icon.src : icon } />;
 	const style = showColors ? {
 		backgroundColor: icon && icon.background,
 		color: icon && icon.foreground,

From 63cc9340d49a2a551d345a7972e2e0dce2d666e4 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:07:07 +0300
Subject: [PATCH 06/17] Editor: Update Inserter menu to use RawIcon for block
 categories

---
 packages/editor/src/components/inserter/menu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/src/components/inserter/menu.js b/packages/editor/src/components/inserter/menu.js
index 21f8279c80ddf..7af57b6af6add 100644
--- a/packages/editor/src/components/inserter/menu.js
+++ b/packages/editor/src/components/inserter/menu.js
@@ -295,6 +295,7 @@ export class InserterMenu extends Component {
 							<PanelBody
 								key={ category.slug }
 								title={ category.title }
+								icon={ category.icon }
 								opened={ isSearching || isPanelOpen( category.slug ) }
 								onToggle={ this.onTogglePanel( category.slug ) }
 								ref={ this.bindPanel( category.slug ) }

From 748a84e2b20e0166d4b6cd0e5b4d32fdb2cd8745 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:08:09 +0300
Subject: [PATCH 07/17] Editor: Update PanelBody to use RawIcon

---
 packages/components/src/panel/body.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index d5795d51a0c12..93ac93fbce687 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../button';
-import Dashicon from '../dashicon';
+import RawIcon from '../raw-icon';
 import { G, Path, SVG } from '../primitives';
 
 class PanelBody extends Component {
@@ -61,7 +61,7 @@ class PanelBody extends Component {
 									<G><Path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" /></G>
 								</SVG>
 							}
-							{ icon && <Dashicon icon={ icon } className="components-panel__icon" /> }
+							{ icon && <RawIcon icon={ icon } className="components-panel__icon" size={ 20 } /> }
 							{ title }
 						</Button>
 					</h2>

From 48c0519cdd6cfd60d519b8fc7a36caaa721a1f4f Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:10:05 +0300
Subject: [PATCH 08/17] Register default block categories with null icons

---
 lib/client-assets.php | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 96f83331d341d..e55d2f8a892d5 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -1286,26 +1286,32 @@ function gutenberg_get_block_categories( $post ) {
 		array(
 			'slug'  => 'common',
 			'title' => __( 'Common Blocks', 'gutenberg' ),
+			'icon'  => null,
 		),
 		array(
 			'slug'  => 'formatting',
 			'title' => __( 'Formatting', 'gutenberg' ),
+			'icon'  => null,
 		),
 		array(
 			'slug'  => 'layout',
 			'title' => __( 'Layout Elements', 'gutenberg' ),
+			'icon'  => null,
 		),
 		array(
 			'slug'  => 'widgets',
 			'title' => __( 'Widgets', 'gutenberg' ),
+			'icon'  => null,
 		),
 		array(
 			'slug'  => 'embed',
 			'title' => __( 'Embeds', 'gutenberg' ),
+			'icon'  => null,
 		),
 		array(
 			'slug'  => 'reusable',
 			'title' => __( 'Reusable Blocks', 'gutenberg' ),
+			'icon'  => null,
 		),
 	);
 

From fa4cd682dc6e0f2e16767ab32a001194ad6c8483 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:10:39 +0300
Subject: [PATCH 09/17] DELETE: Test adding a dashicon to default categories

---
 lib/client-assets.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index e55d2f8a892d5..f5cac5e3bc54c 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -1286,7 +1286,7 @@ function gutenberg_get_block_categories( $post ) {
 		array(
 			'slug'  => 'common',
 			'title' => __( 'Common Blocks', 'gutenberg' ),
-			'icon'  => null,
+			'icon'  => 'screenoptions',
 		),
 		array(
 			'slug'  => 'formatting',

From 2535794cb24627e0a0f41e6908b56bb10741ef4a Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:21:56 +0300
Subject: [PATCH 10/17] Use default icon value in return

---
 packages/components/src/raw-icon/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/raw-icon/index.js b/packages/components/src/raw-icon/index.js
index a7fcbde307f71..6e61a51ce301b 100644
--- a/packages/components/src/raw-icon/index.js
+++ b/packages/components/src/raw-icon/index.js
@@ -35,7 +35,7 @@ function RawIcon( { icon = null, size = 24, className } ) {
 		} );
 	}
 
-	return icon || null;
+	return icon;
 }
 
 export default RawIcon;

From d54d1cd6bdd64c1310004f6dd0a63adad5b10c56 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 15:50:03 +0300
Subject: [PATCH 11/17] Update BlockIcon tests

---
 .../editor/src/components/block-icon/index.js |  4 --
 .../src/components/block-icon/test/index.js   | 42 +++++++++----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/packages/editor/src/components/block-icon/index.js b/packages/editor/src/components/block-icon/index.js
index 77da94c6de110..2bd01feb02a8e 100644
--- a/packages/editor/src/components/block-icon/index.js
+++ b/packages/editor/src/components/block-icon/index.js
@@ -19,10 +19,6 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
 		color: icon && icon.foreground,
 	} : {};
 
-	if ( ! renderedIcon ) {
-		return null;
-	}
-
 	return (
 		<div
 			style={ style }
diff --git a/packages/editor/src/components/block-icon/test/index.js b/packages/editor/src/components/block-icon/test/index.js
index a6a6c01521e25..f270bc70fe981 100644
--- a/packages/editor/src/components/block-icon/test/index.js
+++ b/packages/editor/src/components/block-icon/test/index.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { RawIcon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,40 +14,36 @@ import { Component } from '@wordpress/element';
 import BlockIcon from '../';
 
 describe( 'BlockIcon', () => {
-	it( 'renders nothing when icon omitted', () => {
-		const wrapper = shallow( <BlockIcon /> );
+	it( 'renders a RawIcon', () => {
+		const wrapper = shallow( <BlockIcon icon="format-image" /> );
 
-		expect( wrapper.type() ).toBeNull();
+		expect( wrapper.containsMatchingElement( <RawIcon icon="format-image" /> ) ).toBe( true );
 	} );
 
-	it( 'renders a dashicon by slug', () => {
+	it( 'renders a div without the has-colors classname', () => {
 		const wrapper = shallow( <BlockIcon icon="format-image" /> );
 
-		expect( wrapper.find( 'Dashicon' ).prop( 'icon' ) ).toBe( 'format-image' );
+		expect( wrapper.find( 'div' ).hasClass( 'has-colors' ) ).toBe( false );
 	} );
 
-	it( 'renders a function', () => {
-		const wrapper = shallow( <BlockIcon icon={ () => <span /> } /> );
+	it( 'renders a div with the has-colors classname', () => {
+		const wrapper = shallow( <BlockIcon icon="format-image" showColors /> );
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'span' );
+		expect( wrapper.find( 'div' ).hasClass( 'has-colors' ) ).toBe( true );
 	} );
 
-	it( 'renders an element', () => {
-		const wrapper = shallow( <BlockIcon icon={ <span /> } /> );
+	it( 'skips adding background and foreground styles when colors are not enabled', () => {
+		const wrapper = shallow( <BlockIcon icon={ { background: 'white', foreground: 'black' } } /> );
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'span' );
+		expect( wrapper.find( 'div' ).prop( 'style' ) ).toEqual( {} );
 	} );
 
-	it( 'renders a component', () => {
-		class MyComponent extends Component {
-			render() {
-				return <span />;
-			}
-		}
-		const wrapper = shallow(
-			<BlockIcon icon={ MyComponent } />
-		);
-
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'MyComponent' );
+	it( 'adds background and foreground styles when colors are enabled', () => {
+		const wrapper = shallow( <BlockIcon icon={ { background: 'white', foreground: 'black' } } showColors /> );
+
+		expect( wrapper.find( 'div' ).prop( 'style' ) ).toEqual( {
+			backgroundColor: 'white',
+			color: 'black',
+		} );
 	} );
 } );

From 8f2a1fbd5ce895127d2c9eb52185676518124ee0 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 16:05:58 +0300
Subject: [PATCH 12/17] Update embed snapshots

---
 .../block-library/src/embed/test/__snapshots__/index.js.snap  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index b1f124507649b..6bddefd1b492e 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -14,10 +14,10 @@ exports[`core/embed block edit matches snapshot 1`] = `
         aria-hidden="true"
         class="dashicon dashicons-embed-generic"
         focusable="false"
-        height="20"
+        height="24"
         role="img"
         viewBox="0 0 20 20"
-        width="20"
+        width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

From a8f0b1c099d1b2616094306df594f03412909d53 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 16 Oct 2018 17:12:11 +0300
Subject: [PATCH 13/17] Document the size prop

---
 packages/components/src/raw-icon/README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/raw-icon/README.md b/packages/components/src/raw-icon/README.md
index ab7118e5718f6..5e957462a6739 100644
--- a/packages/components/src/raw-icon/README.md
+++ b/packages/components/src/raw-icon/README.md
@@ -67,6 +67,14 @@ The icon to render. Supported values are: Dashicons (specified as strings), func
 - Required: No
 - Default: `null`
 
+### size
+
+The size (width and height) of the icon.
+
+- Type: `Number`
+- Required: No
+- Default: `24`
+
 ### className
 
 An optional additional class name to apply to the rendered icon.

From d947c681785bbdd284e4e21c8f1225df17a3cc2b Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Wed, 17 Oct 2018 11:36:16 +0300
Subject: [PATCH 14/17] Move panel icon after the title

---
 packages/components/src/panel/body.js    | 2 +-
 packages/components/src/panel/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 93ac93fbce687..788acbb4db887 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -61,8 +61,8 @@ class PanelBody extends Component {
 									<G><Path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" /></G>
 								</SVG>
 							}
-							{ icon && <RawIcon icon={ icon } className="components-panel__icon" size={ 20 } /> }
 							{ title }
+							{ icon && <RawIcon icon={ icon } className="components-panel__icon" size={ 20 } /> }
 						</Button>
 					</h2>
 				) }
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index bbe0ae78c9462..e4f2d58af2645 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -114,7 +114,7 @@
 
 .components-panel__icon {
 	color: $dark-gray-500;
-	margin: -2px 6px -2px 0;
+	margin: -2px 0 -2px 6px;
 }
 
 .components-panel__body-toggle-icon {

From 3486d0bcc6d2926f453e7b0586e378f93d2c4562 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Fri, 26 Oct 2018 16:29:04 +0300
Subject: [PATCH 15/17] Rename RawIcon to Icon

---
 .../src/{raw-icon => icon}/README.md          | 22 +++++------
 .../src/{raw-icon => icon}/index.js           |  4 +-
 .../src/{raw-icon => icon}/test/index.js      | 37 ++++++++++---------
 packages/components/src/index.js              |  2 +-
 packages/components/src/panel/body.js         |  4 +-
 .../editor/src/components/block-icon/index.js |  4 +-
 .../src/components/block-icon/test/index.js   |  6 +--
 7 files changed, 40 insertions(+), 39 deletions(-)
 rename packages/components/src/{raw-icon => icon}/README.md (63%)
 rename packages/components/src/{raw-icon => icon}/index.js (90%)
 rename packages/components/src/{raw-icon => icon}/test/index.js (68%)

diff --git a/packages/components/src/raw-icon/README.md b/packages/components/src/icon/README.md
similarity index 63%
rename from packages/components/src/raw-icon/README.md
rename to packages/components/src/icon/README.md
index 5e957462a6739..3a9925ee64a7a 100644
--- a/packages/components/src/raw-icon/README.md
+++ b/packages/components/src/icon/README.md
@@ -1,4 +1,4 @@
-# RawIcon
+# Icon
 
 Allows you to render a raw icon without any initial styling or wrappers.
 
@@ -7,20 +7,20 @@ Allows you to render a raw icon without any initial styling or wrappers.
 #### With a Dashicon
 
 ```jsx
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 const MyIcon = () => (
-	<RawIcon icon="screenoptions" />
+	<Icon icon="screenoptions" />
 );
 ```
 
 #### With a function
 
 ```jsx
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 const MyIcon = () => (
-	<RawIcon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
+	<Icon icon={ () => <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
 );
 ```
 
@@ -28,30 +28,30 @@ const MyIcon = () => (
 
 ```jsx
 import { MyIconComponent } from '../my-icon-component';
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 const MyIcon = () => (
-	<RawIcon icon={ MyIconComponent } />
+	<Icon icon={ MyIconComponent } />
 );
 ```
 
 #### With an SVG
 
 ```jsx
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 const MyIcon = () => (
-	<RawIcon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
+	<Icon icon={ <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } />
 );
 ```
 
 #### Specifying a className
 
 ```jsx
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 const MyIcon = () => (
-	<RawIcon icon="screenoptions" className="example-class" />
+	<Icon icon="screenoptions" className="example-class" />
 );
 ```
 
diff --git a/packages/components/src/raw-icon/index.js b/packages/components/src/icon/index.js
similarity index 90%
rename from packages/components/src/raw-icon/index.js
rename to packages/components/src/icon/index.js
index 6e61a51ce301b..a363368520ce4 100644
--- a/packages/components/src/raw-icon/index.js
+++ b/packages/components/src/icon/index.js
@@ -4,7 +4,7 @@
 import { cloneElement, createElement, Component, isValidElement } from '@wordpress/element';
 import { Dashicon, SVG } from '../';
 
-function RawIcon( { icon = null, size = 24, className } ) {
+function Icon( { icon = null, size = 24, className } ) {
 	if ( 'string' === typeof icon ) {
 		return <Dashicon icon={ icon } size={ size } className={ className } />;
 	}
@@ -38,4 +38,4 @@ function RawIcon( { icon = null, size = 24, className } ) {
 	return icon;
 }
 
-export default RawIcon;
+export default Icon;
diff --git a/packages/components/src/raw-icon/test/index.js b/packages/components/src/icon/test/index.js
similarity index 68%
rename from packages/components/src/raw-icon/test/index.js
rename to packages/components/src/icon/test/index.js
index 021c7af8514d6..a94630c818218 100644
--- a/packages/components/src/raw-icon/test/index.js
+++ b/packages/components/src/icon/test/index.js
@@ -7,85 +7,86 @@ import { shallow } from 'enzyme';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { Path, SVG } from '../../';
 
 /**
  * Internal dependencies
  */
-import RawIcon from '../';
+import Icon from '../';
 
-describe( 'RawIcon', () => {
+describe( 'Icon', () => {
 	const className = 'example-class';
-	const svg = <svg><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg>;
+	const svg = <SVG><Path d="M5 4v3h5.5v12h3V7H19V4z" /></SVG>;
 
 	it( 'renders nothing when icon omitted', () => {
-		const wrapper = shallow( <RawIcon /> );
+		const wrapper = shallow( <Icon /> );
 
 		expect( wrapper.type() ).toBeNull();
 	} );
 
 	it( 'renders a dashicon by slug', () => {
-		const wrapper = shallow( <RawIcon icon="format-image" /> );
+		const wrapper = shallow( <Icon icon="format-image" /> );
 
 		expect( wrapper.find( 'Dashicon' ).prop( 'icon' ) ).toBe( 'format-image' );
 	} );
 
 	it( 'renders a dashicon and passes the classname to it', () => {
-		const wrapper = shallow( <RawIcon icon="format-image" className={ className } /> );
+		const wrapper = shallow( <Icon icon="format-image" className={ className } /> );
 
 		expect( wrapper.find( 'Dashicon' ).prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
 	it( 'renders a dashicon and passes the size to it', () => {
-		const wrapper = shallow( <RawIcon icon="format-image" size={ 32 } /> );
+		const wrapper = shallow( <Icon icon="format-image" size={ 32 } /> );
 
 		expect( wrapper.find( 'Dashicon' ).prop( 'size' ) ).toBe( 32 );
 	} );
 
 	it( 'renders a function', () => {
-		const wrapper = shallow( <RawIcon icon={ () => <span /> } /> );
+		const wrapper = shallow( <Icon icon={ () => <span /> } /> );
 
 		expect( wrapper.name() ).toBe( 'span' );
 	} );
 
 	it( 'renders an element', () => {
-		const wrapper = shallow( <RawIcon icon={ <span /> } /> );
+		const wrapper = shallow( <Icon icon={ <span /> } /> );
 
 		expect( wrapper.name() ).toBe( 'span' );
 	} );
 
 	it( 'renders an element and passes the classname to it', () => {
-		const wrapper = shallow( <RawIcon icon={ <span /> } className={ className } /> );
+		const wrapper = shallow( <Icon icon={ <span /> } className={ className } /> );
 
 		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
 	it( 'renders an element and passes the size to it', () => {
-		const wrapper = shallow( <RawIcon icon="format-image" size={ 32 } /> );
+		const wrapper = shallow( <Icon icon="format-image" size={ 32 } /> );
 
 		expect( wrapper.prop( 'size' ) ).toBe( 32 );
 	} );
 
 	it( 'renders an svg element', () => {
-		const wrapper = shallow( <RawIcon icon={ svg } /> );
+		const wrapper = shallow( <Icon icon={ svg } /> );
 
 		expect( wrapper.name() ).toBe( 'SVG' );
 	} );
 
 	it( 'renders an svg element and passes the classname to it', () => {
-		const wrapper = shallow( <RawIcon icon={ svg } className={ className } /> );
+		const wrapper = shallow( <Icon icon={ svg } className={ className } /> );
 
 		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
 	it( 'renders an svg element and passes the size as its width and height', () => {
-		const wrapper = shallow( <RawIcon icon={ <svg width={ 64 } height={ 64 }><path d="M5 4v3h5.5v12h3V7H19V4z" /></svg> } size={ 32 } /> );
+		const wrapper = shallow( <Icon icon={ <SVG width={ 64 } height={ 64 }><Path d="M5 4v3h5.5v12h3V7H19V4z" /></SVG> } size={ 32 } /> );
 
 		expect( wrapper.prop( 'width' ) ).toBe( 64 );
 		expect( wrapper.prop( 'height' ) ).toBe( 64 );
 	} );
 
 	it( 'renders an svg element and does not override width and height if already specified', () => {
-		const wrapper = shallow( <RawIcon icon={ svg } size={ 32 } /> );
+		const wrapper = shallow( <Icon icon={ svg } size={ 32 } /> );
 
 		expect( wrapper.prop( 'width' ) ).toBe( 32 );
 		expect( wrapper.prop( 'height' ) ).toBe( 32 );
@@ -98,7 +99,7 @@ describe( 'RawIcon', () => {
 			}
 		}
 		const wrapper = shallow(
-			<RawIcon icon={ MyComponent } />
+			<Icon icon={ MyComponent } />
 		);
 
 		expect( wrapper.name() ).toBe( 'MyComponent' );
@@ -111,7 +112,7 @@ describe( 'RawIcon', () => {
 			}
 		}
 		const wrapper = shallow(
-			<RawIcon icon={ MyComponent } className={ className } />
+			<Icon icon={ MyComponent } className={ className } />
 		);
 
 		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
@@ -124,7 +125,7 @@ describe( 'RawIcon', () => {
 			}
 		}
 		const wrapper = shallow(
-			<RawIcon icon={ MyComponent } size={ 32 } />
+			<Icon icon={ MyComponent } size={ 32 } />
 		);
 
 		expect( wrapper.prop( 'size' ) ).toBe( 32 );
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index cd253d7a99173..5af9d24cd7077 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -24,6 +24,7 @@ export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
+export { default as Icon } from './icon';
 export { default as IconButton } from './icon-button';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
@@ -44,7 +45,6 @@ export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
-export { default as RawIcon } from './raw-icon';
 export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 788acbb4db887..f23533a6dea34 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../button';
-import RawIcon from '../raw-icon';
+import Icon from '../icon';
 import { G, Path, SVG } from '../primitives';
 
 class PanelBody extends Component {
@@ -62,7 +62,7 @@ class PanelBody extends Component {
 								</SVG>
 							}
 							{ title }
-							{ icon && <RawIcon icon={ icon } className="components-panel__icon" size={ 20 } /> }
+							{ icon && <Icon icon={ icon } className="components-panel__icon" size={ 20 } /> }
 						</Button>
 					</h2>
 				) }
diff --git a/packages/editor/src/components/block-icon/index.js b/packages/editor/src/components/block-icon/index.js
index 2bd01feb02a8e..7b68ce97128ed 100644
--- a/packages/editor/src/components/block-icon/index.js
+++ b/packages/editor/src/components/block-icon/index.js
@@ -6,14 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Path, RawIcon, SVG } from '@wordpress/components';
+import { Path, Icon, SVG } from '@wordpress/components';
 
 export default function BlockIcon( { icon, showColors = false, className } ) {
 	if ( icon === 'block-default' ) {
 		return <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>;
 	}
 
-	const renderedIcon = <RawIcon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
 	const style = showColors ? {
 		backgroundColor: icon && icon.background,
 		color: icon && icon.foreground,
diff --git a/packages/editor/src/components/block-icon/test/index.js b/packages/editor/src/components/block-icon/test/index.js
index f270bc70fe981..0712cc2f6d5df 100644
--- a/packages/editor/src/components/block-icon/test/index.js
+++ b/packages/editor/src/components/block-icon/test/index.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * WordPress dependencies
  */
-import { RawIcon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,10 +14,10 @@ import { RawIcon } from '@wordpress/components';
 import BlockIcon from '../';
 
 describe( 'BlockIcon', () => {
-	it( 'renders a RawIcon', () => {
+	it( 'renders a Icon', () => {
 		const wrapper = shallow( <BlockIcon icon="format-image" /> );
 
-		expect( wrapper.containsMatchingElement( <RawIcon icon="format-image" /> ) ).toBe( true );
+		expect( wrapper.containsMatchingElement( <Icon icon="format-image" /> ) ).toBe( true );
 	} );
 
 	it( 'renders a div without the has-colors classname', () => {

From c7959cfc3308034bfa1763cc35317f065cfbcb7e Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Fri, 26 Oct 2018 16:49:54 +0300
Subject: [PATCH 16/17] Default Dashicons to 20x20, the rest to 24x24

---
 .../embed/test/__snapshots__/index.js.snap    |  4 ++--
 packages/components/src/icon/README.md        |  2 +-
 packages/components/src/icon/index.js         | 19 +++++++++++++------
 packages/components/src/icon/test/index.js    | 13 +++++++++++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index 6bddefd1b492e..b1f124507649b 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -14,10 +14,10 @@ exports[`core/embed block edit matches snapshot 1`] = `
         aria-hidden="true"
         class="dashicon dashicons-embed-generic"
         focusable="false"
-        height="24"
+        height="20"
         role="img"
         viewBox="0 0 20 20"
-        width="24"
+        width="20"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md
index 3a9925ee64a7a..de36accebd375 100644
--- a/packages/components/src/icon/README.md
+++ b/packages/components/src/icon/README.md
@@ -73,7 +73,7 @@ The size (width and height) of the icon.
 
 - Type: `Number`
 - Required: No
-- Default: `24`
+- Default: `20` when a Dashicon is rendered, `24` for all other icons.
 
 ### className
 
diff --git a/packages/components/src/icon/index.js b/packages/components/src/icon/index.js
index a363368520ce4..fbb2c1bc49df7 100644
--- a/packages/components/src/icon/index.js
+++ b/packages/components/src/icon/index.js
@@ -4,14 +4,21 @@
 import { cloneElement, createElement, Component, isValidElement } from '@wordpress/element';
 import { Dashicon, SVG } from '../';
 
-function Icon( { icon = null, size = 24, className } ) {
+function Icon( { icon = null, size, className } ) {
+	let iconSize;
+
 	if ( 'string' === typeof icon ) {
-		return <Dashicon icon={ icon } size={ size } className={ className } />;
+		// Dashicons should be 20x20 by default
+		iconSize = size || 20;
+		return <Dashicon icon={ icon } size={ iconSize } className={ className } />;
 	}
 
+	// Any other icons should be 24x24 by default
+	iconSize = size || 24;
+
 	if ( 'function' === typeof icon ) {
 		if ( icon.prototype instanceof Component ) {
-			return createElement( icon, { className, size } );
+			return createElement( icon, { className, size: iconSize } );
 		}
 
 		return icon();
@@ -20,8 +27,8 @@ function Icon( { icon = null, size = 24, className } ) {
 	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
 		const appliedProps = {
 			className,
-			width: size,
-			height: size,
+			width: iconSize,
+			height: iconSize,
 			...icon.props,
 		};
 
@@ -31,7 +38,7 @@ function Icon( { icon = null, size = 24, className } ) {
 	if ( isValidElement( icon ) ) {
 		return cloneElement( icon, {
 			className,
-			size,
+			size: iconSize,
 		} );
 	}
 
diff --git a/packages/components/src/icon/test/index.js b/packages/components/src/icon/test/index.js
index a94630c818218..a7fea71cb9fac 100644
--- a/packages/components/src/icon/test/index.js
+++ b/packages/components/src/icon/test/index.js
@@ -36,6 +36,12 @@ describe( 'Icon', () => {
 		expect( wrapper.find( 'Dashicon' ).prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
+	it( 'renders a dashicon and with a default size of 20', () => {
+		const wrapper = shallow( <Icon icon="format-image" /> );
+
+		expect( wrapper.find( 'Dashicon' ).prop( 'size' ) ).toBe( 20 );
+	} );
+
 	it( 'renders a dashicon and passes the size to it', () => {
 		const wrapper = shallow( <Icon icon="format-image" size={ 32 } /> );
 
@@ -78,6 +84,13 @@ describe( 'Icon', () => {
 		expect( wrapper.prop( 'className' ) ).toBe( 'example-class' );
 	} );
 
+	it( 'renders an svg element with a default width and height of 24', () => {
+		const wrapper = shallow( <Icon icon={ svg } /> );
+
+		expect( wrapper.prop( 'width' ) ).toBe( 24 );
+		expect( wrapper.prop( 'height' ) ).toBe( 24 );
+	} );
+
 	it( 'renders an svg element and passes the size as its width and height', () => {
 		const wrapper = shallow( <Icon icon={ <SVG width={ 64 } height={ 64 }><Path d="M5 4v3h5.5v12h3V7H19V4z" /></SVG> } size={ 32 } /> );
 

From 729fa981795ba1ca90c90eccff6b8e6da38d19f9 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sat, 27 Oct 2018 12:26:15 +0100
Subject: [PATCH 17/17] Update the docs manifest

---
 docs/manifest.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index 13c0c5adb0869..909160418c89d 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -731,6 +731,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/icon-button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Icon",
+		"slug": "icon",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/icon/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "KeyboardShortcuts",
 		"slug": "keyboard-shortcuts",