Makes a few fixes to the JSON component (#3451)

* small fixes

* changelog, formatting

* static checks

CHANGELOG.md

@@ -56,6 +56,7 @@ No changes to highlight.
 - Fix markdown embedded component in docs by [@aliabd](https://github.com/aliabd) in [PR 3410](https://github.com/gradio-app/gradio/pull/3410)
 - Clean up event listeners code by [@aliabid94](https://github.com/aliabid94) in [PR 3420](https://github.com/gradio-app/gradio/pull/3420) 
 - Fix css issue with spaces logo by [@aliabd](https://github.com/aliabd) in [PR 3422](https://github.com/gradio-app/gradio/pull/3422)
+- Makes a few fixes to the `JSON` component (show_label parameter, icons) in [@abidlabs](https://github.com/abidlabs) in [PR 3451](https://github.com/gradio-app/gradio/pull/3451)
 
 ## Contributors Shoutout:
 

gradio/components.py

@@ -3589,7 +3589,7 @@ class JSON(Changeable, IOComponent, JSONSerializable):
     """
     Used to display arbitrary JSON output prettily.
     Preprocessing: this component does *not* accept input.
-    Postprocessing: expects a valid JSON {str} -- or a {list} or {dict} that is JSON serializable.
+    Postprocessing: expects a {str} filepath to a file containing valid JSON -- or a {list} or {dict} that is valid JSON
 
     Demos: zip_to_json, blocks_xray
     """
@@ -3637,7 +3637,6 @@ class JSON(Changeable, IOComponent, JSONSerializable):
         label: str | None = None,
         show_label: bool | None = None,
         visible: bool | None = None,
-        interactive: bool | None = None,
     ):
         updated_config = {
             "label": label,
@@ -3651,9 +3650,9 @@ class JSON(Changeable, IOComponent, JSONSerializable):
     def postprocess(self, y: Dict | List | str | None) -> Dict | List | None:
         """
         Parameters:
-            y: JSON output
+            y: either a string filepath to a JSON file, or a Python list or dict that can be converted to JSON
         Returns:
-            JSON output
+            JSON output in Python list or dict format
         """
         if y is None:
             return None

ui/packages/app/src/components/Json/Json.svelte

@@ -15,6 +15,7 @@
 	let old_value: any;
 	export let loading_status: LoadingStatus;
 	export let label: string;
+	export let show_label: boolean;
 	export let style: Styles = {};
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
@@ -37,6 +38,7 @@
 	{#if label}
 		<BlockLabel
 			Icon={JSONIcon}
+			{show_label}
 			{label}
 			float={false}
 			disable={typeof style.container === "boolean" && !style.container}
@@ -45,5 +47,5 @@
 
 	<StatusTracker {...loading_status} />
 
-	<JSON {value} copy_to_clipboard={$_("interface.copy_to_clipboard")} />
+	<JSON {value} />
 </Block>

ui/packages/json/src/JSON.svelte

@@ -4,9 +4,9 @@
 	import { JSON as JSONIcon } from "@gradio/icons";
 	import { Empty } from "@gradio/atoms";
 	import JSONNode from "./JSONNode.svelte";
+	import { Copy, Check } from "@gradio/icons";
 
 	export let value: any = {};
-	export let copy_to_clipboard: string = "copy json";
 
 	let copied = false;
 	let timer: NodeJS.Timeout;
@@ -41,15 +41,12 @@
 
 {#if value && value !== '""' && !is_empty(value)}
 	<button on:click={handle_copy}>
-		<span class="copy-text">{copy_to_clipboard}</span>
 		{#if copied}
-			<span
-				in:fade={{ duration: 100 }}
-				out:fade={{ duration: 350 }}
-				class="copy-success "
-			>
-				copied!
+			<span in:fade={{ duration: 300 }}>
+				<Check />
 			</span>
+		{:else}
+			<span class="copy-text"><Copy /></span>
 		{/if}
 	</button>
 	<div class="json-holder">
@@ -71,25 +68,18 @@
 		top: var(--block-label-margin);
 		right: var(--block-label-margin);
 		align-items: center;
-		transition: 150ms;
 		box-shadow: var(--shadow-drop);
 		border: 1px solid var(--color-border-primary);
 		border-top: none;
 		border-right: none;
 		border-radius: var(--block-label-right-radius);
 		background: var(--block-label-background);
-		padding: var(--block-label-padding);
+		padding: 5px;
+		width: 22px;
+		height: 22px;
 		overflow: hidden;
 		color: var(--block-label-color);
 		font: var(--font-sans);
 		font-size: var(--button-small-text-size);
 	}
-
-	.copy-success {
-		display: block;
-		position: absolute;
-		background: var(--block-label-background);
-		width: var(--size-full);
-		text-align: left;
-	}
 </style>