diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
index ca71b9162..ca8969939 100644
--- a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
+++ b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
@@ -3,6 +3,7 @@ import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
const Demo = () => {
const { token } = theme.useToken();
+ const tokenList = [token.colorTextTertiary];
return (
(
diff --git a/packages/codemod/transforms/__tests__/token.test.ts b/packages/codemod/transforms/__tests__/token.test.ts
index c4e86e78b..831609e0f 100644
--- a/packages/codemod/transforms/__tests__/token.test.ts
+++ b/packages/codemod/transforms/__tests__/token.test.ts
@@ -5,7 +5,7 @@ describe('token', () => {
expect(TOKEN_MAP_KEYS.every(key => isLower(key))).toEqual(true);
});
- it('TOKEN_MAP_KEYS should not include blank space', async () => {
- expect(TOKEN_MAP_KEYS.every(key => !key.includes(' '))).toEqual(true);
+ it('TOKEN_MAP_KEYS should not include `, `', async () => {
+ expect(TOKEN_MAP_KEYS.every(key => !key.includes(', '))).toEqual(true);
});
});
diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
index b38ed3b27..9d423569c 100644
--- a/packages/codemod/transforms/utils/token.js
+++ b/packages/codemod/transforms/utils/token.js
@@ -27,8 +27,10 @@ const TOKEN_MAP = {
'#f0f2f5': 'colorBgLayout',
'#fafafa': 'colorBgLayout',
'#f7f8fc': 'colorBgLayout',
+ 'rgb(250,250,250)': 'colorBgLayout',
'#ffffff': 'colorBgContainer',
'#fff': 'colorBgContainer',
+ 'rgb(255 255 255 / 100%)': 'colorBgContainer',
'rgba(0,0,0,0.85)': 'colorText',
'rgba(0,0,0,0.65)': 'colorTextSecondary',
'rgba(0,0,0,0.45)': 'colorTextTertiary',
@@ -39,6 +41,10 @@ const TOKEN_MAP = {
'rgba(0,0,0,.45)': 'colorTextTertiary',
'rgba(0,0,0,.25)': 'colorTextQuaternary',
'rgba(0,0,0,0.2)': 'colorFillQuaternary',
+ 'rgb(0 0 0 / 85%)': 'colorText',
+ 'rgb(0 0 0 / 65%)': 'colorTextSecondary',
+ 'rgb(0 0 0 / 45%)': 'colorTextTertiary',
+ 'rgb(0 0 0 / 25%)': 'colorTextQuaternary',
'#00000073': 'colorTextDescription',
'#f5f5f5': 'colorFillQuaternary',
'rgba(0,0,0,0.02)': 'colorBgLayout',
diff --git a/packages/codemod/vitest.config.ts b/packages/codemod/vitest.config.ts
new file mode 100644
index 000000000..132a51652
--- /dev/null
+++ b/packages/codemod/vitest.config.ts
@@ -0,0 +1,4 @@
+import { defineProject, mergeConfig } from 'vitest/config';
+import configShared from '../../vitest.config';
+
+export default mergeConfig(configShared, defineProject({}));
diff --git a/packages/design/package.json b/packages/design/package.json
index 3de8f941e..715a367bf 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -35,11 +35,11 @@
"postbuild": "cp src/style/reset.css dist/"
},
"dependencies": {
- "@ant-design/cssinjs": "^1.17.2",
+ "@ant-design/cssinjs": "^1.18.4",
"@oceanbase/icons": "workspace:^",
"@oceanbase/util": "workspace:^",
"ahooks": "^2.10.14",
- "antd": "^5.13.2",
+ "antd": "^5.15.3",
"classnames": "^2.5.1",
"lodash": "^4.17.21",
"lottie-web": "^5.12.2",
@@ -48,11 +48,11 @@
"react-sticky-mouse-tooltip": "^0.0.1"
},
"devDependencies": {
- "@babel/cli": "^7.23.0",
- "@babel/preset-env": "^7.23.6",
+ "@babel/cli": "^7.23.9",
+ "@babel/preset-env": "^7.23.9",
"antd-token-previewer": "^2.0.5",
- "rc-select": "^14.10.0",
- "rc-table": "^7.35.2"
+ "rc-select": "^14.11.0",
+ "rc-table": "^7.40.0"
},
"peerDependencies": {
"react": ">=16.9.0",
diff --git a/packages/design/src/_util/genComponentStyleHook.ts b/packages/design/src/_util/genComponentStyleHook.ts
index c629522ff..f32a1c847 100644
--- a/packages/design/src/_util/genComponentStyleHook.ts
+++ b/packages/design/src/_util/genComponentStyleHook.ts
@@ -22,7 +22,14 @@ export function genComponentStyleHook(
token => {
return [styleFn(token)];
},
- getDefaultToken
+ getDefaultToken,
+ {
+ resetStyle: false,
+ // antd style order is -999 and -998
+ // ref: https://github.com/ant-design/ant-design/blob/master/components/theme/util/genComponentStyleHook.tsx#L175
+ // obui style order should behind to cover it
+ order: -900,
+ }
);
const [wrapSSR] = useStyle(prefixCls);
// use hashId from useToken, as hashId is '' when hashed is false
diff --git a/packages/design/src/badge/__tests__/__snapshots__/index.test.tsx.snap b/packages/design/src/badge/__tests__/__snapshots__/index.test.tsx.snap
index 27be679dd..12702de4f 100644
--- a/packages/design/src/badge/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/design/src/badge/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Badge status custom icon 1`] = `
+exports[`Badge > status custom icon 1`] = `
`;
-exports[`Badge status dot 1`] = `
+exports[`Badge > status dot 1`] = `
@@ -51,7 +51,7 @@ exports[`Badge status dot 1`] = `
`;
-exports[`Badge status icon 1`] = `
+exports[`Badge > status icon 1`] = `
(
const { wrapSSR, hashId } = useStyle(prefixCls);
const iconMap = {
- default: ,
+ default: ,
processing: (
(
),
success: ,
error: ,
- warning: ,
+ warning: ,
};
return wrapSSR(
diff --git a/packages/design/src/badge/style/index.ts b/packages/design/src/badge/style/index.ts
index 1a6bf02f3..116c95fc2 100644
--- a/packages/design/src/badge/style/index.ts
+++ b/packages/design/src/badge/style/index.ts
@@ -6,6 +6,8 @@ export type BadgeToken = FullToken<'Badge'>;
export const genBadgeStyle: GenerateStyle = (token: BadgeToken): CSSObject => {
const { componentCls } = token;
+ // dot size is larger than antd
+ const dotSize = token.fontSizeLG / 2;
return {
[`${componentCls}`]: {
// inherit color from parent instead of fixed colorText
@@ -14,12 +16,15 @@ export const genBadgeStyle: GenerateStyle = (token: BadgeToken): CSS
[`${componentCls}${componentCls}-status`]: {
// dot style
[`${componentCls}-status-dot`]: {
- width: 8,
- height: 8,
+ width: dotSize,
+ height: dotSize,
+ [`&${componentCls}-status-default`]: {
+ backgroundColor: token.colorFill,
+ },
},
// icon style
[`${componentCls}-status-icon`]: {
- fontSize: 12,
+ fontSize: token.fontSizeSM,
// remove dot style
backgroundColor: 'transparent',
['&::after']: {
@@ -32,7 +37,7 @@ export const genBadgeStyle: GenerateStyle = (token: BadgeToken): CSS
color: token.colorPrimary,
},
[`&${componentCls}-status-default`]: {
- color: token.colorTextPlaceholder,
+ color: token.colorFill,
},
[`&${componentCls}-status-error`]: {
color: token.colorError,
diff --git a/packages/design/src/config-provider/DefaultRenderEmpty.tsx b/packages/design/src/config-provider/DefaultRenderEmpty.tsx
new file mode 100644
index 000000000..03b632d63
--- /dev/null
+++ b/packages/design/src/config-provider/DefaultRenderEmpty.tsx
@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import type { ConfigConsumerProps } from '.';
+import { ConfigContext } from '.';
+import Empty from '../empty';
+
+interface EmptyProps {
+ componentName?: string;
+}
+
+/* refer to: https://github.com/ant-design/ant-design/blob/master/components/config-provider/defaultRenderEmpty.tsx */
+const DefaultRenderEmpty: React.FC = props => {
+ const { componentName } = props;
+ const { getPrefixCls } = useContext(ConfigContext);
+ const prefix = getPrefixCls('empty');
+ switch (componentName) {
+ case 'Select':
+ case 'TreeSelect':
+ case 'Cascader':
+ case 'Transfer':
+ case 'Mentions':
+ return ;
+ default:
+ return ;
+ }
+};
+
+export type RenderEmptyHandler = (componentName?: string) => React.ReactNode;
+
+export default DefaultRenderEmpty;
diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap
index 8f03ef83d..36a93018b 100644
--- a/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap
+++ b/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`ConfigProvider spin spin.indicator should work 1`] = `
+exports[`ConfigProvider spin > spin.indicator should work 1`] = `
`;
-exports[`ConfigProvider spin spin.indicator should work in nested ConfigProvider 1`] = `
+exports[`ConfigProvider spin > spin.indicator should work in nested ConfigProvider 1`] = `
`;
+exports[`ConfigProvider styleProviderProps > ConfigProvider styleProviderProps.hashPriority 1`] = `
`;
diff --git a/packages/design/src/config-provider/__tests__/navigate.test.tsx b/packages/design/src/config-provider/__tests__/navigate.test.tsx
index dc0d43e40..56fce9415 100644
--- a/packages/design/src/config-provider/__tests__/navigate.test.tsx
+++ b/packages/design/src/config-provider/__tests__/navigate.test.tsx
@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { BrowserRouter, useNavigate } from 'react-router-dom';
import { render } from '@testing-library/react';
-import ConfigProvider from '..';
+import { ConfigProvider } from '@oceanbase/design';
describe('ConfigProvider navigate', () => {
it('navigate should work', () => {
diff --git a/packages/design/src/config-provider/index.md b/packages/design/src/config-provider/index.md
index f63b0f209..074c5c5ed 100644
--- a/packages/design/src/config-provider/index.md
+++ b/packages/design/src/config-provider/index.md
@@ -6,6 +6,7 @@ nav:
---
- 🔥 完全继承 antd [ConfigProvider](https://ant.design/components/config-provider-cn) 的能力和 API，可无缝切换。
+- 🌈 定制全局主题和空状态，以符合 OceanBase Design 设计规范。
- 🆕 默认内嵌 [App 包裹组件](https://ant.design/components/app-cn)，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置。
- 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
- 🆕 新增 `injectStaticFunction` 属性，用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置，默认开启。
@@ -21,8 +22,9 @@ nav:
+
-### 统一样式前缀
+### 样式前缀
- 通过 `prefixCls` 和 `iconPrefixCls` 可设置 antd 组件和图标的统一样式前缀。
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
index cad4bfa6b..c1c3738c9 100644
--- a/packages/design/src/config-provider/index.tsx
+++ b/packages/design/src/config-provider/index.tsx
@@ -16,6 +16,7 @@ import StaticFunction from '../static-function';
import themeConfig from '../theme';
import defaultTheme from '../theme/default';
import darkTheme from '../theme/dark';
+import DefaultRenderEmpty from './DefaultRenderEmpty';
import type { NavigateFunction } from './navigate';
import type { Locale } from '../locale';
@@ -127,6 +128,10 @@ const ConfigProvider: ConfigProviderType = ({
},
mergedTheme
)}
+ renderEmpty={
+ parentContext.renderEmpty ||
+ (componentName =>
)
+ }
{...restProps}
>
contentProps should work for Descriptions.Item 1`] = `
@@ -51,7 +51,7 @@ exports[`Descriptions contentProps should work for Descriptions.Item 1`] = `
`;
-exports[`Descriptions contentProps should work for items 1`] = `
+exports[`Descriptions > contentProps should work for items 1`] = `
@@ -102,7 +102,7 @@ exports[`Descriptions contentProps should work for items 1`] = `
`;
-exports[`Descriptions remove colon for vertical layout by default for Descriptions.Item 1`] = `
+exports[`Descriptions > remove colon for vertical layout by default for Descriptions.Item 1`] = `
@@ -302,7 +302,7 @@ exports[`Descriptions remove colon for vertical layout by default for Descriptio
`;
-exports[`Descriptions remove colon for vertical layout by default for items 1`] = `
+exports[`Descriptions > remove colon for vertical layout by default for items 1`] = `
@@ -502,7 +502,7 @@ exports[`Descriptions remove colon for vertical layout by default for items 1`]
`;
-exports[`Descriptions render for Descriptions.Item 1`] = `
+exports[`Descriptions > render for Descriptions.Item 1`] = `
@@ -649,7 +649,7 @@ exports[`Descriptions render for Descriptions.Item 1`] = `
`;
-exports[`Descriptions render for items 1`] = `
+exports[`Descriptions > render for items 1`] = `
diff --git a/packages/design/src/drawer/__tests__/__snapshots__/index.test.tsx.snap b/packages/design/src/drawer/__tests__/__snapshots__/index.test.tsx.snap
index 1deda45c6..61f879b0b 100644
--- a/packages/design/src/drawer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/design/src/drawer/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Drawer render correctly 1`] = `
+exports[`Drawer > render correctly 1`] = `
`;
-exports[`Drawer render with confirmLoading and okButtonProps 1`] = `
+exports[`Drawer > render with confirmLoading and okButtonProps 1`] = `