Improve CSS token documentation in Storybook (#6399)

* remove width and heights from icons * add changeset * add global css vars (light) * add changeset * add changeset * Remove component stories (will document these elsewhere) * remove rtl param in chatbot story for non rtl text * formatting * remove redundant class * add changeset * fix row story * fix broken groot file stories * revert lock changes * add changeset * lockfile * pnpm lock * remove colour from webcam icons * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Dec 8, 2023 · 053bec9 · 053bec9
1 parent 6b1401c
commit 053bec9
Show file tree

Hide file tree

Showing 20 changed files with 108 additions and 112 deletions.
diff --git a/.changeset/slow-buttons-cough.md b/.changeset/slow-buttons-cough.md
@@ -0,0 +1,10 @@
+---
+"@gradio/chatbot": patch
+"@gradio/dropdown": patch
+"@gradio/icons": patch
+"@gradio/image": patch
+"@gradio/row": patch
+"gradio": patch
+---
+
+feat:Improve CSS token documentation in Storybook
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
@@ -72,7 +72,6 @@
 <Story
 	name="Chatbot with copy button"
 	args={{
-		rtl: true,
 		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
 		show_copy_button: true
 	}}

diff --git a/js/chatbot/shared/Copy.svelte b/js/chatbot/shared/Copy.svelte
@@ -46,6 +46,7 @@
 
 <button
 	on:click={handle_copy}
+	class="action"
 	title="copy"
 	aria-label={copied ? "Copied message" : "Copy message"}
 >
@@ -70,4 +71,9 @@
 	button:hover {
 		color: var(--body-text-color);
 	}
+
+	.action {
+		width: 15px;
+		height: 14px;
+	}
 </style>
diff --git a/js/colorpicker/ColorPicker.stories.svelte b/js/colorpicker/ColorPicker.stories.svelte
@@ -12,11 +12,11 @@
 <Story name="Default" />
 <Story
 	name="Color Picker with a color value and hidden label"
-	args={{ value: "#FFC0CB", show_label: false }}
+	args={{ value: "#FFC0CB", show_label: false, interactive: true }}
 />
 <Story
 	name="Color Picker with a color value and label"
-	args={{ value: "#FFC0CB", label: "This is a neat color" }}
+	args={{ value: "#FFC0CB", label: "This is a neat color", interactive: true }}
 />
 
 <Story
@@ -26,5 +26,5 @@
 
 <Story
 	name="Color Picker with a color value and info"
-	args={{ value: "#FFC0CB", info: "This is a neat color" }}
+	args={{ value: "#FFC0CB", info: "This is a neat color", interactive: true }}
 />
diff --git a/js/dropdown/shared/Multiselect.svelte b/js/dropdown/shared/Multiselect.svelte
@@ -367,8 +367,8 @@
 		border-radius: var(--radius-full);
 		background: var(--background-fill-primary);
 		padding: var(--size-0-5);
-		width: 18px;
-		height: 18px;
+		width: 16px;
+		height: 16px;
 	}
 
 	.secondary-wrap {

diff --git a/js/file/File.stories.svelte b/js/file/File.stories.svelte
@@ -25,9 +25,9 @@
 	args={{
 		value: [
 			{
-				path: "groot.jpg",
-				orig_name: "groot.jpg",
-				url: "https://i.ibb.co/6BgKdSj/groot.jpg",
+				path: "cheetah.jpg",
+				orig_name: "cheetah.jpg",
+				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
 				size: 10000
 			}
 		]
@@ -37,9 +37,9 @@
 	name="Multiple files, with height set to 150px"
 	args={{
 		value: Array(10).fill({
-			path: "groot.jpg",
-			orig_name: "groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
+			path: "cheetah.jpg",
+			orig_name: "cheetah.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
 			size: 10000
 		}),
 		height: 150

diff --git a/js/icons/src/Chart.svelte b/js/icons/src/Chart.svelte
@@ -1,4 +1,4 @@
-<svg width="1em" height="1em" viewBox="0 0 32 32">
+<svg viewBox="0 0 32 32">
 	<path
 		d="M28.828 3.172a4.094 4.094 0 0 0-5.656 0L4.05 22.292A6.954 6.954 0 0 0 2 27.242V30h2.756a6.952 6.952 0 0 0 4.95-2.05L28.828 8.829a3.999 3.999 0 0 0 0-5.657zM10.91 18.26l2.829 2.829l-2.122 2.121l-2.828-2.828zm-2.619 8.276A4.966 4.966 0 0 1 4.756 28H4v-.759a4.967 4.967 0 0 1 1.464-3.535l1.91-1.91l2.829 2.828zM27.415 7.414l-12.261 12.26l-2.829-2.828l12.262-12.26a2.047 2.047 0 0 1 2.828 0a2 2 0 0 1 0 2.828z"
 		fill="currentColor"

diff --git a/js/icons/src/Check.svelte b/js/icons/src/Check.svelte
@@ -1,7 +1,5 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="15px"
-	height="14px"
 	viewBox="2 0 20 20"
 	fill="none"
 	stroke="currentColor"

diff --git a/js/icons/src/Circle.svelte b/js/icons/src/Circle.svelte
@@ -3,8 +3,6 @@
 	width="100%"
 	height="100%"
 	viewBox="0 0 24 24"
-	fill="red"
-	stroke="red"
 	stroke-width="1.5"
 	stroke-linecap="round"
 	stroke-linejoin="round"

diff --git a/js/icons/src/Copy.svelte b/js/icons/src/Copy.svelte
@@ -1,9 +1,4 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="15px"
-	height="14px"
-	viewBox="0 0 33 33"
-	color="currentColor"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" color="currentColor"
 	><path
 		fill="currentColor"
 		d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"

diff --git a/js/icons/src/Dislike.svelte b/js/icons/src/Dislike.svelte
@@ -4,8 +4,6 @@
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="15px"
-	height="15px"
 	viewBox="0 0 24 24"
 	fill={selected ? "currentColor" : "none"}
 	stroke-width="1.5"

diff --git a/js/icons/src/Like.svelte b/js/icons/src/Like.svelte
@@ -4,8 +4,6 @@
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="15px"
-	height="15px"
 	viewBox="0 0 24 24"
 	fill={selected ? "currentColor" : "none"}
 	stroke-width="1.5"

diff --git a/js/icons/src/Remove.svelte b/js/icons/src/Remove.svelte
@@ -1,9 +1,4 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="16"
-	height="16"
-	viewBox="0 0 24 24"
->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 	<path
 		d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 	/>

diff --git a/js/icons/src/Square.svelte b/js/icons/src/Square.svelte
@@ -3,8 +3,6 @@
 	width="100%"
 	height="100%"
 	viewBox="0 0 24 24"
-	fill="red"
-	stroke="red"
 	stroke-width="1.5"
 	stroke-linecap="round"
 	stroke-linejoin="round"

diff --git a/js/image/Image.stories.svelte b/js/image/Image.stories.svelte
@@ -34,9 +34,9 @@
 	name="Static Image with label and download button"
 	args={{
 		value: {
-			path: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			orig_name: "groot.jpg"
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
 		},
 		show_label: true,
 		show_download_button: true
@@ -47,9 +47,9 @@
 	name="Static Image with no label or download button"
 	args={{
 		value: {
-			path: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			orig_name: "groot.jpg"
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
 		},
 		show_label: false,
 		show_download_button: false

diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte
@@ -189,11 +189,11 @@
 			>
 				{#if mode === "video"}
 					{#if recording}
-						<div class="icon" title="stop recording">
+						<div class="icon red" title="stop recording">
 							<Square />
 						</div>
 					{:else}
-						<div class="icon" title="start recording">
+						<div class="icon red" title="start recording">
 							<Circle />
 						</div>
 					{/if}
@@ -297,6 +297,11 @@
 		align-items: center;
 	}
 
+	.red {
+		fill: red;
+		stroke: red;
+	}
+
 	.flip {
 		transform: scaleX(-1);
 	}

diff --git a/js/imageeditor/ImageEditor.stories.svelte b/js/imageeditor/ImageEditor.stories.svelte
@@ -44,9 +44,9 @@
 	name="Image Editor Interactions"
 	args={{
 		value: {
-			path: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			orig_name: "groot.jpg"
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
 		},
 		type: "pil",
 		sources: ["upload", "webcam"],

diff --git a/js/row/Row.stories.svelte b/js/row/Row.stories.svelte
@@ -1,21 +1,15 @@
 <script>
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Row from "./Index.svelte";
-	import Image from "@gradio/image";
+	import Button from "../button/shared/Button.svelte";
 </script>
 
 <Meta title="Layout Elements/Row" component={Row} />
 
 <Template let:args>
 	<Row {...args}>
-		<Image
-			{...args}
-			value={{ name: "https://i.ibb.co/6BgKdSj/groot.jpg", is_file: true }}
-		/>
-		<Image
-			{...args}
-			value={{ name: "https://i.ibb.co/6BgKdSj/groot.jpg", is_file: true }}
-		/>
+		<Button elem_id="btn" size="lg">test</Button>
+		<Button elem_id="btn" size="lg">test</Button>
 	</Row>
 </Template>
 

diff --git a/js/row/package.json b/js/row/package.json
@@ -10,8 +10,5 @@
 	"exports": {
 		".": "./Index.svelte",
 		"./package.json": "./package.json"
-	},
-	"devDependencies": {
-		"@gradio/image": "workspace:^"
 	}
 }