oceanbase · dengfuping · Apr 7, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 27, 2024
diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx
@@ -12,9 +12,7 @@ import useSiteToken from '../hooks/useSiteToken';
 
 const SiteThemeProvider: FC<
   ThemeProviderProps<any> & {
-    theme: ThemeConfig & {
-      isDark?: boolean;
-    };
+    theme: ThemeConfig;
   }
 > = ({ children, theme, ...rest }) => {
   const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);

diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -3,8 +3,9 @@ import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
 import { FormattedMessage } from 'dumi';
 import React from 'react';
 import ThemeIcon from './ThemeIcon';
+import { FontColorsOutlined } from '@ant-design/icons';
 
-export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off';
+export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off' | 'custom-font';
 
 export type ThemeSwitchProps = {
   value?: ThemeName[];
@@ -14,6 +15,7 @@ export type ThemeSwitchProps = {
 const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
   const { value = ['light'], onChange } = props;
   const isMotionOff = value.includes('motion-off');
+  const isCustomFont = value.includes('custom-font');
 
   return (
     <FloatButton.Group trigger="click" icon={<ThemeIcon />}>
@@ -57,6 +59,22 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
           />
         }
       />
+      <FloatButton
+        icon={<FontColorsOutlined />}
+        type={isCustomFont ? 'primary' : 'default'}
+        onClick={() => {
+          if (isCustomFont) {
+            onChange(value.filter(theme => theme !== 'custom-font'));
+          } else {
+            onChange([...value, 'custom-font']);
+          }
+        }}
+        tooltip={
+          <FormattedMessage
+            id={isCustomFont ? 'app.theme.switch.font.custom' : 'app.theme.switch.font.default'}
+          />
+        }
+      />
     </FloatButton.Group>
   );
 };

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -124,6 +124,7 @@ const GlobalLayout: React.FC = () => {
           theme={{
             algorithm: getAlgorithm(theme),
             isDark: theme.includes('dark'),
+            customFont: theme.includes('custom-font'),
             token: {
               motion: !theme.includes('motion-off'),
             },

diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
@@ -3,6 +3,8 @@
   "app.theme.switch.compact": "Compact theme",
   "app.theme.switch.motion.on": "Motion On",
   "app.theme.switch.motion.off": "Motion Off",
+  "app.theme.switch.font.default": "Default Font",
+  "app.theme.switch.font.custom": "Custom Font",
   "app.header.menu.more": "More",
   "app.header.menu.pro.components": "Ant Design Pro Components",
   "app.header.menu.charts": "Ant Design Charts",

diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
@@ -3,6 +3,8 @@
   "app.theme.switch.compact": "紧凑主题",
   "app.theme.switch.motion.on": "动画开启",
   "app.theme.switch.motion.off": "动画关闭",
+  "app.theme.switch.font.default": "默认字体",
+  "app.theme.switch.font.custom": "定制字体",
   "app.header.menu.more": "更多",
   "app.header.menu.pro.components": "Ant Design Pro Components",
   "app.header.menu.charts": "Ant Design Charts",

diff --git a/docs/design/design-CHANGELOG.md b/docs/design/design-CHANGELOG.md
@@ -8,6 +8,21 @@ group: 基础组件
 
 ---
 
+## 0.3.1
+
+`2024-03-29`
+
+- ConfigProvider
+  - 🆕 新增 `theme.customFont` 属性，用于开启 `Source Sans Pro` 定制字体以提升展示效果，仅支持线上应用和英文环境。[#536](https://github.com/oceanbase/oceanbase-design/pull/536)
+  - 🐞 ConfigProvider `form.requiredMark` 属性的默认值改为 `optional`，以修复可选样式在 ProForm 没有默认开启的问题。[#535](https://github.com/oceanbase/oceanbase-design/pull/535)
+- Empty
+  - ⭐️ Empty 新增 `PRESENTED_IMAGE_GUIDE` 内置图片，用于功能开通等引导类场景。[#532](https://github.com/oceanbase/oceanbase-design/pull/532)
+  - 🐞 修复 Empty `style` 属性不生效的问题。[#529](https://github.com/oceanbase/oceanbase-design/pull/529)
+- 📢 Form `preserve` 属性的默认值改为 `false`。[#534](https://github.com/oceanbase/oceanbase-design/pull/534)
+- Modal
+  - 📢 Modal `destroyOnClose` 属性的默认值改为 `true`。[#530](https://github.com/oceanbase/oceanbase-design/pull/530)
+  - 🐞 修复 Modal `footer` 为 `false` 时未去掉页脚 DOM 的问题。[#531](https://github.com/oceanbase/oceanbase-design/pull/531)
+
 ## 0.3.0
 
 `2024-03-22`
@@ -18,7 +33,7 @@ group: 基础组件
 - 🔥 新版 Empty 组件 [#465](https://github.com/oceanbase/oceanbase-design/pull/465)
   - 💄 定制插图、主题和样式，以符合 OceanBase Design 设计规范。
   - 🆕 新增 `title` 属性，用于设置空状态标题。
-  - 🆕 新增 `steps` 属性，用于设置步骤引导。
+  - 🆕 新增 `steps` 属性，用于设置步骤提示。
   - 🆕 新增 `layout` 属性，用于设置空状态布局，默认为 vertical。
   - 🆕 通过 ConfigProvider `renderEmpty` 定制全局组件的空状态。[#467](https://github.com/oceanbase/oceanbase-design/pull/467)
 - 🔥 新版 Result 组件 [#476](https://github.com/oceanbase/oceanbase-design/pull/476)

diff --git a/docs/ui/ui-CHANGELOG.md b/docs/ui/ui-CHANGELOG.md
@@ -8,6 +8,13 @@ group: 业务组件
 
 ---
 
+## 0.3.1
+
+`2024-03-29`
+
+- 🌐 国际化:
+  - 优化 Ranger 的 `en-US` 翻译。[#533](https://github.com/oceanbase/oceanbase-design/pull/533)
+
 ## 0.3.0
 
 `2024-03-22`

diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/charts",
-  "version": "0.2.22",
+  "version": "0.3.0",
   "description": "The Chart library for OceanBase",
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts",
   "repository": {

diff --git a/packages/codemod/package.json b/packages/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.16",
+  "version": "0.3.0",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",

diff --git a/packages/design/package.json b/packages/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.37",
+  "version": "0.3.1",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",

diff --git a/packages/design/src/_util/genComponentStyleHook.ts b/packages/design/src/_util/genComponentStyleHook.ts
@@ -1,14 +1,29 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { DerivativeToken, FullToken, GenerateStyle } from 'antd/es/theme/internal';
 import { genComponentStyleHook as antGenComponentStyleHook } from 'antd/es/theme/internal';
 import type { GlobalToken } from 'antd/es/theme/interface';
 import type { OverrideTokenWithoutDerivative } from 'antd/es/theme/util/genComponentStyleHook';
 import { useContext } from 'react';
+import ConfigProvider from '../config-provider';
 import theme from '../theme';
 
 export type ComponentName = keyof ComponentTokenMap;
 
+export const genCustomFontStyle = (token: DerivativeToken): CSSObject[] => {
+  return [
+    {
+      ['@font-face']: {
+        fontFamily: 'Source Sans Pro',
+        // 定义三种字体格式，适配不同版本的浏览器，并且最多加载一种字体文件
+        src: `url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*H1MFR42M5PMAAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.woff2') format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*jbYLSpw_gfEAAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.woff') format('woff'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*28ClS5qHwQ8AAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.ttf') format('truetype')`,
+        // 定义字体加载策略，外置字体加载前使用默认字体进行兜底
+        fontDisplay: 'swap',
+      },
+    },
+  ];
+};
+
 export function genComponentStyleHook(
   componentName: ComponentName,
   styleFn: GenerateStyle<FullToken<ComponentName>>,
@@ -17,10 +32,11 @@ export function genComponentStyleHook(
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName])
 ) {
   return (prefixCls: string) => {
+    const { theme: themeConfig } = useContext(ConfigProvider.ConfigContext);
     const useStyle = antGenComponentStyleHook(
       `OB-${componentName}` as ComponentName,
       token => {
-        return [styleFn(token)];
+        return [themeConfig?.customFont ? genCustomFontStyle(token) : null, styleFn(token)];
       },
       getDefaultToken,
       {

diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap
@@ -0,0 +1,183 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ConfigProvider form > ConfigProvider form.requiredMark should be \`optional\` by default and work for ProForm 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-vertical ant-pro-form"
+>
+  <input
+    style="display: none;"
+    type="text"
+  />
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required ant-form-item-required-mark-optional"
+          for="name"
+          title="Name"
+        >
+          Name
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-affix-wrapper-focused ant-input-outlined"
+            >
+              <input
+                class="ant-input"
+                id="name"
+                placeholder="请输入"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required-mark-optional"
+          for="address"
+          title="Address"
+        >
+          Address
+          <span
+            class="ant-form-item-optional"
+            title=""
+          >
+            （可选）
+          </span>
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-outlined"
+            >
+              <input
+                class="ant-input"
+                id="address"
+                placeholder="请输入"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <span
+                    aria-label="close-circle"
+                    class="anticon anticon-close-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="close-circle"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    style="display: flex; gap: 8px; align-items: center;"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        重 置
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        提 交
+      </span>
+    </button>
+  </div>
+</form>
+`;