feat(design): support component contentProps and css ellipsis for Descriptions

[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

Background

In borderless mode, every Descriptions item content is wrapped with Typography.Text to auto-ellipsis long text and show a Tooltip. On pages with many items (detail panels with dozens of fields), that means each item pays for Typography's overflow measuring and Tooltip, even when the text is short and the measurement is never needed. There was also no way to configure content props for all items at once: contentProps had to be repeated on every item.

Solution

1. Descriptions gains a component-level contentProps, applied to all items and overridable by each item's own contentProps.
2. contentProps.ellipsis accepts a new 'css' value: a lightweight mode that uses pure CSS single-line truncation plus the native title attribute instead of Typography, so no overflow measuring and no Tooltip are created. The title is taken from an explicit contentProps.title first, and falls back to string children; structured children are skipped since the native attribute only accepts plain text.
3. Because copyable and editable rely on Typography's inline action buttons, which would be clipped by the CSS truncation container, an item that enables either of them falls back to the full Typography mode (identical to ellipsis: true), so the buttons and Tooltip keep working.
4. contentProps is now typed as the exported DescriptionsContentProps (Omit<TextProps, 'ellipsis'> & { ellipsis?: Ellipsis | 'css' }).

Usage

<Descriptions
  // Set once for all items, no per-item boilerplate
  contentProps={{ ellipsis: 'css' }}
  items={[
    {
      key: '1',
      label: 'Address',
      children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
    },
    {
      key: '2',
      label: 'Telephone',
      children: '1810000000',
      // Falls back to the full mode: Tooltip + copy button are kept
      contentProps: { copyable: true },
    },
    {
      key: '3',
      label: 'Remark',
      children: 'No ellipsis for this item',
      // Can be overridden per item
      contentProps: { ellipsis: false },
    },
  ]}
/>

Nothing changes for the default ellipsis: true behavior, so existing usages are unaffected.

Before	After
Every borderless item wrapped with Typography.Text, paying for overflow measuring and Tooltip	Items can opt into a lightweight CSS mode with no measuring and no Tooltip; default behavior is unchanged

📝 Changelog

Language	Changelog
🇺🇸 English	- Descriptions   - 🆕 In borderless mode, support component-level contentProps to set content props for all items at once, overridable by each item's contentProps.   - 🆕 In borderless mode, contentProps.ellipsis supports the 'css' lightweight mode: pure CSS single-line truncation + native title (auto-derived from string children), without Typography's overflow measuring and Tooltip. Ideal for descriptions with many items. An item that enables copyable or editable falls back to the full mode, so its inline action buttons and Tooltip keep working.   - ⭐️ New exported type DescriptionsContentProps for contentProps.
🇨🇳 Chinese	- Descriptions   - 🆕 无边框模式下，新增组件级 contentProps，可统一设置所有描述项的内容属性，单项 contentProps 可覆盖。   - 🆕 无边框模式下，contentProps.ellipsis 支持 'css' 轻量模式：纯 CSS 单行截断 + 原生 title（字符串内容自动派生），不产生 Typography 的溢出测量和 Tooltip 开销，适合描述项数量多的场景。单项开启 copyable 或 editable 时回退为完整模式，内联操作按钮和 Tooltip 均可正常使用。   - ⭐️ 新增导出类型 DescriptionsContentProps，用于 contentProps。

☑️ 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 24, 2026 6:27am UTC

[github-actions]

⚡️ Preview Deploying...