From 1dfc080b31c8e0224a32f15d8317073a7f6dbff3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 9 May 2022 16:12:40 +1000
Subject: [PATCH] BorderControl: Make reset to default button only display when
 required (#40917)

---
 packages/components/CHANGELOG.md              |  4 ++++
 .../border-control-dropdown/component.tsx     | 23 +++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 15f862992ec81c..00994b4d9dd5b4 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- `BorderControl` now only displays the reset button in its popover when selections have already been made. [#40917](https://github.com/WordPress/gutenberg/pull/40917)
+
 ## 19.10.0 (2022-05-04)
 
 ### Internal
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 e7bad227f72edd..80940164afcd0d 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -164,6 +164,7 @@ const BorderControlDropdown = (
 		enableStyle
 	);
 
+	const showResetButton = color || ( style && style !== 'none' );
 	const dropdownPosition = __experimentalIsRenderedInSidebar
 		? 'bottom left'
 		: undefined;
@@ -220,16 +221,18 @@ const BorderControlDropdown = (
 					/>
 				) }
 			</VStack>
-			<Button
-				className={ resetButtonClassName }
-				variant="tertiary"
-				onClick={ () => {
-					onReset();
-					onClose();
-				} }
-			>
-				{ __( 'Reset to default' ) }
-			</Button>
+			{ showResetButton && (
+				<Button
+					className={ resetButtonClassName }
+					variant="tertiary"
+					onClick={ () => {
+						onReset();
+						onClose();
+					} }
+				>
+					{ __( 'Reset to default' ) }
+				</Button>
+			) }
 		</>
 	);