Skip to content

Commit de352cb

Browse files
vykes-macvykes-mac
authored
Logged in Performance Profiler: Update page selector to include search icon (#94919)
* update page selector to include search icon and match design more closely * disable tab control when loading * fix metric tab layout shift * fix search icon size and color * header alignment issues * disable controls when site unlaunched * move inline css to css class
1 parent 4a73ddf commit de352cb

File tree

6 files changed

+118
-39
lines changed

6 files changed

+118
-39
lines changed

‎client/hosting/performance/components/PageSelector.tsx

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { SearchableDropdown } from '@automattic/components';
2+
import { Icon } from '@wordpress/components';
3+
import { search } from '@wordpress/icons';
24
import { useTranslate } from 'i18n-calypso';
35
import { ComponentProps } from 'react';
46

@@ -10,24 +12,35 @@ export const PageSelector = ( props: ComponentProps< typeof SearchableDropdown >
1012
<div css={ { alignSelf: 'stretch', display: 'flex', alignItems: 'center' } }>
1113
{ translate( 'Page' ) }
1214
</div>
13-
<SearchableDropdown
14-
{ ...props }
15-
className="site-performance__page-selector-drowdown"
16-
__experimentalRenderItem={ ( { item } ) => (
17-
<div
18-
aria-label={ item.label }
19-
css={ {
20-
display: 'flex',
21-
flexDirection: 'column',
22-
paddingInline: '16px',
23-
paddingBlock: '8px',
24-
} }
25-
>
26-
<span>{ item.label }</span>
27-
<span>{ item.path }</span>
28-
</div>
29-
) }
30-
/>
15+
<div className="site-performance__page-selector-container">
16+
<SearchableDropdown
17+
{ ...props }
18+
className="site-performance__page-selector-drowdown"
19+
__experimentalRenderItem={ ( { item } ) => (
20+
<div
21+
aria-label={ item.label }
22+
css={ {
23+
display: 'flex',
24+
flexDirection: 'column',
25+
paddingInline: '16px',
26+
paddingBlock: '8px',
27+
fontSize: '0.875rem',
28+
gap: '4px',
29+
} }
30+
>
31+
<span>{ item.label }</span>
32+
<span>{ item.path }</span>
33+
</div>
34+
) }
35+
/>
36+
<div className="site-performance__page-selector-search-icon">
37+
<Icon
38+
icon={ search }
39+
size={ 24 }
40+
style={ { fill: props.disabled ? 'var(--studio-gray-20)' : 'var(--color-neutral-50)' } }
41+
/>
42+
</div>
43+
</div>
3144
</div>
3245
);
3346
};

‎client/hosting/performance/components/device-tab-control/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { SegmentedControl } from '@automattic/components';
2+
import clsx from 'clsx';
23
import { useTranslate } from 'i18n-calypso';
34

45
import './style.scss';
@@ -9,12 +10,14 @@ type DeviceTabControlsProps = {
910
onDeviceTabChange: ( tab: Tab ) => void;
1011
value: Tab;
1112
showTitle?: boolean;
13+
disabled?: boolean;
1214
};
1315

