Add icons

WordPress · Dec 4, 2024 · 92df5cf · 92df5cf
1 parent f3b4abe
commit 92df5cf
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/border-radius-control/linked-button.js b/packages/block-editor/src/components/border-radius-control/linked-button.js
@@ -11,7 +11,7 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	return (
 		<Button
 			{ ...props }
-			className="component-border-radius-control__linked-button"
+			className="components-border-radius-control__linked-button"
 			size="small"
 			icon={ isLinked ? link : linkOff }
 			iconSize={ 24 }

diff --git a/packages/block-editor/src/components/border-radius-control/single-input-control.js b/packages/block-editor/src/components/border-radius-control/single-input-control.js
@@ -5,14 +5,22 @@ import {
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUnitControl as UnitControl,
 	__experimentalHStack as HStack,
+	Icon,
 	Tooltip,
 	RangeControl,
 	Button,
 	CustomSelectControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
+import {
+	cornerAll,
+	cornerBottomLeft,
+	cornerBottomRight,
+	cornerTopLeft,
+	cornerTopRight,
+	settings,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -32,6 +40,13 @@ const CORNERS = {
 	bottomLeft: __( 'Bottom left' ),
 	bottomRight: __( 'Bottom right' ),
 };
+const ICONS = {
+	all: cornerAll,
+	topLeft: cornerTopLeft,
+	topRight: cornerTopRight,
+	bottomLeft: cornerBottomLeft,
+	bottomRight: cornerBottomRight,
+};
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
 	px: 100,
@@ -145,12 +160,20 @@ export default function SingleInputControl( {
 			name: size.name,
 		} ) );
 	}
+	const icon = ICONS[ corner ];
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
 	// Tooltip rendering also requires the UnitControl to be wrapped. See:
 	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<HStack>
+			{ icon && (
+				<Icon
+					className="components-border-radius-control__icon"
+					icon={ icon }
+					size={ 24 }
+				/>
+			) }
 			{ ( ! hasPresets || showCustomValueControl ) && (
 				<div className="components-border-radius-control__input-controls-wrapper">
 					<Tooltip text={ CORNERS[ corner ] } placement="top">

diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -17,7 +17,7 @@
 		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button {
+	.components-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
 
@@ -32,6 +32,6 @@
 	flex: 1;
 }
 
-.component-border-radius-control__custom-toggle {
+.components-border-radius-control__icon {
 	flex: 0 0 auto;
 }
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -66,6 +66,11 @@ export { default as commentAuthorName } from './library/comment-author-name';
 export { default as commentContent } from './library/comment-content';
 export { default as commentReplyLink } from './library/comment-reply-link';
 export { default as commentEditLink } from './library/comment-edit-link';
+export { default as cornerAll } from './library/corner-all';
+export { default as cornerBottomLeft } from './library/corner-bottom-left';
+export { default as cornerBottomRight } from './library/corner-bottom-right';
+export { default as cornerTopLeft } from './library/corner-top-left';
+export { default as cornerTopRight } from './library/corner-top-right';
 export { default as connection } from './library/connection';
 export { default as cover } from './library/cover';
 export { default as create } from './library/create';

diff --git a/packages/icons/src/library/corner-all.js b/packages/icons/src/library/corner-all.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const cornerAll = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5Zm-12.5 9v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z"
+		/>
+	</SVG>
+);
+
+export default cornerAll;
diff --git a/packages/icons/src/library/corner-bottom-left.js b/packages/icons/src/library/corner-bottom-left.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, G } from '@wordpress/primitives';
+
+const cornerBottomLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<G opacity=".25">
+			<Path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
+		</G>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M5.75 15v3c0 .138.112.25.25.25h3v1.5H6A1.75 1.75 0 0 1 4.25 18v-3h1.5Z"
+		/>
+	</SVG>
+);
+
+export default cornerBottomLeft;
diff --git a/packages/icons/src/library/corner-bottom-right.js b/packages/icons/src/library/corner-bottom-right.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, G } from '@wordpress/primitives';
+
+const cornerBottomRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<G opacity=".25">
+			<Path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
+		</G>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M15 18.25h3a.25.25 0 0 0 .25-.25v-3h1.5v3A1.75 1.75 0 0 1 18 19.75h-3v-1.5Z"
+		/>
+	</SVG>
+);
+
+export default cornerBottomRight;
diff --git a/packages/icons/src/library/corner-top-left.js b/packages/icons/src/library/corner-top-left.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, G } from '@wordpress/primitives';
+
+const cornerTopLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<G opacity=".25">
+			<Path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
+		</G>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M6 5.75a.25.25 0 0 0-.25.25v3h-1.5V6c0-.966.784-1.75 1.75-1.75h3v1.5H6Z"
+		/>
+	</SVG>
+);
+
+export default cornerTopLeft;
diff --git a/packages/icons/src/library/corner-top-right.js b/packages/icons/src/library/corner-top-right.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, G } from '@wordpress/primitives';
+
+const cornerTopRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<G opacity=".25">
+			<Path d="M5.75 6A.25.25 0 0 1 6 5.75h3v-1.5H6A1.75 1.75 0 0 0 4.25 6v3h1.5V6ZM18 18.25h-3v1.5h3A1.75 1.75 0 0 0 19.75 18v-3h-1.5v3a.25.25 0 0 1-.25.25ZM18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5ZM5.75 18v-3h-1.5v3c0 .966.784 1.75 1.75 1.75h3v-1.5H6a.25.25 0 0 1-.25-.25Z" />
+		</G>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.25 9V6a.25.25 0 0 0-.25-.25h-3v-1.5h3c.966 0 1.75.784 1.75 1.75v3h-1.5Z"
+		/>
+	</SVG>
+);
+
+export default cornerTopRight;