Repository: gradio-app/gradio
Pull request: move styling for interface panels to frontend
Adds a `variant` kwarg to `Column`. Closes #999.

@gary149 If you want to tweak the 'panel' styling for interfaces, feel feree to push to this branch. 

Problem statement:
handle custom styling for interfaces in the frontend rather than in the python lib
At the minute we are injecting custom CSS to create the interface design. Ideally we would not need to do this and would use either some new layout components (`Panel`, etc.) or custom CSS properties to modify the components we are using.

The current approach makes the dev experience very tedious, when modifying the interface styling.

Hints from issue discussion:

Commit message: Merge branch 'main' into 999-row-variant

Patch to review:
diff --git a/gradio/blocks.py b/gradio/blocks.py
index 6c36c4c099..46d46f75b6 100644
--- a/gradio/blocks.py
+++ b/gradio/blocks.py
@@ -158,15 +158,23 @@ def get_template_context(self):
 
 
 class Column(BlockContext):
-    def __init__(self, visible: bool = True, css: Optional[Dict[str, str]] = None):
+    def __init__(
+        self,
+        visible: bool = True,
+        css: Optional[Dict[str, str]] = None,
+        variant: str = "default",
+    ):
         """
         css: Css rules to apply to block.
+        variant: row type, 'default' or 'panel'
         """
+        self.variant = variant
         super().__init__(visible, css)
 
     def get_template_context(self):
         return {
             "type": "column",
+            "variant": self.variant,
             **super().get_template_context(),
         }
 
diff --git a/gradio/interface.py b/gradio/interface.py
index eae2a867cd..5ce7c1dddc 100644
--- a/gradio/interface.py
+++ b/gradio/interface.py
@@ -468,13 +468,7 @@ def clean_html(raw_html):
                     self.InterfaceTypes.INPUT_ONLY,
                     self.InterfaceTypes.UNIFIED,
                 ]:
-                    with Column(
-                        css={
-                            "background-color": "rgb(249,250,251)",
-                            "padding": "0.5rem",
-                            "border-radius": "0.5rem",
-                        }
-                    ):
+                    with Column(variant="panel"):
                         input_component_column = Column()
                         if self.interface_type in [
                             self.InterfaceTypes.INPUT_ONLY,
@@ -516,13 +510,7 @@ def clean_html(raw_html):
                     self.InterfaceTypes.OUTPUT_ONLY,
                 ]:
 
-                    with Column(
-                        css={
-                            "background-color": "rgb(249,250,251)",
-                            "padding": "0.5rem",
-                            "border-radius": "0.5rem",
-                        }
-                    ):
+                    with Column(variant="panel"):
                         status_tracker = StatusTracker(cover_container=True)
                         for component in self.output_components:
                             component.render()
diff --git a/ui/packages/app/src/Render.svelte b/ui/packages/app/src/Render.svelte
index 53a453e42d..6824a8e9b6 100644
--- a/ui/packages/app/src/Render.svelte
+++ b/ui/packages/app/src/Render.svelte
@@ -49,9 +49,12 @@
 	];
 
 	function get_types(i) {
-		const current = children[i]?.id && instance_map[children[i].id];
-		const next = children[i + 1]?.id && instance_map[children[i + 1].id];
-		const prev = children[i - 1]?.id && instance_map[children[i - 1].id];
+		const current =
+			children[i]?.id != undefined && instance_map[children[i].id];
+		const next =
+			children[i + 1]?.id != undefined && instance_map[children[i + 1].id];
+		const prev =
+			children[i - 1]?.id != undefined && instance_map[children[i - 1].id];
 
 		return {
 			current: current?.type && forms.includes(current.type),
diff --git a/ui/packages/app/src/components/Column/Column.svelte b/ui/packages/app/src/components/Column/Column.svelte
index 2629ebe9be..4c9b737c1a 100644
--- a/ui/packages/app/src/components/Column/Column.svelte
+++ b/ui/packages/app/src/components/Column/Column.svelte
@@ -2,6 +2,7 @@
 	export let value: boolean = true;
 	export let default_value: boolean;
 	export let style: string = "";
+	export let variant: "default" | "panel" = "default";
 
 	if (default_value) value = default_value;
 </script>
@@ -9,6 +10,9 @@
 <div
 	{style}
 	class:hidden={!value}
+	class:bg-gray-50={variant === "panel"}
+	class:p-2={variant === "panel"}
+	class:rounded-lg={variant === "panel"}
 	class="flex flex-1 flex-col gr-gap gr-form-gap relative"
 >
 	<slot />


Code review comments:
diff_hunk: @@ -158,15 +158,23 @@ def get_template_context(self):
 
 
 class Column(BlockContext):
-    def __init__(self, visible: bool = True, css: Optional[Dict[str, str]] = None):
+    def __init__(
+        self,
+        visible: bool = True,
+        css: Optional[Dict[str, str]] = None,
+        variant: str = "default",
+    ):
         """
         css: Css rules to apply to block.
+        variant: row type, 'default' or 'panel'
path: gradio/blocks.py
text: @user1:
```suggestion
        variant: column type, 'default' (no background) or 'panel' (gray background color and rounded corners)
```