(Custom)GradientPicker: Add flag to remove margins (#43387)

* (Custom)GradientPicker: Add flag to remove margins * Simplify * Add changelog
WordPress · Aug 19, 2022 · 330f1f4 · 330f1f4
1 parent 85ef6fb
commit 330f1f4
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 141 deletions.
diff --git a/packages/block-editor/src/components/duotone-control/style.scss b/packages/block-editor/src/components/duotone-control/style.scss
@@ -18,10 +18,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 		padding: 0;
 	}
 
-	.components-custom-gradient-picker__gradient-bar {
-		margin: $grid-unit-20 0 $grid-unit-15;
-	}
-
 	.components-circular-option-picker__swatches {
 		display: grid;
 		grid-template-columns: repeat($swatch-columns, $swatch-size);

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 ### Enhancements
 
+-   `CustomGradientPicker`, `GradientPicker`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43387](https://github.com/WordPress/gutenberg/pull/43387)).
 -   `ToggleGroupControl`: Improve TypeScript documentation ([#43265](https://github.com/WordPress/gutenberg/pull/43265)).
 -   `ComboboxControl`: Normalize hyphen-like characters to an ASCII hyphen ([#42942](https://github.com/WordPress/gutenberg/pull/42942)).
 -   `FormTokenField`: Refactor away from `_.difference()` ([#43224](https://github.com/WordPress/gutenberg/pull/43224/)).

diff --git a/...ents/src/custom-gradient-bar/constants.js → ...gradient-picker/gradient-bar/constants.js b/...ents/src/custom-gradient-bar/constants.js → ...gradient-picker/gradient-bar/constants.js
diff --git a/...src/custom-gradient-bar/control-points.js → ...ent-picker/gradient-bar/control-points.js b/...src/custom-gradient-bar/control-points.js → ...ent-picker/gradient-bar/control-points.js
@@ -16,11 +16,11 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { HStack } from '../h-stack';
-import { ColorPicker } from '../color-picker';
-import { VisuallyHidden } from '../visually-hidden';
-import { CustomColorPickerDropdown } from '../color-palette';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
 
 import {
 	addControlPoint,

diff --git a/...mponents/src/custom-gradient-bar/index.js → ...tom-gradient-picker/gradient-bar/index.js b/...mponents/src/custom-gradient-bar/index.js → ...tom-gradient-picker/gradient-bar/index.js
diff --git a/...nts/src/custom-gradient-bar/test/utils.js → ...radient-picker/gradient-bar/test/utils.js b/...nts/src/custom-gradient-bar/test/utils.js → ...radient-picker/gradient-bar/test/utils.js
diff --git a/...mponents/src/custom-gradient-bar/utils.js → ...tom-gradient-picker/gradient-bar/utils.js b/...mponents/src/custom-gradient-bar/utils.js → ...tom-gradient-picker/gradient-bar/utils.js
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,9 +12,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import AnglePickerControl from '../angle-picker-control';
-import CustomGradientBar from '../custom-gradient-bar';
+import CustomGradientBar from './gradient-bar';
 import { Flex } from '../flex';
 import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
 import {
 	getGradientAstWithDefault,
 	getLinearGradientRepresentation,
@@ -44,6 +50,7 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
+			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			labelPosition="top"
 			value={ hasGradient ? angle : '' }
@@ -86,6 +93,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
 			labelPosition="top"
@@ -98,6 +106,8 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 };
 
 export default function CustomGradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	value,
 	onChange,
 	__experimentalIsRenderedInSidebar,
@@ -116,7 +126,12 @@ export default function CustomGradientPicker( {
 	} ) );
 
 	return (
-		<div className="components-custom-gradient-picker">
+		<VStack
+			spacing={ 5 }
+			className={ classnames( 'components-custom-gradient-picker', {
+				'is-next-has-no-margin': __nextHasNoMargin,
+			} ) }
+		>
 			<CustomGradientBar
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
@@ -156,6 +171,6 @@ export default function CustomGradientPicker( {
 					) }
 				</AccessoryWrapper>
 			</Flex>
-		</div>
+		</VStack>
 	);
 }
diff --git a/packages/components/src/custom-gradient-picker/stories/index.js b/packages/components/src/custom-gradient-picker/stories/index.js
@@ -11,6 +11,9 @@ import CustomGradientPicker from '../';
 export default {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
+	argTypes: {
+		__nextHasNoMargin: { control: { type: 'boolean' } },
+	},
 };
 
 const CustomGradientPickerWithState = ( props ) => {
@@ -24,6 +27,4 @@ const CustomGradientPickerWithState = ( props ) => {
 	);
 };
 
-export const _default = () => {
-	return <CustomGradientPickerWithState />;
-};
+export const Default = CustomGradientPickerWithState.bind( {} );
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,15 +1,20 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
+.components-custom-gradient-picker {
+	&:not(.is-next-has-no-margin) {
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-30;
+	}
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
 	opacity: 0.4;
 }
 
 .components-custom-gradient-picker__gradient-bar {
 	border-radius: $radius-block-ui;
-	margin-top: $grid-unit-15;
 	width: 100%;
 	height: $grid-unit-60;
-	margin-bottom: $grid-unit-20+$grid-unit-05;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -86,15 +91,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
-	margin-bottom: $grid-unit-20;
-
-	.components-base-control.components-angle-picker,
-	.components-base-control.components-custom-gradient-picker__type-picker {
-		margin-bottom: 0;
-	}
-}
-
 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
 	border: none;
 

diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.js b/packages/components/src/duotone-picker/custom-duotone-bar.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import CustomGradientBar from '../custom-gradient-bar';
+import CustomGradientBar from '../custom-gradient-picker/gradient-bar';
 
 import {
 	getColorStopsFromColors,

diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
@@ -14,9 +14,11 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ColorListPicker from '../color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
+import { Spacer } from '../spacer';
 
 function DuotonePicker( {
 	clearable = true,
@@ -97,32 +99,38 @@ function DuotonePicker( {
 				)
 			}
 		>
-			{ ! disableCustomColors && ! disableCustomDuotone && (
-				<CustomDuotoneBar
-					value={ isUnset ? undefined : value }
-					onChange={ onChange }
-				/>
-			) }
-			{ ! disableCustomDuotone && (
-				<ColorListPicker
-					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
-					colors={ colorPalette }
-					value={ isUnset ? undefined : value }
-					disableCustomColors={ disableCustomColors }
-					enableAlpha
-					onChange={ ( newColors ) => {
-						if ( ! newColors[ 0 ] ) {
-							newColors[ 0 ] = defaultDark;
-						}
-						if ( ! newColors[ 1 ] ) {
-							newColors[ 1 ] = defaultLight;
-						}
-						const newValue =
-							newColors.length >= 2 ? newColors : undefined;
-						onChange( newValue );
-					} }
-				/>
-			) }
+			<Spacer paddingTop={ 4 }>
+				<VStack spacing={ 3 }>
+					{ ! disableCustomColors && ! disableCustomDuotone && (
+						<CustomDuotoneBar
+							value={ isUnset ? undefined : value }
+							onChange={ onChange }
+						/>
+					) }
+					{ ! disableCustomDuotone && (
+						<ColorListPicker
+							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
+							colors={ colorPalette }
+							value={ isUnset ? undefined : value }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha
+							onChange={ ( newColors ) => {
+								if ( ! newColors[ 0 ] ) {
+									newColors[ 0 ] = defaultDark;
+								}
+								if ( ! newColors[ 1 ] ) {
+									newColors[ 1 ] = defaultLight;
+								}
+								const newValue =
+									newColors.length >= 2
+										? newColors
+										: undefined;
+								onChange( newValue );
+							} }
+						/>
+					) }
+				</VStack>
+			</Spacer>
 		</CircularOptionPicker>
 	);
 }

diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.js b/packages/components/src/duotone-picker/stories/duotone-picker.js
@@ -13,6 +13,8 @@ export default {
 	component: DuotonePicker,
 	argTypes: {
 		clearable: { control: { type: 'boolean' } },
+		disableCustomColors: { control: { type: 'boolean' } },
+		disableCustomDuotone: { control: { type: 'boolean' } },
 		onChange: { action: 'onChange' },
 		unsetable: { control: { type: 'boolean' } },
 	},

diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
@@ -16,6 +16,7 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
+import { Spacer } from '../spacer';
 
 function SingleOrigin( {
 	className,
@@ -99,6 +100,8 @@ function MultipleOrigin( {
 }
 
 export default function GradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	className,
 	gradients,
 	onChange,
@@ -117,6 +120,11 @@ export default function GradientPicker( {
 			? MultipleOrigin
 			: SingleOrigin;
 
+	// Can be removed when deprecation period is over
+	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
+		? { marginTop: 3 }
+		: {};
+
 	return (
 		<Component
 			className={ className }
@@ -137,13 +145,20 @@ export default function GradientPicker( {
 			}
 			content={
 				! disableCustomGradients && (
-					<CustomGradientPicker
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
+					<Spacer
+						marginTop={ gradients?.length ? 3 : 0 }
+						marginBottom={ 0 }
+						{ ...deprecatedMarginSpacerProps }
+					>
+						<CustomGradientPicker
+							__nextHasNoMargin={ __nextHasNoMargin }
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							value={ value }
+							onChange={ onChange }
+						/>
+					</Spacer>
 				)
 			}
 		/>