Update: Custom gradient picker design.

WordPress · Sep 10, 2021 · 5e82c6a · 5e82c6a
1 parent 2c56a9c
commit 5e82c6a
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 70 deletions.
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
@@ -6,33 +6,25 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import { FlexBlock, FlexItem } from '../flex';
-import NumberControl from '../number-control';
+import InputControl from '../input-control';
 import AngleCircle from './angle-circle';
 import { Root } from './styles/angle-picker-control-styles';
+import { space } from '../ui/utils/space';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
 	className,
-	hideLabelFromVision,
-	id: idProp,
 	label = __( 'Angle' ),
 	onChange,
 	value,
-	...props
 } ) {
-	const instanceId = useInstanceId(
-		AnglePickerControl,
-		'components-angle-picker-control__input'
-	);
-	const id = idProp || instanceId;
-
 	const handleOnNumberChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;
@@ -42,33 +34,40 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<BaseControl
-			className={ classes }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			label={ label }
-			{ ...props }
-		>
-			<Root>
-				<FlexBlock>
-					<NumberControl
-						className="components-angle-picker-control__input-field"
-						id={ id }
-						max={ 360 }
-						min={ 0 }
-						onChange={ handleOnNumberChange }
-						step="1"
-						value={ value }
-					/>
-				</FlexBlock>
-				<FlexItem>
-					<AngleCircle
-						aria-hidden="true"
-						value={ value }
-						onChange={ onChange }
-					/>
-				</FlexItem>
-			</Root>
-		</BaseControl>
+		<Root className={ classes }>
+			<FlexBlock>
+				<InputControl
+					label={ label }
+					className="components-angle-picker-control__input-field"
+					max={ 360 }
+					min={ 0 }
+					onChange={ handleOnNumberChange }
+					step="1"
+					value={ value }
+					suffix={
+						<Spacer
+							as={ Text }
+							marginRight={ space( 3 ) }
+							color="blue"
+						>
+							°
+						</Spacer>
+					}
+				/>
+			</FlexBlock>
+			<FlexItem
+				style={ {
+					marginLeft: space( 4 ),
+					marginBottom: space( 1 ),
+					marginTop: 'auto',
+				} }
+			>
+				<AngleCircle
+					aria-hidden="true"
+					value={ value }
+					onChange={ onChange }
+				/>
+			</FlexItem>
+		</Root>
 	);
 }
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
@@ -8,16 +8,17 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
+import { space } from '../../ui/utils/space';
 
-const CIRCLE_SIZE = 30;
+const CIRCLE_SIZE = 32;
 
 export const Root = styled( Flex )`
-	max-width: 200px;
+	margin-bottom: ${ space( 2 ) };
 `;
 
 export const CircleRoot = styled.div`
 	border-radius: 50%;
-	border: 1px solid ${ COLORS.ui.borderLight };
+	border: 1px solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
 	height: ${ CIRCLE_SIZE }px;
@@ -33,17 +34,17 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.ui.border };
+	background: #3858e9;
 	border-radius: 50%;
-	border: 3px solid ${ COLORS.ui.border };
+	border: 3px solid #3858e9;
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;
-	height: 1px;
+	height: 0px;
 	left: 0;
 	margin: auto;
 	position: absolute;
 	right: 0;
 	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 1px;
+	width: 0px;
 `;
diff --git a/packages/components/src/custom-gradient-bar/constants.js b/packages/components/src/custom-gradient-bar/constants.js
@@ -3,8 +3,8 @@ export const COLOR_POPOVER_PROPS = {
 	position: 'top',
 };
 
-export const GRADIENT_MARKERS_WIDTH = 18;
-export const INSERT_POINT_WIDTH = 23;
+export const GRADIENT_MARKERS_WIDTH = 16;
+export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
 export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
 export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;

diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
@@ -52,8 +52,8 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
-			hideLabelFromVision
 			onChange={ onAngleChange }
+			labelPosition="top"
 			value={ hasGradient ? angle : '' }
 		/>
 	);
@@ -95,7 +95,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		<SelectControl
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
-			labelPosition={ 'side' }
+			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
 			value={ hasGradient && type }

diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,4 +1,4 @@
-$components-custom-gradient-picker__padding: 6px; // 36px container, 24px handles inside, that leaves 12px padding, half of which is 6.
+$components-custom-gradient-picker__padding: 16px; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
 	opacity: 0.4;
@@ -7,13 +7,10 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 .components-custom-gradient-picker__gradient-bar {
 	margin-top: $grid-unit-15;
 	width: 100%;
-	height: $button-size;
-	border-radius: $button-size;
-	margin-bottom: $grid-unit-15;
+	height: $grid-unit-60;
+	margin-bottom: $grid-unit-20+$grid-unit-05;
 	/*rtl:ignore*/
-	padding-left: $components-custom-gradient-picker__padding;
-	/*rtl:ignore*/
-	padding-right: $button-size - $components-custom-gradient-picker__padding;
+	padding-right: $components-custom-gradient-picker__padding;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -24,9 +21,9 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 		background: $white;
 		padding: 2px;
 		top: $components-custom-gradient-picker__padding;
-		min-width: $button-size-small;
-		width: $button-size-small;
-		height: $button-size-small;
+		min-width: $grid-unit-20;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		position: relative;
 		color: $gray-900;
 
@@ -37,20 +34,18 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 	}
 
 	.components-custom-gradient-picker__control-point-button {
-		border: 2px solid transparent;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
+		border: 1.5px solid $white;
+		box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
 		border-radius: 50%;
-		height: $button-size-small;
-		width: $button-size-small;
+		height: $grid-unit-20;
+		width: $grid-unit-20;
 		padding: 0;
 		position: absolute;
 		top: $components-custom-gradient-picker__padding;
-
 		&:focus,
 		&.is-active {
-			box-shadow:
-				0 0 0 1px $white,
-				0 0 0 3px $gray-900;
+			box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
+			outline: none;
 		}
 	}
 }
@@ -102,3 +97,18 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 		}
 	}
 }
+
+// All these styles should be made generic and changed on the inputs for all components.
+.components-custom-gradient-picker {
+	.components-select-control__input,
+	.components-input-control__input {
+		height: 40px !important;
+	}
+	.components-input-control__label {
+		line-height: 1;
+		padding-bottom: $grid-unit-10 !important;
+	}
+	label {
+		text-transform: uppercase;
+	}
+}
diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
@@ -12,5 +12,5 @@ export const SelectWrapper = styled( FlexBlock )`
 `;
 
 export const AccessoryWrapper = styled( FlexBlock )`
-	flex-grow: 4;
+	flex-grow: 5;
 `;