BorderControl: Add box sizing reset (#42754)

WordPress · Jul 29, 2022 · bc79532 · bc79532
1 parent 13e3cac
commit bc79532
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
+
+### Enhancements
+
+-   Add `box-sizing` reset style mixin to utils ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
+
 ## 19.16.0 (2022-07-27)
 
 ### Bug Fix

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -6,7 +6,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS, CONFIG, rtl } from '../utils';
+import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
 import {
 	StyledField,
@@ -31,6 +31,7 @@ export const borderControl = css`
 	border: 0;
 	padding: 0;
 	margin: 0;
+	${ boxSizingReset }
 `;
 
 export const innerWrapper = () => css`

diff --git a/packages/components/src/utils/box-sizing.ts b/packages/components/src/utils/box-sizing.ts
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const boxSizingReset = css`
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+`;
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
@@ -1,3 +1,4 @@
+export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';