feat(DropdownMenu/ContextMenu): handle color field in items

[hywax]

🔗 Linked issue

Resolves #2339

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

Let me know if you need help for the styles 😊

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2510

commit: ac6161f

[hywax]

@benjamincanac thanks for the offer of help! But I was able to figure out the styles myself.

Base	Hover

neutral - item without styles, repeats current behavior

[benjamincanac]

Amazing job! I would put the default styles inside the neutral color to avoid unnecessary merging.

[hywax]

Amazing job! I would put the default styles inside the neutral color to avoid unnecessary merging.

I tried it this way, but if specify

defaultVariants: {
  size: 'md',
+  color: 'neutral'
}

Then it will not be applied since defaultVariants applies to props, not internal structures.

We will have to specify fallback wherever we specify color

on top component:
const itemColorDefault = ref(theme.defaultVariants.color)

apply classes:
{ color: item?.color ?? itemColorDefault } <- there are 8 such places in one component

[benjamincanac]

Could you also add in the tests a color on one of the items? 🙂

[hywax]

Done 🙂

[benjamincanac]

Thanks @hywax! 😊