@gradio/tabitem 0.9.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/tabitem
 
+## 0.10.1
+
+### Dependency updates
+
+- @gradio/utils@0.15.0
+- @gradio/tabs@0.11.2
+- @gradio/column@0.4.1
+
+## 0.10.0
+
+### Features
+
+- [`3111c06`](https://github.com/gradio-app/gradio/commit/3111c069d59ccd4ed5b4d2118baa8ada62569bfd) - Add height/max_height to gr.Accordion and gr.Tab, fix gr.Code max_lines.  Thanks @dawoodkhan82!
+
 ## 0.9.0
 
 ### Features

package/Index.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, css_units } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
 	import type { TabItemProps, TabItemEvents } from "./types";
 
@@ -22,6 +22,12 @@
 	order={gradio.props.order}
 	alignment={gradio.props.alignment}
 	scale={gradio.shared.scale}
+	height={gradio.props.height != null
+		? css_units(gradio.props.height)
+		: undefined}
+	max_height={gradio.props.max_height != null
+		? css_units(gradio.props.max_height)
+		: undefined}
 	component_id={gradio.props.component_id}
 	onselect={(data) => gradio.dispatch("select", data)}
 >

package/TabItem.test.ts

@@ -15,6 +15,27 @@ describe("TabItem", () => {
 		expect(getByTestId("tab-content")).toHaveTextContent("tab panel content");
 	});
 
+	test("max_height caps the panel height and makes it scrollable", async () => {
+		const { getByRole } = await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_max_height: "100px"
+		});
+
+		const panel = getByRole("tabpanel", { hidden: true });
+		expect(panel.style.maxHeight).toBe("100px");
+		expect(getComputedStyle(panel).overflowY).toBe("auto");
+	});
+
+	test("panel is not scrollable when no height is set", async () => {
+		const { getByRole } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		const panel = getByRole("tabpanel", { hidden: true });
+		expect(panel.style.maxHeight).toBe("");
+		expect(getComputedStyle(panel).overflowY).toBe("visible");
+	});
+
 	test("content is visible when this tab is the selected tab", async () => {
 		const { getByTestId } = await render(TabItemHarness, {
 			tab_selected: "t1"

package/TabItemHarness.svelte

@@ -31,6 +31,8 @@
 	interactive={true}
 	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
+	height={cfg.tab_height}
+	max_height={cfg.tab_max_height}
 	component_id={1}
 	onselect={(data) => cfg.on_tab_select?.(data)}
 >

package/dist/Index.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, css_units } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
 	import type { TabItemProps, TabItemEvents } from "./types";
 
@@ -22,6 +22,12 @@
 	order={gradio.props.order}
 	alignment={gradio.props.alignment}
 	scale={gradio.shared.scale}
+	height={gradio.props.height != null
+		? css_units(gradio.props.height)
+		: undefined}
+	max_height={gradio.props.max_height != null
+		? css_units(gradio.props.max_height)
+		: undefined}
 	component_id={gradio.props.component_id}
 	onselect={(data) => gradio.dispatch("select", data)}
 >

package/dist/TabItemHarness.svelte

@@ -31,6 +31,8 @@
 	interactive={true}
 	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
+	height={cfg.tab_height}
+	max_height={cfg.tab_max_height}
 	component_id={1}
 	onselect={(data) => cfg.on_tab_select?.(data)}
 >

package/dist/shared/TabItem.svelte

@@ -14,6 +14,8 @@
 		order,
 		alignment = "left",
 		scale,
+		height,
+		max_height,
 		component_id,
 		onselect,
 		children
@@ -27,6 +29,8 @@
 		order: number;
 		alignment?: "left" | "right";
 		scale: number;
+		height?: string;
+		max_height?: string;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
 		children?: Snippet;
@@ -80,8 +84,11 @@
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
+	class:scrollable={height || max_height}
 	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
+	style:height
+	style:max-height={max_height}
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
@@ -99,6 +106,9 @@
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.scrollable {
+		overflow-y: auto;
+	}
 	.grow-children > :global(.column > .column) {
 		flex-grow: 1;
 	}

package/dist/shared/TabItem.svelte.d.ts

@@ -10,6 +10,8 @@ type $$ComponentProps = {
     order: number;
     alignment?: "left" | "right";
     scale: number;
+    height?: string;
+    max_height?: string;
     component_id: number;
     onselect?: (data: SelectData) => void;
     children?: Snippet;

package/dist/types.d.ts

@@ -8,6 +8,8 @@ export interface TabItemProps {
     interactive: boolean;
     order: number;
     alignment?: "left" | "right";
+    height?: number | string | null;
+    max_height?: number | string | null;
     component_id: number;
 }
 export interface TabItemEvents {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,9 +16,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@gradio/tabs": "^0.11.2",
     "@gradio/column": "^0.4.1",
-    "@gradio/tabs": "^0.11.0",
-    "@gradio/utils": "^0.14.2"
+    "@gradio/utils": "^0.15.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.17.1"

package/shared/TabItem.svelte

@@ -14,6 +14,8 @@
 		order,
 		alignment = "left",
 		scale,
+		height,
+		max_height,
 		component_id,
 		onselect,
 		children
@@ -27,6 +29,8 @@
 		order: number;
 		alignment?: "left" | "right";
 		scale: number;
+		height?: string;
+		max_height?: string;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
 		children?: Snippet;
@@ -80,8 +84,11 @@
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
+	class:scrollable={height || max_height}
 	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
+	style:height
+	style:max-height={max_height}
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
@@ -99,6 +106,9 @@
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.scrollable {
+		overflow-y: auto;
+	}
 	.grow-children > :global(.column > .column) {
 		flex-grow: 1;
 	}

package/types.ts

@@ -9,6 +9,8 @@ export interface TabItemProps {
 	interactive: boolean;
 	order: number;
 	alignment?: "left" | "right";
+	height?: number | string | null;
+	max_height?: number | string | null;
 	component_id: number;
 }