SONAR-21186 Redesign the presentation of enum values for Web API v2 Doc

3 files changed, 27 insertions, 3 deletions

diff --git a/server/sonar-web/design-system/src/components/CodeSnippet.tsx b/server/sonar-web/design-system/src/components/CodeSnippet.tsx
index 8281a1242f9..c5c6e863dcd 100644
--- a/server/sonar-web/design-system/src/components/CodeSnippet.tsx
+++ b/server/sonar-web/design-system/src/components/CodeSnippet.tsx
@@ -34,7 +34,7 @@ interface Props {
   noCopy?: boolean;
   render?: string;
   snippet: string | Array<string | undefined>;
-  wrap?: boolean;
+  wrap?: boolean | 'words';
 }
 
 // keep this "useless" concatenation for the readability reason
diff --git a/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx b/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx
index bf2ca3d5ced..e500fa239cf 100644
--- a/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx
+++ b/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx
@@ -43,7 +43,7 @@ interface Props {
   className?: string;
   htmlAsString: string;
   language?: string;
-  wrap?: boolean;
+  wrap?: boolean | 'words';
 }
 
 const CODE_REGEXP = '<(code|pre)\\b([^>]*?)>(.+?)<\\/\\1>';
@@ -93,7 +93,11 @@ export function CodeSyntaxHighlighter(props: Props) {
 
   return (
     <StyledSpan
-      className={classNames(`hljs ${className ?? ''}`, { 'code-wrap': wrap })}
+      className={classNames(
+        `hljs ${className ?? ''}`,
+        { 'code-wrap': wrap },
+        { 'wrap-words': wrap === 'words' },
+      )}
       // Safe: value is escaped by highlight.js
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: highlightedHtmlAsString }}
@@ -153,6 +157,11 @@ const StyledSpan = styled.span`
   &.code-wrap {
     ${tw`sw-whitespace-pre-wrap`}
     ${tw`sw-break-all`}
+
+    &.wrap-words {
+      word-break: normal;
+      ${tw`sw-break-words`}
+    }
   }
 
   mark {
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
index 20b9a394505..6d2f58112e9 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -158,6 +158,11 @@ exports[`should highlight code content correctly 1`] = `
   word-break: break-all;
 }
 
+.emotion-6.code-wrap.wrap-words {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
 .emotion-6 mark {
   font-weight: 400;
   padding: 0.25rem;
@@ -365,6 +370,11 @@ exports[`should show full size when multiline with no editing 1`] = `
   word-break: break-all;
 }
 
+.emotion-6.code-wrap.wrap-words {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
 .emotion-6 mark {
   font-weight: 400;
   padding: 0.25rem;
@@ -576,6 +586,11 @@ exports[`should show reduced size when single line with no editing 1`] = `
   word-break: break-all;
 }
 
+.emotion-6.code-wrap.wrap-words {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
 .emotion-6 mark {
   font-weight: 400;
   padding: 0.25rem;