feat(design): support fullHeight for Empty and Result

[dengfuping]

📦 Modified package

• @oceanbase/design
• @oceanbase/ui
• @oceanbase/icons
• @oceanbase/charts
• @oceanbase/util
• @oceanbase/codemod
• Other (about what?)

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

N/A

💡 Background and solution

Empty / Result are commonly placed in a fixed-height container (Card body, PageContainer content). Today they do not fill that container, so consumers hand-write layout code on the parent to center them, for example:

<Card
  bodyStyle={{
    height: 'calc(100vh - 96px)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }}
>
  <Empty image={Empty.PRESENTED_IMAGE_COLORED} description="There is no cluster." />
</Card>

This PR adds a fullHeight prop to both components, so the empty state fills the parent height and centers its content by itself:

<Card bodyStyle={{ height: 320 }}>
  <Empty fullHeight image={Empty.PRESENTED_IMAGE_COLORED} title="Create Your Cluster" />
</Card>

Implementation notes:

• fullHeight is applied as a modifier class on the component root, so no extra wrapper element is introduced and className / style from consumers keep working as before.
• Height uses min-height: 100% rather than height: 100%, so a container that is shorter than the content grows instead of clipping it.
• Vertical centering uses display: grid + align-content: center, and the built-in vertical margin of antd Empty is reset. layout="horizontal" is excluded because it already centers content with flex.
• The with-page-container demos of both components now use fullHeight instead of hand-written flex centering.

Usage note: min-height: 100% is resolved against the parent, so the parent needs a definite height (e.g. height: 320 or calc(100vh - 96px)); an intermediate parent with height: auto will not work.

📝 Changelog

Language	Changelog
🇺🇸 English	- Empty   - 🆕 Added fullHeight to fill the parent container height and center the content. - Result   - 🆕 Added fullHeight to fill the parent container height and center the content.
🇨🇳 Chinese	- Empty   - 🆕 新增 fullHeight 属性，用于撑满父容器高度，并将内容整体居中。 - Result   - 🆕 新增 fullHeight 属性，用于撑满父容器高度，并将内容整体居中。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Tests is updated/provided or not needed
• Changelog is provided or not needed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
oceanbase-design	Ready	Preview	Sep 23, 2026 12:52pm UTC

[github-actions]

⚡️ Preview Deploying...