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

Support button sizes in the button block (#4394)

Browse Source 
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Zeno Kapitein
2026-07-13 20:03:52 +02:00
committed by GitHub
parent 47ac3e2c81
commit 39156ee9c3
5 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/inline-button-size.md
+5
View File
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Button blocks now respect the `size` option, so you can render small, medium, or large buttons.
bun.lock
+2 -2
View File
@@ -360,7 +360,7 @@
"react-dom": "catalog:",
},
"catalog": {
"@gitbook/api": "0.187.0",
"@gitbook/api": "0.188.0",
"@scalar/api-client-react": "^1.3.46",
"@tsconfig/node20": "^20.1.6",
"@tsconfig/strictest": "^2.0.6",
@@ -756,7 +756,7 @@
"@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q=="],
"@gitbook/api": ["@gitbook/api@0.187.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-ec2TuMm19ycPzFZXUt2D7xSNjbF3vh9Ft3zTgG4Td4UkVuNiB+zpRYmnduqzE0XsiMEwwKLEj/HWMXe+QK4Piw=="],
"@gitbook/api": ["@gitbook/api@0.188.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-kZHpDM3XJdf1oZKhxYk3OZsjNHR4ZJrF47JgUxintnEvsW1yS8UvZlq6+dxgalL1k9wGmz3XXhiNv+p7p6egsA=="],
"@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"],
package.json
+1 -1
View File
@@ -43,7 +43,7 @@
"catalog": {
"@tsconfig/strictest": "^2.0.6",
"@tsconfig/node20": "^20.1.6",
"@gitbook/api": "0.187.0",
"@gitbook/api": "0.188.0",
"@scalar/api-client-react": "^1.3.46",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
packages/gitbook/src/components/DocumentView/InlineActionButton.tsx
+9 -1
View File
@@ -4,6 +4,14 @@ import { useAI, useAIChatController, useAIChatState } from '../AI';
import { useSetSearchState } from '../Search';
import { Button, type ButtonProps, Input } from '../primitives';
// The Input primitive has no `xsmall`; otherwise it shares the button's size scale.
const INPUT_SIZE_MAP: Record<NonNullable<ButtonProps['size']>, 'small' | 'medium' | 'large'> = {
xsmall: 'small',
small: 'small',
medium: 'medium',
large: 'large',
};
export function InlineActionButton(
props: { action: 'ask' | 'search'; query?: string } & { buttonProps: ButtonProps } // TODO: Type this properly: Pick<api.DocumentInlineButton, 'action' | 'query'> & { buttonProps: ButtonProps }
) {
@@ -42,7 +50,7 @@ export function InlineActionButton(
<Input
inline
label={buttonProps.label as string}
sizing="medium"
sizing={INPUT_SIZE_MAP[buttonProps.size ?? 'medium']}
className="inline-flex max-w-full grow"
submitButton={{
label: tString(language, action === 'ask' ? 'send' : 'search'),
packages/gitbook/src/components/DocumentView/InlineButton.tsx
+11 -1
View File
@@ -9,6 +9,16 @@ import type { InlineProps } from './Inline';
import { InlineActionButton } from './InlineActionButton';
import { NotFoundRefHoverCard } from './NotFoundRefHoverCard';
// Editor button sizes render one step smaller here; the editor default (`large`) keeps the previous `medium`.
const BUTTON_SIZE_MAP: Record<
NonNullable<api.DocumentInlineButton['data']['size']>,
ButtonProps['size']
> = {
small: 'xsmall',
medium: 'small',
large: 'medium',
};
export function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
const { inline, context } = props;
@@ -16,7 +26,7 @@ export function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
label: inline.data.label,
variant: inline.data.kind,
icon: inline.data.icon as IconName | undefined,
size: 'medium',
size: BUTTON_SIZE_MAP[inline.data.size ?? 'large'],
};
const ButtonImplementation = () => {