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.

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

possibility to add class for each menu-item item #182

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

## [2.35.3] - 2023-06-08

## [2.35.2] - 2023-04-25

### Fixed
2 changes: 2 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -42,6 +42,7 @@ _Example:_
"id": "menu-item-shop",
"type": "custom",
"highlight": false,
"blockClassItem": "custom-class"
"itemProps": {
"type": "internal",
"href": "#",
@@ -136,6 +137,7 @@ The available `menu-item` block props are as follows:
| Prop name | Type | Description | Default value |
| ----------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `type` | `string` | Menu item type, either `category` or `custom` | `category` |
| `blockClassItem` | `string` | you can pass a class for each menu item | `undefined` |
| `id` | `string` | Menu item ID | `undefined` |
| `highlight` | `boolean` | Whether the item has a highlight | `undefined` |
| `iconPosition` | `string` | Icon position relative to the menu item text. Either to the `left` or `right`. | `left` |
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "menu",
"vendor": "vtex",
"version": "2.35.2",
"version": "2.35.3",
"title": "VTEX Menu",
"description": "A Menu Component",
"mustUpdateAt": "2019-04-03",
10 changes: 8 additions & 2 deletions react/Menu.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ interface MenuSchema {
title?: MenuItemSchema
additionalDef?: string
blockClass?: string

items?: MenuItemSchema[]
experimentalOptimizeRendering?: boolean
classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
@@ -74,8 +75,13 @@ const Menu: StorefrontFunctionComponent<MenuSchema> = ({

const menuItems = itemsProps
.filter(item => item.itemProps)
.map(({ itemProps: { text }, itemProps, ...rest }) => (
<MenuItem key={text} itemProps={itemProps} {...rest} />
.map(({ itemProps: { text }, itemProps, blockClassItem, ...rest }) => (
<MenuItem
key={text}
itemProps={itemProps}
blockClassItem={blockClassItem}
{...rest}
/>
))

return (
13 changes: 10 additions & 3 deletions react/MenuItem.tsx
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ export interface MenuItemSchema {
highlight: boolean
itemProps: CategoryItemSchema | CustomItemSchema
onMountBehavior?: 'open' | 'closed'
blockClass?: string
blockClassItem?: string
experimentalOptimizeRendering?: boolean
classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}
@@ -79,6 +79,7 @@ const submenuReducer: Reducer<SubmenuState, SubmenuAction> = (
const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
children,
onMountBehavior = 'closed',
blockClassItem,
...props
}) => {
const { experimentalOptimizeRendering } = useContext(MenuContext)
@@ -168,7 +169,12 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
event.stopPropagation()
}}
>
<Item {...props} accordion active={isActive} />
<Item
blockClassItem={blockClassItem}
accordion
active={isActive}
{...props}
/>
</div>
{(hasBeenActive || !experimentalOptimizeRendering) && (
/* Collapsible menus need to still persist after being open,
@@ -195,7 +201,8 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
setHovered(false)
}}
>
<Item {...props} active={isActive} />
<Item blockClassItem={blockClassItem} {...props} active={isActive} />

{(isActive || !experimentalOptimizeRendering) && (
<>
<ExtensionPoint id="submenu" isOpen={isActive} />
13 changes: 12 additions & 1 deletion react/components/CustomItem.tsx
Original file line number Diff line number Diff line change
@@ -7,10 +7,20 @@ import StyledLink, { StyledLinkProps } from './StyledLink'
const CustomItem: FunctionComponent<
CustomItemProps & { intl: any }
> = props => {
const { type, noFollow, tagTitle, text, href, intl, ...rest } = props
const {
type,
noFollow,
tagTitle,
text,
href,
intl,
blockClassItem,
...rest
} = props

return (
<StyledLink
blockClassItem={blockClassItem}
{...rest}
to={href}
title={formatIOMessage({ id: tagTitle, intl })}
@@ -30,6 +40,7 @@ export interface CustomItemSchema {
noFollow: boolean
tagTitle: string
text: string
blockClassItem?: string
}

export default injectIntl(CustomItem)
5 changes: 3 additions & 2 deletions react/components/Item.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ const menuItemTypes = {
}

const Item: FunctionComponent<ItemProps> = props => {
const { type, itemProps, ...rest } = props
const { type, itemProps, blockClassItem, ...rest } = props

// TODO: fix
const Component = menuItemTypes[type] as any
@@ -24,13 +24,14 @@ const Item: FunctionComponent<ItemProps> = props => {
return null
}

return <Component {...rest} {...itemProps} />
return <Component blockClassItem={blockClassItem} {...rest} {...itemProps} />
}

interface ItemProps extends StyledLinkProps {
type: 'category' | 'custom'
accordion?: boolean
itemProps: CategoryItemSchema | CustomItemSchema
blockClassItem?: string
}

export default Item
7 changes: 7 additions & 0 deletions react/components/StyledLink.tsx
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ const CSS_HANDLES = [
'styledLinkContainer',
'styledLinkContent',
'accordionIcon',
'styledLink-custom',
] as const

const defaultTypography: Record<number, string> = {
@@ -40,14 +41,18 @@ const StyledLink: FunctionComponent<StyledLinkProps> = props => {
iconProps,
iconPosition,
treePath,
blockClass,
blockClassItem,
...rest
} = props

const hasLink = to && to !== '#'

const linkClassNames = classNames(
withModifiers('styledLink', highlight ? 'highlight' : ''),
withModifiers('styledLink-custom', blockClassItem ?? ''),
'no-underline pointer',

{
[typography]: true,
'c-emphasis': highlight,
@@ -119,6 +124,8 @@ export interface StyledLinkProps extends LinkProps {
treePath?: string
iconId?: string
iconProps?: IconProps
blockClass?: string
blockClassItem?: string
iconPosition?: 'left' | 'right'
}

Loading