Move icons into IconButtonWrapper

.changeset/calm-monkeys-argue.md

@@ -0,0 +1,17 @@
+---
+"@gradio/annotatedimage": minor
+"@gradio/atoms": minor
+"@gradio/audio": minor
+"@gradio/file": minor
+"@gradio/gallery": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/json": minor
+"@gradio/model3d": minor
+"@gradio/simpleimage": minor
+"@gradio/upload": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Improve Icon Button consistency 

gradio/themes/base.py

@@ -1166,7 +1166,7 @@ def set(
         self.block_label_right_radius = block_label_right_radius or getattr(
             self,
             "block_label_right_radius",
-            "0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
+            "0 calc(*radius_sm - 1px) 0 calc(*radius_sm - 1px)",
         )
         self.block_label_text_size = block_label_text_size or getattr(
             self, "block_label_text_size", "*text_sm"

js/annotatedimage/Index.svelte

@@ -2,7 +2,13 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 
 	import { onMount } from "svelte";
-	import { Block, BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import {
+		Block,
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Image, Maximize, Minimize } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -159,7 +165,7 @@
 			<Empty size="large" unpadded_box={true}><Image /></Empty>
 		{:else}
 			<div class="image-container" bind:this={image_container}>
-				<div class="icon-buttons">
+				<IconButtonWrapper>
 					{#if !is_full_screen && show_fullscreen_button}
 						<IconButton
 							Icon={Maximize}
@@ -175,7 +181,7 @@
 							on:click={toggle_full_screen}
 						/>
 					{/if}
-				</div>
+				</IconButtonWrapper>
 
 				<img
 					class="base-image"
@@ -286,13 +292,4 @@
 		border-radius: var(--radius-sm);
 		padding: var(--spacing-sm);
 	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-		z-index: 1;
-	}
 </style>

js/atoms/src/IconButton.svelte

@@ -11,8 +11,7 @@
 	export let hasPopup = false;
 	export let color = "var(--block-label-text-color)";
 	export let transparent = false;
-	export let background = "var(--background-fill-primary)";
-	export let offset = 0;
+	export let background = "var(--block-background-fill)";
 	$: _color = highlight ? "var(--color-accent)" : color;
 </script>
 
@@ -28,15 +27,15 @@
 	class:transparent
 	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
 	style:--bg-color={!disabled ? background : "auto"}
-	style:margin-left={offset + "px"}
 >
 	{#if show_label}<span>{label}</span>{/if}
 	<div
 		class:small={size === "small"}
 		class:large={size === "large"}
 		class:medium={size === "medium"}
 	>
-		<Icon />
+		<!-- handles icon reactivity -->
+		<svelte:component this={Icon} />
 	</div>
 </button>
 
@@ -47,28 +46,26 @@
 		align-items: center;
 		gap: 1px;
 		z-index: var(--layer-2);
-		/* background: var(--background-fill-primary); */
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-xs);
 		color: var(--block-label-text-color);
 		border: 1px solid transparent;
 	}
 
+	button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
 	button[disabled] {
 		opacity: 0.5;
 		box-shadow: none;
 	}
 
 	button[disabled]:hover {
 		cursor: not-allowed;
-		/* border: 1px solid var(--button-secondary-border-color); */
-		/* padding: 2px; */
 	}
 
 	.padded {
-		padding: 2px;
 		background: var(--bg-color);
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--button-secondary-border-color);
 	}
 
 	button:hover,
@@ -78,8 +75,6 @@
 	}
 
 	.padded:hover {
-		border: 2px solid var(--button-secondary-border-color-hover);
-		padding: 1px;
 		color: var(--block-label-text-color);
 	}
 
@@ -92,6 +87,7 @@
 		padding: 2px;
 		display: flex;
 		align-items: flex-end;
