Switch BorderBoxControl to use StyledLabel as legend element

WordPress · Jul 14, 2022 · ba8a734 · ba8a734
1 parent f7ed197
commit ba8a734
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 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
@@ -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
@@ -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
@@ -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 ) };
-`;