Refactor Global Setting with wordpress components

t-hamano · Oct 20, 2024 · 5a060b9 · 5a060b9
1 parent 04466ab
commit 5a060b9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/src/settings/global-settings/index.tsx b/src/settings/global-settings/index.tsx
@@ -6,7 +6,12 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 // @ts-ignore: has no exported member
 import { store as coreStore } from '@wordpress/core-data';
-import { Button, Spinner } from '@wordpress/components';
+import {
+	Button,
+	Spinner,
+	__experimentalSpacer as Spacer,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { cog, help } from '@wordpress/icons';
 
 /**
@@ -45,7 +50,12 @@ export default function GlobalSettings() {
 
 	return (
 		<>
-			<div className="ftb-global-setting">
+			<Spacer
+				as={ HStack }
+				padding={ 4 }
+				marginBottom={ 0 }
+				style={ { borderTop: '1px solid #e0e0e0' } }
+			>
 				<Button
 					icon={ help }
 					variant="link"
@@ -65,7 +75,7 @@ export default function GlobalSettings() {
 						{ __( 'Global setting', 'flexible-table-block' ) }
 					</Button>
 				) }
-			</div>
+			</Spacer>
 			{ isHelpModalOpen && <HelpModal { ...{ setIsHelpModalOpen } } /> }
 			{ options && isSettingModalOpen && ( isAdministrator || options?.show_global_setting ) && (
 				<SettingModal

diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss
@@ -1,15 +1,3 @@
-.ftb-global-setting {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 16px;
-	border-top: 1px solid #e0e0e0;
-
-	.components-spinner {
-		margin: 0;
-	}
-}
-
 .ftb-global-setting-modal {
 
 	@media (min-width: 600px) {