From 5ff07d60b85e0f0953490796a2db40975bd75154 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 May 2022 12:38:41 -0700
Subject: [PATCH] docs: display "Required" tag for required props

---
 docs/src/components/ComponentApi.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 2e260202..a0d56987 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -68,13 +68,18 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
+                    ? '01'
+                    : '03'})"
                 >
                   <Tag style="margin-left: 0" size="sm" type="cyan">
                     Reactive
                   </Tag>
                 </div>
               {/if}
+              {#if prop.isRequired}
+                <Tag size="sm" type="magenta">Required</Tag>
+              {/if}
             </StructuredListCell>
             <StructuredListCell>
               {#each (prop.type || "").split(" | ") as type, i (type)}