fix button styling (#1447)

demo/blocks_joined/run.py

@@ -33,7 +33,6 @@ with gr.Blocks(css=".container { max-width: 800px; margin: auto; }") as demo:
                     label="Enter your prompt", show_label=False, max_lines=1
                 ).style(
                     border=(True, False, True, True),
-                    margin=False,
                     rounded=(True, False, False, True),
                     container=False,
                 )

gradio/components.py

@@ -3615,9 +3615,12 @@ class Button(Clickable, Component):
         rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         full_width: Optional[str] = None,
         border: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        margin: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
     ):
         if full_width is not None:
             self._style["full_width"] = full_width
+        if margin is not None:
+            self._style["margin"] = margin
 
         return IOComponent.style(
             self,

ui/packages/app/src/components/Group/Group.svelte

@@ -14,18 +14,18 @@
 
 <style>
 	div > :global(*:not(.absolute)) {
-		@apply rounded-none;
+		@apply !rounded-none;
 	}
 
 	div > :global(*:first-child) {
-		@apply rounded-tl-lg rounded-tr-lg;
+		@apply !rounded-tl-lg !rounded-tr-lg;
 	}
 
 	div > :global(*:last-child) {
-		@apply rounded-bl-lg rounded-br-lg;
+		@apply !rounded-bl-lg !rounded-br-lg;
 	}
 
 	div > :global(* + *:not(.absolute)) {
-		@apply border-t-0;
+		@apply !border-t-0;
 	}
 </style>

ui/packages/atoms/src/Block.svelte

@@ -61,7 +61,7 @@
 		(typeof style.rounded === "boolean" && style.rounded);
 
 	$: rounded_style = get_styles({ rounded: rounded }, ["rounded"]).classes;
-	$: visible_style = get_styles({ visible }, ["visible"]);
+	$: visible_style = get_styles({ visible }, ["visible"]).classes;
 </script>
 
 <svelte:element

ui/packages/button/src/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { create_classes } from "../../utils";
+	import { create_classes, get_styles } from "../../utils";
 	import type { Styles } from "@gradio/utils";
 
 	export let style: Styles = {};
@@ -7,12 +7,19 @@
 	export let visible: boolean = true;
 	export let variant: "primary" | "secondary" = "secondary";
 	export let size: "sm" | "lg" = "lg";
+
+	$: ({ classes } = get_styles(style, [
+		"border",
+		"full_width",
+		"rounded",
+		"margin"
+	]));
 </script>
 
 <button
 	on:click
-	class={`gr-button gr-button-${size} gr-button-${variant} self-start` +
-		create_classes(style)}
+	class="gr-button gr-button-{size} gr-button-{variant} self-start
+		{classes}"
 	id={elem_id}
 	class:hidden={visible === false}
 >

ui/packages/theme/src/global.css

@@ -61,7 +61,7 @@
 	}
 
 	.row.gr-gap.mobile-row > *:not(.absolute) + * {
-		@apply !ml-3 !mt-0;
+		@apply ml-3 mt-0;
 	}
 
 	.row.gr-form-gap > .form + .form {

ui/packages/utils/src/styles.ts

@@ -4,6 +4,7 @@ type BoolOrTuple = boolean | BoolTuple;
 export interface Styles {
 	rounded?: BoolOrTuple;
 	border?: BoolOrTuple;
+	margin?: BoolOrTuple;
 	container?: boolean;
 	grid?: number | Array<number>;
 	height?: "auto" | string;
@@ -78,6 +79,13 @@ const style_handlers: StyleHandlers = {
 			[false, "0"]
 		);
 	},
+	margin(margin) {
+		let _style: BoolTuple = Array.isArray(margin)
+			? margin
+			: bool_to_tuple(margin);
+
+		return tuple_to_class(_style, "!m", ["t", "r", "b", "l"], [false, "0"]);
+	},
 	container(container_visible) {
 		return container_visible
 			? ""
@@ -112,7 +120,7 @@ const style_handlers: StyleHandlers = {
 		return mobile_collapse ? "flex-col" : "mobile-row";
 	},
 	visible(visible) {
-		return visible ? "!hidden" : "";
+		return visible ? "" : "!hidden";
 	},
 	item_container(visible) {
 		return visible ? "" : "!border-none";