radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.51k stars 791 forks source link

No [data-state] and [data-motion] attributes on NavigationMenu.Content #2759

Closed shota-f closed 6 months ago

shota-f commented 6 months ago

Bug report

There are [data-state] and [data-motion] attributes on the document(https://www.radix-ui.com/primitives/docs/components/navigation-menu#content). But NavigationMenu.Content doesn't seem to have them.

Current Behavior

[data-state] no [data-motion] no [data-orientation] ok

Screenshot of chrome dev tool

Focused node is the NavigationMenu.Content. And logs on console.

nav-menu-content-bug

Expected behavior

[data-state](important when forceMount is true) and [data-motion]

Reproducible example

  1. Copy the first codes(index.jsx and styles.css) on the document.
  2. Past them.
  3. Add "item-1" to value prop for NavigationMenu.Root and first NavigationMenu.Item for debug.
  4. Check the NavigationMenu.Content under the NavigationMenu.Viewport.
Software Name(s) Version
Radix Package(s) @radix-ui/react-navigation-menu 1.1.4
React n/a 18.2.20
Browser Google Chrome
Assistive tech
Node n/a
npm/yarn
Operating System
benoitgrelard commented 6 months ago

These attributes are present, that's what enables those animations you see in the demo here: https://www.radix-ui.com/primitives/docs/components/navigation-menu or in our storybook here: https://601857eb614bae0021c9b9dd-evgfcrkbbq.chromatic.com/?path=/story/components-navigationmenu--submenus

I will close this as I cannot reproduce your issue, but feel free to send a sandbox demonstrating your issue.

Kulsgam commented 1 week ago

{81482DD8-D39B-4358-BD0D-69F957F7A23C} This issue is present in the original codesandbox present in the docs

Here is the direct link