SidebarBottom:Dynamic Height

Build 15701 on testing-module-settings
1200px
Reviewing disabled
View latest build
chromechrome
Build 15701 on testing-module-settings
View Storybook
ErrorBuild 15701 on testing-module-settings
View Storybook
Fail
SidebarBottom.stories.tsx
Unable to find a label with the text of: /Expand/

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    style="position: relative; width: 100vw; height: 100vh;"
  >
    <div
      style="height: 300px; background: orangered;"
    />
    <div
      class="css-1ixbp0l"
      id="sidebar-bottom-spacer"
    />
    <div
      class="css-scdnn8"
      id="sidebar-bottom-wrapper"
    >
      <div
        class="css-1pxfmht"
      />
      <div
        class="css-19pafn2"
        id="storybook-testing-module"
      >
        <div
          class="css-1u2j0qv"
        >
          <div
            class="css-1d56hfi"
            data-testid="collapse"
            style="transition: max-height 0ms ease 0s; display: block; max-height: 500px;"
          >
            <div
              class="css-j7qwjs"
            >
              <div
                class="css-1e3qj69"
                data-module-id="custom"
              >
                <div
                  style="height: 100px; transition: height 1s ease 0s; display: flex; align-items: center; justify-content: center; background-color: hotpink;"
                >
                  CUSTOM CONTENT WITH DYNAMIC HEIGHT
                </div>
              </div>
            </div>
          </div>
          <div
            class="css-poqyku"
          >
            <button
              class="css-18rvurk"
            >
              <svg
                fill="none"
                height="14"
                viewBox="0 0 14 14"
                width="14"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M5.2 10.88L11.668 7 5.2 3.12v7.76zM4 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L5.212 1.727A.8.8 0 004 2.413zM1.5 1.6a.6.6 0 01.6.6v9.6a.6.6 0 11-1.2 0V2.2a.6.6 0 01.6-.6z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
                <path
                  clip-rule="evenodd"
                  d="M.963 1.932a.6.6 0 01.805-.268l1 .5a.6.6 0 01-.536 1.073l-1-.5a.6.6 0 01-.269-.805zM3.037 11.132a.6.6 0 01-.269.805l-1 .5a.6.6 0 01-.536-1.073l1-.5a.6.6 0 01.805.268z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              Run tests
            </button>
            <div
              class="css-13pthy0"
            >
              <button
                aria-label="Collapse testing module"
                class="css-jci5v"
                id="testing-module-collapse-toggle"
              >
                <svg
                  fill="none"
                  height="14"
                  style="transform: rotate(180deg); transition: transform 250ms ease 0s; will-change: auto;"
                  viewBox="0 0 14 14"
                  width="14"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
                    fill="currentColor"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
View in Storybook
Chrome 121
1200x900
Linux Linux Ubuntu 20.04.4
73e55e on testing-module-settings
Caught exception in play function

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

TestingLibraryElementError: Unable to find a label with the text of: /Expand/

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    style="position: relative; width: 100vw; height: 100vh;"
  >
    <div
      style="height: 300px; background: orangered;"
    />
    <div
      class="css-1ixbp0l"
      id="sidebar-bottom-spacer"
    />
    <div
      class="css-scdnn8"
      id="sidebar-bottom-wrapper"
    >
      <div
        class="css-1pxfmht"
      />
      <div
        class="css-19pafn2"
        id="storybook-testing-module"
      >
        <div
          class="css-1u2j0qv"
        >
          <div
            class="css-1d56hfi"
            data-testid="collapse"
            style="transition: max-height 0ms ease 0s; display: block; max-height: 500px;"
          >
            <div
              class="css-j7qwjs"
            >
              <div
                class="css-1e3qj69"
                data-module-id="custom"
              >
                <div
                  style="height: 100px; transition: height 1s ease 0s; display: flex; align-items: center; justify-content: center; background-color: hotpink;"
                >
                  CUSTOM CONTENT WITH DYNAMIC HEIGHT
                </div>
              </div>
            </div>
          </div>
          <div
            class="css-poqyku"
          >
            <button
              class="css-18rvurk"
            >
              <svg
                fill="none"
                height="14"
                viewBox="0 0 14 14"
                width="14"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M5.2 10.88L11.668 7 5.2 3.12v7.76zM4 2.414v9.174a.8.8 0 001.212.686l7.645-4.587a.8.8 0 000-1.372L5.212 1.727A.8.8 0 004 2.413zM1.5 1.6a.6.6 0 01.6.6v9.6a.6.6 0 11-1.2 0V2.2a.6.6 0 01.6-.6z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
                <path
                  clip-rule="evenodd"
                  d="M.963 1.932a.6.6 0 01.805-.268l1 .5a.6.6 0 01-.536 1.073l-1-.5a.6.6 0 01-.269-.805zM3.037 11.132a.6.6 0 01-.269.805l-1 .5a.6.6 0 01-.536-1.073l1-.5a.6.6 0 01.805.268z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              Run tests
            </button>
            <div
              class="css-13pthy0"
            >
              <button
                aria-label="Collapse testing module"
                class="css-jci5v"
                id="testing-module-collapse-toggle"
              >
                <svg
                  fill="none"
                  height="14"
                  style="transform: rotate(180deg); transition: transform 250ms ease 0s; will-change: auto;"
                  viewBox="0 0 14 14"
                  width="14"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
                    fill="currentColor"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    at Object.getElementError (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:137:284)
    at xt (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:161:231)
    at https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:151:4154
    at https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-ee31b4a8.js:159:386
    at Rl.invoke (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:8791)
    at Rl.track (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:5925)
    at Object.getByLabelText (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/index-28297db0.js:48:5198)
    at play (https://635781f3500dd2c49e189caf-ffknmcyxlm.capture-loopback.chromatic.com/assets/SidebarBottom.stories-919ccf24.js:76:2141)