Menu:Item With Tooltip

Build 1080 on react-aria-deps-combined
1200px
Reviewing disabled
View latest build
ErrorBuild 1080 on react-aria-deps-combined
View Storybook
ErrorBuild 1080 on react-aria-deps-combined
View Storybook
  • Discussions
  • Interactions
Fail
Menu.stories.tsx
Unable to find role="tooltip"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="sc-idXgbr kBfjgZ root"
    data-font-display="block"
    id="cube-ui-kit-root"
    style="--cube-dynamic-viewport-height:900px;"
  >
    <div
      style="padding: 20px; width: 340px;"
    >
      <ul
        class="sc-lllmON ejBnQn"
        data-is-header=""
        data-qa="Menu"
        id="menu"
        role="menu"
        tabindex="-1"
      >
        <li
          class="sc-hLBbgP dJbUex"
        >
          Custom Icons
        </li>
        <li
          aria-checked="false"
          aria-labelledby="react-aria7206663313-8"
          class="sc-ezOQGI kRKSgY"
          data-is-focused=""
          data-is-hovered=""
          data-is-selectable=""
          data-key="red"
          data-qa="MenuItem-red"
          role="menuitemradio"
          tabindex="0"
        >
          <button
            class="sc-eDvSVe eIYcUu"
            data-is-focused=""
            data-is-hovered=""
            data-is-selectable=""
            data-is-selection-icon=""
            data-qa="MenuButton-red"
            data-size="small"
            data-theme="default"
            data-type="neutral"
            type="button"
          >
            <span
              class="sc-gswNZR jCkQQk itemLabel"
              data-qa="Text"
              id="react-aria7206663313-8"
            >
              <span
                aria-label="reload"
                class="anticon anticon-reload"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="reload"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
                  />
                </svg>
              </span>
            </span>
            <div
              class="sc-hLBbgP ksjXrd"
            >
              <span
                class="sc-gswNZR jCkQQk itemLabel"
                data-is-ellipsis=""
                data-qa="Text"
                id="react-aria7206663313-8"
              >
                #16C7B3AE-000113-000113
              </span>
            </div>
          </button>
        </li>
        <li
          aria-checked="false"
          aria-labelledby="react-aria7206663313-12"
          class="sc-ezOQGI kRKSgY"
          data-is-selectable=""
          data-key="orange"
          data-qa="MenuItem-orange"
          role="menuitemradio"
          tabindex="-1"
        >
          <button
            class="sc-eDvSVe eIYcUu"
            data-is-selectable=""
            data-is-selection-icon=""
            data-qa="MenuButton-orange"
            data-size="small"
            data-theme="default"
            data-type="neutral"
            type="button"
          >
            <span
              class="sc-gswNZR jCkQQk itemLabel"
              data-qa="Text"
              id="react-aria7206663313-12"
            >
              <span
                aria-label="book"
                class="anticon anticon-book"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="book"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-260 72h96v209.9L621.5 312 572 347.4V136zm220 752H232V136h280v296.9c0 3.3 1 6.6 3 9.3a15.9 15.9 0 0022.3 3.7l83.8-59.9 81.4 59.4c2.7 2 6 3.1 9.4 3.1 8.8 0 16-7.2 16-16V136h64v752z"
                  />
                </svg>
              </span>
            </span>
            <div
              class="sc-hLBbgP ksjXrd"
            >
              <span
                class="sc-gswNZR jCkQQk itemLabel"
                data-is-ellipsis=""
                data-qa="Text"
                id="react-aria7206663313-12"
              >
                #16C7B3AE
              </span>
            </div>
          </button>
        </li>
      </ul>
    </div>
    <div
      aria-live="polite"
      class="sc-ipEyDJ kBRIKt"
      data-qa="NotificationsBar"
      role="region"
      tabindex="0"
    />
  </div>
</div>
View in Storybook
Chrome 105
1184x884
Linux Linux Ubuntu 20.04.4
698145 on react-aria-deps-combined
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: ignoredException
    at https://626ee6db91d1c8004a912249-fjfdamrnwj.capture-loopback.chromatic.com/sb-preview/runtime.js:4:91104