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 <[email protected]>
gradio-app · Dec 11, 2024 · 23a2958 · 23a2958
1 parent 7d70596
commit 23a2958
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/public-owls-mate.md 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
@@ -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 @@ def __init__(
         min_height: int | None = None,
         max_height: int | None = None,
         container: bool = False,
+        padding: bool = True,
     ):
         """
         Parameters:
@@ -57,9 +58,11 @@ def __init__(
             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
@@ -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
@@ -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
@@ -21,6 +21,7 @@ def test_component_functions(self):
             "min_height": None,
             "max_height": None,
             "container": False,
+            "padding": True,
         }
 
     def test_in_interface(self):