Refactor popovers with wordpress components (#222)

t-hamano · Oct 20, 2024 · db3d761 · db3d761
1 parent 10797c2
commit db3d761
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 58 deletions.
diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx
@@ -15,6 +15,7 @@ import {
 	Button,
 	Popover,
 	ColorPalette,
+	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -140,15 +141,14 @@ export default function BorderColorControl( {
 									isMixed={ isMixed }
 								/>
 								{ isPickerOpen && ! pickerIndex && (
-									<Popover
-										className="ftb-border-color-control__popover"
-										onClose={ handleOnPickerClose }
-									>
-										<ColorPalette
-											colors={ colors }
-											value={ allInputValue || '' }
-											onChange={ handleOnChangeAll }
-										/>
+									<Popover onClose={ handleOnPickerClose }>
+										<Spacer padding={ 4 } marginBottom={ 0 }>
+											<ColorPalette
+												colors={ colors }
+												value={ allInputValue || '' }
+												onChange={ handleOnChangeAll }
+											/>
+										</Spacer>
 									</Popover>
 								) }
 							</div>
@@ -165,15 +165,14 @@ export default function BorderColorControl( {
 										isTransparent={ values[ item.value ] === 'transparent' }
 									/>
 									{ isPickerOpen && pickerIndex === index && (
-										<Popover
-											className="ftb-border-color-control__popover"
-											onClose={ handleOnPickerClose }
-										>
-											<ColorPalette
-												colors={ colors }
-												value={ values[ item.value ] || '' }
-												onChange={ ( value ) => handleOnChange( value, item.value ) }
-											/>
+										<Popover onClose={ handleOnPickerClose }>
+											<Spacer padding={ 4 } marginBottom={ 0 }>
+												<ColorPalette
+													colors={ colors }
+													value={ values[ item.value ] || '' }
+													onChange={ ( value ) => handleOnChange( value, item.value ) }
+												/>
+											</Spacer>
 										</Popover>
 									) }
 								</div>

diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx
@@ -16,6 +16,7 @@ import {
 	Popover,
 	ColorPalette,
 	SlotFillProvider,
+	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -84,12 +85,14 @@ export default function ColorControl( {
 						isTransparent={ value === 'transparent' }
 					/>
 					{ isPickerOpen && (
-						<Popover className="ftb-color-control__popover" onClose={ handleOnPickerClose }>
-							<ColorPalette
-								colors={ [ ...colors, ...colorsProp ] }
-								value={ value || '' }
-								onChange={ handleOnChange }
-							/>
+						<Popover onClose={ handleOnPickerClose }>
+							<Spacer padding={ 4 } marginBottom={ 0 }>
+								<ColorPalette
+									colors={ [ ...colors, ...colorsProp ] }
+									value={ value || '' }
+									onChange={ handleOnChange }
+								/>
+							</Spacer>
 						</Popover>
 					) }
 				</div>

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -220,12 +220,3 @@
 		padding-top: 8px;
 	}
 }
-
-// Popover styles.
-.ftb-border-color-control__popover,
-.ftb-color-control__popover {
-
-	.components-popover__content {
-		padding: 16px;
-	}
-}
diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx
@@ -21,6 +21,10 @@ import {
 	Spinner,
 	RangeControl,
 	ToggleControl,
+	__experimentalText as Text,
+	__experimentalSpacer as Spacer,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -754,19 +758,23 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 								focusOnMount="firstElement"
 								onClose={ () => setIsResetPopup( false ) }
 							>
-								<p>{ __( 'Are you sure?', 'flexible-table-block' ) }</p>
-								<div className="ftb-global-setting-modal__confirm-popover-buttons">
-									<Button isDestructive onClick={ handleResetOptions } size="compact">
-										{ __( 'Restore', 'flexible-table-block' ) }
-									</Button>
-									<Button
-										variant="secondary"
-										onClick={ () => setIsResetPopup( false ) }
-										size="compact"
-									>
-										{ __( 'Cancel', 'flexible-table-block' ) }
-									</Button>
-								</div>
+								<Spacer marginBottom={ 0 } padding={ 2 }>
+									<VStack spacing={ 4 }>
+										<Text as="p">{ __( 'Are you sure?', 'flexible-table-block' ) }</Text>
+										<HStack>
+											<Button isDestructive onClick={ handleResetOptions } size="compact">
+												{ __( 'Restore', 'flexible-table-block' ) }
+											</Button>
+											<Button
+												variant="secondary"
+												onClick={ () => setIsResetPopup( false ) }
+												size="compact"
+											>
+												{ __( 'Cancel', 'flexible-table-block' ) }
+											</Button>
+										</HStack>
+									</VStack>
+								</Spacer>
 							</Popover>
 						) }
 					</Button>

diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss
@@ -163,18 +163,6 @@
 
 .ftb-global-setting-modal__confirm-popover .components-popover__content {
 	min-width: 150px;
-	padding: 8px;
-
-	p {
-		margin: 0 0 1em;
-	}
-}
-
-.ftb-global-setting-modal__confirm-popover-buttons {
-	display: flex;
-	gap: 8px;
-	justify-content: space-between;
-	white-space: nowrap;
 }
 
 .ftb-global-setting-modal__notice {