Use segmented control for border style control

WordPress · Jul 5, 2021 · 6500f68 · 6500f68
1 parent 8ed4bf1
commit 6500f68
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/border-style-control/icons.js b/packages/block-editor/src/components/border-style-control/icons.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const solidIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path d="M5 11.25h14v1.5H5z" />
+	</SVG>
+);
+
+export const dashedIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path
+			fillRule="evenodd"
+			d="M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
+
+export const dottedIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path
+			fillRule="evenodd"
+			d="M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js
@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { dashedIcon, dottedIcon, solidIcon } from './icons';
+
 const BORDER_STYLES = [
-	{ label: __( 'Default' ), value: undefined },
-	{ label: __( 'None' ), value: 'none' },
-	{ label: __( 'Solid' ), value: 'solid' },
-	{ label: __( 'Dashed' ), value: 'dashed' },
-	{ label: __( 'Dotted' ), value: 'dotted' },
+	{ label: __( 'Solid' ), icon: solidIcon, value: 'solid' },
+	{ label: __( 'Dashed' ), icon: dashedIcon, value: 'dashed' },
+	{ label: __( 'Dotted' ), icon: dottedIcon, value: 'dotted' },
 ];
 
 /**
@@ -24,13 +27,25 @@ const BORDER_STYLES = [
 export default function BorderStyleControl( { onChange, value } ) {
 	return (
 		<fieldset className="components-border-style-control">
-			<SelectControl
-				className="components-border-style-control__select"
-				label={ __( 'Style' ) }
-				options={ BORDER_STYLES }
-				value={ value }
-				onChange={ onChange }
-			/>
+			<legend>{ __( 'Style' ) }</legend>
+			<div className="components-border-style-control__buttons">
+				{ BORDER_STYLES.map( ( borderStyle ) => (
+					<Button
+						key={ borderStyle.value }
+						icon={ borderStyle.icon }
+						isSmall
+						isPressed={ borderStyle.value === value }
+						onClick={ () =>
+							onChange(
+								borderStyle.value === value
+									? undefined
+									: borderStyle.value
+							)
+						}
+						aria-label={ borderStyle.label }
+					/>
+				) ) }
+			</div>
 		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/packages/block-editor/src/components/border-style-control/style.scss
@@ -1,14 +1,17 @@
-.components-border-style-control__select {
-	margin-bottom: 24px;
-
-	button {
-		width: 100%;
+.components-border-style-control {
+	legend {
+		padding-bottom: $grid-unit-05;
 	}
 
-	ul {
-		li,
-		li:last-child {
-			margin: 6px;
+	.components-border-style-control__buttons {
+		display: inline-flex;
+		margin-bottom: $grid-unit-30;
+
+		.components-button.has-icon {
+			min-width: 30px;
+			height: 30px;
+			padding: 3px;
+			margin-right: $grid-unit-05;
 		}
 	}
 }