Fix show_label for Label component (#4713)

* Add code

* Add tests

* Add CHANGELOG

CHANGELOG.md

@@ -29,6 +29,7 @@
 - When an error modal is shown in spaces, ensure we scroll to the top so it can be seen by [@pngwn](https://github.com/pngwn) in [PR 4712](https://github.com/gradio-app/gradio/pull/4712)
 - Update depedencies by [@pngwn](https://github.com/pngwn) in [PR 4675](https://github.com/gradio-app/gradio/pull/4675)
 - Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691).
+- Fix bug where `show_label` was hiding the entire component for `gr.Label` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4713](https://github.com/gradio-app/gradio/pull/4713)
 
 ## Other Changes:
 

js/app/src/components/Label/Label.component.spec.ts

@@ -0,0 +1,138 @@
+import { test, expect } from "@playwright/experimental-ct-svelte";
+import type { Page, Locator } from "@playwright/test";
+import Label from "./Label.svelte";
+import { spy } from "tinyspy";
+
+import type { LoadingStatus } from "../StatusTracker/types";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete",
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+test("gr.Label default value and label rendered with confidences", async ({
+	mount,
+	page
+}) => {
+	const component = await mount(Label, {
+		props: {
+			value: {
+				label: "Good",
+				confidences: [
+					{ label: "Good", confidence: 0.9 },
+					{ label: "Bad", confidence: 0.1 }
+				]
+			},
+			label: "My Label",
+			show_label: true,
+			loading_status: loading_status
+		}
+	});
+	await expect(component).toContainText("My Label");
+	await expect(component.getByTestId("block-label")).toBeVisible();
+	await expect(page.getByTestId("label-output-value")).toContainText("Good");
+	await expect(page.getByTestId("Good-confidence-set")).toContainText("90");
+	await expect(page.getByTestId("Bad-confidence-set")).toContainText("10");
+});
+
+test("gr.Label hides label when show_label=false", async ({ mount, page }) => {
+	const component = await mount(Label, {
+		props: {
+			value: {
+				label: "Good",
+				confidences: [
+					{ label: "Good", confidence: 0.9 },
+					{ label: "Bad", confidence: 0.1 }
+				]
+			},
+			label: "My Label",
+			show_label: false,
+			loading_status: loading_status
+		}
+	});
+	await expect(component.getByTestId("block-label")).toBeHidden();
+});
+
+test("gr.Label confidence bars not rendered without confidences", async ({
+	mount
+}) => {
+	const component = await mount(Label, {
+		props: {
+			value: {
+				label: "Good"
+			},
+			label: "My Label",
+			show_label: true,
+			loading_status: loading_status
+		}
+	});
+	await expect(component).toContainText("My Label");
+	expect(await component.getByTestId("Good-confidence-set").count()).toEqual(0);
+});
+
+test("gr.Label confidence bars trigger select event when clicked", async ({
+	mount,
+	page
+}) => {
+	const select = spy();
+	const component = await mount(Label, {
+		props: {
+			value: {
+				label: "Good",
+				confidences: [
+					{ label: "Good", confidence: 0.9 },
+					{ label: "Bad", confidence: 0.1 }
+				]
+			},
+			label: "My Label",
+			show_label: true,
+			loading_status: loading_status
+		},
+		on: {
+			select: select
+		}
+	});
+	await expect(component).toContainText("My Label");
+	await component.getByTestId("Bad-confidence-set").click();
+	expect(select.callCount).toEqual(1);
+	expect(select.calls[0][0]).toEqual({ index: 1, value: "Bad" });
+});
+
+test("gr.Label triggers change event", async ({ mount, page }) => {
+	const change = spy();
+	const component = await mount(Label, {
+		props: {
+			value: {
+				label: "Good",
+				confidences: [
+					{ label: "Good", confidence: 0.9 },
+					{ label: "Bad", confidence: 0.1 }
+				]
+			},
+			label: "My Label",
+			show_label: true,
+			loading_status: loading_status
+		},
+		on: {
+			change: change
+		}
+	});
+	await component.update({
+		props: {
+			value: {
+				label: "Good",
+				confidences: [
+					{ label: "Good", confidence: 0.1 },
+					{ label: "Bad", confidence: 0.9 }
+				]
+			}
+		}
+	});
+	expect(change.callCount).toEqual(1);
+});

js/app/src/components/Label/Label.svelte

@@ -43,7 +43,7 @@
 		<BlockLabel Icon={LabelIcon} {label} disable={container === false} />
 	{/if}
 	{#if _label !== undefined && _label !== null}
-		<Label on:select {selectable} {value} {show_label} {color} />
+		<Label on:select {selectable} {value} {color} />
 	{:else}
 		<Empty unpadded_box={true}><LabelIcon /></Empty>
 	{/if}

js/app/src/components/Slider/Slider.component.spec.ts

@@ -66,7 +66,7 @@ test("Slider Default Value And Label rendered", async ({ mount }) => {
 });
 
 test("Slider respects show_label", async ({ mount, page }) => {
-	const _ = await mount(Slider, {
+	const component = await mount(Slider, {
 		props: {
 			value: 3,
 			minimum: 0,
@@ -78,7 +78,7 @@ test("Slider respects show_label", async ({ mount, page }) => {
 			loading_status: loading_status
 		}
 	});
-	await expect(page.getByTestId("label")).toBeHidden();
+	await expect(component.getByTestId("block-title")).toBeHidden();
 });
 
 test("Slider Maximum/Minimum values", async ({ mount, page }) => {

js/atoms/src/BlockLabel.svelte

@@ -11,6 +11,7 @@
 	class:sr-only={!show_label}
 	class:float
 	class:hide-label={disable}
+	data-testid="block-label"
 >
 	<span>
 		<Icon />

js/atoms/src/BlockTitle.svelte

@@ -8,6 +8,7 @@
 	class:sr-only={!show_label}
 	class:hide={!show_label}
 	class:has-info={info != null}
+	data-testid="block-info"
 >
 	<slot />
 </span>

js/label/src/Label.svelte

@@ -9,15 +9,14 @@
 
 	const dispatch = createEventDispatcher<{ select: SelectData }>();
 
-	export let show_label: boolean = true;
 	export let color: string | undefined = undefined;
 	export let selectable: boolean = false;
 </script>
 
 <div class="container">
 	<div
-		class:sr-only={!show_label}
 		class="output-class"
+		data-testid="label-output-value"
 		class:no-confidence={!("confidences" in value)}
 		style:background-color={color || "transparent"}
 	>
@@ -27,6 +26,7 @@
 		{#each value.confidences as confidence_set, i}
 			<div
 				class="confidence-set group"
+				data-testid={`${confidence_set.label}-confidence-set`}
 				class:selectable
 				on:click={() => {
 					dispatch("select", { index: i, value: confidence_set.label });