addon-jest test total and time total overlap "Todo" text on small screens.

[afebbraro]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://storybookjs.now.sh/official-storybook/?path=/story/addons-jest--with-tests' in a narrow width browser.
2. Click on the Tests panel.
3. Scroll down to see the tests panel.
4. See the total number of tests and total time covering up the "Todo" text.

Expected behavior The text does not overlap.

Screenshots If applicable, add screenshots to help explain your problem. Code snippets If applicable, add code samples to help explain your problem.

System: Please paste the results of npx -p @storybook/cli@next sb info here.

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.2
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.5 => 5.2.5
    @storybook/addon-actions: ^5.2.5 => 5.2.5
    @storybook/addon-docs: ^5.2.5 => 5.2.5
    @storybook/addon-jest: ^5.2.5 => 5.2.5
    @storybook/addon-knobs: ^5.2.5 => 5.2.5
    @storybook/addon-links: ^5.2.5 => 5.2.5
    @storybook/addons: ^5.2.5 => 5.2.5
    @storybook/react: ^5.2.5 => 5.2.5
    @storybook/theming: ^5.2.5 => 5.2.5

Additional context I looked into this a little bit and discovered that the Accessibility addon has solved this issue by dropping down the "highlight results" checkbox to the next line. The total tests and total time for for the addon-jest is absolutely positioned and seems to be setup a bit differently than that addon.

[garyvh2]

Hi @shilman,

I've had a look around the Panel.tsx component in the Jest Addon.

I could try to play around with the styles definition for SuiteHead so it follows a similar logic to SuiteTotals in order to adjust certain styles based on width.

Are you ok with this look?

Or, are you looking for something else, I could try playing around with other possible designs, but at the moment this seems the easiest, as other implementations might require changes on the component structure.

If we apply the design from above, we might as well show the assertionResults and assertionTime on every width as it won't be on the same position as the tabs.

Current implementation hides the assertionResults on less than 325px, and hides the assertionTime on less than 280px, as you can see here.

There's also a problem with devices close to 600px, as you can see here:

Since 700px is already starting to overlap the tabs

The only problem would be that such implementation wouldn't match with the a11y tests report in comparison with the highlights checkbox (I checked if it was possible to apply the same solution as with a11y addon but they differ on how the tabs are implemented, a11y uses TabsWrapper which is just a div, and jest addon uses TabsState)

Tell me what you think, or if you have any proposals on the design for devices with smaller screen.

Regards.

[shilman]

@garyvh2 This looks like an improvement to me -- great stuff!!! 👏

I'll defer to @CodeByAlex's opinion, tho, as he's currently maintaining this addon... 😅

[CodeByAlex]

Hey @garyvh2 - you’re right in that the a11y addon still uses a custom implementation. Using the tabs component on addons is what we want to move to so if you can figure out a solution that will work with that, that would be great. I think as long as the bar is in line on desktop, I’m cool with it. @domyen what are your thoughts on this design?

[domyen]

Ideally, we'd use the same Tab component in Jest and A11y addons. I think the a11y addon has the correct design for this case so further investment in css for just this addon would end up diverging both further.

@garyvh2 Would you be keen to help consolidate the tab implementations to solve this once and for all for everyone? I'd imagine it'd be a standard tab component + a prop that allowed you to render a node in the top right.

[garyvh2]

@domyen sounds good, so we are looking for a standard implementation on TabsState component from the lib, with something like what you mentioned above?

I'll work on a possible solution integrating both addons with the same component.