Improve gr.Code

.changeset/chilly-socks-poke.md

@@ -0,0 +1,7 @@
+---
+"@gradio/code": minor
+"@gradio/icons": minor
+"gradio": minor
+---
+
+feat:Improve `gr.Code`

js/code/Index.svelte

@@ -37,6 +37,7 @@
 	export let show_label = true;
 	export let loading_status: LoadingStatus;
 	export let scale: number | null = null;
+	export let min_width: number | null = null;
 
 	export let interactive: boolean;
 
@@ -62,6 +63,7 @@
 	{elem_classes}
 	{visible}
 	{scale}
+	{min_width}
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -70,7 +72,9 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
-	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{#if show_label}
+		<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{/if}
 
 	{#if !value && !interactive}
 		<Empty unpadded_box={true} size="large">

js/code/shared/Code.svelte

@@ -150,6 +150,9 @@
 			fontFamily: "var(--font-mono)",
 			minHeight: "100%"
 		},
+		".cm-gutterElement": {
+			marginRight: "var(--spacing-xs)"
+		},
 		".cm-gutters": {
 			marginRight: "1px",
 			borderRight: "1px solid var(--border-color-primary)",
@@ -235,13 +238,13 @@
 	.wrap {
 		display: flex;
 		flex-direction: column;
-		flex-flow: column;
+		flex-grow: 1;
 		margin: 0;
 		padding: 0;
 		height: 100%;
 	}
 	.codemirror-wrapper {
-		height: 100%;
+		flex-grow: 1;
 		overflow: auto;
 	}
 

js/code/shared/Copy.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { Copy, Check } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
 
 	let copied = false;
 	export let value: string;
@@ -27,36 +27,4 @@
 	});
 </script>
 
-<button
-	on:click={handle_copy}
-	title="Copy message"
-	class:copied
-	aria-label={copied ? "Message copied" : "Copy Message"}
->
-	{#if !copied}
-		<Copy />
-	{:else}
-		<span class="check">
-			<Check />
-		</span>
-	{/if}
-</button>
-
-<style>
-	button {
-		position: relative;
-		cursor: pointer;
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-	}
-
-	.check {
-		top: 0;
-		right: 0;
-		z-index: var(--layer-top);
-		background: var(--block-label-background-fill);
-		width: 100%;
-		height: 100%;
-	}
-</style>
+<IconButton Icon={copied ? Check : Copy} on:click={handle_copy} />

js/code/shared/Download.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { Download, Check } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/wasm/svelte";
+	import { IconButton } from "@gradio/atoms";
 
 	export let value: string;
 	export let language: string;
@@ -53,38 +53,10 @@
 	});
 </script>
 
-<div class="container">
-	<DownloadLink
-		download="file.{ext}"
-		href={download_value}
-		on:click={copy_feedback}
-	>
-		<Download />
-		{#if copied}
-			<span class="check" transition:fade><Check /></span>
-		{/if}
-	</DownloadLink>
-</div>
-
-<style>
-	.container {
-		position: relative;
-		cursor: pointer;
-		padding: 5px;
-
-		width: 22px;
-		height: 22px;
-	}
-
-	.check {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: var(--layer-top);
-		background: var(--background-fill-primary);
-		padding: var(--size-1);
-		width: 100%;
-		height: 100%;
-		color: var(--body-text-color);
-	}
-</style>
+<DownloadLink
+	download="file.{ext}"
+	href={download_value}
+	on:click={copy_feedback}
+>
+	<IconButton Icon={copied ? Check : Download} />
+</DownloadLink>

js/code/shared/Widgets.svelte

@@ -1,35 +1,13 @@
 <script lang="ts">
 	import Copy from "./Copy.svelte";
 	import Download from "./Download.svelte";
+	import { IconButtonWrapper } from "@gradio/atoms";
 
 	export let value: string;
 	export let language: string;
 </script>
 
-<div>
+<IconButtonWrapper>
 	<Download {value} {language} />
 	<Copy {value} />
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-
-		z-index: var(--layer-2);
-		transition: 150ms;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		overflow: hidden;
-		color: var(--block-label-text-color);
-		font: var(--font);
-		font-size: var(--button-small-text-size);
-	}
-</style>
+</IconButtonWrapper>

js/icons/src/Check.svelte

@@ -4,7 +4,7 @@
 	fill="none"
 	stroke="currentColor"
 	aria-hidden="true"
-	stroke-width="2"
+	stroke-width="1.5"
 	stroke-linecap="round"
 	stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg
 >