From 950f6c36cfcbc73533e6033fbdb117ec16f88d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Thu, 31 Jul 2025 14:08:57 +0200 Subject: [PATCH] greg/rnd 6997 fix long openapi responses label (#3518) --- biome.json | 3 +- packages/gitbook/package.json | 2 +- .../components/DocumentView/OpenAPI/style.css | 28 +++++++------ packages/gitbook/tailwind.config.ts | 6 +-- .../src/OpenAPIResponseExample.tsx | 2 +- .../src/OpenAPIResponseExampleContent.tsx | 42 ++++++++++--------- .../react-openapi/src/OpenAPIResponses.tsx | 9 +++- 7 files changed, 51 insertions(+), 41 deletions(-) diff --git a/biome.json b/biome.json index ba98d9f60..69349302a 100644 --- a/biome.json +++ b/biome.json @@ -21,7 +21,8 @@ "packages/openapi-parser/src/fixtures/**/*", "packages/emoji-codepoints/index.ts", "packages/icons/src/data/*.json", - "packages/gitbook/worker-configuration.d.ts" + "packages/gitbook/worker-configuration.d.ts", + "**/*.css" ] }, "formatter": { diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index 54f185db6..aa5f138b6 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -100,7 +100,7 @@ "generate": "gitbook-icons ./public/~gitbook/static/icons custom-icons && gitbook-math ./public/~gitbook/static/math && wrangler types", "copy:icons": "gitbook-icons ./public/~gitbook/static/icons", "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math", - "dev": "env-cmd --silent -f ../../.env.local next --turbopack", + "dev": "env-cmd --silent -f ../../.env.local next", "build": "next build", "start": "next start", "build:cloudflare": "opennextjs-cloudflare build", diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 545190888..e1a6335be 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -379,21 +379,23 @@ } .openapi-response-tab-content { - @apply flex items-baseline truncate grow shrink max-w-max basis-[60%] mr-auto; + @apply flex items-baseline truncate grow shrink max-w-max basis-full mr-auto; @apply text-left text-pretty relative leading-tight text-tint select-text; } .openapi-response-description.openapi-markdown { - @apply text-left truncate prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit; + @apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit; } -.openapi-disclosure-group-trigger[aria-expanded="true"] .openapi-response-tab-content { - @apply basis-full; -} - -.openapi-disclosure-group-trigger[aria-expanded="true"] +.openapi-disclosure-group-trigger[aria-expanded="false"] { .openapi-response-description.openapi-markdown { - @apply whitespace-normal; + @apply truncate; + @apply [&>*:not(:first-child)]:hidden *:truncate *:!p-0 *:!m-0; + } + + .openapi-response-tab-content { + @apply basis-[60%] + } } .openapi-response-body { @@ -551,6 +553,10 @@ @apply text-[0.813rem] truncate text-tint font-normal; } +.openapi-response-examples-statuscode-label { + @apply truncate; +} + .openapi-response-examples-panel, .openapi-codesample-panel { @apply flex-1 text-sm relative focus-visible:outline-none; @@ -583,10 +589,6 @@ body:has(.openapi-select-popover) { @apply shrink truncate flex items-center; } -.openapi-select > button > span.react-aria-SelectValue span:not(.openapi-statuscode) { - @apply truncate; -} - .openapi-select > button .openapi-markdown { @apply *:leading-none; } @@ -615,7 +617,7 @@ body:has(.openapi-select-popover) { .openapi-select button .openapi-markdown, .openapi-select-item .openapi-markdown { - @apply text-[0.813rem] *:truncate; + @apply text-[0.813rem] *:truncate *:!p-0 *:!m-0 [&>*:not(:first-child)]:hidden; } .openapi-select-item-selected, diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 22e9e3098..c33e41f51 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -62,9 +62,9 @@ function opacity() { const config: Config = { darkMode: 'class', content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', + './src/pages/**/*.{js,ts,jsx,tsx,mdx,css}', + './src/components/**/*.{js,ts,jsx,tsx,mdx,css}', + './src/app/**/*.{js,ts,jsx,tsx,mdx,css}', ], theme: { extend: { diff --git a/packages/react-openapi/src/OpenAPIResponseExample.tsx b/packages/react-openapi/src/OpenAPIResponseExample.tsx index 5b8973052..79052c63e 100644 --- a/packages/react-openapi/src/OpenAPIResponseExample.tsx +++ b/packages/react-openapi/src/OpenAPIResponseExample.tsx @@ -46,7 +46,7 @@ export function OpenAPIResponseExample(props: { .map(([key, responseObject]) => { const description = resolveDescription(responseObject); const label = description ? ( - + ) : ( getStatusCodeDefaultLabel(key, context) ); diff --git a/packages/react-openapi/src/OpenAPIResponseExampleContent.tsx b/packages/react-openapi/src/OpenAPIResponseExampleContent.tsx index 0b193ed3f..90585af51 100644 --- a/packages/react-openapi/src/OpenAPIResponseExampleContent.tsx +++ b/packages/react-openapi/src/OpenAPIResponseExampleContent.tsx @@ -60,16 +60,7 @@ function OpenAPIResponseExampleHeader(props: { return ( - - {item.statusCode} - - {item.label} + ); } @@ -83,22 +74,33 @@ function OpenAPIResponseExampleHeader(props: { > {items.map((item) => ( - - {item.statusCode} - - {item.label} + ))} ); } +function OpenAPIResponseExampleItem(props: { + item: OpenAPIResponseExampleItem; +}) { + const { item } = props; + return ( + <> + + {item.statusCode} + + {item.label} + + ); +} + function OpenAPIResponseExampleBody(props: { items: OpenAPIResponseExampleItem[]; blockKey?: string; diff --git a/packages/react-openapi/src/OpenAPIResponses.tsx b/packages/react-openapi/src/OpenAPIResponses.tsx index c4565aa78..f4f7813c5 100644 --- a/packages/react-openapi/src/OpenAPIResponses.tsx +++ b/packages/react-openapi/src/OpenAPIResponses.tsx @@ -9,7 +9,12 @@ import { useResponseExamplesState } from './OpenAPIResponseExampleContent'; import { StaticSection } from './StaticSection'; import type { OpenAPIClientContext } from './context'; import { t } from './translate'; -import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel } from './utils'; +import { + createStateKey, + getStatusCodeClassName, + getStatusCodeDefaultLabel, + resolveDescription, +} from './utils'; /** * Display an interactive response body. @@ -58,7 +63,7 @@ export function OpenAPIResponses(props: { })); })(); - const description = response.description; + const description = resolveDescription(response); return { key: statusCode,