Add a .click() event and padding parameter to the HTML component (#10155)

* add click event to html

* format

* add changeset

* add padding parameter

* fix test

* format

* add changeset

---------

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

.changeset/public-owls-mate.md

@@ -0,0 +1,6 @@
+---
+"@gradio/html": minor
+"gradio": minor
+---
+
+feat:Add a `.click()` event and `padding` parameter to the `HTML` component

gradio/components/html.py

@@ -23,7 +23,7 @@ class HTML(Component):
     Guides: key-features
     """
 
-    EVENTS = [Events.change]
+    EVENTS = [Events.change, Events.click]
 
     def __init__(
         self,
@@ -41,6 +41,7 @@ class HTML(Component):
         min_height: int | None = None,
         max_height: int | None = None,
         container: bool = False,
+        padding: bool = True,
     ):
         """
         Parameters:
@@ -57,9 +58,11 @@ class HTML(Component):
             min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If HTML content exceeds the height, the component will expand to fit the content.
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll.
             container: If True, the HTML component will be displayed in a container. Default is False.
+            padding: If True, the HTML component will have a certain padding (set by the `--block-padding` CSS variable) in all directions. Default is True.
         """
         self.min_height = min_height
         self.max_height = max_height
+        self.padding = padding
         super().__init__(
             label=label,
             every=every,

js/html/Index.svelte

@@ -15,12 +15,14 @@
 	export let loading_status: LoadingStatus;
 	export let gradio: Gradio<{
 		change: never;
+		click: never;
 		clear_status: LoadingStatus;
 	}>;
 	export let show_label = false;
 	export let min_height: number | undefined = undefined;
 	export let max_height: number | undefined = undefined;
 	export let container = false;
+	export let padding = true;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -39,6 +41,7 @@
 	/>
 	<div
 		class="html-container"
+		class:padding
 		class:pending={loading_status?.status === "pending"}
 		style:min-height={min_height && loading_status?.status !== "pending"
 			? css_units(min_height)
@@ -50,12 +53,13 @@
 			{elem_classes}
 			{visible}
 			on:change={() => gradio.dispatch("change")}
+			on:click={() => gradio.dispatch("click")}
 		/>
 	</div>
 </Block>
 
 <style>
-	.html-container {
+	.padding {
 		padding: var(--block-padding);
 	}
 

js/html/shared/HTML.svelte

@@ -5,12 +5,20 @@
 	export let value: string;
 	export let visible = true;
 
-	const dispatch = createEventDispatcher<{ change: undefined }>();
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		click: undefined;
+	}>();
 
 	$: value, dispatch("change");
 </script>
 
-<div class="prose {elem_classes.join(' ')}" class:hide={!visible}>
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div
+	class="prose {elem_classes.join(' ')}"
+	class:hide={!visible}
+	on:click={() => dispatch("click")}
+>
 	{@html value}
 </div>
 

test/components/test_html.py

@@ -21,6 +21,7 @@ class TestHTML:
             "min_height": None,
             "max_height": None,
             "container": False,
+            "padding": True,
         }
 
     def test_in_interface(self):