AnglePickerControl: Add flag to remove bottom margin (#43160)

* AnglePickerControl: Add flag to remove bottom margin * Add changelog
WordPress · Aug 11, 2022 · 8a22f96 · 8a22f96
1 parent b7a5b8d
commit 8a22f96
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -29,6 +29,7 @@
 -   `UnitControl`: Update unit dropdown design for the large size variant ([#42000](https://github.com/WordPress/gutenberg/pull/42000)).
 -   `BaseControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)).
 -   `BoxControl`: Export `applyValueToSides` util function. ([#42733](https://github.com/WordPress/gutenberg/pull/42733/)).
+-   `AnglePickerControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#43160](https://github.com/WordPress/gutenberg/pull/43160/)).
 
 ### Internal
 

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
@@ -20,6 +20,8 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	className,
 	label = __( 'Angle' ),
 	onChange,
@@ -34,7 +36,11 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes } gap={ 4 }>
+		<Root
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			className={ classes }
+			gap={ 4 }
+		>
 			<FlexBlock>
 				<NumberControl
 					label={ label }

diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
@@ -11,13 +11,16 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+	},
 };
 
-const AnglePickerWithState = () => {
+const AnglePickerWithState = ( args ) => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return (
+		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
+	);
 };
 
-export const _default = () => {
-	return <AnglePickerWithState />;
-};
+export const Default = AnglePickerWithState.bind( {} );
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
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
@@ -14,8 +15,16 @@ import CONFIG from '../../utils/config-values';
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 3;
 
+const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
+	return ! __nextHasNoMarginBottom
+		? css`
+				margin-bottom: ${ space( 2 ) };
+		  `
+		: '';
+};
+
 export const Root = styled( Flex )`
-	margin-bottom: ${ space( 2 ) };
+	${ deprecatedBottomMargin }
 `;
 
 export const CircleRoot = styled.div`