[Feature Branch] chore(merge): Merge master branch of v0.4.3 and v0.4.4

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -29,15 +29,14 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         (acc, item) => {
           const { previewerProps } = item;
           const { debug } = previewerProps;
-          console.log(debug);
 
           if (debug && !showDebug) return acc;
 
           return acc.concat({
             ...item,
             previewerProps: {
               ...previewerProps,
-              expand: expandAll,
+              defaultShowCode: expandAll,
               /**
                * extra marker for the original debug
                */
@@ -66,7 +65,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         </Tooltip>
         <Tooltip
           title={
-            <FormattedMessage id={`app.component.examples.${showDebug ? 'hide' : 'visible'}`} />
+            <FormattedMessage
+              id={showDebug ? 'app.component.examples.hide' : 'app.component.examples.visible'}
+            />
           }
         >
           {showDebug ? (

.dumirc.ts

@@ -172,6 +172,7 @@ export default defineConfig({
           title: '数据展示',
           children: [
             { title: 'Card 卡片', link: '/components/card' },
+            { title: 'Collapse 折叠面板', link: '/components/collapse' },
             { title: 'Descriptions 描述列表', link: '/components/descriptions' },
             { title: 'Empty 空状态', link: '/components/empty' },
             { title: 'List 列表', link: '/components/list' },

docs/design/design-CHANGELOG.md

@@ -8,6 +8,22 @@ group: 基础组件
 
 ---
 
+## 0.4.3
+
+`2024-12-14`
+
+- 📖 修复 demo 展开全部代码不生效的问题。[#888](https://github.com/oceanbase/oceanbase-design/pull/888)
+- 📖 修复部分组件不展示 demo 操作栏的问题。[#888](https://github.com/oceanbase/oceanbase-design/pull/888)
+- ⚡ 设置 `sideEffects`，以支持 tree shaking。[#886](https://github.com/oceanbase/oceanbase-design/pull/886)
+- Collapse [#882](https://github.com/oceanbase/oceanbase-design/pull/882)
+  - 📖 新增 Collapse 的文档和示例。
+  - 💄 将 Collapse 默认展开图标改为实心箭头。
+  - 💄 弱化 Collapse 边框，将边框颜色改为 `#E2E8F3`。
+- Table
+  - 🐞 修复普通 Table 的单元格出现底部边框的问题。[#879](https://github.com/oceanbase/oceanbase-design/pull/879)
+  - 💄 优化 Table 带边框时的底部圆角样式。[#880](https://github.com/oceanbase/oceanbase-design/pull/880)
+  - 💄 优化 Table 空状态在 Popover、Tooltip 下的高度。[#891](https://github.com/oceanbase/oceanbase-design/pull/891)
+
 ## 0.4.2
 
 `2024-11-29`

docs/ui/ui-CHANGELOG.md

@@ -8,6 +8,26 @@ group: 业务组件
 
 ---
 
+## 0.4.4
+
+`2024-12-14`
+
+- ⚡ 设置 `sideEffects`，以支持 tree shaking。[#886](https://github.com/oceanbase/oceanbase-design/pull/886)
+- ⚡ TaskGraph 依赖的 `@antv/g6` 改为动态加载，以提升加载性能。[#884](https://github.com/oceanbase/oceanbase-design/pull/884)
+- ⭐️ 优化 DateRanger 的交互和样式: [#885](https://github.com/oceanbase/oceanbase-design/pull/885) [@wzc520pyfm](https://github.com/wzc520pyfm)
+  - 移除时间 icon
+  - 不再禁用后退时间按钮
+  - 刷新时间按钮在选中自定义时间时隐藏
+  - 时间组件添加 hover 样式、优化
+  - 前进/后退时间按钮添加 tooltip
+  - 时间选择组件不支持清空值
+  - 优化选择框圆角、按钮组边框和快速选项的字体颜色
+  - 支持英文格式日期时间
+  - 优化 DateRanger 的鼠标样式 [#883](https://github.com/oceanbase/oceanbase-design/pull/883)
+- 🆕 Action 组件 `onClick` 函数增加 event 参数。[#874](https://github.com/oceanbase/oceanbase-design/pull/874)
+- 🐞 修复 PageContainer 右上角操作区 Select 多选框没有垂直居中的问题。[#881](https://github.com/oceanbase/oceanbase-design/pull/881)
+- 💄 优化 ContentWithQuestion 问号图标的颜色。[#887](https://github.com/oceanbase/oceanbase-design/pull/887)
+
 ## 0.4.3
 
 `2024-12-02`

packages/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/charts",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "The Chart library for OceanBase",
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts",
   "repository": {
@@ -23,6 +23,11 @@
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": [
+    "**/*.less",
+    "**/*.css",
+    "es/index.js"
+  ],
   "scripts": {
     "build": "NODE_OPTIONS=--max_old_space_size=4096 father build"
   },

packages/charts/src/Pie/index.md

@@ -7,14 +7,11 @@ nav:
 
 ## 代码演示
 
+<!-- prettier-ignore -->
 <code src="./demo/pie.tsx" title="基础饼图"></code>
-
 <code src="./demo/donut.tsx" title="基础环图"></code>
-
 <code src="./demo/donut-floor.tsx" title="环图-浮点数精度" debug></code>
-
 <code src="./demo/half-donut.tsx" title="半圆环图"></code>
-
 <code src="./demo/state-change.tsx" title="useMemo-状态改变" debug></code>
 
 ## API

packages/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",

packages/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -30,6 +30,11 @@
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": [
+    "**/*.less",
+    "**/*.css",
+    "es/index.js"
+  ],
   "scripts": {
     "build": "father build && cp src/style/reset.css dist/"
   },

packages/design/src/_util/genStyle.ts

@@ -74,6 +74,10 @@ export const genLargeStyle = (token: FullToken<any>): CSSObject => {
         fontSize,
       },
     },
+    [`${antCls}-select-multiple ${antCls}-select-selection-wrap`]: {
+      // ref: https://github.com/oceanbase/oceanbase-design/pull/881
+      height: '100%',
+    },
     // Input
     [`${antCls}-input-wrapper`]: {
       fontSize,

packages/design/src/card/demo/grid.tsx

@@ -17,6 +17,7 @@ const App: React.FC = () => (
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
   </Card>
 );
 

packages/design/src/card/index.md

@@ -12,21 +12,15 @@ nav:
 
 ## 代码演示
 
+<!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="典型卡片" description="包含标题、内容、操作区域。"></code>
-
 <code src="./demo/border-less.tsx" title="无边框" description="带有阴影，通常位于灰色背景之上。"></code>
-
 <code src="./demo/no-divider.tsx" title="无分割线" description="去掉卡片头部和内容区的分割线。"></code>
-
 <code src="./demo/inner.tsx" title="嵌套卡片" description="多层级展示，支持多种内部卡片样式。"></code>
-
 <code src="./demo/grid.tsx" title="网格型内嵌卡片"></code>
-
 <code src="./demo/tabs.tsx" title="带页签的卡片" description="页签可设置选项卡后面的标签。"></code>
-
-<code src="./demo/config-provider.tsx" title="ConfigProvider" description="用于调试内部的 ConfigProvider 是否表现正常，需要连续触发 2 次及以上，观察第二个弹窗是否正常展示" debug></code>
-
 <code src="../table/demo/card-table.tsx" title="和 Table 组合使用"></code>
+<code src="./demo/config-provider.tsx" title="ConfigProvider" description="用于调试内部的 ConfigProvider 是否表现正常，需要连续触发 2 次及以上，观察第二个弹窗是否正常展示" debug></code>
 
 ## API
 

packages/design/src/collapse/demo/accordion.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { CollapseProps } from '@oceanbase/design';
+import { Collapse } from '@oceanbase/design';
+
+const text =
+  'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.';
+
+const items: CollapseProps['items'] = [
+  {
+    key: '1',
+    label: 'This is panel header 1',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '2',
+    label: 'This is panel header 2',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '3',
+    label: 'This is panel header 3',
+    children: <p>{text}</p>,
+  },
+];
+
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return <Collapse accordion items={items} onChange={onChange} />;
+};
+
+export default App;

packages/design/src/collapse/demo/basic.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { CollapseProps } from '@oceanbase/design';
+import { Collapse } from '@oceanbase/design';
+import { SettingOutlined } from '@oceanbase/icons';
+
+const text =
+  'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.';
+
+const genExtra = () => (
+  <SettingOutlined
+    onClick={e => {
+      // If you don't want click extra trigger collapse, you can prevent this:
+      e.stopPropagation();
+    }}
+  />
+);
+
+const items: CollapseProps['items'] = [
+  {
+    key: '1',
+    label: 'This is panel header 1',
+    children: <p>{text}</p>,
+    extra: genExtra(),
+  },
+  {
+    key: '2',
+    label: 'This is panel header 2',
+    children: <p>{text}</p>,
+    extra: genExtra(),
+  },
+  {
+    key: '3',
+    label: 'This is panel header 3',
+    children: <p>{text}</p>,
+    extra: genExtra(),
+  },
+];
+
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;
+};
+
+export default App;

packages/design/src/collapse/demo/borderless.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { CollapseProps } from '@oceanbase/design';
+import { Collapse } from '@oceanbase/design';
+
+const text =
+  'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.';
+
+const items: CollapseProps['items'] = [
+  {
+    key: '1',
+    label: 'This is panel header 1',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '2',
+    label: 'This is panel header 2',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '3',
+    label: 'This is panel header 3',
+    children: <p>{text}</p>,
+  },
+];
+
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return <Collapse bordered={false} items={items} onChange={onChange} />;
+};
+
+export default App;

packages/design/src/collapse/demo/custom.tsx

@@ -0,0 +1,51 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import { RightOutlined } from '@oceanbase/icons';
+import type { CollapseProps } from '@oceanbase/design';
+import { Collapse, theme } from '@oceanbase/design';
+
+const text =
+  'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.';
+
+const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = panelStyle => [
+  {
+    key: '1',
+    label: 'This is panel header 1',
+    children: <p>{text}</p>,
+    style: panelStyle,
+  },
+  {
+    key: '2',
+    label: 'This is panel header 2',
+    children: <p>{text}</p>,
+    style: panelStyle,
+  },
+  {
+    key: '3',
+    label: 'This is panel header 3',
+    children: <p>{text}</p>,
+    style: panelStyle,
+  },
+];
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+
+  const panelStyle: React.CSSProperties = {
+    marginBottom: 16,
+    background: token.colorFillAlter,
+    borderRadius: token.borderRadiusLG,
+    border: `1px solid ${token.colorBorderSecondary}`,
+  };
+
+  return (
+    <Collapse
+      bordered={false}
+      expandIcon={({ isActive }) => <RightOutlined rotate={isActive ? 90 : 0} />}
+      style={{ background: token.colorBgContainer }}
+      items={getItems(panelStyle)}
+    />
+  );
+};
+
+export default App;

packages/design/src/collapse/demo/expand-icon-position.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { CollapseProps } from '@oceanbase/design';
+import { Collapse } from '@oceanbase/design';
+
+const text =
+  'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.';
+
+const items: CollapseProps['items'] = [
+  {
+    key: '1',
+    label: 'This is panel header 1',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '2',
+    label: 'This is panel header 2',
+    children: <p>{text}</p>,
+  },
+  {
+    key: '3',
+    label: 'This is panel header 3',
+    children: <p>{text}</p>,
+  },
+];
+
+const App: React.FC = () => {
+  const onChange = (key: string | string[]) => {
+    console.log(key);
+  };
+
+  return <Collapse expandIconPosition="end" items={items} onChange={onChange} />;
+};
+
+export default App;