From d2facb2db1ae178be8404145d935aca4e9bca80e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Fri, 21 Mar 2025 15:28:53 +0100
Subject: [PATCH] Mark OpenAPI properties as optional if not required (#3021)

---
 .changeset/new-squids-approve.md                            | 6 ++++++
 .../gitbook/src/components/DocumentView/OpenAPI/style.css   | 4 ++++
 packages/react-openapi/src/OpenAPISchemaName.tsx            | 6 +++++-
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/new-squids-approve.md

diff --git a/.changeset/new-squids-approve.md b/.changeset/new-squids-approve.md
new file mode 100644
index 000000000..7f86a1ebe
--- /dev/null
+++ b/.changeset/new-squids-approve.md
@@ -0,0 +1,6 @@
+---
+"@gitbook/react-openapi": patch
+"gitbook": patch
+---
+
+Mark properties as optional if not required
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index 1c2592c3b..b406446f2 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -201,6 +201,10 @@
     @apply text-warning-subtle text-[0.813rem];
 }
 
+.openapi-schema-optional {
+    @apply text-info-subtle text-[0.813rem];
+}
+
 .openapi-schema-readonly {
     @apply text-primary-subtle/9 text-[0.813rem];
 }
diff --git a/packages/react-openapi/src/OpenAPISchemaName.tsx b/packages/react-openapi/src/OpenAPISchemaName.tsx
index 056efb3b6..8883d7061 100644
--- a/packages/react-openapi/src/OpenAPISchemaName.tsx
+++ b/packages/react-openapi/src/OpenAPISchemaName.tsx
@@ -32,7 +32,11 @@ export function OpenAPISchemaName(props: OpenAPISchemaNameProps) {
                 ) : null}
             </span>
             {schema?.readOnly ? <span className="openapi-schema-readonly">read-only</span> : null}
-            {required ? <span className="openapi-schema-required">required</span> : null}
+            {required ? (
+                <span className="openapi-schema-required">required</span>
+            ) : (
+                <span className="openapi-schema-optional">optional</span>
+            )}
             {schema?.deprecated ? <span className="openapi-deprecated">Deprecated</span> : null}
         </div>
     );