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

.dumirc.ts

@@ -124,6 +124,10 @@ export default defineConfig({
             { title: 'Typography 排版', link: '/components/typography' },
           ],
         },
+        {
+          title: '导航',
+          children: [{ title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }],
+        },
         {
           title: '布局',
           children: [

docs/design/design-CHANGELOG.md

@@ -8,6 +8,13 @@ group: 基础组件
 
 ---
 
+## 0.3.4
+
+`2024-05-11`
+
+- 💄 优化 Empty 步骤提示的背景颜色，以对齐设计规范。[#586](https://github.com/oceanbase/oceanbase-design/pull/587)
+- 💄 将 Breadcrumb 字体大小改为 12px，以对齐设计规范。[#587](https://github.com/oceanbase/oceanbase-design/pull/587)
+
 ## 0.3.3
 
 `2024-04-25`

docs/ui/ui-CHANGELOG.md

@@ -8,6 +8,12 @@ group: 业务组件
 
 ---
 
+## 0.3.4
+
+`2024-05-11`
+
+- 💄 调整 PageContainer 刷新图标的大小和间距，以对齐设计规范。[#588](https://github.com/oceanbase/oceanbase-design/pull/588)
+
 ## 0.3.3
 
 `2024-04-25`

packages/codemod/package.json

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

packages/design/package.json

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Breadcrumb } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Breadcrumb
+    items={[
+      {
+        href: '',
+        title: 'User',
+      },
+      {
+        href: '',
+        title: 'User List',
+      },
+      {
+        title: 'User Detail',
+      },
+    ]}
+  />
+);
+
+export default App;

packages/design/src/breadcrumb/demo/icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Breadcrumb } from '@oceanbase/design';
+import { UserOutlined } from '@oceanbase/icons';
+
+const App: React.FC = () => (
+  <Breadcrumb
+    items={[
+      {
+        href: '',
+        title: (
+          <>
+            <UserOutlined />
+            <span>User</span>
+          </>
+        ),
+      },
+      {
+        href: '',
+        title: 'User List',
+      },
+      {
+        title: 'User Detail',
+      },
+    ]}
+  />
+);
+
+export default App;

packages/design/src/breadcrumb/demo/menu.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Breadcrumb } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const [selectedKey, setSelectedKey] = useState('1');
+  const menuItems = [
+    {
+      key: '1',
+      label: 'Jackson',
+    },
+    {
+      key: '2',
+      label: 'John',
+    },
+    {
+      key: '3',
+      label: 'Lucy',
+    },
+  ];
+  return (
+    <Breadcrumb
+      items={[
+        {
+          href: '',
+          title: 'User',
+        },
+        {
+          title: 'User List',
+        },
+        {
+          title: menuItems.find(item => item.key === selectedKey).label,
+          menu: {
+            items: menuItems,
+            selectedKeys: [selectedKey],
+            onClick: ({ key }) => {
+              setSelectedKey(key);
+            },
+          },
+        },
+      ]}
+    />
+  );
+};
+
+export default App;

packages/design/src/breadcrumb/index.md

@@ -0,0 +1,22 @@
+---
+title: Breadcrumb 面包屑
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Breadcrumb](https://ant.design/components/breadcrumb-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/icon.tsx" title="带图标"></code>
+<code src="./demo/menu.tsx" title="带下拉菜单"></code>
+
+## API
+
+- 详见 antd Breadcrumb 文档: https://ant.design/components/breadcrumb-cn

packages/design/src/cascader/index.md

@@ -18,4 +18,4 @@ demo:
 
 ## API
 
-- 详见 antd InputNumber 文档: https://ant.design/components/input-number-cn
+- 详见 antd Cascader 文档: https://ant.design/components/cascader-cn

packages/design/src/empty/style/index.ts

@@ -42,15 +42,16 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
       [`${antCls}-steps`]: {
         marginTop: token.margin,
         padding: token.paddingLG,
-        backgroundColor: colorBgLayout,
+        backgroundColor: token.colorFillQuaternary,
         borderRadius: token.borderRadiusLG,
         [`${antCls}-steps-item-container`]: {
           [`${antCls}-steps-item-icon`]: {
             height: token.controlHeightSM,
             width: token.controlHeightSM,
             lineHeight: `${token.controlHeightSM}px`,
-            backgroundColor: colorFill,
-            borderColor: colorFill,
+            backgroundColor: token.colorFillSecondary,
+            // override default border color
+            borderColor: token.colorFillSecondary,
             [`${antCls}-steps-icon`]: {
               color: colorTextSecondary,
               fontSize: token.fontSize,

packages/design/src/theme/default.ts

@@ -81,6 +81,12 @@ const defaultTheme: ThemeConfig = {
     wireframe: false,
   },
   components: {
+    Breadcrumb: {
+      fontSize: 12,
+      // @ts-ignore
+      // fontHeight is internal token
+      fontHeight: 20,
+    },
     InputNumber: {
       handleVisible: true,
     },

packages/ui/package.json

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