From 2cf8fc653abad620889d932c9d7c1258e52ac17d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 8 Jul 2021 17:06:59 +1000
Subject: [PATCH] Update dimensions global style sidebar panel

---
 .../components/sidebar/dimensions-panel.js    | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
index d6df96c0a83edf..abea542bacd082 100644
--- a/packages/edit-site/src/components/sidebar/dimensions-panel.js
+++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalBlockSupportPanel as BlockSupportPanel,
+	__experimentalProgressiveDisclosurePanel as ProgressiveDisclosurePanel,
+	__experimentalProgressiveDisclosurePanelItem as ProgressiveDisclosurePanelItem,
 	__experimentalBoxControl as BoxControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -103,37 +104,45 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 
 	return (
-		<BlockSupportPanel
+		<ProgressiveDisclosurePanel
 			label={ __( 'Dimensions options' ) }
 			title={ __( 'Dimensions' ) }
 			resetAll={ resetAll }
 		>
 			{ showPaddingControl && (
-				<BoxControl
-					values={ paddingValues }
-					onChange={ setPaddingValues }
-					label={ __( 'Padding' ) }
-					sides={ paddingSides }
-					units={ units }
+				<ProgressiveDisclosurePanelItem
 					hasValue={ hasPaddingValue }
-					reset={ resetPaddingValue }
-					allowReset={ false }
+					label={ __( 'Padding' ) }
+					onDeselect={ resetPaddingValue }
 					isShownByDefault={ true }
-				/>
+				>
+					<BoxControl
+						values={ paddingValues }
+						onChange={ setPaddingValues }
+						label={ __( 'Padding' ) }
+						sides={ paddingSides }
+						units={ units }
+						allowReset={ false }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
 			{ showMarginControl && (
-				<BoxControl
-					values={ marginValues }
-					onChange={ setMarginValues }
-					label={ __( 'Margin' ) }
-					sides={ marginSides }
-					units={ units }
+				<ProgressiveDisclosurePanelItem
 					hasValue={ hasMarginValue }
-					reset={ resetMarginValue }
-					allowReset={ false }
+					label={ __( 'Margin' ) }
+					onDeselect={ resetMarginValue }
 					isShownByDefault={ true }
-				/>
+				>
+					<BoxControl
+						values={ marginValues }
+						onChange={ setMarginValues }
+						label={ __( 'Margin' ) }
+						sides={ marginSides }
+						units={ units }
+						allowReset={ false }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-		</BlockSupportPanel>
+		</ProgressiveDisclosurePanel>
 	);
 }