Skip to content

Commit 4bb6f7b

Browse files
chrisbreidingchrisbreiding
authored
internal: Update reporter stats and controls styles (#32207)
1 parent 86b6865 commit 4bb6f7b

File tree

9 files changed

+133
-169
lines changed

9 files changed

+133
-169
lines changed

‎packages/app/cypress/e2e/reporter_header.cy.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,18 @@ describe('Reporter Header', () => {
5555
})
5656

5757
it('clicking the down arrow will open a panel showing Testing Preferences', () => {
58-
cy.get('.testing-preferences-toggle').trigger('mouseover')
58+
cy.get('[data-cy=testing-preferences-toggle]').trigger('mouseover')
5959
cy.get('.cy-tooltip').should('have.text', 'Open Testing Preferences')
6060

6161
cy.get('.testing-preferences').should('not.exist')
62-
cy.get('.testing-preferences-toggle').should('not.have.class', 'open').click()
63-
cy.get('.testing-preferences-toggle').should('have.class', 'open')
62+
cy.get('[data-cy=testing-preferences-toggle]').click()
6463
cy.get('.testing-preferences').should('be.visible')
65-
cy.get('.testing-preferences-toggle').click()
66-
cy.get('.testing-preferences-toggle').should('not.have.class', 'open')
64+
cy.get('[data-cy=testing-preferences-toggle]').click()
6765
cy.get('.testing-preferences').should('not.exist')
6866
})
6967

7068
it('will show a toggle beside the auto-scrolling option', () => {
71-
cy.get('.testing-preferences-toggle').click()
69+
cy.get('[data-cy=testing-preferences-toggle]').click()
7270
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'true')
7371
cy.get(switchSelector).click()
7472
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'false')
@@ -97,7 +95,7 @@ describe('Reporter Header', () => {
9795
})
9896
})
9997

100-
cy.get('.testing-preferences-toggle').click()
98+
cy.get('[data-cy=testing-preferences-toggle]').click()
10199
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'true')
102100
})
103101
})

