From ba8a734b86c252bb1e12c1fd4e543621865ae823 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 14 Jul 2022 17:56:31 +1000
Subject: [PATCH] Switch BorderBoxControl to use StyledLabel as legend element

---
 .../border-box-control/border-box-control/component.tsx    | 7 +++----
 .../src/border-box-control/border-box-control/hook.ts      | 5 -----
 packages/components/src/border-box-control/styles.ts       | 5 -----
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 75fb1ae7cd72d7..49e241fa2ed264 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -12,6 +12,7 @@ import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
 import BorderBoxControlSplitControls from '../border-box-control-split-controls';
 import { BorderControl } from '../../border-control';
 import { HStack } from '../../h-stack';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
@@ -21,7 +22,7 @@ import type { BorderBoxControlProps } from '../types';
 import type { LabelProps } from '../../border-control/types';
 
 const BorderLabel = ( props: LabelProps ) => {
-	const { className, label, hideLabelFromVision } = props;
+	const { label, hideLabelFromVision } = props;
 
 	if ( ! label ) {
 		return null;
@@ -30,7 +31,7 @@ const BorderLabel = ( props: LabelProps ) => {
 	return hideLabelFromVision ? (
 		<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 	) : (
-		<legend className={ className }>{ label }</legend>
+		<StyledLabel as="legend">{ label }</StyledLabel>
 	);
 };
 
@@ -39,7 +40,6 @@ const BorderBoxControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		borderLabelClassName,
 		className,
 		colors,
 		disableCustomColors,
@@ -83,7 +83,6 @@ const BorderBoxControl = (
 			<BorderLabel
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
-				className={ borderLabelClassName }
 			/>
 			<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>
 				{ isLinked ? (
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index cd1932d474521c..67e6b98d542a6d 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -100,17 +100,12 @@ export function useBorderBoxControl(
 		return cx( styles.BorderBoxControl, className );
 	}, [ cx, className ] );
 
-	const borderLabelClassName = useMemo( () => {
-		return cx( styles.borderLabel );
-	}, [ cx ] );
-
 	const linkedControlClassName = useMemo( () => {
 		return cx( styles.LinkedBorderControl );
 	}, [ cx ] );
 
 	return {
 		...otherProps,
-		borderLabelClassName,
 		className: classes,
 		hasMixedBorders: mixedBorders,
 		isLinked,
diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts
index a11928a797c2dd..9c9a840c071471 100644
--- a/packages/components/src/border-box-control/styles.ts
+++ b/packages/components/src/border-box-control/styles.ts
@@ -82,8 +82,3 @@ export const CenteredBorderControl = css`
 export const rightBorderControl = () => css`
 	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
 `;
-
-export const borderLabel = css`
-	display: inline-block;
-	margin-bottom: ${ space( 2 ) };
-`;