Skip to content

Commit e7a88fa

Browse files
itsalexcmitsalexcm
committed
Fix styling for results list and list items
1 parent f7a1625 commit e7a88fa

File tree

3 files changed

+59
-35
lines changed

3 files changed

+59
-35
lines changed

‎src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,15 +117,19 @@ export const Search = () => {
117117
buttonRef={buttonRef}
118118
itemRefs={itemRefs}
119119
/>
120-
<EuiHorizontalRule margin="none" />
120+
{!showLoadingSpinner && <EuiHorizontalRule margin="none" />}
121121
{searchTerm && (
122122
<div
123123
css={css`
124124
padding-inline: ${euiTheme.size.base};
125125
`}
126126
>
127127
<EuiSpacer size="m" />
128-
<EuiText color="subdued" size="xs">
128+
<EuiText color="default" size="xs"
129+
css={css`
130+
font-weight: 500;
131+
`}
132+
>
129133
Ask AI assistant
130134
</EuiText>
131135
<EuiSpacer size="s" />
@@ -145,9 +149,9 @@ export const Search = () => {
145149
}
146150

147151
const SEARCH_KEYBOARD_SHORTCUTS = [
148-
{ keys: ['returnKey'], label: 'to select' },
149-
{ keys: ['sortUp', 'sortDown'], label: 'to navigate' },
150-
{ keys: ['Esc'], label: 'to close' },
152+
{ keys: ['returnKey'], label: 'Select' },
153+
{ keys: ['sortUp', 'sortDown'], label: 'Navigate' },
154+
{ keys: ['Esc'], label: 'Close' },
151155
]
152156

153157
const SearchFooter = () => (

‎src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsList.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,11 @@ export const SearchResultsList = ({
3939

4040
const scrollbarStyle = css`
4141
max-height: 400px;
42-
padding-block: ${euiTheme.size.base};
43-
margin-right: ${euiTheme.size.s};
42+
padding-block-start: ${euiTheme.size.base};
43+
padding-block-end: ${euiTheme.size.base};
44+
margin-inline-end: ${euiTheme.size.s};
4445
${useEuiOverflowScroll('y', true)}
46+
mask-image: none;
4547
`
4648

4749
const resetScrollToTop = useCallback(() => {

‎src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchResultsListItem.tsx‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function SearchResultListItem({
7171
setRef,
7272
}: SearchResultListItemProps) {
7373
const { euiTheme } = useEuiTheme()
74-
const titleFontSize = useEuiFontSize('s')
74+
const titleFontSize = useEuiFontSize('m')
7575
const searchQuery = useSearchTerm()
7676

7777
// Calculate absolute position across all pages
@@ -103,20 +103,24 @@ export function SearchResultListItem({
103103
display: grid;
104104
grid-template-columns: auto 1fr auto;
105105
align-items: center;
106-
gap: ${euiTheme.size.base};
107-
border-radius: ${euiTheme.border.radius.medium};
108-
padding-inline: ${euiTheme.size.base};
106+
gap: ${euiTheme.size.m};
107+
border-radius: ${euiTheme.size.xs};
108+
border-width: 1px;
109+
border-style: solid;
110+
border-color: transparent;
111+
padding-inline-start: ${euiTheme.size.m};
112+
padding-inline-end: ${euiTheme.size.base};
109113
padding-block: ${euiTheme.size.m};
110-
margin-inline: ${euiTheme.size.base};
111-
border: 1px solid transparent;
114+
margin-inline-start: ${euiTheme.size.base};
115+
margin-inline-end: ${euiTheme.size.s};
112116
outline: none;
117+
outline-color: transparent;
113118
114119
/* Shared highlight styles for selected, hover, and focus */
115120
&[data-selected],
116121
&:hover,
117122
&:focus {
118-
background-color: ${euiTheme.colors
119-
.backgroundBaseSubdued};
123+
background-color: ${euiTheme.colors.backgroundBaseHighlighted};
120124
border-color: ${euiTheme.colors.borderBasePlain};
121125
.return-key-icon {
122126
visibility: visible;
@@ -126,25 +130,36 @@ export function SearchResultListItem({
126130
/* Focus ring for selected and focus states */
127131
&[data-selected],
128132
&:focus {
129-
outline: 2px solid ${euiTheme.colors.primary};
130-
outline-offset: -2px;
133+
outline: 1px solid ${euiTheme.colors.borderBasePlain};
134+
outline-offset: -1px;
131135
}
132136
`}
133137
href={result.url}
134138
>
135139
<EuiIcon
136-
type={result.type === 'api' ? 'code' : 'document'}
137-
color="subdued"
140+
type={result.type === 'api' ? 'code' : 'documentation'}
138141
size="m"
142+
css={css`
143+
color: ${euiTheme.colors.borderBaseProminent};
144+
`}
139145
/>
140146
<div
141147
css={css`
142148
mark {
143149
background-color: transparent;
144150
color: ${euiTheme.colors.link};
151+
font-weight: ${euiTheme.font.weight.bold};
145152
}
146153
`}
147154
>
155+
{result.parents.length > 0 && (
156+
<>
157+
<Breadcrumbs
158+
type={result.type}
159+
parents={result.parents}
160+
/>
161+
</>
162+
)}
148163
<div
149164
css={css`
150165
font-size: ${titleFontSize.fontSize};
@@ -156,19 +171,21 @@ export function SearchResultListItem({
156171
ellipsis={false}
157172
/>
158173
</div>
159-
<EuiSpacer size="xs" />
174+
<EuiSpacer
175+
css={css`
176+
block-size: 2px;
177+
`}
178+
/>
160179
<EuiText size="xs">
161180
<div
162181
css={css`
163182
font-family: ${euiTheme.font.family};
183+
color: ${euiTheme.colors.textSubdued};
164184
position: relative;
165-
166185
display: -webkit-box;
167186
-webkit-line-clamp: 1;
168187
-webkit-box-orient: vertical;
169188
overflow: hidden;
170-
171-
//width: 90%;
172189
`}
173190
>
174191
<SanitizedHtmlContent
@@ -177,20 +194,12 @@ export function SearchResultListItem({
177194
/>
178195
</div>
179196
</EuiText>
180-
{result.parents.length > 0 && (
181-
<>
182-
<EuiSpacer size="xs" />
183-
<Breadcrumbs
184-
type={result.type}
185-
parents={result.parents}
186-
/>
187-
</>
188-
)}
189197
</div>
190198
<EuiIcon
191199
className="return-key-icon"
192200
css={css`
193201
visibility: hidden;
202+
color: ${euiTheme.colors.borderBaseProminent};
194203
`}
195204
type="returnKey"
196205
color="subdued"
@@ -213,7 +222,6 @@ function Breadcrumbs({
213222
return (
214223
<ul
215224
css={css`
216-
margin-top: 2px;
217225
display: flex;
218226
gap: 0 ${euiTheme.size.xs};
219227
flex-wrap: wrap;
@@ -233,7 +241,12 @@ function Breadcrumbs({
233241
display: inline-flex;
234242
`}
235243
>
236-
<EuiText size="xs" color="subdued">
244+
<EuiText
245+
size="xs"
246+
css={css`
247+
color: ${euiTheme.colors.textSubdued};
248+
`}
249+
>
237250
{type === 'api' ? 'API' : 'Docs'}
238251
</EuiText>
239252
</li>
@@ -251,7 +264,12 @@ function Breadcrumbs({
251264
display: inline-flex;
252265
`}
253266
>
254-
<EuiText size="xs" color="subdued">
267+
<EuiText
268+
size="xs"
269+
css={css`
270+
color: ${euiTheme.colors.textSubdued};
271+
`}
272+
>
255273
{parent.title}
256274
</EuiText>
257275
</li>

0 commit comments

Comments
 (0)