Add circular label styling

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/_SchemaItem.scss

@@ -67,6 +67,17 @@
   background-color: transparent;
 }
 
+.openapi-schema__circular {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: var(--openapi-circular);
+  margin-left: 1%;
+  background-color: transparent;
+}
+
 .openapi-schema__strikethrough {
   text-decoration: line-through;
 }

packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.tsx

@@ -92,6 +92,17 @@ export default function SchemaItem(props: Props) {
     <span className="openapi-schema__nullable">nullable</span>
   ));
 
+  const circularMatch =
+    typeof schemaName === "string" && schemaName.startsWith("circular(")
+      ? schemaName.match(/^circular\\(([^)]*)\\)/)
+      : null;
+
+  const renderCircular = guard(circularMatch, () => (
+    <span className="openapi-schema__circular">
+      {circularMatch ? `circular(${circularMatch[1]})` : "circular"}
+    </span>
+  ));
+
   const renderEnumDescriptions = guard(
     getEnumDescriptionMarkdown(enumDescriptions),
     (value) => {
@@ -206,6 +217,7 @@ export default function SchemaItem(props: Props) {
         {renderNullable}
         {renderRequired}
         {renderDeprecated}
+        {renderCircular}
       </span>
       {renderSchemaDescription}
       {renderEnumDescriptions}

packages/docusaurus-theme-openapi-docs/src/theme/styles.scss

@@ -46,6 +46,7 @@
   --openapi-required: var(--ifm-color-danger);
   --openapi-deprecated: var(--ifm-color-warning);
   --openapi-nullable: var(--ifm-color-info);
+  --openapi-circular: var(--ifm-color-primary);
   --openapi-code-blue: var(--ifm-color-info);
   --openapi-code-red: var(--ifm-color-danger);
   --openapi-code-orange: var(--ifm-color-warning);