setting visible=False to gr.Group hides it (#4567)

* import init

* visible=False in Group

* restore

* changelog

* Update js/app/src/components/Group/Group.test.ts

Co-authored-by: pngwn <hello@pngwn.io>

---------

Co-authored-by: pngwn <hello@pngwn.io>

CHANGELOG.md

@@ -8,7 +8,7 @@ No changes to highlight.
 
 - Restored missing imports in `gr.components` by [@abidlabs](https://github.com/abidlabs) in [PR 4566](https://github.com/gradio-app/gradio/pull/4566)
 - Fix bug where `select` event was not triggered in `gr.Gallery` if `height` was set to be large with `allow_preview=False` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4551](https://github.com/gradio-app/gradio/pull/4551)
-
+- Fix bug where setting `visible=False` in `gr.Group` event did not work by [@abidlabs](https://github.com/abidlabs) in [PR 4567](https://github.com/gradio-app/gradio/pull/4567)
 ## Other Changes:
 
 No changes to highlight.

js/app/src/components/Group/Group.svelte

@@ -4,7 +4,7 @@
 	export let visible: boolean = true;
 </script>
 
-<div id={elem_id} class={elem_classes.join(" ")} class:hidden={!visible}>
+<div id={elem_id} class={elem_classes.join(" ")} class:hide={!visible}>
 	<slot />
 </div>
 
@@ -26,4 +26,8 @@
 	div > :global(* + *:not(.absolute)) {
 		border-top: none !important;
 	}
+
+	.hide {
+		display: none;
+	}
 </style>

js/app/src/components/Group/Group.test.ts

@@ -0,0 +1,25 @@
+import { test, describe, assert, afterEach, vi } from "vitest";
+import { cleanup, render } from "@gradio/tootils";
+
+import Group from "./Group.svelte";
+
+describe("Group", () => {
+	afterEach(() => {
+		cleanup();
+	});
+
+	test("setting visible to false hides the Group", async () => {
+		render(Group, {
+			elem_id: "group",
+			visible: false
+		});
+
+		const groupElement = document.getElementById("group");
+
+		assert(groupElement !== null, "Group element not found.");
+		assert(
+			groupElement.classList.contains("hide"),
+			"Group element is not hidden."
+		);
+	});
+});