Update gr.ColorPicker UI (#9570)

* update color picker dialog

* add changeset

* add tinycolor types

* fix disabled param

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/chilly-jars-sip.md

@@ -0,0 +1,6 @@
+---
+"@gradio/colorpicker": minor
+"gradio": minor
+---
+
+feat:Update gr.ColorPicker UI

js/colorpicker/ColorPicker.stories.svelte

@@ -6,10 +6,10 @@
 <Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
 
 <Template let:args>
-	<ColorPicker value="Color Picker" {...args} />
+	<ColorPicker label="Color Picker" {...args} />
 </Template>
 
-<Story name="Default" />
+<Story name="Default" args={{ interactive: true }} />
 <Story
 	name="Color Picker with a color value and hidden label"
 	args={{ value: "#FFC0CB", show_label: false, interactive: true }}

js/colorpicker/Index.svelte

@@ -11,7 +11,6 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import exp from "constants";
 
 	export let label = "ColorPicker";
 	export let info: string | undefined = undefined;
@@ -34,6 +33,7 @@
 		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
+	export let disabled = false;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -50,7 +50,7 @@
 		{label}
 		{info}
 		{show_label}
-		disabled={!interactive}
+		disabled={!interactive || disabled}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}

js/colorpicker/package.json

@@ -24,7 +24,10 @@
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
-		"@gradio/utils": "workspace:^"
+		"@gradio/utils": "workspace:^",
+		"@gradio/icons": "workspace:^",
+		"tinycolor2": "^1.6.0",
+		"@types/tinycolor2": "^1.4.6"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"