diff --git a/.changeset/strong-needles-burn.md b/.changeset/strong-needles-burn.md new file mode 100644 index 0000000000..ee3448a8ae --- /dev/null +++ b/.changeset/strong-needles-burn.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Add OpenAPI servers selection diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx index 70be2eb457..90b3be5e29 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx @@ -39,6 +39,8 @@ export function getOpenAPIContext(args: { chevronDown: , chevronRight: , plus: , + copy: , + check: , }, renderCodeBlock: (codeProps) => , renderDocument: (documentProps) => ( diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 5a22166d36..a4b9f28f3c 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -478,17 +478,22 @@ } .openapi-path-server { - @apply text-tint hidden md:inline; + @apply text-tint inline; } -.openapi-path .openapi-method { - @apply m-0 mt-0.5 items-center flex px-1; +.openapi-summary .openapi-path .openapi-method { + @apply m-0 items-center flex px-2 py-1 h-6; } .openapi-path-title { - @apply flex-1 relative font-normal text-left font-mono text-tint-strong/10; - @apply py-0.5 px-1 rounded hover:bg-tint transition-colors; + @apply flex-1 relative font-normal text-left overflow-x-auto font-mono text-tint-strong/10; @apply whitespace-nowrap md:whitespace-normal; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.openapi-path-title-row{ + @apply flex flex-row items-center; } .openapi-path-title[data-deprecated="true"] { @@ -592,18 +597,30 @@ body:has(.openapi-select-popover) { } .openapi-select > button { - @apply flex items-center font-normal cursor-pointer *:truncate gap-1.5 text-tint-strong rounded text-xs p-1.5 leading-none border border-tint-subtle bg-tint; + @apply flex items-center font-normal cursor-pointer *:truncate gap-1.5 p-1.5 border border-tint-subtle text-tint-strong rounded leading-none; @apply hover:bg-tint-hover transition-all; } +.openapi-select:not(.openapi-select-unstyled) > button { + @apply border border-tint-subtle bg-tint text-xs; +} + +.openapi-select-unstyled > button { + @apply p-1; +} + .openapi-select > button[data-focused="true"] { - @apply outline-primary -outline-offset-1 outline outline-1; + @apply outline-primary -outline-offset-1 outline; } .openapi-select > button > span.react-aria-SelectValue { @apply shrink truncate flex items-center; } +.openapi-select > button > .react-aria-SelectValue [slot="description"] { + display: none; +} + .openapi-select > button .openapi-markdown { @apply *:leading-none; } @@ -630,6 +647,14 @@ body:has(.openapi-select-popover) { @apply hover:bg-tint-hover hover:theme-gradient:bg-tint-12/1 hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-inset contrast-more:hover:ring-current; } +.openapi-select-item.openapi-select-item-column { + @apply flex flex-col gap-1 justify-start items-start; +} + +.openapi-select-item [slot="description"] { + @apply text-xs text-tint-subtle; +} + .openapi-select button .openapi-markdown, .openapi-select-item .openapi-markdown { @apply text-[0.813rem] *:truncate *:!p-0 *:!m-0 [&>*:not(:first-child)]:hidden; @@ -966,3 +991,20 @@ body:has(.openapi-select-popover) { .openapi-copy-button[data-disabled="true"] { @apply cursor-default; } + +.openapi-path-copy-button { + @apply p-1 flex rounded-md; + @apply hover:bg-tint; +} + +.openapi-path-copy-button-icon { + @apply size-6 flex opacity-0 transition-all; +} + +.openapi-path:hover .openapi-path-copy-button-icon { + @apply opacity-100; +} + +.openapi-path-copy-button-icon svg { + @apply text-tint size-4; +} \ No newline at end of file diff --git a/packages/react-openapi/src/InteractiveSection.tsx b/packages/react-openapi/src/InteractiveSection.tsx index df89c1a622..2af32df0e8 100644 --- a/packages/react-openapi/src/InteractiveSection.tsx +++ b/packages/react-openapi/src/InteractiveSection.tsx @@ -116,7 +116,7 @@ export function InteractiveSection(props: { { + onChange={() => { state.expand(); }} icon={selectIcon} diff --git a/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx b/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx index cff14e3763..94bbf379d1 100644 --- a/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx +++ b/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx @@ -1,5 +1,4 @@ 'use client'; -import clsx from 'classnames'; import type { MediaTypeRenderer } from './OpenAPICodeSample'; import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect'; import { createStateKey } from './utils'; @@ -49,16 +48,7 @@ function MediaTypeSelector(props: { })); return ( - ({ - key: renderer.mediaType, - label: renderer.mediaType, - }))} - icon={selectIcon} - stateKey={stateKey} - placement="bottom start" - > + {items.map((item) => ( {item.label} diff --git a/packages/react-openapi/src/OpenAPICopyButton.tsx b/packages/react-openapi/src/OpenAPICopyButton.tsx index df8d258e94..6cd1c1da1f 100644 --- a/packages/react-openapi/src/OpenAPICopyButton.tsx +++ b/packages/react-openapi/src/OpenAPICopyButton.tsx @@ -1,7 +1,8 @@ 'use client'; import { useState } from 'react'; -import { Button, type ButtonProps, Tooltip, TooltipTrigger } from 'react-aria-components'; +import { Button, type ButtonProps } from 'react-aria-components'; +import { OpenAPITooltip } from './OpenAPITooltip'; import type { OpenAPIClientContext } from './context'; import { t } from './translate'; @@ -36,13 +37,7 @@ export function OpenAPICopyButton( }; return ( - +