Move more format library icons to the icons package (#20072)

WordPress · Feb 7, 2020 · 31e7219 · 31e7219
1 parent bf3042f
commit 31e7219
Show file tree

Hide file tree

Showing 27 changed files with 179 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -16,6 +16,7 @@ import {
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -170,7 +171,7 @@ const MediaReplaceFlow = ( {
 						</MediaUploadCheck>
 						{ onSelectURL && (
 							<MenuItem
-								icon="admin-links"
+								icon={ link }
 								onClick={ () =>
 									setShowURLInput( ! showURLInput )
 								}

diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { Button } from '@wordpress/components';
+import { link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -37,7 +38,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
-					icon="admin-links"
+					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
 					className="components-toolbar__control"

diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -18,6 +18,7 @@ import {
 	Path,
 } from '@wordpress/components';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { link as linkIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -258,7 +259,7 @@ const ImageURLInputUI = ( {
 	return (
 		<>
 			<Button
-				icon="admin-links"
+				icon={ linkIcon }
 				className="components-toolbar__control"
 				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
 				aria-expanded={ isOpen }

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -31,6 +31,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { link } from '@wordpress/icons';
 
 const { getComputedStyle } = window;
 
@@ -120,7 +121,7 @@ function URLPicker( {
 				<ToolbarGroup>
 					<ToolbarButton
 						name="link"
-						icon="admin-links"
+						icon={ link }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
 						onClick={ openLinkControl }

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -26,6 +26,7 @@ import {
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { isURL, prependHTTP } from '@wordpress/url';
+import { link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -230,7 +231,7 @@ class ButtonEdit extends Component {
 		return (
 			<>
 				<TextControl
-					icon={ ! isCompatibleWithSettings && 'admin-links' }
+					icon={ ! isCompatibleWithSettings && link }
 					label={ __( 'Button URL' ) }
 					value={ url || '' }
 					valuePlaceholder={ __( 'Add URL' ) }
@@ -353,7 +354,7 @@ class ButtonEdit extends Component {
 							<ToolbarGroup>
 								<ToolbarButton
 									title={ __( 'Edit image' ) }
-									icon={ 'admin-links' }
+									icon={ link }
 									onClick={ this.onToggleLinkSettings }
 								/>
 							</ToolbarGroup>

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -48,7 +48,7 @@ import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { image as icon } from '@wordpress/icons';
+import { link, image as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -389,7 +389,7 @@ export class ImageEdit extends React.Component {
 			<InspectorControls>
 				<PanelBody title={ __( 'Image settings' ) }>
 					<TextControl
-						icon={ 'admin-links' }
+						icon={ link }
 						label={ __( 'Link To' ) }
 						value={ href || '' }
 						valuePlaceholder={ __( 'Add URL' ) }

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -32,6 +32,8 @@ import {
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import { link as linkIcon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -125,7 +127,7 @@ function NavigationLinkEdit( {
 					/>
 					<ToolbarButton
 						name="link"
-						icon="admin-links"
+						icon={ linkIcon }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
 						onClick={ () => setIsLinkOpen( true ) }

diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
@@ -3,6 +3,11 @@
  */
 import { text, number } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { formatBold, formatItalic } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -114,8 +119,8 @@ export const groupedIcons = () => {
 
 	return (
 		<GroupContainer>
-			<Button icon="editor-bold" label="Bold" />
-			<Button icon="editor-italic" label="Italic" />
+			<Button icon={ formatBold } label="Bold" />
+			<Button icon={ formatItalic } label="Italic" />
 			<Button icon="editor-underline" label="Underline" />
 		</GroupContainer>
 	);

diff --git a/packages/components/src/toolbar-group/stories/index.js b/packages/components/src/toolbar-group/stories/index.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { formatBold, formatItalic, link } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -8,9 +13,9 @@ export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
 export const _default = () => {
 	return (
 		<ToolbarGroup>
-			<ToolbarButton icon="editor-bold" title="Bold" isActive />
-			<ToolbarButton icon="editor-italic" title="Italic" />
-			<ToolbarButton icon="admin-links" title="Link" />
+			<ToolbarButton icon={ formatBold } title="Bold" isActive />
+			<ToolbarButton icon={ formatItalic } title="Italic" />
+			<ToolbarButton icon={ link } title="Link" />
 		</ToolbarGroup>
 	);
 };
@@ -19,9 +24,9 @@ export const withControlsProp = () => {
 	return (
 		<ToolbarGroup
 			controls={ [
-				{ icon: 'editor-bold', title: 'Bold', isActive: true },
-				{ icon: 'editor-italic', title: 'Italic' },
-				{ icon: 'admin-links', title: 'Link' },
+				{ icon: formatBold, title: 'Bold', isActive: true },
+				{ icon: formatItalic, title: 'Italic' },
+				{ icon: link, title: 'Link' },
 			] }
 		/>
 	);

diff --git a/packages/components/src/toolbar/stories/index.js b/packages/components/src/toolbar/stories/index.js
@@ -1,3 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	formatBold,
+	formatItalic,
+	formatStrikethrough,
+	link,
+	code,
+} from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -61,18 +72,18 @@ export const _default = () => {
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarButton>Text</ToolbarButton>
-				<ToolbarButton icon="editor-bold" label="Bold" isPressed />
-				<ToolbarButton icon="editor-italic" label="Italic" />
-				<ToolbarButton icon="admin-links" label="Link" />
+				<ToolbarButton icon={ formatBold } label="Bold" isPressed />
+				<ToolbarButton icon={ formatItalic } label="Italic" />
+				<ToolbarButton icon={ link } label="Link" />
 				<ToolbarGroup
 					isCollapsed
 					icon={ false }
 					label="More rich text controls"
 					controls={ [
-						{ icon: 'editor-code', title: 'Inline code' },
+						{ icon: code, title: 'Inline code' },
 						{ icon: <InlineImageIcon />, title: 'Inline image' },
 						{
-							icon: 'editor-strikethrough',
+							icon: formatStrikethrough,
 							title: 'Strikethrough',
 						},
 					] }
@@ -104,9 +115,9 @@ export const withoutGroup = () => {
 			__experimentalAccessibilityLabel="Options"
 			id="options-toolbar-without-group"
 		>
-			<ToolbarButton icon="editor-bold" label="Bold" isPressed />
-			<ToolbarButton icon="editor-italic" label="Italic" />
-			<ToolbarButton icon="admin-links" label="Link" />
+			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
+			<ToolbarButton icon={ formatItalic } label="Italic" />
+			<ToolbarButton icon={ link } label="Link" />
 		</Toolbar>
 	);
 };

diff --git a/packages/editor/src/components/post-permalink/index.js b/packages/editor/src/components/post-permalink/index.js
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { ClipboardButton, Button, ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, safeDecodeURIComponent } from '@wordpress/url';
+import { link as linkIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -99,7 +100,7 @@ class PostPermalink extends Component {
 					label={ ariaLabel }
 					onCopy={ () => this.setState( { isCopied: true } ) }
 					aria-disabled={ isCopied }
-					icon="admin-links"
+					icon={ linkIcon }
 				/>
 
 				<span className="editor-post-permalink__label">

diff --git a/packages/format-library/package.json b/packages/format-library/package.json
@@ -28,6 +28,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/url": "file:../url",

diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js
@@ -8,6 +8,7 @@ import {
 	RichTextShortcut,
 	__unstableRichTextInputEvent,
 } from '@wordpress/block-editor';
+import { formatBold } from '@wordpress/icons';
 
 const name = 'core/bold';
 const title = __( 'Bold' );
@@ -36,7 +37,7 @@ export const bold = {
 				/>
 				<RichTextToolbarButton
 					name="bold"
-					icon="editor-bold"
+					icon={ formatBold }
 					title={ title }
 					onClick={ onClick }
 					isActive={ isActive }

diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { toggleFormat, remove, applyFormat } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { code as codeIcon } from '@wordpress/icons';
 
 const name = 'core/code';
 const title = __( 'Inline Code' );
@@ -51,7 +52,7 @@ export const code = {
 
 		return (
 			<RichTextToolbarButton
-				icon="editor-code"
+				icon={ codeIcon }
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }

diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js
@@ -8,6 +8,7 @@ import {
 	RichTextShortcut,
 	__unstableRichTextInputEvent,
 } from '@wordpress/block-editor';
+import { formatItalic } from '@wordpress/icons';
 
 const name = 'core/italic';
 const title = __( 'Italic' );
@@ -36,7 +37,7 @@ export const italic = {
 				/>
 				<RichTextToolbarButton
 					name="italic"
-					icon="editor-italic"
+					icon={ formatItalic }
 					title={ title }
 					onClick={ onClick }
 					isActive={ isActive }

diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
@@ -17,6 +17,7 @@ import {
 	RichTextShortcut,
 } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
+import { link as linkIcon, linkOff } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -130,7 +131,7 @@ export const link = {
 						{ isActive && (
 							<RichTextToolbarButton
 								name="link"
-								icon="editor-unlink"
+								icon={ linkOff }
 								title={ __( 'Unlink' ) }
 								onClick={ this.onRemoveFormat }
 								isActive={ isActive }
@@ -141,7 +142,7 @@ export const link = {
 						{ ! isActive && (
 							<RichTextToolbarButton
 								name="link"
-								icon="admin-links"
+								icon={ linkIcon }
 								title={ title }
 								onClick={ this.addLink }
 								isActive={ isActive }

diff --git a/packages/format-library/src/link/index.native.js b/packages/format-library/src/link/index.native.js
@@ -20,6 +20,7 @@ import {
 	slice,
 } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
+import { link as linkIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -151,7 +152,7 @@ export const link = {
 						/>
 						<RichTextToolbarButton
 							name="link"
-							icon="admin-links"
+							icon={ linkIcon }
 							title={ __( 'Link' ) }
 							onClick={ this.addLink }
 							isActive={ isActive }

diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
@@ -19,6 +19,7 @@ import {
 	getTextContent,
 	slice,
 } from '@wordpress/rich-text';
+import { link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -160,7 +161,7 @@ class ModalLinkUI extends Component {
 				{
 					/* eslint-disable jsx-a11y/no-autofocus */
 					<BottomSheet.Cell
-						icon={ 'admin-links' }
+						icon={ link }
 						label={ __( 'URL' ) }
 						value={ this.state.inputValue }
 						placeholder={ __( 'Add URL' ) }