From ef69797ad006f054de7fbd077b3a49f419e6f682 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 15 Dec 2023 17:10:29 -0500
Subject: [PATCH] implement Tabs

---
 .../global-styles/screen-color-palette.js     | 42 +++++++------------
 1 file changed, 16 insertions(+), 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
index 0e5b9c5d960fc..587373324f0ff 100644
--- 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,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,6 +10,9 @@ import { TabPanel } from '@wordpress/components';
 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>
 		</>
 	);
 }