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

Add vertical align property to column block (#3596)

Browse Source 
Co-authored-by: Samy Pessé <samypesse@gmail.com>
This commit is contained in:
Brett Jephson
2025-08-27 13:58:26 +01:00
committed by GitHub
parent 2e0d706d43
commit 9201e2cf52
4 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/proud-lemons-whisper.md
+5
View File
@@ -0,0 +1,5 @@
---
"gitbook": patch
---
Adds vertical align to column block
bun.lock
+2 -2
View File
@@ -293,7 +293,7 @@
"react-dom": "^19.0.0",
},
"catalog": {
"@gitbook/api": "^0.136.0",
"@gitbook/api": "^0.137.0",
"bidc": "^0.0.2",
},
"packages": {
@@ -659,7 +659,7 @@
"@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
"@gitbook/api": ["@gitbook/api@0.136.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-IxNqmXE6yUEUq0IzbenN8S/PcMfgxr4+akY8xh6V5ShI/+U37ixujJHZp2zJq6NdZOdBQoR3UQmhPnvtWrkF7g=="],
"@gitbook/api": ["@gitbook/api@0.137.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-3pTNbHI4kJT7ikqSdSLa2UCB0dOPOTzOUHcsCTLrk+rJVjTAFAJmTEW/Ax2prnwZ75ran2hz9/FhxUAGhp/8Mg=="],
"@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"],
package.json
+1 -1
View File
@@ -34,7 +34,7 @@
"workspaces": {
"packages": ["packages/*"],
"catalog": {
"@gitbook/api": "^0.136.0",
"@gitbook/api": "^0.137.0",
"bidc": "^0.0.2"
}
},
packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
+22 -8
View File
@@ -1,5 +1,5 @@
import { type ClassValue, tcls } from '@/lib/tailwind';
import type { DocumentBlockColumns, Length } from '@gitbook/api';
import { tcls } from '@/lib/tailwind';
import { type DocumentBlockColumns, type Length, VerticalAlignment } from '@gitbook/api';
import type { BlockProps } from '../Block';
import { Blocks } from '../Blocks';
@@ -8,10 +8,12 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
return (
<div className={tcls('flex flex-col gap-x-8 md:flex-row', style)}>
{block.nodes.map((columnBlock) => {
const width = columnBlock.data.width;
const { className, style } = transformLengthToCSS(width);
return (
<Column key={columnBlock.key} className={className} style={style}>
<Column
key={columnBlock.key}
width={columnBlock.data.width}
verticalAlignment={columnBlock.data.verticalAlignment}
>
<Blocks
key={columnBlock.key}
nodes={columnBlock.nodes}
@@ -29,11 +31,23 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
export function Column(props: {
children?: React.ReactNode;
className?: ClassValue;
style?: React.CSSProperties;
width?: Length;
verticalAlignment?: VerticalAlignment;
}) {
const { width, verticalAlignment } = props;
const { className, style } = transformLengthToCSS(width);
return (
<div className={tcls('flex-col', props.className)} style={props.style}>
<div
className={tcls(
'flex flex-col',
(verticalAlignment === VerticalAlignment.Top || !verticalAlignment) &&
'justify-start',
verticalAlignment === VerticalAlignment.Middle && 'justify-center',
verticalAlignment === VerticalAlignment.Bottom && 'justify-end',
className
)}
style={style}
>
{props.children}
</div>
);