Skip to content

Commit d8b4383

Browse files
mikesurowiecmikesurowiec
authored
Improve Search styling (github#21295)
* fix: improve search highlight contrast
1 parent f52018f commit d8b4383

3 files changed

Lines changed: 54 additions & 59 deletions

File tree

‎components/Search.module.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
}
55

66
.searchResultTitle mark {
7-
color: var(--color-auto-blue-5);
7+
color: var(--color-text-link);
88
}
99

1010
.searchResultIntro mark {
11-
border-bottom: 1px solid var(--color-auto-blue-5);
11+
border-bottom: 1px solid currentColor;
1212
}
1313

1414
.searchResultContent mark {
1515
text-decoration: none;
16-
border-bottom: 1px dotted var(--color-auto-gray-5);
16+
border-bottom: 1px dotted currentColor;
1717
}
1818

1919
.searchResultTitle em {
@@ -31,7 +31,7 @@
3131
background: var(--color-bg-primary);
3232
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
3333
transition: width 0.3s ease-in-out;
34-
padding: 64px 24px 24px;
34+
padding-top: 64px;
3535
}
3636

3737
.resultsContainerOpen {

‎components/Search.tsx‎

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function Search({
3737
const [query, setQuery] = useState(router.query.query || '')
3838
const [results, setResults] = useState<Array<SearchResult>>([])
3939
const [isLoading, setIsLoading] = useState(false)
40-
const [activeHit, setActiveHit] = useState(0)
40+
const [activeHit, setActiveHit] = useState(-1)
4141
const inputRef = useRef<HTMLInputElement>(null)
4242
const { t } = useTranslation('search')
4343
const { currentVersion } = useVersion()
@@ -164,55 +164,53 @@ export function Search({
164164
<div
165165
id="search-results-container"
166166
className={cx(
167-
'z-1',
167+
'z-1 pb-4 px-3',
168168
styles.resultsContainer,
169169
isOverlay && styles.resultsContainerOverlay,
170170
query && styles.resultsContainerOpen
171171
)}
172172
>
173173
{results.length > 0 ? (
174-
<ol data-testid="search-results" className="d-block">
175-
{results.map(({ url, breadcrumbs, heading, title, content }, index) => (
176-
<li
177-
key={url}
178-
data-testid="search-result"
179-
className={cx(
180-
'list-style-none overflow-hidden hover:color-bg-info',
181-
index + 1 === activeHit && 'color-bg-info'
182-
)}
183-
>
184-
<div className="border-top color-border-secondary py-3 px-2">
185-
<a className="no-underline" href={url}>
186-
{/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
187-
<div
188-
className="d-block color-text-primary opacity-60 text-small pb-1"
189-
dangerouslySetInnerHTML={{ __html: breadcrumbs }}
190-
/>
191-
<div
192-
className={cx(
193-
styles.searchResultTitle,
194-
'd-block f4 font-weight-semibold color-text-primary'
195-
)}
196-
dangerouslySetInnerHTML={{
197-
__html: heading ? `${title}: ${heading}` : title,
198-
}}
199-
/>
200-
<div
201-
className={cx(
202-
styles.searchResultContent,
203-
'd-block color-text-secondary overflow-hidden'
204-
)}
205-
style={{ maxHeight: '4rem' }}
206-
dangerouslySetInnerHTML={{ __html: content }}
207-
/>
208-
</a>
209-
</div>
210-
</li>
211-
))}
174+
<ol data-testid="search-results" className="d-block mt-2">
175+
{results.map(({ url, breadcrumbs, heading, title, content }, index) => {
176+
const isActive = index === activeHit
177+
return (
178+
<li
179+
key={url}
180+
data-testid="search-result"
181+
className={cx(
182+
'list-style-none overflow-hidden rounded-3 color-text-primary border',
183+
isActive ? 'color-bg-tertiary' : 'color-border-transparent'
184+
)}
185+
onMouseEnter={() => setActiveHit(index)}
186+
>
187+
<div className={cx('py-3 px-3', isActive && 'color-border-secondary')}>
188+
<a className="no-underline color-text-primary" href={url}>
189+
{/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
190+
<div
191+
className={'d-block opacity-60 text-small pb-1'}
192+
dangerouslySetInnerHTML={{ __html: breadcrumbs }}
193+
/>
194+
<div
195+
className={cx(styles.searchResultTitle, 'd-block f4 font-weight-semibold')}
196+
dangerouslySetInnerHTML={{
197+
__html: heading ? `${title}: ${heading}` : title,
198+
}}
199+
/>
200+
<div
201+
className={cx(styles.searchResultContent, 'd-block overflow-hidden')}
202+
style={{ maxHeight: '4rem' }}
203+
dangerouslySetInnerHTML={{ __html: content }}
204+
/>
205+
</a>
206+
</div>
207+
</li>
208+
)
209+
})}
212210
</ol>
213211
) : (
214212
isOverlay && (
215-
<div className="mt-2">
213+
<div className="mt-2 px-6">
216214
{isLoading ? <span>{t('loading')}...</span> : <span>{t('no_results')}.</span>}
217215
</div>
218216
)

‎stylesheets/utilities.scss‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@
1818
min-height: 100vh;
1919
}
2020

21+
.outline-none {
22+
outline: none;
23+
}
24+
2125
/* Print utilities
2226
------------------------------------------------------------------------------*/
23-
2427
@media print {
2528
.no-print {
2629
display: none;
@@ -29,7 +32,6 @@
2932

3033
/* Opacity utilities
3134
------------------------------------------------------------------------------*/
32-
3335
.opacity-0 {
3436
opacity: 0;
3537
}
@@ -45,7 +47,6 @@
4547

4648
/* Text utilities
4749
------------------------------------------------------------------------------*/
48-
4950
.underline-dashed {
5051
padding-bottom: $spacer-1;
5152
background-image: linear-gradient(
@@ -58,23 +59,24 @@
5859
background-size: 10px 1px;
5960
}
6061

62+
.font-weight-semibold {
63+
font-weight: $font-weight-semibold;
64+
}
65+
6166
/* List utilities
6267
------------------------------------------------------------------------------*/
63-
6468
.list-style-inside {
6569
list-style: inside;
6670
}
6771

6872
/* Hover utilities
6973
------------------------------------------------------------------------------*/
70-
7174
.hover\:color-bg-info:hover {
7275
background: var(--color-bg-info);
7376
}
7477

7578
/* Z-Index utilities
7679
------------------------------------------------------------------------------*/
77-
7880
.-z-1 {
7981
z-index: -1;
8082
}
@@ -87,7 +89,6 @@
8789

8890
/* Gradient utilities
8991
------------------------------------------------------------------------------*/
90-
9192
.fade-tertiary-left {
9293
background: linear-gradient(to right, var(--color-bg-primary), transparent);
9394
}
@@ -114,12 +115,8 @@
114115
background-color: var(--color-auto-blue-6);
115116
}
116117

117-
/* Semibold text
118+
/* Border colors
118119
------------------------------------------------------------------------------*/
119-
.font-weight-semibold {
120-
font-weight: $font-weight-semibold;
121-
}
122-
123-
.outline-none {
124-
outline: none;
120+
.color-border-transparent {
121+
border-color: transparent !important;
125122
}

0 commit comments

Comments
 (0)