From e0306eca2fff7240e3e1e2a25c397e4bba671e6c Mon Sep 17 00:00:00 2001
From: Emilia Juda-Ozbay <ejuda@bloomberg.net>
Date: Tue, 5 Apr 2022 18:21:39 +0100
Subject: [PATCH] Display flags next to class name

Reflections in TypeDoc can be assigned flags, describing certain
properties of the reflection, e.g. abstract, private, readonly etc.
These flags were rendered using badges for most type of reflections, but
not for reflections which are displayed on their own page (like classes,
interfaces etc.). This made it difficult to establish e.g. whether a
class is abstract (see #1874).

This PR fixes the issue by rendering flags in the page titles next to
the name of the documented entity.

Styling of the badges has been amended, to account for them now showing
next to much bigger headings. The styling was inspired by [Bootstrap
badges](https://getbootstrap.com/docs/4.0/components/badge/).

Partially resolves #1874.
---
 src/lib/output/themes/default/partials/header.tsx | 5 +++--
 static/style.css                                  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/output/themes/default/partials/header.tsx b/src/lib/output/themes/default/partials/header.tsx
index e95185d09..346bbefd5 100644
--- a/src/lib/output/themes/default/partials/header.tsx
+++ b/src/lib/output/themes/default/partials/header.tsx
@@ -1,7 +1,7 @@
 import type { Reflection } from "../../../../models";
 import { JSX } from "../../../../utils";
 import type { PageEvent } from "../../../events";
-import { hasTypeParameters, join } from "../../lib";
+import { hasTypeParameters, join, renderFlags } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 
 export const header = (context: DefaultThemeRenderContext, props: PageEvent<Reflection>) => (
@@ -77,7 +77,8 @@ export const header = (context: DefaultThemeRenderContext, props: PageEvent<Refl
                             {join(", ", props.model.typeParameters, (item) => item.name)}
                             {">"}
                         </>
-                    )}
+                    )}{" "}
+                    {renderFlags(props.model.flags)}
                 </h1>
             </div>
         </div>
diff --git a/static/style.css b/static/style.css
index a16ed029e..6127b27cd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -766,12 +766,13 @@ footer .tsd-legend {
 
 .tsd-flag {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0.25em 0.4em;
     border-radius: 4px;
     color: var(--color-comment-tag-text);
     background-color: var(--color-comment-tag);
     text-indent: 0;
-    font-size: 14px;
+    font-size: 75%;
+    line-height: 1;
     font-weight: normal;
 }