remove margin overrides for components

WordPress · Dec 10, 2022 · 473699f · 473699f
1 parent ac7db75
commit 473699f
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -27,6 +27,7 @@
 -   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
 -   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
 -   Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
+-   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
 
 ### Experimental
 
@@ -54,6 +55,7 @@
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 
 ### Internal
+
 -   `AnglePickerControl`: remove `:focus-visible' outline on `CircleOutlineWrapper` ([#45758](https://github.com/WordPress/gutenberg/pull/45758))
 
 ### Bug Fix

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
@@ -97,6 +97,7 @@ const ColorPicker = (
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
+						__nextHasNoMarginBottom
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
@@ -9,7 +9,6 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
 import { boxSizingReset } from '../utils';
 import Button from '../button';
@@ -111,10 +110,6 @@ export const ColorfulWrapper = styled.div`
 	}
 
 	${ interactiveHueStyles }
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 export const CopyButton = styled( Button )`

diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
@@ -35,6 +35,7 @@ export default function QueryControls( {
 	return [
 		onOrderChange && onOrderByChange && (
 			<SelectControl
+				__nextHasNoMarginBottom
 				key="query-controls-order-select"
 				label={ __( 'Order by' ) }
 				value={ `${ orderBy }/${ order }` }