Merge pull request #576 from oceanbase/master

[Feature Branch] chore(merge): Merge master branch of v0.3.3

.dumirc.ts

@@ -138,6 +138,7 @@ export default defineConfig({
             { title: 'Form 表单', link: '/components/form' },
             { title: 'Input 输入框', link: '/components/input' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Radio 单选框', link: '/components/radio' },
             { title: 'Select 选择器', link: '/components/select' },
             { title: 'TreeSelect 树选择', link: '/components/tree-select' },
           ],

docs/design/design-CHANGELOG.md

@@ -8,6 +8,17 @@ group: 基础组件
 
 ---
 
+## 0.3.3
+
+`2024-04-25`
+
+- ConfigProvider
+  - 🐞 修复 ConfigProvider 开启 `theme.customFont` 并且多次嵌套后 `fontFamily` 不正确的问题。[#572](https://github.com/oceanbase/oceanbase-design/pull/572)
+  - 🐞 修复 ConfigProvider 自定义 `theme.token.fontFamily` 不生效的问题。[#573](https://github.com/oceanbase/oceanbase-design/pull/573)
+  - 🐞 修复 ConfigProvider 多次使用会默认多次注入 StaticFunction，导致 Modal、message 和 notification 静态方法不会正常展示的问题。[#574](https://github.com/oceanbase/oceanbase-design/pull/574)
+- 🐞 修复主题 Token `boxShadowSecondary` 通过静态 token 对象和 less 变量访问时值不正确的问题。[#569](https://github.com/oceanbase/oceanbase-design/pull/569)
+- 💄 优化 Radio.Button 选中置灰态的背景颜色，避免和字体颜色区分不清。[#570](https://github.com/oceanbase/oceanbase-design/pull/570)
+
 ## 0.3.2
 
 `2024-04-12`

docs/ui/ui-CHANGELOG.md

@@ -8,6 +8,12 @@ group: 业务组件
 
 ---
 
+## 0.3.3
+
+`2024-04-25`
+
+- ⭐️ Boundary 组件支持 `className` 属性，并且根据不同组件内置 ob-boundary-error、ob-boundary-403 和 ob-boundary-404 类名，便于上层判断异常类型。[#571](https://github.com/oceanbase/oceanbase-design/pull/571)
+
 ## 0.3.2
 
 `2024-04-12`

packages/codemod/package.json

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

packages/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",

packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { render } from '@testing-library/react';
+import { ConfigProvider, useToken } from '@oceanbase/design';
+import { injectedStaticFunction } from '../../static-function';
+
+describe('ConfigProvider injectStaticFunction', () => {
+  it('injectStaticFunction', () => {
+    const Child = () => {
+      expect(injectedStaticFunction).toBe(true);
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child />
+      </ConfigProvider>
+    );
+  });
+});

packages/design/src/config-provider/__tests__/static-function.test.tsx

@@ -4,7 +4,12 @@ import { ConfigProvider, token } from '@oceanbase/design';
 import defaultTheme from '../../theme/default';
 
 describe('ConfigProvider static function', () => {
-  it('token', () => {
+  it('static token', () => {
+    expect(token.boxShadow).toBe(defaultTheme.token.boxShadow);
+    expect(token.boxShadowSecondary).toBe(defaultTheme.token.boxShadowSecondary);
+  });
+
+  it('static token in ConfigProvider', () => {
     render(
       <ConfigProvider>
         <div />

packages/design/src/config-provider/__tests__/theme.test.tsx

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
 import { render } from '@testing-library/react';
-import { ConfigProvider, useToken } from '@oceanbase/design';
+import { ConfigProvider, useToken, theme } from '@oceanbase/design';
 import defaultTheme from '../../theme/default';
 
+const antToken = theme.getDesignToken();
+
 describe('ConfigProvider theme', () => {
-  it('ConfigProvider theme token', () => {
+  it('token', () => {
     const Child1 = () => {
       const { token } = useToken();
       expect(token.colorBgLayout).toBe(defaultTheme.token.colorBgLayout);
@@ -38,4 +40,73 @@ describe('ConfigProvider theme', () => {
       </ConfigProvider>
     );
   });
+
+  // test order should before customFont to avoid be affected
+  it('token.fontFamily', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(antToken.fontFamily);
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Custom Font'`);
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Custom Font'`);
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            token: {
+              fontFamily: `'Custom Font'`,
+            },
+          }}
+        >
+          <Child2 />
+          <ConfigProvider>
+            <Child3 />
+          </ConfigProvider>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+  });
+
+  it('customFont', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(antToken.fontFamily);
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            customFont: true,
+          }}
+        >
+          <Child2 />
+          <ConfigProvider>
+            <Child3 />
+          </ConfigProvider>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+  });
 });

packages/design/src/config-provider/index.tsx

@@ -13,7 +13,7 @@ import type { StyleProviderProps } from '@ant-design/cssinjs';
 import StyleContext from '@ant-design/cssinjs/es/StyleContext';
 import type { StyleContextProps } from '@ant-design/cssinjs/es/StyleContext';
 import { merge } from 'lodash';
-import StaticFunction from '../static-function';
+import StaticFunction, { injectedStaticFunction } from '../static-function';
 import themeConfig from '../theme';
 import defaultTheme from '../theme/default';
 import darkTheme from '../theme/dark';
@@ -97,7 +97,7 @@ const ConfigProvider: ConfigProviderType = ({
   spin,
   table,
   tabs,
-  injectStaticFunction = true,
+  injectStaticFunction = !injectedStaticFunction,
   styleProviderProps,
   ...restProps
 }) => {
@@ -108,6 +108,8 @@ const ConfigProvider: ConfigProviderType = ({
   const mergedTheme = merge(parentContext.theme, theme);
   const currentTheme = mergedTheme?.isDark ? darkTheme : defaultTheme;
   const { token } = themeConfig.useToken();
+  const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;
+  const customFont = mergedTheme.customFont;
 
   // inherit from parent StyleProvider
   const parentStyleContext = React.useContext<StyleContextProps>(StyleContext);
@@ -134,9 +136,10 @@ const ConfigProvider: ConfigProviderType = ({
       )}
       theme={merge(currentTheme, mergedTheme, {
         token: {
-          fontFamily: mergedTheme.customFont
-            ? `'Source Sans Pro', ${token.fontFamily}`
-            : token.fontFamily,
+          fontFamily:
+            customFont && !fontFamily.startsWith(`'Source Sans Pro'`)
+              ? `'Source Sans Pro', ${fontFamily}`
+              : fontFamily,
         },
       })}
       renderEmpty={

packages/design/src/radio/demo/radio-button.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Radio, Space } from '@oceanbase/design';
+import type { RadioChangeEvent } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const onChange = (e: RadioChangeEvent) => {
+    console.log(`radio checked:${e.target.value}`);
+  };
+
+  return (
+    <Space direction="vertical" size="middle">
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b" disabled>
+          Shanghai
+        </Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group disabled onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+    </Space>
+  );
+};
+
+export default App;

packages/design/src/radio/demo/radio.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Radio, Space } from '@oceanbase/design';
+import type { RadioChangeEvent } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState('A');
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  };
+
+  return (
+    <Space direction="vertical">
+      <Radio.Group onChange={onChange} value={value}>
+        <Radio value="A">A</Radio>
+        <Radio value="B">B</Radio>
+        <Radio value="C">C</Radio>
+        <Radio value="D">D</Radio>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} value={value} disabled={true}>
+        <Radio value="A">A</Radio>
+        <Radio value="B">B</Radio>
+        <Radio value="C">C</Radio>
+        <Radio value="D">D</Radio>
+      </Radio.Group>
+    </Space>
+  );
+};
+
+export default App;

packages/design/src/radio/index.md

@@ -0,0 +1,21 @@
+---
+title: Radio 单选框
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Radio](https://ant.design/components/radio-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/radio.tsx" title="单选"></code>
+<code src="./demo/radio-button.tsx" title="单选按钮"></code>
+
+## API
+
+- 详见 antd Radio 文档: https://ant.design/components/radio-cn

packages/design/src/static-function/index.tsx

@@ -21,7 +21,7 @@ const mapToken = {
   // 需要覆盖部分 Alias Token 的值
   override: {
     boxShadow: defaultTheme.token.boxShadow,
-    boxShadowSecondary: defaultTheme.token.boxShadow,
+    boxShadowSecondary: defaultTheme.token.boxShadowSecondary,
   },
 };
 let token = formatToken(mapToken);
@@ -36,6 +36,9 @@ let modal: Omit<ModalStaticFunctions, 'warn'> & {
   useModal: typeof AntModal.useModal;
 } = AntModal;
 
+// injected static function or not
+let injectedStaticFunction = false;
+
 export default () => {
   // 自动注入 useToken，避免每次使用都要声明一遍，比较繁琐
   token = useToken().token;
@@ -54,7 +57,8 @@ export default () => {
     ...staticFunction.modal,
     useModal: AntModal.useModal,
   };
+  injectedStaticFunction = true;
   return null;
 };
 
-export { token, message, notification, modal };
+export { token, message, notification, modal, injectedStaticFunction };

packages/design/src/theme/default.ts

@@ -84,6 +84,10 @@ const defaultTheme: ThemeConfig = {
     InputNumber: {
       handleVisible: true,
     },
+    Radio: {
+      // temporarily fix style for checked disabled Radio.Button
+      controlItemBgActiveDisabled: '#e2e8f3',
+    },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
       multipleItemBg: '#F8FAFE',

packages/design/src/theme/style/compact.less

@@ -409,7 +409,7 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
-@boxShadowSecondary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;

packages/design/src/theme/style/default.less

@@ -409,7 +409,7 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
-@boxShadowSecondary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",