From 3bdc2d84c48e188655291a57821091ce5ef10a4d Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Fri, 1 Dec 2023 19:37:25 -0800
Subject: [PATCH 1/4] `BorderControl`: Fix button styles

---
 .../border-control-dropdown/component.tsx             |  2 +-
 .../border-control/border-control-dropdown/hook.ts    |  4 ++--
 packages/components/src/border-control/styles.ts      | 11 ++---------
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 4f43a6ed0ce55d..9477d2181cee92 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -198,7 +198,7 @@ const BorderControlDropdown = (
 						<HStack>
 							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
 							<Button
-								isSmall
+								size="small"
 								label={ __( 'Close border color' ) }
 								icon={ closeSmall }
 								onClick={ onClose }
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index b60aa52a34e2eb..de25de7e38c256 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 322e9563d58a4d..1a2263b9fb6ff2 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -59,18 +59,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;

From f6ce71812d53a2dab8b6d69913dd491daf10d069 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Tue, 5 Dec 2023 15:27:13 -0800
Subject: [PATCH 2/4] Add __next40pxDefaultSize to Button when BorderControl
 has large size

---
 .../border-control-dropdown/component.tsx     | 40 +++++++++++--------
 .../border-control-dropdown/hook.ts           |  1 +
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 9477d2181cee92..7fd77ff3213212 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -149,6 +149,7 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -170,23 +171,28 @@ const BorderControlDropdown = (
 
 	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
 		onToggle,
-	} ) => (
-		<Button
-			onClick={ onToggle }
-			variant="tertiary"
-			aria-label={ toggleAriaLabel }
-			tooltipPosition={ dropdownPosition }
-			label={ __( 'Border color and style picker' ) }
-			showTooltip={ true }
-		>
-			<span className={ indicatorWrapperClassName }>
-				<ColorIndicator
-					className={ indicatorClassName }
-					colorValue={ color }
-				/>
-			</span>
-		</Button>
-	);
+	} ) => {
+		return (
+			<Button
+				onClick={ onToggle }
+				variant="tertiary"
+				aria-label={ toggleAriaLabel }
+				tooltipPosition={ dropdownPosition }
+				label={ __( 'Border color and style picker' ) }
+				showTooltip={ true }
+				__next40pxDefaultSize={
+					size === '__unstable-large' ? true : false
+				}
+			>
+				<span className={ indicatorWrapperClassName }>
+					<ColorIndicator
+						className={ indicatorClassName }
+						colorValue={ color }
+					/>
+				</span>
+			</Button>
+		);
+	};
 
 	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
 		onClose,
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index de25de7e38c256..5366babc266c61 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -95,6 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

From f5b0711c899f1af04dedb5b552cf38ef192140da Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Tue, 5 Dec 2023 15:34:38 -0800
Subject: [PATCH 3/4] Update changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8a6d52e7582833..ed33677b55a82a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -16,6 +16,7 @@
 
 -   `ToggleGroupControl`: react correctly to external controlled updates ([#56678](https://github.com/WordPress/gutenberg/pull/56678)).
 -   `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)).
+-   `BorderControl`: adjust `BorderControlDropdown` Button size to fix misaligned border ([#56730](https://github.com/WordPress/gutenberg/pull/56730)).
 
 ## 25.13.0 (2023-11-29)
 

From 2d45a2ae19fa00ce7a106317c9e0aa3c04d95b16 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Thu, 7 Dec 2023 15:34:15 -0800
Subject: [PATCH 4/4] Remove explicit return leftover from unused changes

---
 .../border-control-dropdown/component.tsx     | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 7fd77ff3213212..3ee01bcda8f3b3 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -171,28 +171,24 @@ const BorderControlDropdown = (
 
 	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
 		onToggle,
-	} ) => {
-		return (
-			<Button
-				onClick={ onToggle }
-				variant="tertiary"
-				aria-label={ toggleAriaLabel }
-				tooltipPosition={ dropdownPosition }
-				label={ __( 'Border color and style picker' ) }
-				showTooltip={ true }
-				__next40pxDefaultSize={
-					size === '__unstable-large' ? true : false
-				}
-			>
-				<span className={ indicatorWrapperClassName }>
-					<ColorIndicator
-						className={ indicatorClassName }
-						colorValue={ color }
-					/>
-				</span>
-			</Button>
-		);
-	};
+	} ) => (
+		<Button
+			onClick={ onToggle }
+			variant="tertiary"
+			aria-label={ toggleAriaLabel }
+			tooltipPosition={ dropdownPosition }
+			label={ __( 'Border color and style picker' ) }
+			showTooltip={ true }
+			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
+		>
+			<span className={ indicatorWrapperClassName }>
+				<ColorIndicator
+					className={ indicatorClassName }
+					colorValue={ color }
+				/>
+			</span>
+		</Button>
+	);
 
 	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
 		onClose,