Merge pull request #989 from oceanbase/master

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

docs/design/design-CHANGELOG.md

@@ -8,6 +8,19 @@ group: 基础组件
 
 ---
 
+## 0.4.9
+
+`2025-02-20`
+
+- 📖 Table 设计文档新增 高亮显式 规范。[#986](https://github.com/oceanbase/oceanbase-design/pull/986)
+- 📖 Typography 新增可复制和在 Modal 中编辑的示例。[#985](https://github.com/oceanbase/oceanbase-design/pull/985)
+- ⭐️ ConfigProvider 移除 `injectStaticFunction` 属性，改为自动判断是否注入可消费全局配置的静态方法。[#981](https://github.com/oceanbase/oceanbase-design/pull/981)
+- Table
+  - 🐞 修复 Table 可展开&固定列时的间距问题。[#982](https://github.com/oceanbase/oceanbase-design/pull/982)
+  - 🐞 修复 Table 可展开&可滚动时不应该展示斑马条的问题。[#983](https://github.com/oceanbase/oceanbase-design/pull/983)
+- 💄 Alert 改为使用线性图标，以对齐最新的设计规范。[#987](https://github.com/oceanbase/oceanbase-design/pull/987)
+- 💄 Dropdown.Button 默认图标改为 `DownOutlined` 向下箭头。[#984](https://github.com/oceanbase/oceanbase-design/pull/984)
+
 ## 0.4.8
 
 `2025-02-13`

packages/codemod/package.json

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

packages/design/package.json

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

packages/design/src/alert/index.tsx

@@ -1,7 +1,13 @@
+import React, { useContext } from 'react';
 import { Alert as AntAlert } from 'antd';
 import type { AlertProps as AntAlertProps } from 'antd/es/alert';
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+} from '@oceanbase/icons';
 import classNames from 'classnames';
-import React, { useContext } from 'react';
 import ConfigProvider from '../config-provider';
 import useStyle from './style';
 
@@ -12,7 +18,15 @@ export interface AlertProps extends AntAlertProps {
   colored?: boolean;
 }
 
+const iconMapOutlined = {
+  success: <CheckCircleOutlined />,
+  info: <InfoCircleOutlined />,
+  error: <CloseCircleOutlined />,
+  warning: <ExclamationCircleOutlined />,
+};
+
 const Alert = ({
+  type,
   ghost,
   colored,
   prefixCls: customizePrefixCls,
@@ -29,7 +43,15 @@ const Alert = ({
     },
     className
   );
-  return wrapSSR(<AntAlert prefixCls={customizePrefixCls} className={alertCls} {...restProps} />);
+  return wrapSSR(
+    <AntAlert
+      type={type}
+      icon={iconMapOutlined[type]}
+      prefixCls={customizePrefixCls}
+      className={alertCls}
+      {...restProps}
+    />
+  );
 };
 
 Alert.ErrorBoundary = AntAlert.ErrorBoundary;

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

@@ -12,10 +12,6 @@ nav:
 - 🆕 新增 `card.divided` 属性，用于配置 Card 是否展示分割线。
 - 🆕 新增 `locale.Input.placeholder` 属性，用于配置 Input 的默认 `placeholder`。
 - 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
-- 🆕 新增 `injectStaticFunction` 属性，用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置，默认开启。
-
-<Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider，建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可，其他 ConfigProvider 则需要关闭该配置，否则静态方法可能会有冲突。"></Alert>
-
 - 🆕 新增 `styleProviderProps` 属性，一般用于配置 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 的 `hashPriority` 和 `transformers` 属性实现样式降级，来兼容 Chrome 88 以下的低版本浏览器，详见 [antd v5 样式兼容说明](https://ant-design.antgroup.com/docs/react/compatible-style-cn)。
 - 🆕 新增 `appProps` 属性，用于配置内嵌的 [App 组件属性](https://ant-design.antgroup.com/components/app-cn#app)。
 
@@ -57,7 +53,6 @@ export default App;
 | card | Card 全局配置 | `{ divided?: boolean; classNames?: Record<string, string>; styles?: Record<string, React.CSSProperties>; }` | - | - |
 | spin | Spin 全局配置 | `{ indicator?: ReactNode; className?: string; style?: React.CSSProperties; }` | - | - |
 | table | Table 全局配置 | `{ selectionColumnWidth?: width; className?: string; style?: React.CSSProperties; }` | - | - |
-| injectStaticFunction | 用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置 <Alert type="warning" showIcon={true} message="📢 注意: 如果有多个 ConfigProvider，建议在最顶层的 ConfigProvider 开启 `injectStaticFunction` 即可，其他 ConfigProvider 则需要关闭该配置，否则静态方法可能会有冲突。"></Alert> | boolean | true | - |
 | styleProviderProps | [StyleProvider 配置](https://github.com/ant-design/cssinjs#styleprovider)，一般用于配置 `hashPriority` 和 `transformers` 属性实现样式降级 | [StyleProviderProps](https://github.com/ant-design/cssinjs/blob/master/src/StyleContext.tsx#L88) | - | - |
 | appProps | 内嵌的 App 组件属性 | [AppProps](https://ant-design.antgroup.com/components/app-cn#app) | - | - |
 

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

@@ -73,8 +73,6 @@ export interface ConfigProviderProps extends AntConfigProviderProps {
   pagination?: PaginationConfig;
   spin?: SpinConfig;
   table?: TableConfig;
-  // inject static function to consume ConfigProvider
-  injectStaticFunction?: boolean;
   // StyleProvider props
   styleProviderProps?: StyleProviderProps;
   appProps?: AppProps;
@@ -83,11 +81,14 @@ export interface ConfigProviderProps extends AntConfigProviderProps {
 export interface ExtendedConfigConsumerProps {
   navigate?: NavigateFunction;
   hideOnSinglePage?: boolean;
+  // inject static function to ConfigProvider
+  injectStaticFunction?: boolean;
 }
 
 const ExtendedConfigContext = React.createContext<ExtendedConfigConsumerProps>({
   navigate: undefined,
   hideOnSinglePage: false,
+  injectStaticFunction: true,
 });
 
 export type ConfigProviderType = React.FC<ConfigProviderProps> & {
@@ -111,7 +112,6 @@ const ConfigProvider: ConfigProviderType = ({
   spin,
   table,
   tabs,
-  injectStaticFunction = true,
   styleProviderProps,
   appProps,
   ...restProps
@@ -194,14 +194,16 @@ const ConfigProvider: ConfigProviderType = ({
             : hideOnSinglePage !== undefined
               ? hideOnSinglePage
               : parentExtendedContext.hideOnSinglePage,
+          // inject static function to outermost ConfigProvider only
+          injectStaticFunction: false,
         }}
       >
         <StyleProvider {...mergedStyleProviderProps}>
           {/* Nested App component for static function of message, notification and Modal to consume ConfigProvider config */}
           {/* ref: https://ant.design/components/app */}
           <App component={false} {...appProps}>
             {children}
-            {injectStaticFunction && <StaticFunction />}
+            {parentExtendedContext.injectStaticFunction && <StaticFunction />}
           </App>
         </StyleProvider>
       </ExtendedConfigContext.Provider>

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, Dropdown, message, Space, Tooltip } from '@oceanbase/design';
+import { Dropdown, message, Space, Tooltip } from '@oceanbase/design';
 import type { MenuProps } from '@oceanbase/design';
-import { DownOutlined, UserOutlined } from '@oceanbase/icons';
+import { UserOutlined } from '@oceanbase/icons';
 
 const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
   message.info('Click on left button.');
@@ -72,22 +72,6 @@ const App: React.FC = () => (
     <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
       Danger
     </Dropdown.Button>
-    <Dropdown menu={menuProps}>
-      <Button>
-        <Space>
-          Button
-          <DownOutlined />
-        </Space>
-      </Button>
-    </Dropdown>
-    <Dropdown menu={menuProps}>
-      <Button type="primary">
-        <Space>
-          Button
-          <DownOutlined />
-        </Space>
-      </Button>
-    </Dropdown>
   </Space>
 );
 

packages/design/src/dropdown/demo/dropdown-with-button.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button, Dropdown, message, Space, Tooltip } from '@oceanbase/design';
+import type { MenuProps } from '@oceanbase/design';
+import { DownOutlined, EllipsisOutlined, UserOutlined } from '@oceanbase/icons';
+
+const handleMenuClick: MenuProps['onClick'] = e => {
+  message.info('Click on menu item.');
+  console.log('click', e);
+};
+
+const items: MenuProps['items'] = [
+  {
+    label: '1st menu item',
+    key: '1',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '2nd menu item',
+    key: '2',
+    icon: <UserOutlined />,
+  },
+  {
+    label: '3rd menu item',
+    key: '3',
+    icon: <UserOutlined />,
+    danger: true,
+  },
+  {
+    label: '4rd menu item',
+    key: '4',
+    icon: <UserOutlined />,
+    danger: true,
+    disabled: true,
+  },
+];
+
+const menuProps = {
+  items,
+  onClick: handleMenuClick,
+};
+
+const App: React.FC = () => (
+  <Space wrap>
+    <Dropdown menu={menuProps}>
+      <Button icon={<EllipsisOutlined />}></Button>
+    </Dropdown>
+    <Dropdown menu={menuProps}>
+      <Button>
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+    <Dropdown menu={menuProps}>
+      <Button type="primary">
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+  </Space>
+);
+
+export default App;

packages/design/src/dropdown/dropdown-button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Dropdown } from 'antd';
+import type { DropdownButtonProps } from 'antd/es/dropdown';
+import { DownOutlined } from '@oceanbase/icons';
+
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
+  /** @internal */
+  __ANT_BUTTON: boolean;
+};
+
+const DropdownButton: CompoundedComponent = ({ icon = <DownOutlined />, ...restProps }) => {
+  return <Dropdown.Button icon={icon} {...restProps} />;
+};
+
+DropdownButton.__ANT_BUTTON = true;
+
+export default DropdownButton;

packages/design/src/dropdown/index.md

@@ -14,7 +14,8 @@ demo:
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="基本"></code>
-<code src="./demo/dropdown-button.tsx" title="带下拉框的按钮"></code>
+<code src="./demo/dropdown-button.tsx" title="Dropdown.Button 下拉菜单按钮"></code>
+<code src="./demo/dropdown-with-button.tsx" title="带下拉框的按钮"></code>
 
 ## API
 

packages/design/src/dropdown/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dropdown as AntDropdown } from 'antd';
+import type { DropDownProps } from 'antd/es/dropdown';
+import DropdownButton from './dropdown-button';
+
+export * from 'antd/es/dropdown';
+
+type CompoundedComponent = React.FC<DropDownProps> & {
+  Button: typeof DropdownButton;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof AntDropdown._InternalPanelDoNotUseOrYouWillBeFired;
+};
+
+const Dropdown: CompoundedComponent = props => {
+  return <AntDropdown {...props} />;
+};
+
+Dropdown._InternalPanelDoNotUseOrYouWillBeFired =
+  AntDropdown._InternalPanelDoNotUseOrYouWillBeFired;
+
+Dropdown.Button = DropdownButton;
+
+export default Dropdown;

packages/design/src/index.ts

@@ -90,6 +90,9 @@ export type { SegmentedProps } from './segmented';
 export { default as Breadcrumb } from './breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';
 
+export { default as Dropdown } from './dropdown';
+export type { DropdownProps, DropdownButtonProps, DropdownButtonType } from './dropdown';
+
 export { default as Result } from './result';
 export type { ResultProps, ResultType, ResultStatusType } from './result';
 

packages/design/src/table/demo/dynamic-settings.tsx

@@ -158,12 +158,12 @@ const App: React.FC = () => {
     scroll.y = 240;
   }
   if (xScroll) {
-    scroll.x = '100vw';
+    scroll.x = '1000px';
   }
 
   const tableColumns = columns.map(item => ({ ...item, ellipsis }));
   if (xScroll === 'fixed') {
-    tableColumns[0].fixed = true;
+    tableColumns[0].fixed = 'left';
     tableColumns[tableColumns.length - 1].fixed = 'right';
   }
 

packages/design/src/table/index.$tab-design.md

@@ -92,6 +92,15 @@
 
 ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/jWqVQYI08FAAAAAAAAAAAAAADv3-AQBr/original)
 
+### 高亮显示
+
+表格中需要重点关注的单元格/行/列高亮 3s 进行提示，默认使用绿色背景色，需要警示的场景使用黄色背景色。
+
+|  | 默认 | 警示 |
+| --- | --- | --- |
+| <div style="width: 50px;">单元格</div> | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/2wCFQpBar1AAAAAAAAAAAAAAev3-AQBr/original) | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/dH8NS6ZNAkIAAAAAAAAAAAAAev3-AQBr/original) |
+| 行或列 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/_hGoTIBSoaIAAAAAAAAAAAAAev3-AQBr/original) | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/CjLKT4TdhJ4AAAAAAAAAAAAAev3-AQBr/original) |
+
 ### 操作列
 
 支持「次按钮」和「文字按钮」两种类型，默认使用次按钮。

packages/design/src/table/index.tsx

@@ -44,6 +44,7 @@ export interface TableProps<T> extends AntTableProps<T> {
 function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.Ref<Reference>) {
   const {
     locale: customLocale,
+    size,
     columns,
     footer,
     pagination: customPagination,
@@ -223,6 +224,7 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
           </div>
         ),
       }}
+      size={size}
       columns={newColumns}
       rowClassName={(...args) => {
         return classNames(
@@ -235,7 +237,7 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
       expandable={
         expandable
           ? {
-              columnWidth: 32,
+              columnWidth: !size || size === 'large' ? 40 : 32,
               ...expandable,
             }
           : undefined