Add interactive args to gr.ColorPicker (#5118)

* add interactive args to colorpicker

* add changeset

* add changeset

* add colorpicker stories

---------

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

.changeset/fluffy-ties-sink.md

@@ -0,0 +1,6 @@
+---
+"@gradio/colorpicker": patch
+"gradio": patch
+---
+
+fix:Add `interactive` args to `gr.ColorPicker`

js/colorpicker/ColorPicker.stories.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import ColorPicker from "./static/StaticColorpicker.svelte";
+</script>
+
+<Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
+
+<Template let:args>
+	<ColorPicker value="Color Picker" {...args} />
+</Template>
+
+<Story name="Default" />
+<Story
+	name="Color Picker with a color value and hidden label"
+	args={{ value: "#FFC0CB", show_label: false }}
+/>
+<Story
+	name="Color Picker with a color value and label"
+	args={{ value: "#FFC0CB", label: "This is a neat color" }}
+/>
+
+<Story
+	name="Disabled color picker"
+	args={{ value: "#FFC0CB", interactive: false }}
+/>
+
+<Story
+	name="Color Picker with a color value and info"
+	args={{ value: "#FFC0CB", info: "This is a neat color" }}
+/>

js/colorpicker/index.svelte

@@ -19,6 +19,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "dynamic";
+	export let interactive: boolean;
 </script>
 
 {#if mode === "static"}
@@ -35,6 +36,7 @@
 		{scale}
 		{min_width}
 		{loading_status}
+		{interactive}
 		on:change
 		on:input
 		on:submit
@@ -55,6 +57,7 @@
 		{scale}
 		{min_width}
 		{loading_status}
+		{interactive}
 		on:change
 		on:input
 		on:submit

js/colorpicker/interactive/InteractiveColorpicker.svelte

@@ -18,6 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let interactive = true;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -29,11 +30,11 @@
 		{label}
 		{info}
 		{show_label}
+		disabled={!interactive}
 		on:change
 		on:input
 		on:submit
 		on:blur
 		on:focus
-		disabled
 	/>
 </Block>

js/colorpicker/static/StaticColorpicker.svelte

@@ -18,6 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let interactive = true;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -29,11 +30,11 @@
 		{label}
 		{info}
 		{show_label}
+		disabled={!interactive}
 		on:change
 		on:input
 		on:submit
 		on:blur
 		on:focus
-		disabled
 	/>
 </Block>