Attach elem_classes selectors to layout elements, and an id to the …

…Tab button (for targeting via CSS/JS) (#5590) * done * layouts * add changeset * handle undefined case * format * add changeset * add changeset * simplify * lint * lint * fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 19, 2023 · d1ad1f6 · d1ad1f6
1 parent 54d21d3
commit d1ad1f6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 13 deletions.
diff --git a/.changeset/real-items-cover.md b/.changeset/real-items-cover.md
@@ -0,0 +1,7 @@
+---
+"@gradio/tabitem": patch
+"@gradio/tabs": patch
+"gradio": patch
+---
+
+feat:Attach `elem_classes` selectors to layout elements, and an id to the Tab button (for targeting via CSS/JS)
diff --git a/gradio/layouts.py b/gradio/layouts.py
@@ -34,6 +34,7 @@ def __init__(
         variant: Literal["default", "panel", "compact"] = "default",
         visible: bool = True,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         equal_height: bool = True,
         **kwargs,
     ):
@@ -42,13 +43,16 @@ def __init__(
             variant: row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
             visible: If False, row 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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
             equal_height: If True, makes every child element have equal height
         """
         self.variant = variant
         self.equal_height = equal_height
         if variant == "compact":
             self.allow_expected_parents = False
-        BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
 
     @staticmethod
     def update(
@@ -101,6 +105,7 @@ def __init__(
         variant: Literal["default", "panel", "compact"] = "default",
         visible: bool = True,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         **kwargs,
     ):
         """
@@ -110,6 +115,7 @@ def __init__(
             variant: column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
             visible: If False, column 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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
         if scale != round(scale):
             warn_deprecation(
@@ -121,7 +127,9 @@ def __init__(
         self.variant = variant
         if variant == "compact":
             self.allow_expected_parents = False
-        BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
 
     @staticmethod
     def update(
@@ -146,15 +154,19 @@ def __init__(
         selected: int | str | None = None,
         visible: bool = True,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         **kwargs,
     ):
         """
         Parameters:
             selected: The currently selected tab. Must correspond to an id passed to the one of the child TabItems. Defaults to the first TabItem.
             visible: If False, Tabs 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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
-        BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
         Changeable.__init__(self)
         Selectable.__init__(self)
         self.selected = selected
@@ -190,15 +202,19 @@ def __init__(
         *,
         id: int | str | None = None,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         **kwargs,
     ):
         """
         Parameters:
             label: The visual label for the tab
             id: An optional identifier for the tab, required if you wish to control the selected tab from a predict function.
-            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_id: An optional string that is assigned as the id of the <div> containing the contents of the Tab layout. The same string followed by "-button" is attached to the Tab button. Can be used for targeting CSS styles.
+            elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
-        BlockContext.__init__(self, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
         Selectable.__init__(self)
         self.label = label
         self.id = id
@@ -229,14 +245,18 @@ def __init__(
         *,
         visible: bool = True,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         **kwargs,
     ):
         """
         Parameters:
             visible: If False, group 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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
-        BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
 
     @staticmethod
     def update(
@@ -323,17 +343,21 @@ def __init__(
         open: bool = True,
         visible: bool = True,
         elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
         **kwargs,
     ):
         """
         Parameters:
             label: name of accordion section.
             open: if True, accordion is open by default.
             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 string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
         self.label = label
         self.open = open
-        BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+        BlockContext.__init__(
+            self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+        )
 
     @staticmethod
     def update(

diff --git a/js/tabitem/static/TabItem.svelte b/js/tabitem/static/TabItem.svelte
@@ -14,10 +14,10 @@
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
 		getContext(TABS) as any;
 
-	let tab_index = register_tab({ name, id });
+	let tab_index = register_tab({ name, id, elem_id });
 
 	onMount(() => {
-		return (): void => unregister_tab({ name, id });
+		return (): void => unregister_tab({ name, id, elem_id });
 	});
 
 	$: $selected_tab_index === tab_index &&

diff --git a/js/tabs/static/Tabs.svelte b/js/tabs/static/Tabs.svelte
@@ -10,6 +10,7 @@
 	interface Tab {
 		name: string;
 		id: object;
+		elem_id: string | undefined;
 	}
 
 	export let visible = true;
@@ -28,7 +29,7 @@
 
 	setContext(TABS, {
 		register_tab: (tab: Tab) => {
-			tabs.push({ name: tab.name, id: tab.id });
+			tabs.push({ name: tab.name, id: tab.id, elem_id: tab.elem_id });
 			selected_tab.update((current) => current ?? tab.id);
 			tabs = tabs;
 			return tabs.length - 1;
@@ -58,11 +59,12 @@
 	<div class="tab-nav scroll-hide">
 		{#each tabs as t, i (t.id)}
 			{#if t.id === $selected_tab}
-				<button class="selected">
+				<button class="selected" id={t.elem_id ? t.elem_id + "-button" : null}>
 					{t.name}
 				</button>
 			{:else}
 				<button
+					id={t.elem_id ? t.elem_id + "-button" : null}
 					on:click={() => {
 						change_tab(t.id);
 						dispatch("select", { value: t.name, index: i });

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml