AnglePickerControl: Hard deprecate bottom margin (#58700)

* AnglePickerControl: Hard deprecate bottom margin * Remove usage in CustomGradientPicker * Update changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
WordPress · Feb 6, 2024 · 6d97038 · 6d97038
1 parent ad5e2b1
commit 6d97038
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 53 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `AnglePickerControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58700](https://github.com/WordPress/gutenberg/pull/58700)).
 
 ### Enhancements
 

diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md
@@ -15,7 +15,6 @@ function Example() {
 		<AnglePickerControl
 			value={ angle }
 			onChange={ setAngle }
-			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -43,10 +42,3 @@ The current value of the input. The value represents an angle in degrees and sho
 A function that receives the new value of the input.
 
 -   Required: Yes
-
-### `__nextHasNoMarginBottom`: `boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Required: No
--   Default: `false`
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
@@ -7,18 +7,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { FlexBlock } from '../flex';
+import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root, UnitText } from './styles/angle-picker-control-styles';
+import { UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -28,24 +27,13 @@ function UnforwardedAnglePickerControl(
 	ref: ForwardedRef< any >
 ) {
 	const {
-		__nextHasNoMarginBottom = false,
 		className,
 		label = __( 'Angle' ),
 		onChange,
 		value,
 		...restProps
 	} = props;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.components.AnglePickerControl',
-			{
-				since: '6.1',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-			}
-		);
-	}
-
 	const handleOnNumberChange = ( unprocessedValue: string | undefined ) => {
 		if ( onChange === undefined ) {
 			return;
@@ -66,13 +54,7 @@ function UnforwardedAnglePickerControl(
 		: [ null, unitText ];
 
 	return (
-		<Root
-			{ ...restProps }
-			ref={ ref }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			className={ classes }
-			gap={ 2 }
-		>
+		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
@@ -95,7 +77,7 @@ function UnforwardedAnglePickerControl(
 					onChange={ onChange }
 				/>
 			</Spacer>
-		</Root>
+		</Flex>
 	);
 }
 
@@ -115,7 +97,6 @@ function UnforwardedAnglePickerControl(
  *     <AnglePickerControl
  *       value={ angle }
  *       onChange={ setAngle }
- *       __nextHasNoMarginBottom
  *     </>
  *   );
  * }

diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx
@@ -52,6 +52,3 @@ const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
 };
 
 export const Default = AnglePickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-};
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -1,37 +1,19 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../utils/space';
 import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
-import type { AnglePickerControlProps } from '../types';
-
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
-const deprecatedBottomMargin = ( {
-	__nextHasNoMarginBottom,
-}: Pick< AnglePickerControlProps, '__nextHasNoMarginBottom' > ) => {
-	return ! __nextHasNoMarginBottom
-		? css`
-				margin-bottom: ${ space( 2 ) };
-		  `
-		: '';
-};
-
-export const Root = styled( Flex )`
-	${ deprecatedBottomMargin }
-`;
-
 export const CircleRoot = styled.div`
 	border-radius: 50%;
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };

diff --git a/packages/components/src/angle-picker-control/types.ts b/packages/components/src/angle-picker-control/types.ts
@@ -4,6 +4,8 @@ export type AnglePickerControlProps = {
 	 * in a future version.
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**

diff --git a/packages/components/src/custom-gradient-picker/index.tsx b/packages/components/src/custom-gradient-picker/index.tsx
@@ -60,7 +60,6 @@ const GradientAnglePicker = ( {
 	};
 	return (
 		<AnglePickerControl
-			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			value={ hasGradient ? angle : '' }
 		/>