remove additional margin overrides and add prop to components based o…

…n PR feedback
WordPress · Nov 30, 2022 · 2b06d5e · 2b06d5e
1 parent 0b2a766
commit 2b06d5e
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 14 deletions.
diff --git a/changelog.txt b/changelog.txt
@@ -47,6 +47,7 @@ The following contributors merged PRs in this release:
 -   FocalPointPicker: Update the design of the focal point handle. ([45053](https://github.com/WordPress/gutenberg/pull/45053))
 -   FontSizePicker: Update hint text to match the design. ([44966](https://github.com/WordPress/gutenberg/pull/44966))
 -   CheckboxControl: Move icons out of labels. ([45535](https://github.com/WordPress/gutenberg/pull/45535))
+-   RangeControl: remove margin overrides and add new opt-in prop. ([45985](https://github.com/WordPress/gutenberg/pull/45985))
 
 #### Block Editor
 

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
@@ -104,6 +104,7 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -8,10 +8,7 @@ import { css } from '@emotion/react';
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
-import {
-	StyledField,
-	StyledLabel,
-} from '../base-control/styles/base-control-styles';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,
 	UnitSelect,
@@ -193,10 +190,4 @@ export const borderStyleButton = css`
 export const borderSlider = () => css`
 	flex: 1 1 60%;
 	${ rtl( { marginRight: space( 3 ) } )() }
-
-	${ StyledField } {
-		margin-bottom: 0;
-		font-size: 0;
-		display: flex;
-	}
 `;
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
@@ -60,6 +60,7 @@ export const InputWithSlider = ( {
 				size="__unstable-large"
 			/>
 			<RangeControl
+				__nextHasNoMarginBottom
 				label={ label }
 				hideLabelFromVision
 				min={ min }

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
@@ -38,10 +38,6 @@ export const SelectControl = styled( InnerSelectControl )`
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
 	margin-right: ${ space( 2 ) };
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 // Make the Hue circle picker not go out of the bar.