From 23a2958f5e2104b4f371915986251e8ea09bd44b Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Wed, 11 Dec 2024 09:00:53 -0800
Subject: [PATCH] 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 |  6 ++++++
 gradio/components/html.py      |  5 ++++-
 js/html/Index.svelte           |  6 +++++-
 js/html/shared/HTML.svelte     | 12 ++++++++++--
 test/components/test_html.py   |  1 +
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/public-owls-mate.md

diff --git a/.changeset/public-owls-mate.md b/.changeset/public-owls-mate.md
new file mode 100644
index 0000000000..0bde64cc72
--- /dev/null
+++ b/.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
diff --git a/gradio/components/html.py b/gradio/components/html.py
index 95ad9239fd..4719a1760d 100644
--- a/gradio/components/html.py
+++ b/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,
diff --git a/js/html/Index.svelte b/js/html/Index.svelte
index 2f0788334e..e86586691b 100644
--- a/js/html/Index.svelte
+++ b/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);
 	}
 
diff --git a/js/html/shared/HTML.svelte b/js/html/shared/HTML.svelte
index 23ee8ec74b..50965e79cb 100644
--- a/js/html/shared/HTML.svelte
+++ b/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>
 
diff --git a/test/components/test_html.py b/test/components/test_html.py
index f78ab0d67c..11611397f5 100644
--- a/test/components/test_html.py
+++ b/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):