SidebarTopButton:Is Running

Build 1594 on dark-mode-adjustments
Light
Reviewing disabled
View latest build
ErrorBuild 1594 on dark-mode-adjustments
View Storybook
ErrorBuild 1594 on dark-mode-adjustments
View Storybook
  • Discussions
  • Interactions
Fail
SidebarTopButton.stories.tsx
Unable to find an element with the text: 🏗 Building your Storybook. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="sb-main-fullscreen sb-show-main"
  style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
  
  
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <pre
      class="sb-heading"
      id="error-message"
    />
    
  
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
    

  </div>
  

  
  <div
    id="storybook-root"
  >
    <div
      class="css-17fv6jh"
    >
      <button
        aria-label="Stop tests"
        class="css-1sewy9l"
      >
        <svg
          fill="none"
          height="14"
          style="width: 10px;"
          viewBox="0 0 14 14"
          width="14"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 1.504a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11z"
            fill="currentColor"
          />
        </svg>
        <svg
          class="css-6ylr92"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle />
        </svg>
        <svg
          class="css-a5x3z0"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
        <svg
          class="css-192sw2u"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
      </button>
    </div>
  </div>
  
  
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  
  



  <div
    class="css-1xu5hf8"
    data-popper-escaped="false"
    data-popper-interactive="false"
    data-popper-placement="bottom"
    data-popper-reference-hidden="false"
    data-testid="tooltip"
    style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 36px);"
  >
    <div
      class="css-19jk50d"
    >
      <div>
        <span>
          🏗
           
          Building your Storybook...
        </span>
      </div>
      <div
        class="css-1fkraim"
      >
        <div
          class="css-dkb40q"
          style="width: 20%;"
        />
      </div>
    </div>
  </div>
</body>

Ignored nodes: comments, script, style
<body
  class="sb-main-fullscreen sb-show-main"
  style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
  
  
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <pre
      class="sb-heading"
      id="error-message"
    />
    
  
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
    

  </div>
  

  
  <div
    id="storybook-root"
  >
    <div
      class="css-17fv6jh"
    >
      <button
        aria-label="Stop tests"
        class="css-1sewy9l"
      >
        <svg
          fill="none"
          height="14"
          style="width: 10px;"
          viewBox="0 0 14 14"
          width="14"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 1.504a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11z"
            fill="currentColor"
          />
        </svg>
        <svg
          class="css-6ylr92"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle />
        </svg>
        <svg
          class="css-a5x3z0"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
        <svg
          class="css-192sw2u"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
      </button>
    </div>
  </div>
  
  
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  
  



  <div
    class="css-1xu5hf8"
    data-popper-escaped="false"
    data-popper-interactive="false"
    data-popper-placement="bottom"
    data-popper-reference-hidden="false"
    data-testid="tooltip"
    style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 36px);"
  >
    <div
      class="css-19jk50d"
    >
      <div>
        <span>
          🏗
           
          Building your Storybook...
        </span>
      </div>
      <div
        class="css-1fkraim"
      >
        <div
          class="css-dkb40q"
          style="width: 20%;"
        />
      </div>
    </div>
  </div>
</body>
View in Storybook
Chrome 105
24x28
Linux Linux Ubuntu 20.04.4
a998ab on dark-mode-adjustments
Caught exception in play function

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

Error: Unable to find an element with the text: 🏗 Building your Storybook. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="sb-main-fullscreen sb-show-main"
  style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
  
  
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <pre
      class="sb-heading"
      id="error-message"
    />
    
  
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
    

  </div>
  

  
  <div
    id="storybook-root"
  >
    <div
      class="css-17fv6jh"
    >
      <button
        aria-label="Stop tests"
        class="css-1sewy9l"
      >
        <svg
          fill="none"
          height="14"
          style="width: 10px;"
          viewBox="0 0 14 14"
          width="14"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 1.504a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11z"
            fill="currentColor"
          />
        </svg>
        <svg
          class="css-6ylr92"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle />
        </svg>
        <svg
          class="css-a5x3z0"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
        <svg
          class="css-192sw2u"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            stroke-dashoffset="50.26548245743669"
          />
        </svg>
      </button>
    </div>
  </div>
  
  
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  
  



  <div
    class="css-1xu5hf8"
    data-popper-escaped="false"
    data-popper-interactive="false"
    data-popper-placement="bottom"
    data-popper-reference-hidden="false"
    data-testid="tooltip"
    style="position: absolute; inset: 0px auto auto 0px; transform: translate(8px, 36px);"
  >
    <div
      class="css-19jk50d"
    >
      <div>
        <span>
          🏗
           
          Building your Storybook...
        </span>
      </div>
      <div
        class="css-1fkraim"
      >
        <div
          class="css-dkb40q"
          style="width: 20%;"
        />
      </div>
    </div>
  </div>
</body>
    at Yl (https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/playAll-370530ab.js:42:3387)
    at https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/playAll-370530ab.js:50:236
    at mn.invoke (https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/preview-491c2890.js:27:9090)
    at mn.track (https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/preview-491c2890.js:27:6385)
    at Object.findAllByText (https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/preview-491c2890.js:27:5657)
    at https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/SidebarTopButton.stories-4819810b.js:1:1567
    at async Promise.all (index 0)
    at async https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/assets/playAll-370530ab.js:73:1532
    at async https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588
    at async StoryRender.runPhase (https://6480e1b0042842f149cfd74c-tyloheiahw.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912)