Repository: graphql-markdown/graphql-markdown
Pull request #2038 (2025-03-21 19:19:04)

:bug:  fix badge classname linked to docusaurus css
# Description

Remove docusaurus css classname specific constants from default badge handling.

# Checklist

- [x] My changes follow the [contributing guidelines](https://github.com/graphql-markdown/graphql-markdown/blob/main/CONTRIBUTING.md) of this project.
- [x] I have performed a self-review of my code.
- [ ] I have made corresponding changes to the documentation.
- [ ] I have added tests that prove my fix is effective or that my changes work.
- [x] New and existing unit tests pass locally with my changes.


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_helpers&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_helpers&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_helpers&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_helpers&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_helpers&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_helpers&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_helpers&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_cli&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_cli&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_cli&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_cli&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_cli&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_cli&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_cli&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_logger&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_logger&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_logger&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_logger&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_logger&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_logger&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_logger&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_core&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_core&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_core&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_core&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_core&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_core&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_core&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_printer-legacy&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_printer-legacy&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_printer-legacy&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_printer-legacy&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [100.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_printer-legacy&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_printer-legacy&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_printer-legacy&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_diff&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_diff&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_diff&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_diff&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_diff&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_diff&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_diff&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_docusaurus&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 New issue](https://sonarcloud.io/project/issues?id=graphql-markdown_docusaurus&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_docusaurus&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_docusaurus&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [80.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_docusaurus&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_docusaurus&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_docusaurus&pullRequest=2038)


sonarqubecloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql&pullRequest=2038) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_graphql&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=graphql-markdown_graphql&pullRequest=2038&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_graphql&pullRequest=2038&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql&pullRequest=2038&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql&pullRequest=2038&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql&pullRequest=2038)



