Fix ImageEditor interaction story (#6809)

* fix test + align + symbol to centre of button * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Dec 18, 2023 · 1401d99 · 1401d99
1 parent 51bdf43
commit 1401d99
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/giant-mammals-design.md b/.changeset/giant-mammals-design.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Fix `ImageEditor` interaction story
diff --git a/js/imageeditor/ImageEditor.stories.svelte b/js/imageeditor/ImageEditor.stories.svelte
@@ -105,7 +105,11 @@
 
 		await userEvent.click(canvas.getByLabelText("Color button"));
 
-		await userEvent.click(document.getElementsByClassName("color")[1]);
+		var availableColors = document.querySelectorAll(
+			"button.color:not(.empty):not(.selected):not(.hidden)"
+		);
+
+		await userEvent.click(availableColors[0]);
 
 		await userEvent.keyboard("{Escape}");
 

diff --git a/js/imageeditor/shared/tools/ColorSwatch.svelte b/js/imageeditor/shared/tools/ColorSwatch.svelte
@@ -104,6 +104,7 @@
 
 	.empty::after {
 		content: "+";
+		margin-bottom: var(--size-1);
 	}
 
 	.color {