styles: prop field (#28)

svecosystem · Dec 13, 2024 · ea4c5a7 · ea4c5a7
1 parent 376c067
commit ea4c5a7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/.changeset/fresh-bobcats-attack.md b/.changeset/fresh-bobcats-attack.md
@@ -0,0 +1,5 @@
+---
+"@svecodocs/kit": patch
+---
+
+fix: cleanup empty space if no `defaultValue` or `required` in prop field
diff --git a/packages/kit/src/lib/components/prop-field.svelte b/packages/kit/src/lib/components/prop-field.svelte
@@ -41,24 +41,27 @@
 			{@render children?.()}
 		{/if}
 	</div>
-	<div class="mt-3 flex flex-col gap-2">
-		{#if defaultValue}
-			<div class="text-muted-foreground flex items-center font-mono">
-				<span class="text-xs">
-					default<span class="text-muted-foreground">:</span>
-				</span>
-				<span class="text-foreground/90 ml-1 min-w-fit font-mono text-xs">
-					{defaultValue}
+
+	{#if defaultValue || required}
+		<div class="mt-3 flex flex-col gap-2">
+			{#if defaultValue}
+				<div class="text-muted-foreground flex items-center font-mono">
+					<span class="text-xs">
+						default<span class="text-muted-foreground">:</span>
+					</span>
+					<span class="text-foreground/90 ml-1 min-w-fit font-mono text-xs">
+						{defaultValue}
+					</span>
+				</div>
+			{/if}
+			{#if required}
+				<span
+					class="relative mr-auto min-w-fit font-mono text-xs text-red-600 dark:text-red-400"
+				>
+					required
 				</span>
-			</div>
-		{/if}
-		{#if required}
-			<span
-				class="relative mr-auto min-w-fit font-mono text-xs text-red-600 dark:text-red-400"
-			>
-				required
-			</span>
-		{/if}
-	</div>
+			{/if}
+		</div>
+	{/if}
 	<Separator class="mt-4" />
 </div>