improve(ui): Action.Link gap 8px => 16px

oceanbase · Jan 10, 2025 · bec040e · bec040e
1 parent d1e687e
commit bec040e
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 54 deletions.
diff --git a/packages/ui/src/Action/Group.tsx b/packages/ui/src/Action/Group.tsx
@@ -108,7 +108,7 @@ export default ({
   }
 
   return (
-    <Space size={8}>
+    <Space size={ellipsisType === 'button' ? 8 : 16}>
       {mainActions.map(action => {
         return React.cloneElement(action, {
           // size should be covered by action props

diff --git a/packages/ui/src/Action/demo/button.tsx b/packages/ui/src/Action/demo/button.tsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
-import { Form, Radio, Space } from '@oceanbase/design';
+import { Form, Radio } from '@oceanbase/design';
 import { ButtonSize } from '@oceanbase/design/es/button';
 import { Action } from '@oceanbase/ui';
-import { DownOutlined } from '@oceanbase/icons';
 
 export default () => {
   const [buttonSize, setButtonSize] = useState<ButtonSize>('middle');
   return (
     <>
-      <Form layout="inline" requiredMark={false} style={{ marginBottom: 24 }}>
+      <Form layout="inline" requiredMark={false} style={{ marginBottom: 16 }}>
         <Form.Item label="buttonSize">
           <Radio.Group
             value={buttonSize}
@@ -22,15 +21,7 @@ export default () => {
           </Radio.Group>
         </Form.Item>
       </Form>
-      <Action.Group
-        buttonSize={buttonSize}
-        moreText={
-          <Space size={4}>
-            更多
-            <DownOutlined />
-          </Space>
-        }
-      >
+      <Action.Group buttonSize={buttonSize}>
         <Action.Button type="primary">action1</Action.Button>
         <Action.Button danger>危险按钮</Action.Button>
         <Action.Button>action3</Action.Button>

diff --git a/packages/ui/src/Action/demo/fixed.tsx b/packages/ui/src/Action/demo/fixed.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Action } from '@oceanbase/ui';
 
 export default () => {

diff --git a/packages/ui/src/Action/demo/groupControl.tsx b/packages/ui/src/Action/demo/groupControl.tsx
@@ -1,17 +1,39 @@
 import React, { useState } from 'react';
 import { Action } from '@oceanbase/ui';
+import { Form, Switch } from '@oceanbase/design';
 
 export default () => {
+  const [visible, setVisible] = useState(true);
+  const [disabled, setDisabled] = useState(false);
   return (
-    <Action.Group
-      shouldDisabled={key => key === 'action2'}
-      shouldVisible={key => key !== 'action1'}
-    >
-      <Action.Link key="action1">action1</Action.Link>
-      <Action.Link key="action2">action2</Action.Link>
-      <Action.Link key="action3">action3</Action.Link>
-      <Action.Link key="action4">action4</Action.Link>
-      <Action.Link key="action5">action5</Action.Link>
-    </Action.Group>
+    <>
+      <Form layout="inline" style={{ marginBottom: 16 }}>
+        <Form.Item label="visible" required={true}>
+          <Switch
+            size="small"
+            value={visible}
+            onChange={value => {
+              setVisible(value);
+            }}
+          />
+        </Form.Item>
+        <Form.Item label="disabled" required={true}>
+          <Switch
+            size="small"
+            value={disabled}
+            onChange={value => {
+              setDisabled(value);
+            }}
+          />
+        </Form.Item>
+      </Form>
+      <Action.Group shouldVisible={key => visible} shouldDisabled={key => disabled}>
+        <Action.Link key="action1">action1</Action.Link>
+        <Action.Link key="action2">action2</Action.Link>
+        <Action.Link key="action3">action3</Action.Link>
+        <Action.Link key="action4">action4</Action.Link>
+        <Action.Link key="action5">action5</Action.Link>
+      </Action.Group>
+    </>
   );
 };
diff --git a/packages/ui/src/Action/demo/link.tsx b/packages/ui/src/Action/demo/link.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
-import { Space } from '@oceanbase/design';
 import { Action } from '@oceanbase/ui';
-import { DownOutlined } from '@oceanbase/icons';
 
 export default () => {
   return (
-    <Action.Group
-      moreText={
-        <Space size={4}>
-          更多
-          <DownOutlined />
-        </Space>
-      }
-    >
+    <Action.Group>
       <Action.Link visible={false}>action1</Action.Link>
       <Action.Link disabled tooltip={'禁用展示tooltip'}>
         禁用提示

diff --git a/packages/ui/src/Action/demo/more-text.tsx b/packages/ui/src/Action/demo/more-text.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Space } from '@oceanbase/design';
+import { Action } from '@oceanbase/ui';
+import { DownOutlined } from '@oceanbase/icons';
+
+export default () => {
+  return (
+    <Action.Group
+      moreText={
+        <Space size={4}>
+          更多
+          <DownOutlined />
+        </Space>
+      }
+    >
+      <Action.Button type="primary">action1</Action.Button>
+      <Action.Button danger>危险按钮</Action.Button>
+      <Action.Button>action3</Action.Button>
+      <Action.Button>action4</Action.Button>
+      <Action.Button>action5</Action.Button>
+    </Action.Group>
+  );
+};
diff --git a/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx b/packages/ui/src/Action/demo/with-tooltip-popconfirm.tsx
@@ -1,18 +1,10 @@
 import React from 'react';
-import { Popconfirm, Space } from '@oceanbase/design';
+import { Popconfirm } from '@oceanbase/design';
 import { Action } from '@oceanbase/ui';
-import { DownOutlined } from '@oceanbase/icons';
 
 export default () => {
   return (
-    <Action.Group
-      moreText={
-        <Space size={4}>
-          更多
-          <DownOutlined />
-        </Space>
-      }
-    >
+    <Action.Group>
       <Action.Button type="primary" tooltip="This is tooltip">
         action1
       </Action.Button>

diff --git a/packages/ui/src/Action/index.md b/packages/ui/src/Action/index.md
@@ -8,9 +8,10 @@ nav:
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/link.tsx" title="Action.Link"></code>
 <code src="./demo/button.tsx" title="Action.Button"></code>
+<code src="./demo/link.tsx" title="Action.Link"></code>
 <code src="./demo/loading.tsx" title="loading 状态"></code>
+<code src="./demo/more-text.tsx" title="自定义更多操作"></code>
 <code src="./demo/with-tooltip-popconfirm.tsx" title="带 Tooltip 和 Popconfirm"></code>
 <code src="./demo/fixed.tsx" title="固定展示、不被折叠的 Action"></code>
 <code src="./demo/groupControl.tsx" title="整体控制状态"></code>
@@ -30,29 +31,29 @@ nav:
 | moreText | 设置更多操作的文案 | ReactNode | - |
 | moreType | 设置更多操作的元素类型 | button \| link | - |
 
-### Action.Link
+### Action.Button
 
 | 参数 | 说明 | 类型 | 默认值 |
 | :-- | :-- | :-- | :-- |
 | visible | 是否可见 | boolean | true |
+| type | 设置按钮类型 | primary \| default | default |
+| size | 设置按钮大小 | large \| middle \| small | middle |
+| danger | 设置危险按钮 | boolean | false |
+| disabled | 是否禁用 | boolean | false |
 | loading | 设置加载状态 | boolean | false |
 | tooltip | 设置提示文案 | string | - |
-| disabled | 是否禁用 | boolean | false |
 | fixed | 固定展示、不被折叠 | boolean | false |
 | onClick | 点击链接的回调 | async (event: React.MouseEvent<HTMLElement, MouseEvent>) => void \| (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
-| className | 设置 link 的样式名 | string | - |
+| className | 设置按钮的样式名 | string | - |
 
-### Action.Button
+### Action.Link
 
 | 参数 | 说明 | 类型 | 默认值 |
 | :-- | :-- | :-- | :-- |
 | visible | 是否可见 | boolean | true |
-| type | 设置按钮类型 | primary \| default | default |
-| size | 设置按钮大小 | large \| middle \| small | middle |
-| danger | 设置危险按钮 | boolean | false |
-| disabled | 是否禁用 | boolean | false |
 | loading | 设置加载状态 | boolean | false |
 | tooltip | 设置提示文案 | string | - |
+| disabled | 是否禁用 | boolean | false |
 | fixed | 固定展示、不被折叠 | boolean | false |
 | onClick | 点击链接的回调 | async (event: React.MouseEvent<HTMLElement, MouseEvent>) => void \| (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
-| className | 设置按钮的样式名 | string | - |
+| className | 设置 link 的样式名 | string | - |