Skip to content

Commit

Permalink
Merge pull request #1275 from vtex/feat/menu-design
Browse files Browse the repository at this point in the history 
feat(menu): apply planned design specs
  • Loading branch information
@anitavincent
anitavincent authored Nov 17, 2023
2 parents 0411ef3 + 8ca5098 commit 6ddc7bb
Show file tree
Hide file tree
Showing 4 changed files with 251 additions and 10 deletions.
15 changes: 14 additions & 1 deletion packages/components/src/menu/menu-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,22 @@ import { MenuItem as BaseMenuItem } from '@ariakit/react'

export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
function MenuItem(props, ref) {
const { children, asChild = false, critical = false, ...otherProps } = props
const {
children,
asChild = false,
critical = false,
disabled = false,
...otherProps
} = props

return (
<BaseMenuItem
data-sl-menu-item
data-critical={critical}
data-disabled={disabled}
ref={ref}
render={asChild && (children as any)}
disabled={disabled}
{...otherProps}
>
{children}
Expand All @@ -31,4 +39,9 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
* @default false
*/
critical?: boolean
/**
* Wether is disabled
* @default false
*/
disabled?: boolean
}
25 changes: 17 additions & 8 deletions packages/components/src/menu/menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
background: var(--sl-bg);
color: var(--sl-color-fg);
outline: none;
border: var(--sl-border-strong);
border: var(--sl-border);
border-radius: var(--sl-border-radius-medium);
display: flex;
flex-direction: column;
padding: var(--sl-space-2);
gap: var(--sl-space-1);
padding: var(--sl-space-2) var(--sl-space-4);
z-index: var(--sl-z-10);
box-shadow: var(--sl-shadow-2);
min-width: 9.5rem;

&:focus-visible {
box-shadow: var(--sl-focus-ring-accent);
Expand All @@ -25,8 +26,8 @@
color: var(--sl-fg-muted);
padding: var(--sl-space-2) var(--sl-space-3);
border-radius: var(--sl-border-radius-medium);
font: var(--sl-text-action-font);
letter-spacing: var(--sl-text-action-letter-spacing);
font: var(--sl-text-emphasis-font);
letter-spacing: var(--sl-text-emphasis-letter-spacing);
gap: var(--sl-space-2);

&:hover {
Expand Down Expand Up @@ -61,11 +62,19 @@
box-shadow: var(--sl-focus-ring-critical);
}
}

&[data-disabled='true'] {
color: var(--sl-fg-disabled);
background: var(--sl-bg-muted-plain);
}
}

[data-sl-menu-separator] {
border: var(--sl-border);
margin-left: calc(var(--sl-space-2) * -1);
margin-right: calc(var(--sl-space-2) * -1);
border: none;
border-bottom: var(--sl-border);
margin-left: calc(var(--sl-space-4) * -1);
margin-right: calc(var(--sl-space-4) * -1);
margin-top: var(--sl-space-1);
margin-bottom: var(--sl-space-1);
}
}
1 change: 1 addition & 0 deletions packages/components/src/menu/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
data-sl-menu
ref={ref}
render={asChild && (children as any)}
gutter={4}
{...otherProps}
>
{children}
Expand Down
220 changes: 219 additions & 1 deletion packages/components/src/menu/stories/menu.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import '../../../dist/styles.min.css'
import '../menu.css'
import React from 'react'
import { IconCaretDown } from '@vtex/shoreline-icons'
import {
IconCaretDown,
IconDotsThreeVertical,
IconPencil,
IconTrash,
IconArchive,
} from '@vtex/shoreline-icons'

import {
Menu,
Expand All @@ -11,6 +17,8 @@ import {
MenuTrigger,
} from '../index'
import { Button } from '../../button'
import { IconButton } from '../../icon-button'
import { Stack } from '../../stack'

export default {
title: 'shoreline-components/menu',
Expand Down Expand Up @@ -53,3 +61,213 @@ export function Composition() {
</MenuProvider>
)
}

export function MoreActions() {
return (
<Stack>
<Stack direction="row">
<MenuProvider>
<MenuTrigger asChild>
<Button variant="primary">
<IconDotsThreeVertical /> More actions
</Button>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>

<MenuProvider>
<MenuTrigger asChild>
<IconButton variant="primary" label="more actions">
<IconDotsThreeVertical />
</IconButton>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>

<MenuProvider>
<MenuTrigger asChild>
<Button variant="primary" disabled>
<IconDotsThreeVertical /> More actions
</Button>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>
</Stack>

<Stack direction="row">
<MenuProvider>
<MenuTrigger asChild>
<Button variant="tertiary">
<IconDotsThreeVertical /> More actions
</Button>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>

<MenuProvider>
<MenuTrigger asChild>
<IconButton variant="tertiary" label="more actions">
<IconDotsThreeVertical />
</IconButton>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>

<MenuProvider>
<MenuTrigger asChild>
<Button variant="tertiary" disabled>
<IconDotsThreeVertical /> More actions
</Button>
</MenuTrigger>
<Menu>
<MenuItem>
<IconPencil /> Edit
</MenuItem>
<MenuItem>
<IconArchive />
Archive
</MenuItem>
<MenuSeparator />
<MenuItem critical>
<IconTrash />
Delete
</MenuItem>
</Menu>
</MenuProvider>
</Stack>
</Stack>
)
}

export function CustomLabel() {
return (
<Stack>
<MenuProvider>
<MenuTrigger asChild>
<Button variant="primary">
Create promotion <IconCaretDown />
</Button>
</MenuTrigger>
<Menu>
<MenuItem>Regular</MenuItem>
<MenuItem>Buy together</MenuItem>
<MenuItem>More for less</MenuItem>
<MenuItem>Progressive discount</MenuItem>
</Menu>
</MenuProvider>
<MenuProvider>
<MenuTrigger asChild>
<Button variant="tertiary">
Create promotion <IconCaretDown />
</Button>
</MenuTrigger>
<Menu>
<MenuItem>Regular</MenuItem>
<MenuItem>Buy together</MenuItem>
<MenuItem>More for less</MenuItem>
<MenuItem>Progressive discount</MenuItem>
</Menu>
</MenuProvider>
</Stack>
)
}

export function ItemVariants() {
return (
<Stack>
<MenuProvider>
<MenuTrigger asChild>
<Button variant="primary">
Create promotion <IconCaretDown />
</Button>
</MenuTrigger>
<Menu>
<MenuItem>Regular</MenuItem>
<MenuItem>Buy together</MenuItem>
<MenuItem>More for less</MenuItem>
<MenuItem disabled>Progressive discount</MenuItem>
</Menu>
</MenuProvider>
<MenuProvider>
<MenuTrigger asChild>
<Button variant="tertiary">
Create promotion <IconCaretDown />
</Button>
</MenuTrigger>
<Menu>
<MenuItem critical>Regular</MenuItem>
<MenuItem critical>Buy together</MenuItem>
<MenuItem critical>More for less</MenuItem>
<MenuItem critical disabled>
Progressive discount
</MenuItem>
</Menu>
</MenuProvider>
</Stack>
)
}

1 comment on commit 6ddc7bb

@vercel
Copy link

@vercel vercel bot commented on 6ddc7bb Nov 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shoreline-docs – ./packages/next-docs

shoreline-docs-git-main-admin-team.vercel.app
pvt-shoreline.vercel.app
shoreline-docs-admin-team.vercel.app

Please sign in to comment.