implement Tabs

WordPress · Dec 15, 2023 · ef69797 · ef69797
1 parent 6e650da
commit ef69797
Showing 1 changed file with 16 additions and 26 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -2,14 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 function ScreenColorPalette( { name } ) {
 	return (
@@ -20,31 +23,18 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<TabPanel
-				tabs={ [
-					{
-						name: 'solid',
-						title: 'Solid',
-						value: 'solid',
-					},
-					{
-						name: 'gradient',
-						title: 'Gradient',
-						value: 'gradient',
-					},
-				] }
-			>
-				{ ( tab ) => (
-					<>
-						{ tab.value === 'solid' && (
-							<ColorPalettePanel name={ name } />
-						) }
-						{ tab.value === 'gradient' && (
-							<GradientPalettePanel name={ name } />
-						) }
-					</>
-				) }
-			</TabPanel>
+			<Tabs>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="solid">Solid</Tabs.Tab>
+					<Tabs.Tab tabId="gradient">Gradient</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="solid" focusable={ false }>
+					<ColorPalettePanel name={ name } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="gradient" focusable={ false }>
+					<GradientPalettePanel name={ name } />
+				</Tabs.TabPanel>
+			</Tabs>
 		</>
 	);
 }