feat: Dropdown item 新增 showTick 和 hover 属性 (#1372)

Co-authored-by: shijia.me <[email protected]>

packages/semi-foundation/dropdown/dropdown.scss

@@ -47,6 +47,10 @@ $module: #{$prefix}-dropdown;
         transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
             $transition_delay-dropdown_item-bg;
 
+        &-hover {
+            background-color: $color-dropdown_item-bg-hover;
+        }
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;

packages/semi-ui/dropdown/_story/C2D/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Dropdown from '../../index';
+import Space from '../../../space';
+import { IconBox } from "@douyinfe/semi-icons";
+
+export function DropdownItem() {
+    return (
+        <Space vertical>
+            <Dropdown.Item>Douyin</Dropdown.Item>
+            <Dropdown.Item disabled>Douyin</Dropdown.Item>
+            <Dropdown.Item hover>Douyin</Dropdown.Item>
+            <Dropdown.Item showTick active>Douyin</Dropdown.Item>
+            <Dropdown.Item icon={<IconBox />}>Douyin</Dropdown.Item>
+        </Space>
+    );
+}

packages/semi-ui/dropdown/_story/dropdown.stories.jsx

@@ -10,6 +10,8 @@ import InHoverElements from './InHoverElements';
 import WrapAvatar from './WrapAvatar';
 import { IconChevronDown, IconBox, IconSimilarity } from '@douyinfe/semi-icons';
 
+export * from '../_story/C2D';
+
 export default {
   title: 'Dropdown',
   parameters: {

packages/semi-ui/dropdown/dropdownItem.tsx

@@ -24,6 +24,9 @@ export interface DropdownItemProps extends BaseProps {
     active?: boolean;
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    showTick?: boolean;
+    /** internal prop, please do not use  */
+    hover?: boolean
 }
 
 const prefixCls = css.PREFIX;
@@ -48,6 +51,8 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     };
 
     static contextType = DropdownContext;
+    static elementType: string;
+
     context: DropdownContextType;
 
     static defaultProps = {
@@ -61,12 +66,13 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
 
 
     render() {
-        const { children, disabled, className, forwardRef, style, type, active, icon, onKeyDown } = this.props;
-        const { showTick } = this.context;
+        const { children, disabled, className, forwardRef, style, type, active, icon, onKeyDown, showTick, hover } = this.props;
+        const { showTick: contextShowTick } = this.context;
         const itemclass = cls(className, {
             [`${prefixCls}-item`]: true,
             [`${prefixCls}-item-disabled`]: disabled,
-            [`${prefixCls}-item-withTick`]: showTick,
+            [`${prefixCls}-item-hover`]: hover,
+            [`${prefixCls}-item-withTick`]: contextShowTick ?? showTick,
             [`${prefixCls}-item-${type}`]: type,
             [`${prefixCls}-item-active`]: active,
         });
@@ -107,4 +113,6 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     }
 }
 
+DropdownItem.elementType = 'Dropdown.Item';
+
 export default DropdownItem;