1416
export const DeviceTabControls = ( {
1517
onDeviceTabChange,
1618
value,
1719
showTitle,
20+
disabled,
1821
}: DeviceTabControlsProps ) => {
1922
const translate = useTranslate();
2023

@@ -34,7 +37,9 @@ export const DeviceTabControls = ( {
3437
{ showTitle && (
3538
<div className="site-performance-device-tab__heading">{ translate( 'Device' ) }</div>
3639
) }
37-
<SegmentedControl className="site-performance-device-tab__controls">
40+
<SegmentedControl
41+
className={ clsx( 'site-performance-device-tab__controls', { [ 'disabled' ]: disabled } ) }
42+
>
3843
{ options.map( ( option ) => {
3944
return (
4045
<SegmentedControl.Item

‎client/hosting/performance/components/device-tab-control/style.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,28 @@
1818
@include break-medium {
1919
max-width: 329px;
2020
}
21+
22+
&.disabled {
23+
.segmented-control__item {
24+
pointer-events: none;
25+
.segmented-control__link {
26+
color: var(--studio-gray-20);
27+
border-color: var(--studio-gray-20);
28+
}
29+
30+
&.is-selected .segmented-control__link {
31+
background-color: transparent;
32+
color: var(--studio-gray-20);
33+
border-color: var(--studio-gray-20);
34+
border-right: unset;
35+
}
36+
}
37+
}
2138
}
2239

2340
.site-performance-device-tab__container {
2441
display: flex;
2542
justify-content: flex-end;
26-
align-self: flex-start;
2743
flex-direction: column;
2844
gap: 10px;
2945
flex-grow: 1;

‎client/hosting/performance/site-performance.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,13 +201,14 @@ export const SitePerformance = () => {
201201
};
202202

203203
const isMobile = ! useDesktopBreakpoint();
204+
const disableControls = performanceReport.isLoading || isInitialLoading || ! isSitePublic;
204205

205206
const pageSelector = (
206207
<PageSelector
207208
onFilterValueChange={ setQuery }
208209
allowReset={ false }
209210
options={ pageOptions }
210-
disabled={ isInitialLoading || performanceReport.isLoading }
211+
disabled={ disableControls }
211212
onChange={ ( page_id ) => {
212213
const url = new URL( window.location.href );
213214

@@ -278,6 +279,7 @@ export const SitePerformance = () => {
278279
<DeviceTabControls
279280
showTitle={ ! isMobile }
280281
onDeviceTabChange={ setActiveTab }
282+
disabled={ disableControls }
281283
value={ activeTab }
282284
/>
283285
</div>

‎client/hosting/performance/style.scss

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,16 +82,17 @@ $section-max-width: 1224px;
8282
display: flex;
8383
gap: 24px;
8484
flex-wrap: wrap;
85-
align-items: start;
85+
align-items: center;
8686
justify-content: space-between;
87+
margin-bottom: 16px;
8788

8889
.site-performance__page-selector {
8990
display: flex;
9091
align-items: flex-start;
9192
flex-grow: 1;
9293
justify-content: flex-end;
9394
gap: 10px;
94-
max-height: 40px;
95+
max-height: 36px;
9596

9697
@media (max-width: $break-medium) {
9798
flex-direction: column;
@@ -104,19 +105,37 @@ $section-max-width: 1224px;
104105
width: 100%;
105106
}
106107
}
108+
109+
110+
}
111+
112+
.components-base-control {
113+
margin: 0 !important;
107114
}
108115

109116
.navigation-header-title {
110117
display: flex;
111118
align-items: center;
112119
justify-content: space-between;
113120
}
121+
122+
.site-performance__page-selector-search-icon {
123+
position: absolute;
124+
right: 10px;
125+
top: 50%;
126+
transform: translateY(-50%);
127+
display: flex;
128+
align-self: start;
129+
z-index: 2;
130+
height: 100%;
131+
margin-top: 6px;
132+
pointer-events: none;
133+
}
114134
}
115135

116136
.site-performance__navigation-header.navigation-header {
117137
width: auto;
118138
padding-bottom: 0;
119-
margin-bottom: 16px;
120139

121140
.gridicon {
122141
fill: var(--color-neutral-100);
@@ -139,15 +158,28 @@ $section-max-width: 1224px;
139158
.site-performance__page-selector-drowdown {
140159
max-width: 240px;
141160
min-width: 240px;
161+
margin: 0;
142162

143163
.components-combobox-control__suggestions-container {
144164
position: relative;
145165
z-index: 1;
146166
background: var(--color-surface);
167+
168+
.components-flex {
169+
height: 36px;
170+
}
171+
172+
}
173+
174+
input.components-combobox-control__input[type="text"] {
175+
height: 34px;
176+
padding-right: 30px;
177+
font-size: 0.875rem;
147178
}
148179

149180
.components-form-token-field__suggestions-list {
150181
max-height: initial !important;
182+
box-shadow: inset 0 -1px 0 0 var(--color-neutral-50);
151183
}
152184

153185
.components-form-token-field__suggestions-list li {
@@ -158,3 +190,12 @@ $section-max-width: 1224px;
158190
max-width: unset;
159191
}
160192
}
193+
194+
.site-performance__page-selector-container {
195+
position: relative;
196+
display: flex;
197+
198+
@media (max-width: $break-medium) {
199+
width: 100%;
200+
}
201+
}

‎client/performance-profiler/components/metric-tab-bar/style_v2.scss

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ $blueberry-color: #3858e9;
1313
button {
1414
color: inherit;
1515
}
16+
1617
}
1718

1819
.metric-tab-bar-v2__tab {
@@ -22,25 +23,33 @@ $blueberry-color: #3858e9;
2223
flex-grow: 1;
2324
padding: 16px 22px 16px 22px;
2425
width: 100%;
25-
26+
border: 1px solid transparent;
2627
&:not(.active) {
2728
border-bottom: 1px solid var(--gutenberg-gray-100, #f0f0f0);
2829

30+
&:not(:nth-child(-n+2)) {
31+
border-top-color: transparent;
32+
}
33+
2934
&:last-child {
30-
border-bottom: unset;
35+
border-bottom-color: transparent;
36+
}
37+
38+
&.metric-tab-bar-v2__performance {
39+
border-bottom-color: transparent;
3140
}
41+
3242
}
3343

3444
&.active {
3545
/* stylelint-disable-next-line scales/radii */
3646
border-radius: 6px;
37-
border: 1.5px solid $blueberry-color;
47+
border-color: transparent;
48+
outline: 1.5px solid $blueberry-color;
3849
position: relative;
39-
margin-left: -1px;
40-
width: 101%;
4150

4251
& + .metric-tab-bar-v2__tab {
43-
border-top: none;
52+
border-top-color: transparent;
4453
}
4554
}
4655

@@ -87,14 +96,7 @@ $blueberry-color: #3858e9;
8796
margin-bottom: 16px;
8897
/* stylelint-disable-next-line scales/radii */
8998
border-radius: 6px;
90-
border: 1px solid var(--studio-gray-5);
91-
&:not(.active) {
92-
border-color: var(--studio-gray-5);
93-
}
94-
&.active {
95-
width: 100%;
96-
margin-left: unset;
97-
}
99+
outline: 1px solid var(--studio-gray-5);
98100
}
99101

100102
.metric-tab-bar-v2__tab-container {
@@ -103,6 +105,6 @@ $blueberry-color: #3858e9;
103105
border-radius: 6px;
104106

105107
.metric-tab-bar-v2__tab:has(+ .metric-tab-bar-v2__tab.active) {
106-
border-bottom: none;
108+
border-bottom-color: transparent;
107109
}
108110
}

0 commit comments

Comments
 (0)