feat: update menu style & fix scroll icon bg

Author: Wangtaofeng

apps/storybook/stories/menu/menu.stories.tsx

@@ -13,7 +13,7 @@ export default {
   component: Menu,
 } as Meta
 
-export const Vertical: StoryFn<MenuProps> = (args) => {
+const Vertical: StoryFn<MenuProps> = (args) => {
   return (
     <>
       <Menu
@@ -103,7 +103,7 @@ export const Vertical: StoryFn<MenuProps> = (args) => {
   )
 }
 
-export const Horizontal: StoryFn<MenuProps> = (args) => {
+const Horizontal: StoryFn<MenuProps> = (args) => {
   return (
     <>
       <Menu
@@ -192,3 +192,12 @@ export const Horizontal: StoryFn<MenuProps> = (args) => {
     </>
   )
 }
+
+export const Basic: StoryFn<MenuProps> = (props) => {
+  return (
+    <>
+      <Vertical {...props} />
+      <Horizontal {...props} />
+    </>
+  )
+}

packages/menu/src/horizontal/horizontal-menu.tsx

@@ -138,7 +138,6 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
 
         return (
           <HorizontalSubMenu
-            ml={index !== 0 ? "16px" : "0"}
             key={subMenu.value}
             value={subMenu.value}
             icon={subMenu.icon}
@@ -216,7 +215,6 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
       } else {
         return (
           <HorizontalMenuItem
-            ml={index !== 0 ? "16px" : "0"}
             key={item.value}
             value={item.value}
             icon={item.icon}
@@ -309,7 +307,7 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
                   }
                 }}
               >
-                <PreviousIcon />
+                <PreviousIcon size="12" />
               </motion.div>
             )}
           </AnimatePresence>
@@ -330,7 +328,7 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
                   }
                 }}
               >
-                <NextIcon />
+                <NextIcon size="12" />
               </motion.div>
             )}
           </AnimatePresence>

packages/menu/src/horizontal/horizontal-sub-menu.tsx

@@ -56,7 +56,7 @@ export const HorizontalSubMenu = forwardRef<HTMLDivElement, SubMenuProps>(
           {!onlyShowIcon && label && (
             <span css={horizontalSubMenuLabel}>{label}</span>
           )}
-          {children && <DownIcon ml="8px" fs="14px" />}
+          {children && <DownIcon ml="8px" fs="12px" />}
           <div
             css={applyHorizontalLine(colorScheme, selected, disabled)}
             className="horizontalLine"

packages/menu/src/horizontal/style.ts

@@ -15,6 +15,7 @@ export function applyHorizontalMenuListContainerStyle(
 ): SerializedStyles {
   return css`
     display: flex;
+    gap: 16px;
     flex-direction: row;
     justify-content: ${isScroll ? "flex-start" : horizontalAlign};
     overflow-x: auto;
@@ -45,13 +46,22 @@ export function applyActionContainerStyle(
   const bgStyle =
     action === "left"
       ? css`
-          mask-image: linear-gradient(90deg, #000 0, transparent);
+          background: linear-gradient(
+            270deg,
+            rgba(255, 255, 255, 0) 0%,
+            #fff 100%
+          );
+          padding: 14px 12px 14px 4px;
         `
       : css`
-          mask-image: linear-gradient(-90deg, #000 0, transparent);
+          background: linear-gradient(
+            270deg,
+            #fff 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          padding: 14px 4px 14px 12px;
         `
   return css`
-    background: transparent;
     color: ${getColor("grayBlue", "02")};
     position: absolute;
     width: 28px;
@@ -162,7 +172,7 @@ export function applyHorizontalSubMenuIcon(
   onlyShowIcon?: boolean,
 ): SerializedStyles {
   return css`
-    font-size: 14px;
+    font-size: 16px;
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;

packages/menu/src/vertical/style.ts

@@ -55,7 +55,7 @@ export function applyVerticalSubMenuContentContainer(
     align-items: center;
     width: 100%;
     height: 48px;
-    padding: 0 24px;
+    padding: 0 16px;
     flex-direction: row;
     ${colorStyle};
   `
@@ -97,10 +97,10 @@ export function applyVerticalMenuItemContainer(
 
   const paddingStyle = sub
     ? css`
-        padding: 0 24px 0 40px;
+        padding: 0 16px 0 32px;
       `
     : css`
-        padding: 0 24px 0 24px;
+        padding: 0 16px;
       `
 
   return css`
@@ -109,7 +109,6 @@ export function applyVerticalMenuItemContainer(
     box-sizing: border-box;
     align-items: center;
     width: 100%;
-    padding: 0 24px 0 40px;
     height: 48px;
     flex-direction: row;
     ${colorStyle};
@@ -122,12 +121,12 @@ export const verticalDivider = css`
 `
 
 export const verticalSubMenuIcon = css`
-  font-size: 14px;
+  font-size: 16px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-right: 8px;
+  margin-right: 16px;
 `
 
 export const verticalSubMenuLabel = css`

packages/menu/src/vertical/vertical-sub-menu.tsx

@@ -50,9 +50,9 @@ export const VerticalSubMenu = forwardRef<HTMLDivElement, SubMenuProps>(
           {label && <span css={verticalSubMenuLabel}>{label}</span>}
           <div css={verticalDivider} />
           {children && opened ? (
-            <UpIcon flexShrink="0" ml="8px" fs="14px" />
+            <UpIcon flexShrink="0" ml="8px" fs="12px" />
           ) : (
-            <DownIcon flexShrink="0" ml="8px" fs="14px" />
+            <DownIcon flexShrink="0" ml="8px" fs="12px" />
           )}
         </div>
         <AnimatePresence>