‎packages/reporter/cypress/e2e/header.cy.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,24 +106,21 @@ describe('header', () => {
106106
describe('preferences menu', () => {
107107
it('can be toggled', () => {
108108
cy.get('.testing-preferences').should('not.exist')
109-
cy.get('.testing-preferences-toggle').should('not.have.class', 'open')
110-
cy.get('.testing-preferences-toggle').click()
111-
cy.get('.testing-preferences-toggle').should('have.class', 'open')
109+
cy.get('[data-cy=testing-preferences-toggle]').click()
112110
cy.get('.testing-preferences').should('be.visible')
113-
cy.get('.testing-preferences-toggle').click()
114-
cy.get('.testing-preferences-toggle').should('not.have.class', 'open')
111+
cy.get('[data-cy=testing-preferences-toggle]').click()
115112
cy.get('.testing-preferences').should('not.exist')
116113
})
117114

118115
it('has tooltip', () => {
119-
cy.get('.testing-preferences-toggle').trigger('mouseover')
116+
cy.get('[data-cy=testing-preferences-toggle]').trigger('mouseover')
120117
cy.get('.cy-tooltip').should('have.text', 'Open Testing Preferences')
121118
})
122119

123120
it('shows when auto-scrolling is enabled and can disable it', () => {
124121
const switchSelector = '[data-cy=auto-scroll-switch]'
125122

126-
cy.get('.testing-preferences-toggle').click()
123+
cy.get('[data-cy=testing-preferences-toggle]').click()
127124
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'true')
128125
cy.get(switchSelector).click()
129126
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'false')
@@ -132,7 +129,7 @@ describe('header', () => {
132129
it('can be toggled with shortcut', () => {
133130
const switchSelector = '[data-cy=auto-scroll-switch]'
134131

135-
cy.get('.testing-preferences-toggle').click()
132+
cy.get('[data-cy=testing-preferences-toggle]').click()
136133
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'true')
137134
cy.get('body').type('a').then(() => {
138135
cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'false')
@@ -141,7 +138,7 @@ describe('header', () => {
141138

142139
it('the auto-scroll toggle emits save:state event when clicked', () => {
143140
cy.spy(runner, 'emit')
144-
cy.get('.testing-preferences-toggle').click()
141+
cy.get('[data-cy=testing-preferences-toggle]').click()
145142
cy.get('[data-cy=auto-scroll-switch]').click()
146143
cy.wrap(runner.emit).should('be.calledWith', 'save:state')
147144
cy.percySnapshot()

‎packages/reporter/cypress/e2e/shortcuts.cy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,11 @@ describe('shortcuts', function () {
118118

119119
it('toggles auto-scrolling', () => {
120120
cy.get('body').type('a')
121-
cy.get('.testing-preferences-toggle').click()
121+
cy.get('[data-cy=testing-preferences-toggle]').click()
122122
cy.get('[data-cy=auto-scroll-switch]').invoke('attr', 'aria-checked').should('eq', 'false')
123-
cy.get('.testing-preferences-toggle').click()
123+
cy.get('[data-cy=testing-preferences-toggle]').click()
124124
cy.get('body').type('a')
125-
cy.get('.testing-preferences-toggle').click()
125+
cy.get('[data-cy=testing-preferences-toggle]').click()
126126
cy.get('[data-cy=auto-scroll-switch]').invoke('attr', 'aria-checked').should('eq', 'true')
127127
})
128128

‎packages/reporter/src/header/controls.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
1-
import cs from 'classnames'
21
import { action } from 'mobx'
32
import { observer } from 'mobx-react'
43
import React from 'react'
4+
import Button from '@cypress-design/react-button'
55
// @ts-ignore
66
import Tooltip from '@cypress/react-tooltip'
77

88
import defaultEvents, { Events } from '../lib/events'
99
import type { AppState } from '../lib/app-state'
1010

11-
import ChevronDownIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x16.svg'
12-
import ChevronUpIcon from '@packages/frontend-shared/src/assets/icons/chevron-up-small_x16.svg'
13-
import { IconActionNext, IconActionPlayLarge, IconActionRestart, IconActionStopCircle } from '@cypress-design/react-icon'
11+
import { IconChevronDownSmall, IconChevronUpSmall, IconActionNext, IconActionPlayLarge, IconActionRestart, IconActionStopCircle } from '@cypress-design/react-icon'
1412

1513
const iconStrokeColor = 'gray-500'
16-
1714
const iconFillColor = 'gray-900'
1815

19-
const ifThen = (condition: boolean, component: React.ReactNode) => (
20-
condition ? component : null
21-
)
22-
2316
interface Props {
2417
events?: Events
2518
appState: AppState
@@ -34,56 +27,66 @@ const Controls: React.FC<Props> = observer(({ events = defaultEvents, appState,
3427
}
3528

3629
return (
37-
<div className={cs({ 'controls-container-studio': appState.studioActive, 'controls-container': !appState.studioActive })}>
30+
<div className='controls'>
3831
{displayPreferencesButton && (
3932
<Tooltip placement='bottom' title={<p>Open Testing Preferences</p>} className='cy-tooltip'>
40-
<button
41-
aria-label='Open testing preferences'
42-
className={cs('testing-preferences-toggle', { 'open': appState.isPreferencesMenuOpen })}
43-
onClick={action('toggle:preferences:menu', togglePreferencesMenu)}
44-
>
45-
{appState.isPreferencesMenuOpen ? (
46-
<ChevronUpIcon />
47-
) : (
48-
<ChevronDownIcon />
49-
)}
50-
</button>
33+
<div>
34+
<Button
35+
size='20'
36+
variant='outline-dark'
37+
aria-label='Open testing preferences'
38+
data-cy='testing-preferences-toggle'
39+
onClick={action('toggle:preferences:menu', togglePreferencesMenu)}
40+
>
41+
{appState.isPreferencesMenuOpen ? (
42+
<IconChevronUpSmall strokeColor='gray-500' />
43+
) : (
44+
<IconChevronDownSmall strokeColor='gray-500' />
45+
)}
46+
</Button>
47+
</div>
5148
</Tooltip>
5249
)}
53-
<div className='controls'>
54-
{ifThen(appState.isPaused, (
55-
<Tooltip placement='bottom' title={<p>Resume <span className='kbd'>C</span></p>} className='cy-tooltip'>
56-
<button aria-label='Resume' className='play' onClick={emit('resume')}>
50+
{appState.isPaused && (
51+
<Tooltip placement='bottom' title={<p>Resume <span className='kbd'>C</span></p>} className='cy-tooltip'>
52+
<div>
53+
<Button size='20' variant='outline-dark' aria-label='Resume' className='play' onClick={emit('resume')}>
5754
<IconActionPlayLarge size='16' strokeColor={iconStrokeColor} fillColor={iconFillColor} />
58-
</button>
59-
</Tooltip>
60-
))}
61-
{ifThen(appState.isRunning && !appState.isPaused, (
62-
<Tooltip placement='bottom' title={<p>Stop Running <span className='kbd'>S</span></p>} className='cy-tooltip'>
63-
<button aria-label='Stop' className='stop' onClick={emit('stop')}>
55+
</Button>
56+
</div>
57+
</Tooltip>
58+
)}
59+
{appState.isRunning && !appState.isPaused && (
60+
<Tooltip placement='bottom' title={<p>Stop Running <span className='kbd'>S</span></p>} className='cy-tooltip'>
61+
<div>
62+
<Button size='20' variant='outline-dark' aria-label='Stop' className='stop' onClick={emit('stop')}>
6463
<IconActionStopCircle size='16' strokeColor={iconStrokeColor} />
65-
</button>
66-
</Tooltip>
67-
))}
68-
{ifThen(!appState.isRunning, (
69-
<Tooltip placement='bottom' title={<p>Run All Tests <span className='kbd'>R</span></p>} className='cy-tooltip'>
70-
<button aria-label='Rerun all tests' className='restart' onClick={emit('restart')}>
64+
</Button>
65+
</div>
66+
</Tooltip>
67+
)}
68+
{!appState.isRunning && (
69+
<Tooltip placement='bottom' title={<p>Run All Tests <span className='kbd'>R</span></p>} className='cy-tooltip'>
70+
<div>
71+
<Button size='20' variant='outline-dark' aria-label='Rerun all tests' className='restart' onClick={emit('restart')}>
7172
{appState.studioActive ? (
7273
<IconActionRestart transform="scale(-1 1)" strokeColor={iconStrokeColor} />
7374
) : (
7475
<IconActionRestart strokeColor={iconStrokeColor} />
7576
)}
76-
</button>
77-
</Tooltip>
78-
))}
79-
{ifThen(!!appState.nextCommandName, (
80-
<Tooltip placement='bottom' title={<p>Next <span className='kbd'>[N]:</span>{appState.nextCommandName}</p>} className='cy-tooltip'>
81-
<button aria-label={`Next '${appState.nextCommandName}'`} className='next' onClick={emit('next')}>
77+
</Button>
78+
</div>
79+
</Tooltip>
80+
)}
81+
{!!appState.nextCommandName && (
82+
<Tooltip placement='bottom' title={<p>Next <span className='kbd'>[N]:</span>{appState.nextCommandName}</p>} className='cy-tooltip'>
83+
<div>
84+
<Button size='20' variant='outline-dark' aria-label={`Next '${appState.nextCommandName}'`} className='next' onClick={emit('next')}>
8285
<IconActionNext size='16' strokeColor={iconStrokeColor} fillColor={iconFillColor} />
83-
</button>
84-
</Tooltip>
85-
))}
86-
</div>
86+
</Button>
87+
</div>
88+
</Tooltip>
89+
)}
8790
</div>
8891
)
8992
})

‎packages/reporter/src/header/header.scss‎

Lines changed: 16 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ $color-transition: color 150ms ease-out;
1010
flex-wrap: wrap;
1111
gap: 13px;
1212
font-family: $font-system;
13-
min-height: $header-height;
13+
min-height: $header-height - 1px;
1414
outline: 0;
1515
overflow: hidden;
16-
padding: 16px;
16+
padding: 0 16px;
1717
width: 100%;
1818
z-index: 1;
1919
align-items: center;
@@ -28,11 +28,11 @@ $color-transition: color 150ms ease-out;
2828
width: 100%;
2929
justify-content: space-between;
3030
align-items: center;
31-
padding: 0 16px;
31+
padding: 8px 16px;
3232
border: 1px solid $gray-900;
3333
border-left: none;
3434
flex-wrap: wrap;
35-
gap: 4px;
35+
gap: 12px;
3636
min-height: 64px;
3737
}
3838

@@ -42,7 +42,7 @@ $color-transition: color 150ms ease-out;
4242
border-radius: 4px;
4343
display: flex;
4444
flex-wrap: wrap;
45-
min-height: 24px;
45+
min-height: 32px;
4646
justify-content: space-between;
4747

4848
li {
@@ -51,7 +51,7 @@ $color-transition: color 150ms ease-out;
5151
font-size: 14px;
5252
font-weight: 700;
5353
list-style-type: none;
54-
padding: 2px 8px;
54+
padding: 2px 12px;
5555
gap: 4px;
5656
line-height: 20px;
5757

@@ -65,90 +65,21 @@ $color-transition: color 150ms ease-out;
6565
}
6666
}
6767

68-
@mixin control-container-styles($size) {
69-
height: $size;
70-
71-
.testing-preferences-toggle {
72-
height: $size;
73-
width: $size;
74-
}
75-
76-
.controls {
77-
height: $size;
78-
79-
span button {
80-
width: $size;
81-
}
82-
}
83-
}
84-
85-
.controls-container-studio {
86-
// TODO: https://github.com/cypress-io/cypress-services/issues/10425 change this to 32px for the studio redesign
87-
@include control-container-styles(24px);
88-
}
89-
90-
.controls-container {
91-
@include control-container-styles(24px);
92-
}
93-
94-
.controls-container,
95-
.controls-container-studio {
96-
display: inline-flex;
68+
.controls {
9769
align-items: center;
98-
justify-content: center;
99-
gap: 4px;
70+
display: inline-flex;
10071
flex-wrap: wrap;
72+
gap: 12px;
73+
height: 32px;
74+
justify-content: center;
10175

102-
span {
103-
height: 100%;
104-
}
105-
106-
.testing-preferences-toggle {
107-
display: flex;
108-
justify-content: center;
109-
align-items: center;
110-
height: 100%;
111-
color: $gray-500;
112-
border: 1px solid $gray-900;
113-
border-radius: 4px;
114-
115-
&.open {
116-
background-color: $gray-900;
117-
color: $white;
118-
}
119-
}
120-
121-
.controls {
76+
button {
12277
align-items: center;
123-
border: 1px solid $gray-900;
124-
border-radius: 4px;
12578
display: flex;
79+
height: 32px;
12680
justify-content: center;
127-
128-
span {
129-
button {
130-
display: flex;
131-
justify-content: center;
132-
align-items: center;
133-
height: 100%;
134-
color: $gray-400;
135-
padding: 0px;
136-
border-left: 1px solid $gray-900;
137-
margin-left: -1px;
138-
}
139-
140-
&:first-child {
141-
button {
142-
border-left: none;
143-
}
144-
}
145-
146-
&:last-child {
147-
button {
148-
border-right: none;
149-
}
150-
}
151-
}
81+
padding: 0 !important;
82+
width: 32px;
15283
}
15384
}
15485

@@ -182,7 +113,7 @@ $color-transition: color 150ms ease-out;
182113
}
183114
}
184115
}
185-
116+
186117
.toggle-specs-wrapper {
187118
.toggle-specs-button {
188119
padding: 0;

0 commit comments

Comments
 (0)