Fix OpenAPI long tab group description (#2838)

This commit is contained in:
Nolann B.
2025-02-17 12:51:13 +01:00
committed by GitHub
parent 470d10cb47
commit dddb4ecbb8
3 changed files with 24 additions and 12 deletions
+6
View File
@@ -0,0 +1,6 @@
---
'@gitbook/react-openapi': patch
'gitbook': patch
---
Fix long tab group description
@@ -338,7 +338,7 @@
}
.openapi-response-description.openapi-markdown {
@apply prose-sm text-[0.813rem] h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit;
@apply text-left prose-sm text-[0.813rem] h-auto relative leading-[1.125rem] text-tint !font-normal truncate select-text prose-strong:font-semibold prose-strong:text-inherit;
}
.openapi-response-description.openapi-markdown::-webkit-scrollbar {
@@ -525,11 +525,11 @@
}
.openapi-disclosure-group-header {
@apply flex flex-row items-center justify-between gap-3;
@apply flex flex-row items-baseline justify-between gap-3 relative;
}
.openapi-disclosure-group-trigger {
@apply flex items-center relative flex-1 gap-2.5 py-2 truncate -outline-offset-1;
@apply flex items-baseline relative flex-1 gap-2.5 py-2 truncate -outline-offset-1;
}
.openapi-disclosure-group-trigger:disabled {
@@ -545,6 +545,10 @@
@apply invisible;
}
.openapi-disclosure-group-trigger[aria-expanded='true'] .openapi-response-description {
@apply whitespace-normal;
}
.openapi-disclosure-group-icon > svg {
@apply size-3 text-tint-subtle transition-all duration-300;
}
@@ -561,17 +565,16 @@
@apply rotate-90;
}
.openapi-disclosure-group:hover .openapi-disclosure-group-mediatype,
.openapi-disclosure-group[aria-expanded='true'] .openapi-disclosure-group-mediatype {
.openapi-disclosure-group:hover .openapi-disclosure-group-mediatype {
@apply opacity-11 flex;
}
.openapi-disclosure-group-mediatype {
@apply opacity-0 hidden transition-all duration-200 shrink-0;
@apply opacity-0 hidden text-xs transition-all duration-200 shrink-0 absolute right-0 top-2.5;
}
.openapi-disclosure-group-mediatype > span {
@apply text-xs text-tint-subtle;
@apply px-1 bg-tint-6 text-tint-12 rounded-full;
}
/* Disclosure */
@@ -4,7 +4,6 @@ import { OpenAPIResponse } from './OpenAPIResponse';
import { OpenAPIClientContext } from './types';
import { InteractiveSection } from './InteractiveSection';
import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
import { Markdown } from './Markdown';
/**
* Display an interactive response body.
@@ -40,10 +39,9 @@ export function OpenAPIResponses(props: {
{statusCode}
</span>
{description ? (
<Markdown
source={description}
className="openapi-response-description"
/>
<div className="openapi-markdown openapi-response-description">
{htmlToText(description)}
</div>
) : null}
</div>
),
@@ -66,3 +64,8 @@ export function OpenAPIResponses(props: {
</InteractiveSection>
);
}
function htmlToText(html: string): string {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent?.trim() || '';
}