gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-16 15:45:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix OpenAPI long tab group description (#2838)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/rare-timers-clap.md
+6
View File
@@ -0,0 +1,6 @@
---
'@gitbook/react-openapi': patch
'gitbook': patch
---
Fix long tab group description
packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+10 -7
View File
@@ -338,7 +338,7 @@
} }
.openapi-response-description.openapi-markdown { .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 { .openapi-response-description.openapi-markdown::-webkit-scrollbar {
@@ -525,11 +525,11 @@
} }
.openapi-disclosure-group-header { .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 { .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 { .openapi-disclosure-group-trigger:disabled {
@@ -545,6 +545,10 @@
@apply invisible; @apply invisible;
} }
.openapi-disclosure-group-trigger[aria-expanded='true'] .openapi-response-description {
@apply whitespace-normal;
}
.openapi-disclosure-group-icon > svg { .openapi-disclosure-group-icon > svg {
@apply size-3 text-tint-subtle transition-all duration-300; @apply size-3 text-tint-subtle transition-all duration-300;
} }
@@ -561,17 +565,16 @@
@apply rotate-90; @apply rotate-90;
} }
.openapi-disclosure-group:hover .openapi-disclosure-group-mediatype, .openapi-disclosure-group:hover .openapi-disclosure-group-mediatype {
.openapi-disclosure-group[aria-expanded='true'] .openapi-disclosure-group-mediatype {
@apply opacity-11 flex; @apply opacity-11 flex;
} }
.openapi-disclosure-group-mediatype { .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 { .openapi-disclosure-group-mediatype > span {
@apply text-xs text-tint-subtle; @apply px-1 bg-tint-6 text-tint-12 rounded-full;
} }
/* Disclosure */ /* Disclosure */
packages/react-openapi/src/OpenAPIResponses.tsx
+8 -5
View File
@@ -4,7 +4,6 @@ import { OpenAPIResponse } from './OpenAPIResponse';
import { OpenAPIClientContext } from './types'; import { OpenAPIClientContext } from './types';
import { InteractiveSection } from './InteractiveSection'; import { InteractiveSection } from './InteractiveSection';
import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup'; import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
import { Markdown } from './Markdown';
/** /**
* Display an interactive response body. * Display an interactive response body.
@@ -40,10 +39,9 @@ export function OpenAPIResponses(props: {
{statusCode} {statusCode}
</span> </span>
{description ? ( {description ? (
<Markdown <div className="openapi-markdown openapi-response-description">
source={description} {htmlToText(description)}
className="openapi-response-description" </div>
/>
) : null} ) : null}
</div> </div>
), ),
@@ -66,3 +64,8 @@ export function OpenAPIResponses(props: {
</InteractiveSection> </InteractiveSection>
); );
} }
function htmlToText(html: string): string {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent?.trim() || '';
}