Patch:
diff --git a/packages/docusaurus/src/mdx/index.ts b/packages/docusaurus/src/mdx/index.ts
index 95ae5b3f..94fd8bf1 100644
--- a/packages/docusaurus/src/mdx/index.ts
+++ b/packages/docusaurus/src/mdx/index.ts
@@ -10,11 +10,14 @@ import type {
 const MARKDOWN_EOL = "\n" as const;
 const MARKDOWN_EOP = `${MARKDOWN_EOL.repeat(2)}` as const;
 const LINK_MDX_EXTENSION = ".mdx" as const;
+const DEFAULT_CSS_CLASSNAME = "badge--secondary" as const;
 
 export { mdxDeclaration } from "./components";
 
 export const formatMDXBadge = ({ text, classname }: Badge): MDXString => {
-  return `<Badge class="badge ${classname}" text="${text as string}"/>` as MDXString;
+  const style =
+    typeof classname === "string" ? `badge--${classname.toLowerCase()}` : "";
+  return `<Badge class="badge ${DEFAULT_CSS_CLASSNAME} ${style}" text="${text as string}"/>` as MDXString;
 };
 
 export const formatMDXAdmonition = (
diff --git a/packages/printer-legacy/src/badge.ts b/packages/printer-legacy/src/badge.ts
index a723029b..4450557c 100644
--- a/packages/printer-legacy/src/badge.ts
+++ b/packages/printer-legacy/src/badge.ts
@@ -20,7 +20,10 @@ import {
 import { getCategoryLocale } from "./link";
 import { getGroup } from "./group";
 
-export const DEFAULT_CSS_CLASSNAME = "badge--secondary" as const;
+export const CSS_BADGE_CLASSNAME = {
+  DEPRECATED: "DEPRECATED",
+  RELATION: "RELATION",
+};
 
 export const getTypeBadges = (
   type: unknown,
@@ -37,24 +40,23 @@ export const getTypeBadges = (
   if (isDeprecated(type)) {
     badges.push({
       text: "deprecated",
-      classname: "badge--deprecated badge--secondary",
+      classname: CSS_BADGE_CLASSNAME.DEPRECATED,
     } as Badge);
   }
 
   if (isNonNullType(rootType)) {
     badges.push({
       text: "non-null",
-      classname: DEFAULT_CSS_CLASSNAME,
     } as Badge);
   }
 
   if (isListType(rootType)) {
-    badges.push({ text: "list", classname: DEFAULT_CSS_CLASSNAME } as Badge);
+    badges.push({ text: "list" } as Badge);
   }
 
   const category = getCategoryLocale(getNamedType(rootType));
   if (category) {
-    badges.push({ text: category, classname: DEFAULT_CSS_CLASSNAME } as Badge);
+    badges.push({ text: category } as Badge);
   }
 
   if (groups) {
@@ -63,7 +65,7 @@ export const getTypeBadges = (
     ) as SchemaEntity;
     const group = getGroup(rootType, groups, typeCategory);
     if (group && group !== "") {
-      badges.push({ text: group, classname: DEFAULT_CSS_CLASSNAME } as Badge);
+      badges.push({ text: group } as Badge);
     }
   }
 
diff --git a/packages/printer-legacy/src/relation.ts b/packages/printer-legacy/src/relation.ts
index 292ca05f..4a61914e 100644
--- a/packages/printer-legacy/src/relation.ts
+++ b/packages/printer-legacy/src/relation.ts
@@ -18,7 +18,7 @@ import {
 } from "@graphql-markdown/graphql";
 
 import { getRelationLink } from "./link";
-import { DEFAULT_CSS_CLASSNAME, printBadge } from "./badge";
+import { CSS_BADGE_CLASSNAME, printBadge } from "./badge";
 import { MARKDOWN_EOP, ROOT_TYPE_LOCALE } from "./const/strings";
 import { SectionLevels } from "./const/options";
 
@@ -66,7 +66,7 @@ export const printRelationOf = <T>(
     const badge = printBadge(
       {
         text: category,
-        classname: DEFAULT_CSS_CLASSNAME,
+        classname: CSS_BADGE_CLASSNAME.RELATION,
       },
       options,
     );
diff --git a/packages/types/src/printer.d.ts b/packages/types/src/printer.d.ts
index 8aecaea2..1dd96bd0 100644
--- a/packages/types/src/printer.d.ts
+++ b/packages/types/src/printer.d.ts
@@ -87,7 +87,7 @@ declare const SECTION_LEVEL_VALUE: unique symbol;
 
 export interface Badge {
   text: TypeLocale | string;
-  classname: string;
+  classname?: string[] | string;
 }
 
 export interface TypeLink {


Test patch:
diff --git a/packages/docusaurus/tests/unit/mdx/index.test.ts b/packages/docusaurus/tests/unit/mdx/index.test.ts
index 5af5d61b..16079675 100644
--- a/packages/docusaurus/tests/unit/mdx/index.test.ts
+++ b/packages/docusaurus/tests/unit/mdx/index.test.ts
@@ -12,7 +12,9 @@ describe("formatMDXBadge", () => {
   test("returns a formatted MDX badge string", () => {
     const badge = { text: "Test Badge", classname: "test-class" };
     const result = formatMDXBadge(badge);
-    expect(result).toBe('<Badge class="badge test-class" text="Test Badge"/>');
+    expect(result).toBe(
+      '<Badge class="badge badge--secondary badge--test-class" text="Test Badge"/>',
+    );
   });
 });
 
diff --git a/packages/printer-legacy/tests/unit/badge.test.ts b/packages/printer-legacy/tests/unit/badge.test.ts
index 55608e32..ff833d77 100644
--- a/packages/printer-legacy/tests/unit/badge.test.ts
+++ b/packages/printer-legacy/tests/unit/badge.test.ts
@@ -115,9 +115,7 @@ describe("badge", () => {
 
       const badges = Badge.getTypeBadges(type);
 
-      expect(badges).toStrictEqual([
-        { text: "non-null", classname: "badge--secondary" },
-      ]);
+      expect(badges).toStrictEqual([{ text: "non-null" }]);
     });
 
     test("return list badge is type is list", () => {
@@ -129,9 +127,7 @@ describe("badge", () => {
 
       const badges = Badge.getTypeBadges(type);
 
-      expect(badges).toStrictEqual([
-        { text: "list", classname: "badge--secondary" },
-      ]);
+      expect(badges).toStrictEqual([{ text: "list" }]);
     });
 
     test("return category name as badge is type is subtype", () => {
@@ -143,9 +139,7 @@ describe("badge", () => {
 
       const badges = Badge.getTypeBadges(type);
 
-      expect(badges).toStrictEqual([
-        { text: "foobar", classname: "badge--secondary" },
-      ]);
+      expect(badges).toStrictEqual([{ text: "foobar" }]);
     });
 
     test("return group name as badge is type has group", () => {
@@ -157,9 +151,7 @@ describe("badge", () => {
 
       const badges = Badge.getTypeBadges(type, { queries: {} });
 
-      expect(badges).toStrictEqual([
-        { text: "foobaz", classname: "badge--secondary" },
-      ]);
+      expect(badges).toStrictEqual([{ text: "foobaz" }]);
     });
   });
 });