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

@@ -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.

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>

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:^"

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

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": [],