misc: Reporter redesign #31914
misc: Reporter redesign #31914
Conversation
mabela416
changed the title
cypress
|
||||||||||||||||||||||||||||||||||||||||
| Project |
cypress
|
| Branch Review |
mabel/issue-31677-reporter-redesign
|
| Run status |
|
| Run duration | 18m 30s |
| Commit |
|
| Committer | mabela416 |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
1
|
Pending
|
28
|
Skipped
|
0
|
Passing
|
587
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
0%
|
|
|---|---|
|
Untested elements
|
4
|
|
Tested elements
|
0
|
Accessibility
97.09%
|
|
|---|---|
|
Failed rules
|
0 critical
1 serious
0 moderate
0 minor
|
|
Failed elements
|
4
|
There was a problem hiding this comment.
@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.
On hover of commands, there is a slight rounded corner on all of the right corners, when there shouldn't be for corners that are not first/last.
Is it possible to have this bottom left corner look more rounded when the test is open?
Is this the right hover state for tests? I assumed it would be this lighter focus style.
This juxtaposition of the failure block with the test logs looks strange to me.
When you hover over a describe, the icon changes to an arrow, but when you click the describe - that arrow icon doesn't rotate to show the described as closed.
Also, the icon stays that way after click/focus and does not go back to the old icon when I hover away from the describe. Seems odd.
The 'Open in IDE' button when hovering over a Before Each doesn't seem centered.
The jump that the test does from the 1px border to the 2px border doesn't feel fluid.
Screen.Recording.2025-06-23.at.12.00.38.PM.mov
We need some margin-bottom on the tests list - when you scroll all the way down it sits there so close to the bottom edge like it's not the end.
I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.
The attempt styling needs to be accounted for - the lines connecting them look strange here.
This describe icon feels strange flashing back and forth between pending/queued? Maybe it's not too weird, I don't know.
Screen.Recording.2025-06-23.at.12.10.12.PM.mov
This blue line that shows on the commandTimeout - when it burns down should have that highlighted gray color, not the dark black color.
Screen.Recording.2025-06-23.at.12.12.59.PM.mov
Yeah this is the figma for the test hover state https://www.figma.com/design/XYBgOykHfLCi1yT4Va7GLO/Studio-Test-generation?node-id=3607-170837&t=33uO9ue4ojx1TNL4-4 The lighter focus style is only for when the user focuses the test by tabbing |
This is part of the design here
|
There was a problem hiding this comment.
@mabela416 Is this spacing accurate when all the describes are collapsed? Seems like some unnecessary
vertical spacing in between.
Some strange states in Studio I think (I know this will go away fairly soon though)
-
Is this how this button looks today or did it change?
-
I don't think the describe here should show the purple left line
-
This 'interact with your site' has a weird blue line on the left
This hover over hooks looks a bit strange with it not taking up the full width or not having rounded corners like others. Maybe it's fine, just want to check.
Also - the open in IDE icon doesn't seem centered with the text
The test is still inching to left and right by 1px when opening/collapsing
Screen.Recording.2025-06-25.at.3.57.38.PM.mov
This stack trace error seems like it uses more vertical height than it needs to - just confirm design.
Clicking on skipped tests opens this weird empty space
Screen.Recording.2025-06-25.at.4.04.32.PM.mov
| } | ||
|
|
||
| .controls-container-studio { | ||
| // TODO: change this to 32px for the studio redesign |
There was a problem hiding this comment.
is there an issue we can link to for this?
| @@ -46,9 +51,17 @@ const RunnableHeader: React.FC<RunnableHeaderProps> = observer(({ spec, statsSto | |||
| relativeFile: relativeSpecPath, | |||
| } | |||
|
|
|||
| const openInIDE = () => { | |||
There was a problem hiding this comment.
nit: should use the naming convention for components here and render it using JSX notation
| const openInIDE = () => { | |
| const OpenInIDE = () => { |
...
<OpenInIDE />
I cleaned up this purple link on the describe. For my next story I'll be cleaning up this view |
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
This reverts commit 3b59a94.
…ng css styles at all
mabela416
force-pushed
the
mabel/issue-31677-reporter-redesign
branch
from
ff07762 to
ec7b787
Compare
mabela416
dismissed
jennifer-shehane’s stale review
Waiting on Ryan's approval instead since Jennifer is out
Additional details
Steps to test
Go through different states of the app and make sure the styles match the figma
Passed
Error state
Running
Paused
Focused state only by tabbing
Suite
Test
Hover state
Header
Suite open
Suite closed
Test
Debug mode
Open test preferences
How has the user experience changed?
PR Tasks
cypress-documentation?type definitions?