+		transition: filter 0.2s ease-in-out;
 	}
 
 	.small {

js/atoms/src/IconButtonWrapper.svelte

@@ -0,0 +1,48 @@
+<div class="icon-button-wrapper">
+	<slot></slot>
+</div>
+
+<style>
+	.icon-button-wrapper {
+		position: absolute;
+		display: flex;
+		flex-direction: row;
+		top: var(--block-label-margin);
+		right: var(--block-label-margin);
+		z-index: var(--layer-2);
+		gap: var(--spacing-sm);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-top: none;
+		border-right: none;
+		border-radius: var(--block-label-right-radius);
+		background: var(--block-background-fill);
+		padding: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper :global(button) {
+		margin: var(--spacing-xxs);
+		border-radius: var(--radius-xs);
+		position: relative;
+	}
+
+	.icon-button-wrapper :global(a.download-link:not(:last-child)),
+	.icon-button-wrapper :global(button:not(:last-child)) {
+		margin-right: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper :global(a.download-link:not(:last-child)::after),
+	.icon-button-wrapper :global(button:not(:last-child)::after) {
+		content: "";
+		position: absolute;
+		right: -5px;
+		top: 15%;
+		height: 70%;
+		width: 1px;
+		background-color: var(--border-color-primary);
+	}
+
+	.icon-button-wrapper :global(a.download-link:not(:last-child)::after) {
+		right: -3px;
+	}
+</style>

js/atoms/src/index.ts

@@ -8,5 +8,6 @@ export { default as ShareButton } from "./ShareButton.svelte";
 export { default as UploadText } from "./UploadText.svelte";
 export { default as Toolbar } from "./Toolbar.svelte";
 export { default as SelectSource } from "./SelectSource.svelte";
+export { default as IconButtonWrapper } from "./IconButtonWrapper.svelte";
 
 export const BLOCK_KEY = {};

js/audio/interactive/InteractiveAudio.svelte

@@ -244,7 +244,7 @@
 	<StreamingBar {time_limit} />
 	{#if value === null || streaming}
 		{#if active_source === "microphone"}
-			<ModifyUpload {i18n} on:clear={clear} absolute={true} />
+			<ModifyUpload {i18n} on:clear={clear} />
 			{#if streaming}
 				<StreamAudio
 					{record}
@@ -290,7 +290,6 @@
 			on:clear={clear}
 			on:edit={() => (mode = "edit")}
 			download={show_download_button ? value.url : null}
-			absolute={true}
 		/>
 
 		<AudioPlayer

js/audio/static/StaticAudio.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { Empty } from "@gradio/atoms";
-	import { ShareButton, IconButton, BlockLabel } from "@gradio/atoms";
+	import {
+		ShareButton,
+		IconButton,
+		BlockLabel,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Download, Music } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
@@ -40,7 +45,7 @@
 />
 
 {#if value !== null}
-	<div class="icon-buttons">
+	<IconButtonWrapper>
 		{#if show_download_button}
 			<DownloadLink
 				href={value.is_stream
@@ -64,7 +69,7 @@
 				{value}
 			/>
 		{/if}
-	</div>
+	</IconButtonWrapper>
 
 	<AudioPlayer
 		{value}
@@ -84,13 +89,3 @@
 		<Music />
 	</Empty>
 {/if}
-
-<style>
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>

js/chatbot/shared/ChatBot.svelte

@@ -16,14 +16,14 @@
 	import { Image } from "@gradio/image/shared";
 
 	import { Clear, Trash, Community } from "@gradio/icons";
+	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 	import type { SelectData, LikeData } from "@gradio/utils";
 	import type { MessageRole } from "../types";
 	import { MarkdownCode as Markdown } from "@gradio/markdown";
 	import type { FileData, Client } from "@gradio/client";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import Pending from "./Pending.svelte";
 	import MessageBox from "./MessageBox.svelte";
-	import ActionButton from "./ActionButton.svelte";
 	import { ShareError } from "@gradio/utils";
 
 	export let value: NormalisedMessage[] | null = [];
@@ -306,13 +306,12 @@
 </script>
 
 {#if value !== null && value.length > 0}
-	<div class="button-row">
+	<IconButtonWrapper>
 		{#if show_share_button}
-			<ActionButton
-				action="share"
-				handle_action={async () => {
+			<IconButton
+				Icon={Community}
+				on:click={async () => {
 					try {
-						// @ts-ignore
 						const formatted = await format_chat_for_sharing(value);
 						dispatch("share", {
 							description: formatted
@@ -325,15 +324,13 @@
 				}}
 			>
 				<Community />
-			</ActionButton>
+			</IconButton>
 		{/if}
-		<ActionButton handle_action={() => dispatch("clear")} action="clear">
-			<Trash />
-		</ActionButton>
+		<IconButton Icon={Trash} on:click={() => dispatch("clear")}></IconButton>
 		{#if show_copy_all_button}
 			<CopyAll {value} />
 		{/if}
-	</div>
+	</IconButtonWrapper>
 {/if}
 
 <div
@@ -718,23 +715,6 @@
 		padding: 6px;
 	}
 
-	.button-row {
-		display: flex;
-		position: absolute;
-		right: var(--size-4);
-		align-items: center;
-		justify-content: space-evenly;
-		gap: var(--spacing-md);
-		z-index: 2;
-		padding-left: var(--size-2);
-		padding-right: var(--size-2);
-		background: var(--block-label-background-fill);
-		border-radius: var(--radius-md);
-		box-shadow: none;
-		padding-top: var(--size-1);
-		padding-bottom: var(--size-1);
-	}
-
 	.selectable {
 		cursor: pointer;
 	}

js/chatbot/shared/CopyAll.svelte

@@ -2,6 +2,7 @@
 	import { onDestroy } from "svelte";
 	import { Copy, Check } from "@gradio/icons";
 	import type { NormalisedMessage } from "../types";
+	import { IconButton } from "@gradio/atoms";
 
 	let copied = false;
 	export let value: NormalisedMessage[] | null;
@@ -45,29 +46,10 @@
 	});
 </script>
 
-<button
+<IconButton
+	Icon={copied ? Check : Copy}
 	on:click={handle_copy}
 	title="Copy conversation"
 	class={copied ? "copied" : "copy-text"}
 	aria-label={copied ? "Copied conversation" : "Copy conversation"}
->
-	{#if copied}
-		<Check />
-	{:else}
-		<Copy />
-	{/if}
-</button>
-
-<style>
-	button {
-		display: flex;
-		align-items: center;
-		width: var(--size-4);
-		height: var(--size-4);
-		color: var(--body-text-color-subdued);
-	}
-
-	button:hover {
-		color: var(--body-text-color);
-	}
-</style>
+></IconButton>

js/file/shared/FileUpload.svelte

@@ -53,7 +53,7 @@
 <BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
+	<ModifyUpload {i18n} on:clear={handle_clear} />
 	<FilePreview
 		{i18n}
 		on:select