From 492d422df69cd3e9381cf004583a84a1513f3e9e Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:19:56 +0100
Subject: [PATCH] Amend `show_label` in gr.HTML to show optional label  (#9024)

* amend show_label param and add label to component

* fix test

* fix test

* fix test
---
 gradio/components/html.py    |  4 ++--
 js/html/Index.svelte         | 21 ++++++++++++++++++++-
 js/html/package.json         |  3 ++-
 pnpm-lock.yaml               |  3 +++
 test/components/test_html.py |  2 +-
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/gradio/components/html.py b/gradio/components/html.py
index 407fea11ec..e3fd3c17cb 100644
--- a/gradio/components/html.py
+++ b/gradio/components/html.py
@@ -31,7 +31,7 @@ class HTML(Component):
         label: str | None = None,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        show_label: bool | None = None,
+        show_label: bool = False,
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
@@ -44,7 +44,7 @@ class HTML(Component):
             label: The label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            show_label: This parameter has no effect.
+            show_label: If True, the label will be displayed. If False, the label will be hidden.
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
diff --git a/js/html/Index.svelte b/js/html/Index.svelte
index 73203ae362..57c82ab4cd 100644
--- a/js/html/Index.svelte
+++ b/js/html/Index.svelte
@@ -3,7 +3,8 @@
 	import HTML from "./shared/HTML.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import { Block } from "@gradio/atoms";
+	import { Block, BlockLabel } from "@gradio/atoms";
+	import { Code as CodeIcon } from "@gradio/icons";
 
 	export let label: string;
 	export let elem_id = "";
@@ -15,11 +16,18 @@
 		change: never;
 		clear_status: LoadingStatus;
 	}>;
+	export let show_label = false;
 
 	$: label, gradio.dispatch("change");
 </script>
 
 <Block {visible} {elem_id} {elem_classes} container={false}>
+	{#if show_label}
+		<span class="label-container">
+			<BlockLabel Icon={CodeIcon} {show_label} {label} float={true} />
+		</span>
+	{/if}
+
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
@@ -46,4 +54,15 @@
 	.pending {
 		opacity: 0.2;
 	}
+
+	.label-container :global(label) {
+		top: -8px !important;
+		position: relative !important;
+		left: -8px !important;
+		background: var(--block-background-fill) !important;
+		border-top: var(--block-label-border-width) solid
+			var(--border-color-primary) !important;
+		border-left: var(--block-label-border-width) solid
+			var(--border-color-primary) !important;
+	}
 </style>
diff --git a/js/html/package.json b/js/html/package.json
index d27a56722b..e98991cba8 100644
--- a/js/html/package.json
+++ b/js/html/package.json
@@ -10,7 +10,8 @@
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
-		"@gradio/utils": "workspace:^"
+		"@gradio/utils": "workspace:^",
+		"@gradio/icons": "workspace:^"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5962d88b7..cb75b8b783 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1297,6 +1297,9 @@ importers:
       '@gradio/atoms':
         specifier: workspace:^
         version: link:../atoms
+      '@gradio/icons':
+        specifier: workspace:^
+        version: link:../icons
       '@gradio/statustracker':
         specifier: workspace:^
         version: link:../statustracker
diff --git a/test/components/test_html.py b/test/components/test_html.py
index 3082891f8c..785c5b5b6b 100644
--- a/test/components/test_html.py
+++ b/test/components/test_html.py
@@ -10,7 +10,7 @@ class TestHTML:
         assert html_component.get_config() == {
             "value": "#Welcome onboard",
             "label": "HTML Input",
-            "show_label": True,
+            "show_label": False,
             "visible": True,
             "elem_id": None,
             "elem_classes": [],