[v1] improve(design,ui): Update controlItemBgActiveHover and improve DateRanger style

packages/design/src/dropdown/demo/selectable.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { MenuProps } from '@oceanbase/design';
+import { Dropdown, Space, Typography } from '@oceanbase/design';
+import { DownOutlined } from '@oceanbase/icons';
+
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: 'Item 1',
+  },
+  {
+    key: '2',
+    label: 'Item 2',
+  },
+  {
+    key: '3',
+    label: 'Item 3',
+  },
+];
+
+const App: React.FC = () => (
+  <Dropdown
+    menu={{
+      items,
+      selectable: true,
+      defaultSelectedKeys: ['3'],
+    }}
+  >
+    <Typography.Link>
+      <Space>
+        Selectable
+        <DownOutlined />
+      </Space>
+    </Typography.Link>
+  </Dropdown>
+);
+
+export default App;

packages/design/src/dropdown/index.md

@@ -16,6 +16,7 @@ demo:
 <code src="./demo/basic.tsx" title="基本"></code>
 <code src="./demo/dropdown-button.tsx" title="Dropdown.Button 下拉菜单按钮"></code>
 <code src="./demo/dropdown-with-button.tsx" title="带下拉框的按钮"></code>
+<code src="./demo/selectable.tsx" title="菜单可选中" description="通过设置 `selectable` 属性设置菜单可选中。"></code>
 
 ## API
 

packages/design/src/dropdown/index.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Dropdown as AntDropdown } from 'antd';
 import type { DropDownProps } from 'antd/es/dropdown';
+import classNames from 'classnames';
+import ConfigProvider from '../config-provider';
 import DropdownButton from './dropdown-button';
+import useStyle from './style';
 
 export * from 'antd/es/dropdown';
 
@@ -10,8 +13,19 @@ type CompoundedComponent = React.FC<DropDownProps> & {
   _InternalPanelDoNotUseOrYouWillBeFired: typeof AntDropdown._InternalPanelDoNotUseOrYouWillBeFired;
 };
 
-const Dropdown: CompoundedComponent = props => {
-  return <AntDropdown {...props} />;
+const Dropdown: CompoundedComponent = ({
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
+  const [wrapCSSVar] = useStyle(prefixCls);
+  const dropdownCls = classNames(className);
+
+  return wrapCSSVar(
+    <AntDropdown prefixCls={customizePrefixCls} className={dropdownCls} {...restProps} />
+  );
 };
 
 Dropdown._InternalPanelDoNotUseOrYouWillBeFired =

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

@@ -5,16 +5,17 @@ import { genStyleHooks } from '../../_util/genComponentStyleHook';
 export type DropdownToken = FullToken<'Dropdown'>;
 
 export const genDropdownStyle: GenerateStyle<DropdownToken> = (token: DropdownToken) => {
-  const { antCls, lineWidth } = token;
+  const { antCls, componentCls, lineWidth } = token;
   const btnComponentCls = `${antCls}-btn`;
   const selector = `${btnComponentCls}-compact-item${btnComponentCls}-primary:not([disabled])`;
+
   return {
     // special style for primary Dropdown.Button
     [`${selector} + ${selector}::before`]: {
       top: -1,
       backgroundColor: token.colorWhite,
       height: `calc(100% + ${lineWidth * 2}px)`,
-    } as CSSObject,
+    },
   };
 };
 

packages/design/src/theme/default.ts

@@ -186,6 +186,7 @@ const defaultTheme: ThemeConfig = {
     colorBgSpotlight: white,
     controlItemBgHover: gray2,
     controlItemBgActive: gray2,
+    controlItemBgActiveHover: gray2,
     // 导航特殊色
     colorNaviBg,
     colorNaviBgHover,

packages/design/src/theme/style/compact.less

@@ -429,6 +429,7 @@
 @colorBgContainerDisabled: #ebeff7;
 @controlItemBgHover: #ebeff7;
 @controlItemBgActive: #f3f8fe;
+@controlItemBgActiveHover: #b3d3ff;
 @colorNaviBg: #f1f6ff;
 @colorNaviBgHover: #e8effb;
 @boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
@@ -470,7 +471,6 @@
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgActiveHover: #b3d3ff;
 @controlItemBgActiveDisabled: #cdd5e4;
 @controlTmpOutline: #f5f7fc;
 @controlOutline: rgba(15,115,235,0.05);

packages/design/src/theme/style/default.less

@@ -429,6 +429,7 @@
 @colorBgContainerDisabled: #ebeff7;
 @controlItemBgHover: #ebeff7;
 @controlItemBgActive: #f3f8fe;
+@controlItemBgActiveHover: #b3d3ff;
 @colorNaviBg: #f1f6ff;
 @colorNaviBgHover: #e8effb;
 @boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
@@ -470,7 +471,6 @@
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgActiveHover: #b3d3ff;
 @controlItemBgActiveDisabled: #cdd5e4;
 @controlTmpOutline: #f5f7fc;
 @controlOutline: rgba(15,115,235,0.05);

packages/ui/src/DateRanger/style/index.ts

@@ -47,7 +47,7 @@ export const genDateRangerStyle: GenerateStyle<DateRangerToken> = (
           },
         },
         '&:hover': {
-          borderColor: token.colorPrimaryHover,
+          borderColor: token.gray7,
         },
       },
       [`${componentCls}-wrapper-has-jumper`]: {
@@ -115,9 +115,9 @@ export const genDateRangerStyle: GenerateStyle<DateRangerToken> = (
           color: colorTextSecondary,
           transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
           '&:hover': {
-            borderColor: token.colorPrimaryHover,
+            borderColor: token.gray7,
             '&::before': {
-              backgroundColor: token.colorPrimaryHover,
+              backgroundColor: token.gray7,
             },
           },
         },
@@ -136,12 +136,12 @@ export const genDateRangerStyle: GenerateStyle<DateRangerToken> = (
     },
     [`${componentCls}-back-radio-focused`]: {
       [`${componentCls}-wrapper`]: {
-        borderRightColor: token.colorPrimaryHover,
+        borderRightColor: token.gray7,
       },
       [`${componentCls}-playback-control`]: {
         [`${antCls}-radio-button-wrapper:first-child`]: {
           [`+ ${antCls}-radio-button-wrapper::before`]: {
-            backgroundColor: token.colorPrimaryHover,
+            backgroundColor: token.gray7,
           },
         },
       },