Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update menu style & fix scroll icon bg #859

Merged
merged 1 commit into from
Feb 18, 2024
Merged

feat: update menu style & fix scroll icon bg #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions apps/storybook/stories/menu/menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {
component: Menu,
} as Meta

export const Vertical: StoryFn<MenuProps> = (args) => {
const Vertical: StoryFn<MenuProps> = (args) => {
return (
<>
<Menu
Expand Down Expand Up @@ -103,7 +103,7 @@ export const Vertical: StoryFn<MenuProps> = (args) => {
)
}

export const Horizontal: StoryFn<MenuProps> = (args) => {
const Horizontal: StoryFn<MenuProps> = (args) => {
return (
<>
<Menu
Expand Down Expand Up @@ -192,3 +192,12 @@ export const Horizontal: StoryFn<MenuProps> = (args) => {
</>
)
}

export const Basic: StoryFn<MenuProps> = (props) => {
return (
<>
<Vertical {...props} />
<Horizontal {...props} />
</>
)
}
6 changes: 2 additions & 4 deletions packages/menu/src/horizontal/horizontal-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -309,7 +307,7 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
}
}}
>
<PreviousIcon />
<PreviousIcon size="12" />
</motion.div>
)}
</AnimatePresence>
Expand All @@ -330,7 +328,7 @@ export const HorizontalMenu = forwardRef<HTMLDivElement, MenuProps>(
}
}}
>
<NextIcon />
<NextIcon size="12" />
</motion.div>
)}
</AnimatePresence>
Expand Down
2 changes: 1 addition & 1 deletion packages/menu/src/horizontal/horizontal-sub-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
18 changes: 14 additions & 4 deletions packages/menu/src/horizontal/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
11 changes: 5 additions & 6 deletions packages/menu/src/vertical/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function applyVerticalSubMenuContentContainer(
align-items: center;
width: 100%;
height: 48px;
padding: 0 24px;
padding: 0 16px;
flex-direction: row;
${colorStyle};
`
Expand Down Expand Up @@ -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`
Expand All @@ -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};
Expand All @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions packages/menu/src/vertical/vertical-sub-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading