Merge pull request #803 from oceanbase/dengfuping-dev

improve(design): primary Dropdown.Button divider and background style
oceanbase · Nov 1, 2024 · d15a6d0 · d15a6d0
2 parents 74b7e06 + b4f0d20
commit d15a6d0
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 34 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -138,7 +138,10 @@ export default defineConfig({
         },
         {
           title: '导航',
-          children: [{ title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }],
+          children: [
+            { title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' },
+            { title: 'Dropdown 下拉菜单', link: '/components/dropdown' },
+          ],
         },
         {
           title: '布局',

diff --git a/packages/design/src/button/demo/dropdown.tsx b/packages/design/src/button/demo/dropdown.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Dropdown, Space } from '@oceanbase/design';
+import { Button, Dropdown, Space, message } from '@oceanbase/design';
+import type { MenuProps } from '@oceanbase/design';
 import { DownOutlined } from '@oceanbase/icons';
 
 const items = [
@@ -17,29 +18,34 @@ const items = [
   },
 ];
 
+const handleMenuClick: MenuProps['onClick'] = e => {
+  message.info('Click on menu item.');
+  console.log('click', e);
+};
+
+const menuProps = {
+  items,
+  onClick: handleMenuClick,
+};
+
 const App: React.FC = () => (
-  <Space>
-    <Dropdown.Button
-      menu={{
-        items,
-        onClick: e => {
-          console.log('click', e);
-        },
-      }}
-    >
-      Dropdown
-    </Dropdown.Button>
-    <Dropdown.Button
-      menu={{
-        items,
-        onClick: e => {
-          console.log('click', e);
-        },
-      }}
-      icon={<DownOutlined />}
-    >
-      Dropdown
-    </Dropdown.Button>
+  <Space wrap>
+    <Dropdown menu={menuProps}>
+      <Button>
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+    <Dropdown menu={menuProps}>
+      <Button type="primary">
+        <Space>
+          Button
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
   </Space>
 );
 

diff --git a/packages/design/src/button/style/index.ts b/packages/design/src/button/style/index.ts
@@ -5,22 +5,42 @@ export type ButtonToken = FullToken<'Button'>;
 
 export const genButtonStyle: GenerateStyle<ButtonToken> = (token: ButtonToken) => {
   const { componentCls } = token;
+  // primary button className
+  const primaryBtnCls = `${componentCls}${componentCls}-primary:not([disabled]):not(${componentCls}-disabled):not(${componentCls}-dangerous):not(${componentCls}-background-ghost)`;
+  const primaryAndCompactItemBtnCls = `${componentCls}-compact-item${primaryBtnCls}`;
   return {
     [`${componentCls}`]: {
       // remove box-shadow for button
       boxShadow: 'none !important',
     },
-    [`${componentCls}${componentCls}-primary:not([disabled]):not(${componentCls}-disabled):not(${componentCls}-dangerous):not(${componentCls}-background-ghost)`]:
-      {
-        background: 'linear-gradient(-59deg, #002BFF 0%, #0080FF 100%)',
-        border: 'none',
-        ['&:hover']: {
-          background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)',
-        },
-        ['&:active']: {
-          background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)',
-        },
+    // primary button
+    [`${primaryBtnCls}`]: {
+      background: 'linear-gradient(-59deg, #002BFF 0%, #0080FF 100%)',
+      border: 'none',
+      ['&:hover']: {
+        background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)',
       },
+      ['&:active']: {
+        background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)',
+      },
+    },
+    // primary button in compact item
+    [`${primaryBtnCls}${componentCls}-compact-last-item`]: {
+      background: 'linear-gradient(-59deg, #002BFF 0%, #002BFF 100%)',
+      ['&:hover']: {
+        background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)',
+      },
+      ['&:active']: {
+        background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)',
+      },
+    },
+    [`${primaryAndCompactItemBtnCls}+${primaryAndCompactItemBtnCls}:before`]: {
+      height: '100%',
+      top: 0,
+    },
+    [`${primaryAndCompactItemBtnCls}:hover`]: {
+      zIndex: 0,
+    },
   };
 };
 

diff --git a/packages/design/src/dropdown/demo/basic.tsx b/packages/design/src/dropdown/demo/basic.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Dropdown, Space } from '@oceanbase/design';
+import type { MenuProps } from '@oceanbase/design';
+import { DownOutlined, SmileOutlined } from '@oceanbase/icons';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        menu item
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        disabled menu item
+      </a>
+    ),
+    disabled: true,
+  },
+  {
+    key: '5',
+    label: 'danger menu item',
+    danger: true,
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        menu item with divider
+      </a>
+    ),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    key: '4',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        menu item with icon
+      </a>
+    ),
+    icon: <SmileOutlined />,
+  },
+  {
+    key: '6',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        menu item with extra
+      </a>
+    ),
+    extra: '⌘S',
+  },
+];
+
+const App: React.FC = () => (
+  <Dropdown menu={{ items }}>
+    <a onClick={e => e.preventDefault()}>
+      <Space>
+        Hover me
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);
+
+export default App;
diff --git a/packages/design/src/dropdown/demo/dropdown-button.tsx b/packages/design/src/dropdown/demo/dropdown-button.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Button, Dropdown, message, Space, Tooltip } from '@oceanbase/design';
+import type { MenuProps } from '@oceanbase/design';
+import { DownOutlined, UserOutlined } from '@oceanbase/icons';
+
+const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  message.info('Click on left button.');
+  console.log('click left button', e);
+};
+
+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.Button menu={menuProps} onClick={handleButtonClick}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
+      Disabled
+    </Dropdown.Button>
+    <Dropdown.Button
+      menu={menuProps}
+      buttonsRender={([leftButton, rightButton]) => [
+        <Tooltip title="tooltip" key="leftButton">
+          {leftButton}
+        </Tooltip>,
+        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
+      ]}
+    >
+      With Tooltip
+    </Dropdown.Button>
+    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} type="primary">
+      Dropdown
+    </Dropdown.Button>
+    <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>
+);
+
+export default App;
diff --git a/packages/design/src/dropdown/index.md b/packages/design/src/dropdown/index.md
@@ -0,0 +1,21 @@
+---
+title: Dropdown 下拉菜单
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Dropdown](https://ant.design/components/dropdown-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/dropdown-button.tsx" title="带下拉框的按钮"></code>
+
+## API
+
+- 详见 antd Dropdown 文档: https://ant.design/components/dropdown-cn