From 5b3be9197c090be4b0b7954b707be258bfdd159e Mon Sep 17 00:00:00 2001
From: BaNgan <bangank36@gmail.com>
Date: Mon, 3 Jul 2023 05:44:51 +0000
Subject: [PATCH 1/3] Add color indicator comp

---
 src/js/renderers/ColorPaletteControl.js | 58 ++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/js/renderers/ColorPaletteControl.js b/src/js/renderers/ColorPaletteControl.js
index f811289..daeba87 100644
--- a/src/js/renderers/ColorPaletteControl.js
+++ b/src/js/renderers/ColorPaletteControl.js
@@ -2,8 +2,38 @@ import React from "react";
 import isEmpty from 'lodash/isEmpty';
 import { withJsonFormsControlProps } from "@jsonforms/react";
 import { rankWith, isStringControl, and, optionIs } from "@jsonforms/core";
-import { ColorPalette, SlotFillProvider, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	TabPanel,
+	ColorIndicator,
+	Flex,
+	FlexItem,
+	Dropdown,
+	Button,
+  ColorPalette, SlotFillProvider, Popover
+} from '@wordpress/components';
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					<ColorIndicator colorValue={ indicator } />
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
+	</HStack>
+);
 
 const TextControl = (props) => {
   const {
@@ -28,16 +58,22 @@ const TextControl = (props) => {
   ];
 
   return ( 
-    <SlotFillProvider>
-      <ColorPalette
-        colors={ colors }
-        value={ data }
-        onChange={ ( value ) => 
-          handleChange(path, value === '' ? undefined : value)
-        }
+    <>
+      <LabeledColorIndicators
+        indicators={ ['#ccc'] }
+        label={ label }
       />
-      <Popover.Slot />
-    </SlotFillProvider>
+      <SlotFillProvider>
+        <ColorPalette
+          colors={ colors }
+          value={ data }
+          onChange={ ( value ) => 
+            handleChange(path, value === '' ? undefined : value)
+          }
+        />
+        <Popover.Slot />
+      </SlotFillProvider>
+    </>
   )
 };
 

From 385c9dc4346727034b6aa25fae1ee7d597cedb63 Mon Sep 17 00:00:00 2001
From: BaNgan <bangank36@gmail.com>
Date: Mon, 3 Jul 2023 09:47:53 +0000
Subject: [PATCH 2/3] Render the palette inside Dropdown with color indicator

---
 src/js/renderers/ColorPaletteControl.js | 47 ++++++++++++++++++-------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/js/renderers/ColorPaletteControl.js b/src/js/renderers/ColorPaletteControl.js
index daeba87..4a122f3 100644
--- a/src/js/renderers/ColorPaletteControl.js
+++ b/src/js/renderers/ColorPaletteControl.js
@@ -59,20 +59,41 @@ const TextControl = (props) => {
 
   return ( 
     <>
-      <LabeledColorIndicators
-        indicators={ ['#ccc'] }
-        label={ label }
+      <Dropdown
+        popoverProps={ {
+          placement: 'left-start',
+          offset: 36,
+          shift: true,
+        } }
+        className="my-container-class-name"
+        contentClassName="my-dropdown-content-classname"
+        renderToggle={ ( { isOpen, onToggle } ) => (
+          <Button
+            onClick={ onToggle }
+            aria-expanded={ isOpen }
+          >
+            <LabeledColorIndicators
+              indicators={ [ data ] }
+              label={ label }
+            />
+          </Button>
+        ) }
+        renderContent={ () => (
+          <DropdownContentWrapper paddingSize="none">
+            <SlotFillProvider>
+              <ColorPalette
+                colors={ colors }
+                value={ data }
+                onChange={ ( value ) => 
+                  handleChange(path, value === '' ? undefined : value)
+                }
+              />
+              <Popover.Slot />
+            </SlotFillProvider>
+          </DropdownContentWrapper>
+        ) }
       />
-      <SlotFillProvider>
-        <ColorPalette
-          colors={ colors }
-          value={ data }
-          onChange={ ( value ) => 
-            handleChange(path, value === '' ? undefined : value)
-          }
-        />
-        <Popover.Slot />
-      </SlotFillProvider>
+      
     </>
   )
 };

From 551127e7fe86cb58ad1c528f9af8dc0d45f7f7c8 Mon Sep 17 00:00:00 2001
From: BaNgan <bangank36@gmail.com>
Date: Mon, 3 Jul 2023 09:57:35 +0000
Subject: [PATCH 3/3] Remove redundant

---
 src/js/renderers/ColorPaletteControl.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/js/renderers/ColorPaletteControl.js b/src/js/renderers/ColorPaletteControl.js
index 4a122f3..e541432 100644
--- a/src/js/renderers/ColorPaletteControl.js
+++ b/src/js/renderers/ColorPaletteControl.js
@@ -3,12 +3,9 @@ import isEmpty from 'lodash/isEmpty';
 import { withJsonFormsControlProps } from "@jsonforms/react";
 import { rankWith, isStringControl, and, optionIs } from "@jsonforms/core";
 import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	TabPanel,
 	ColorIndicator,
 	Flex,
 	FlexItem,