Merge branch 'master' of github.com:oceanbase/oceanbase-design into l…

…inhf/new-ranger

.dumirc.ts

@@ -1,9 +1,11 @@
+import fs from 'fs';
 import path from 'path';
 import { defineConfig } from 'dumi';
 import AntdAliasWebpackPlugin from './antd-alias-webpack-plugin';
 
 export default defineConfig({
   mfsu: {
+    // to make AntdAliasWebpackPlugin work
     exclude: ['antd-token-previewer'],
   },
   // 默认重定向到子包的 src 文件夹
@@ -19,7 +21,12 @@ export default defineConfig({
   },
   extraBabelPresets: [require.resolve('@emotion/babel-preset-css-prop')],
   chainWebpack: config => {
-    config.plugin('antd-alias').use(AntdAliasWebpackPlugin);
+    const esPath = path.join(__dirname, 'packages/design/es');
+    const libPath = path.join(__dirname, 'packages/design/es');
+    // AntdAliasWebpackPlugin depends es and lib of @oceanbase/design
+    if (fs.existsSync(esPath) && fs.existsSync(libPath)) {
+      config.plugin('antd-alias').use(AntdAliasWebpackPlugin);
+    }
     return config;
   },
   outputPath: 'site',

.github/PULL_REQUEST_TEMPLATE.md

@@ -47,6 +47,10 @@ Thank you!
 1. Describe the problem and the scenario.
 2. GIF or snapshot should be provided if includes UI/interactive modification.
 3. How to fix the problem, and list the final API implementation and usage sample if that is a new feature.
+
+| Before | After |
+| :--- | :--- |
+| [Image] | [Image] |
 -->
 
 ### 📝 Changelog

.github/dependabot.yml

@@ -7,12 +7,20 @@ version: 2
 updates:
   - package-ecosystem: "npm" # See documentation for possible values
     versioning-strategy: "increase"
+    target-branch: "feature"
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+    commit-message:
+      prefix: "[Feature Branch] "
+    labels:
+      - "dependencies"
+      - "Feature Branch"
     ignore:
       - dependency-name: "@antv/g6"
       # execa latest 7.x works only in ES module
       - dependency-name: "execa"
-      # execa latest 5.x works only in ES module
+      # chalk latest 5.x works only in ES module
       - dependency-name: "chalk"
+      # ahooks latest 3.x need manual upgrade
+      - dependency-name: "ahooks"

docs/charts/charts-CHANGELOG.md

@@ -8,6 +8,38 @@ group: 可视化图表
 
 ---
 
+## 0.2.22
+
+`2024-01-18`
+
+- 🆕 Stat 新增 padding 属性，用于设置图表的内间距。[#412](https://github.com/oceanbase/oceanbase-design/pull/412)
+- 🐞 修复 Pie 环图统计组件标题和内容 `formatter` 不生效的问题。[#413](https://github.com/oceanbase/oceanbase-design/pull/413)
+
+## 0.2.21
+
+`2024-01-12`
+
+- 🐞 修复 Pie 在环图模式下计算总和时浮点数精度不正确的问题。[#406](https://github.com/oceanbase/oceanbase-design/pull/406)
+
+## 0.2.20
+
+`2023-12-28`
+
+- Stat
+  - 🆕 新增 `chartConfig` 属性，用于配置图表。[#384](https://github.com/oceanbase/oceanbase-design/pull/384)
+  - 💄 优化样式，包括限制 `title` 字体最小为 12px、限制 `value` 字体最大为 40px 以及优化内容居中对齐样式。[#385](https://github.com/oceanbase/oceanbase-design/pull/385)
+  - 💄 容器高度小于 `72px` 时，图表的高度比例从 `0.5` 减小为 `0.25`。[#387](https://github.com/oceanbase/oceanbase-design/pull/387)
+- Liquid
+  - 🆕 新增 `containerStyle`、`percentStyle` 和 `titleStyle` 属性，分别用于设置容器样式、百分比样式和标题样式。[#374](https://github.com/oceanbase/oceanbase-design/pull/374)
+  - 🐞 修复未设置图表高度时水波无法渲染的问题。[#383](https://github.com/oceanbase/oceanbase-design/pull/383)
+- 💄 Column 适配 X 时序轴，自动对数据进行排序，并关闭自动美化避免两侧留白。[#382](https://github.com/oceanbase/oceanbase-design/pull/382)
+
+## 0.2.19
+
+`2023-12-14`
+
+- 🐞 修复折线图、面积图和双轴图的 tooltip 无法关闭的问题。[#351](https://github.com/oceanbase/oceanbase-design/pull/351) [@Qiuhang817385](https://github.com/Qiuhang817385)
+
 ## 0.2.17
 
 `2023-11-30`

docs/design/design-CHANGELOG.md

@@ -8,6 +8,63 @@ group: 基础组件
 
 ---
 
+## 0.2.37
+
+`2024-01-30`
+
+- 🆕 新增 injectStaticFunction 属性，用于配置 message、notification 和 Modal 静态方法是否可以消费全局配置，默认开启。[#446](https://github.com/oceanbase/oceanbase-design/pull/446)
+- 🐞 修复 Typography 的样式优先级，保证字体和行高默认继承父元素，便于和其他组件组合使用。[#428](https://github.com/oceanbase/oceanbase-design/pull/428) [@wdyea-ya](https://github.com/wdyea-ya)
+- 🐞 修复 Table 选中行和 `hover` 行的背景色不一致的问题。[#455](https://github.com/oceanbase/oceanbase-design/pull/455)
+
+## 0.2.36
+
+`2024-01-19`
+
+- 💄 ConfigProvider 内嵌的 App 组件不再创建 DOM 节点，避免增加一层 DOM 结构影响子元素的样式表现。[#431](https://github.com/oceanbase/oceanbase-design/pull/431)
+
+## 0.2.35
+
+`2024-01-18`
+
+- 🆕 ConfigProvider 新增 table.selectionColumnWidth 属性，用于配置表格的展开列宽度。[#421](https://github.com/oceanbase/oceanbase-design/pull/421)
+- Table
+  - 🐞 修复 Table 可展开时底部出现重复边框的问题。[#420](https://github.com/oceanbase/oceanbase-design/pull/420)
+  - 💄 优化 Table 在无间距卡片内的展示样式，包括第一列和卡片标题对齐、最后一列和卡片操作区对齐、分页器左右增加间距。[#422](https://github.com/oceanbase/oceanbase-design/pull/422)
+  - 💄 减小 Table 单元格的纵向内间距，以对齐设计规范。[#425](https://github.com/oceanbase/oceanbase-design/pull/425)
+- 💄 Modal 去掉最大高度限制，高度超出时内容滚动改由上层控制。[#411](https://github.com/oceanbase/oceanbase-design/pull/411)
+
+## 0.2.34
+
+`2024-01-12`
+
+- Drawer
+  - 🆕 新增 `footerExtra` 属性，用于设置抽屉底部的额外内容，仅默认页脚生效。[#408](https://github.com/oceanbase/oceanbase-design/pull/408)
+  - 📢 调整页脚的 DOM 结构，并将原先的 `.ant-drawer-footer-content` 类名改为 `.ant-drawer-footer-container`。[#408](https://github.com/oceanbase/oceanbase-design/pull/408)
+- 🐞 修复 Tooltip `title` 为空时仍然展示的问题。[#405](https://github.com/oceanbase/oceanbase-design/pull/405) [@linhf123](https://github.com/linhf123)
+
+## 0.2.33
+
+`2023-12-28`
+
+- 🐞 ConfigProvider `hideOnSinglePage` 默认值改为 `false`，避免统一去掉分页器带来的问题。[#388](https://github.com/oceanbase/oceanbase-design/pull/388)
+- 🐞 修复 Table 只有一页数据且存在批量操作或 `pageSize` 切换时分页器被隐藏的问题。[#389](https://github.com/oceanbase/oceanbase-design/pull/389)
+- 🐞 修复 List 只有一页数据且存在 `pageSize` 切换时分页器被隐藏的问题。[#390](https://github.com/oceanbase/oceanbase-design/pull/390)
+- 💄 更新 Design Token，新增 `fontHeight`、`fontHeightLG` 和 `fontHeightSM` less 变量。[#381](https://github.com/oceanbase/oceanbase-design/pull/381)
+
+## 0.2.32
+
+`2023-12-14`
+
+- 🔥 Space 和 Grid 组件的间距样式兼容 Chrome 84 以下的浏览器。[#344](https://github.com/oceanbase/oceanbase-design/pull/344) [@wdyea-ya](https://github.com/wdyea-ya)
+- 🌈 更新默认主题的功能色板，包括 Design Token 和 less 变量。[#354](https://github.com/oceanbase/oceanbase-design/pull/354)
+- Tag
+  - 🆕 Tag 新增 `ellipsis` 属性，用于配置内容溢出时的省略和 Tooltip 提示。[#361](https://github.com/oceanbase/oceanbase-design/pull/361)
+  - 🐞 修复 Tag 字体大小不正确的问题。[#360](https://github.com/oceanbase/oceanbase-design/pull/360)
+- 🐞 修复 Select 在多选模式和 `large` & `small` 尺寸下，选中项缺少边框样式的问题。[#332](https://github.com/oceanbase/oceanbase-design/pull/332) [@wdyea-ya](https://github.com/wdyea-ya)
+- 💄 优化 Button 样式，包括更新主按钮的渐变色，并去除 `box-shadow` 阴影。[#352](https://github.com/oceanbase/oceanbase-design/pull/352)
+- TypeScript
+  - 🤖 导出 SpaceProps、SpaceSize、ColProps、ColSize 和 RowProps 的类型定义。[#344](https://github.com/oceanbase/oceanbase-design/pull/344)
+
 ## 0.2.31
 
 `2023-12-08`

docs/ui/ui-CHANGELOG.md

@@ -8,6 +8,54 @@ group: 业务组件
 
 ---
 
+## 0.2.38
+
+`2024-01-30`
+
+- PageContainer
+  - 🐞 修复 PageContainer 页头和页脚操作区外的组件尺寸也可能被改为 large 的问题。[#443](https://github.com/oceanbase/oceanbase-design/pull/443)
+  - 💄 修复 PageContainer 页头和页脚操作区样式适配 Space.Compact 组件。[#454](https://github.com/oceanbase/oceanbase-design/pull/454)
+- 🐞 修复 FooterToolbar 子元素外的组件尺寸被改为 large 的问题。[#447](https://github.com/oceanbase/oceanbase-design/pull/447)
+
+## 0.2.37
+
+`2024-01-19`
+
+- PageContainer
+  - 💄 PageContainer 页头和页脚操作区的组件尺寸默认为 `large`、字体大小为 `middle`。[#432](https://github.com/oceanbase/oceanbase-design/pull/432)
+  - 💄 优化 PageContainer 和 Tabs 组合使用时的间距，以对齐设计规范。[#434](https://github.com/oceanbase/oceanbase-design/pull/434)
+- 💄 FooterToolbar 子元素的组件尺寸默认为 `large`、字体大小默认为 `middle`。[#433](https://github.com/oceanbase/oceanbase-design/pull/433)
+
+## 0.2.36
+
+`2024-01-18`
+
+- 🐞 修复 Password 组件快速输入时丢失字符和焦点跳跃的问题。[#424](https://github.com/oceanbase/oceanbase-design/pull/424) [@Vanleehao](https://github.com/Vanleehao)
+- 🐞 修复 Highlight 国际化不生效的问题。[#419](https://github.com/oceanbase/oceanbase-design/pull/419) [@linhf123](https://github.com/linhf123)
+- 💄 优化 PageContainer 右上角和页脚操作区中的 Input 样式，保证宽高和字体大小符合设计规范。[#426](https://github.com/oceanbase/oceanbase-design/pull/426)
+
+## 0.2.35
+
+`2024-01-12`
+
+- 🌐 Highlight 支持国际化，之前为固定的英文文案。[#409](https://github.com/oceanbase/oceanbase-design/pull/409) [@linhf123](https://github.com/linhf123)
+
+## 0.2.34
+
+`2023-12-28`
+
+- IconFont
+  - 🐞 修复 IconFont 会请求不必要 JS 资源的问题。[#375](https://github.com/oceanbase/oceanbase-design/pull/375)
+  - 📢 将 IconFont 组件标记为即将废弃，不推荐使用。[#375](https://github.com/oceanbase/oceanbase-design/pull/375)
+- 💄 优化 TagSelect 的 `disabled` 和 `hover` 样式，并将固定样式改造为 Design Token。[#373](https://github.com/oceanbase/oceanbase-design/pull/373)
+
+## 0.2.33
+
+`2023-12-14`
+
+- 📝 新增 BasicLayout `location` 属性的用法说明，即用于实现选中菜单和当前路由之间的联动。[#363](https://github.com/oceanbase/oceanbase-design/pull/363)
+- 💄 BasicLayout 支持根据当前路由自动设置展开菜单项。[#364](https://github.com/oceanbase/oceanbase-design/pull/364)
+
 ## 0.2.32
 
 `2023-12-08`

package.json

@@ -41,7 +41,7 @@
     ]
   },
   "devDependencies": {
-    "@ant-design/colors": "^7.0.0",
+    "@ant-design/colors": "^7.0.2",
     "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/icons": "^5.2.6",
     "@babel/cli": "^7.23.0",
@@ -50,35 +50,35 @@
     "@ctrl/tinycolor": "^4.0.2",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@qixian.cs/github-contributors-list": "^1.1.0",
     "@rc-component/trigger": "^1.18.2",
     "@stackblitz/sdk": "^1.9.0",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.8.6",
-    "@types/react": "^18.2.43",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.47",
     "@umijs/fabric": "^4.0.1",
-    "@umijs/test": "^4.0.88",
+    "@umijs/test": "^4.1.0",
     "@vercel/analytics": "^1.1.1",
     "antd": "^5.14.2",
     "antd-style": "3.5.2",
     "antd-token-previewer": "^2.0.5",
     "babel-jest": "^29.7.0",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
-    "dumi": "^2.2.14",
-    "eslint-plugin-jest": "^27.4.2",
+    "dumi": "^2.2.16",
+    "eslint-plugin-jest": "^27.6.1",
     "execa": "^5.1.1",
-    "father": "^4.3.7",
+    "father": "^4.3.8",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.1.0",
     "glob": "^10.3.10",
@@ -98,10 +98,10 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "mockdate": "^3.0.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.4",
     "prismjs": "^1.29.0",
     "rc-checkbox": "^3.1.0",
-    "rc-drawer": "^6.5.2",
+    "rc-drawer": "^7.0.0",
     "rc-footer": "^0.6.8",
     "rc-resize-observer": "^1.4.0",
     "rc-segmented": "^2.2.2",
@@ -119,8 +119,8 @@
     "sylvanas": "^0.6.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.2.2",
-    "vanilla-jsoneditor": "^0.19.0",
+    "typescript": "^5.3.3",
+    "vanilla-jsoneditor": "^0.21.2",
     "web-vitals": "^3.5.0",
     "yorkie": "^2.0.0"
   }

packages/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/charts",
-  "version": "0.2.18",
+  "version": "0.2.22",
   "description": "The Chart library for OceanBase",
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts",
   "repository": {
@@ -29,7 +29,7 @@
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
     "@oceanbase/util": "workspace:^",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "rc-util": "^5.38.1",
     "tinycolor2": "^1.6.0",

packages/charts/src/Column/index.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import type { ColumnConfig as AntColumnConfig } from '@ant-design/charts';
 import { Column as AntColumn } from '@ant-design/charts';
+import { sortByMoment } from '@oceanbase/util';
 import { uniq } from 'lodash';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
@@ -12,7 +13,19 @@ export interface ColumnConfig extends AntColumnConfig {
 
 const Column = forwardRef<unknown, ColumnConfig>(
   (
-    { data, isStack, isGroup, isRange, seriesField, label, xAxis, legend, theme, ...restConfig },
+    {
+      data,
+      xField,
+      isStack,
+      isGroup,
+      isRange,
+      seriesField,
+      label,
+      xAxis,
+      legend,
+      theme,
+      ...restConfig
+    },
     ref
   ) => {
     const themeConfig = useTheme(theme);
@@ -24,7 +37,13 @@ const Column = forwardRef<unknown, ColumnConfig>(
     // 堆叠柱状图中最后一段对应的值
     const lastStackValue = stackValues?.[0];
     const newConfig: ColumnConfig = {
-      data,
+      // xAxis.type 为时间轴时，需要对 data 进行排序
+      data:
+        // issue: https://github.com/antvis/G2/issues/3194
+        xAxis && (xAxis?.type === 'time' || xAxis?.type === 'timeCat')
+          ? data?.sort((a, b) => sortByMoment(a, b, xField || ''))
+          : data,
+      xField,
       isStack,
       isGroup,
       isRange,
@@ -52,15 +71,20 @@ const Column = forwardRef<unknown, ColumnConfig>(
             isRange
               ? 2
               : !isStack ||
-                (isStack &&
-                  seriesField &&
-                  // 堆叠柱状图仅最后一段末端展示 2px 圆角
-                  datum[seriesField] === lastStackValue)
-              ? [2, 2, 0, 0]
-              : [],
+                  (isStack &&
+                    seriesField &&
+                    // 堆叠柱状图仅最后一段末端展示 2px 圆角
+                    datum[seriesField] === lastStackValue)
+                ? [2, 2, 0, 0]
+                : [],
         };
       },
       xAxis: xAxis !== false && {
+        // type 为 time 时需要关闭自动美化，否则 X 轴两侧会留白
+        // issue: https://github.com/antvis/G2Plot/issues/1951
+        nice: xAxis?.type === 'time' ? false : undefined,
+        // 点数 >= 14 时，x 方向展示 7 个刻度线和网格
+        tickCount: data?.length >= 14 ? 7 : undefined,
         ...xAxis,
         // x 方向增加虚线网格
         grid:
@@ -83,10 +107,6 @@ const Column = forwardRef<unknown, ColumnConfig>(
         position: 'bottom-left',
         offsetX: 30,
         ...legend,
-        marker: {
-          symbol: 'circle',
-          ...legend?.marker,
-        },
       },
       theme: themeConfig.theme,
       ...restConfig,