Skip to content

Commit c807ed4

Browse files
sarahdayanshortcuts
sarahdayan
and
shortcuts
authored
feat(autocomplete-theme-classic): align search box properly (#511)
* feat: align search box properly * fix(examples): fix GitHub example layout (#513) * fix(examples): fix GitHub example layout * fix: apply suggestions from code review Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com> Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com> * style: lint Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com>
1 parent eaa2026 commit c807ed4

2 files changed

Lines changed: 79 additions & 53 deletions

File tree

‎examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -70,55 +70,57 @@ export function createGitHubReposPlugin(
7070

7171
return (
7272
<Fragment>
73-
<div className="aa-ItemIcon">
74-
<img
75-
src={item.owner.avatar_url}
76-
alt={item.full_name}
77-
width="40"
78-
height="40"
79-
/>
80-
</div>
8173
<div className="aa-ItemContent">
82-
<div className="aa-ItemContentTitle">
83-
<div style={{ display: 'flex' }}>
84-
<div>{item.full_name}</div>
85-
<div
86-
style={{
87-
alignItems: 'center',
88-
display: 'flex',
89-
marginLeft: 'var(--aa-spacing-half)',
90-
position: 'relative',
91-
top: '1px',
92-
}}
93-
>
94-
<svg
95-
aria-label={`${stars} stars`}
96-
style={{
97-
display: 'block',
98-
width: 'calc(var(--aa-spacing-half) * 2)',
99-
height: 'calc(var(--aa-spacing-half) * 2)',
100-
color: '#ffa724',
101-
}}
102-
viewBox="0 0 20 20"
103-
fill="currentColor"
104-
>
105-
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
106-
</svg>{' '}
107-
<span
108-
aria-hidden="true"
74+
<div className="aa-ItemIcon aa-ItemIcon--alignTop">
75+
<img
76+
src={item.owner.avatar_url}
77+
alt={item.full_name}
78+
width="40"
79+
height="40"
80+
/>
81+
</div>
82+
<div className="aa-ItemContentBody">
83+
<div className="aa-ItemContentTitle">
84+
<div style={{ display: 'flex' }}>
85+
<div>{item.full_name}</div>
86+
<div
10987
style={{
110-
color: 'var(--aa-content-text-color)',
111-
fontSize: '0.8em',
112-
lineHeight: 'normal',
88+
alignItems: 'center',
89+
display: 'flex',
90+
marginLeft: 'var(--aa-spacing-half)',
91+
position: 'relative',
92+
top: '1px',
11393
}}
11494
>
115-
{stars}
116-
</span>
95+
<svg
96+
aria-label={`${stars} stars`}
97+
style={{
98+
display: 'block',
99+
width: 'calc(var(--aa-spacing-half) * 2)',
100+
height: 'calc(var(--aa-spacing-half) * 2)',
101+
color: '#ffa724',
102+
}}
103+
viewBox="0 0 20 20"
104+
fill="currentColor"
105+
>
106+
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
107+
</svg>{' '}
108+
<span
109+
aria-hidden="true"
110+
style={{
111+
color: 'var(--aa-content-text-color)',
112+
fontSize: '0.8em',
113+
lineHeight: 'normal',
114+
}}
115+
>
116+
{stars}
117+
</span>
118+
</div>
117119
</div>
118120
</div>
119-
</div>
120-
<div className="aa-ItemContentDescription">
121-
{item.description}
121+
<div className="aa-ItemContentDescription">
122+
{item.description}
123+
</div>
122124
</div>
123125
</div>
124126
<div className="aa-ItemActions">

‎packages/autocomplete-theme-classic/src/theme.scss‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,6 @@ body {
171171
display: flex;
172172
line-height: 1em;
173173
margin: 0;
174-
padding: 0 calc(var(--aa-spacing) - 2px) 0 calc(var(--aa-spacing) - 1px);
175174
position: relative;
176175
width: 100%;
177176
&:focus-within {
@@ -189,22 +188,16 @@ body {
189188
align-items: center;
190189
display: flex;
191190
flex-shrink: 0;
191+
height: var(--aa-search-input-height);
192192
order: 1;
193193
// Container for search and loading icons
194194
@at-root .aa-Label,
195195
.aa-LoadingIndicator {
196196
cursor: initial;
197197
flex-shrink: 0;
198+
height: 100%;
198199
padding: 0;
199200
text-align: left;
200-
width: calc(var(--aa-icon-size) + var(--aa-spacing));
201-
button {
202-
appearance: none;
203-
background: none;
204-
border: 0;
205-
margin: 0;
206-
padding: 2px;
207-
}
208201
svg {
209202
color: rgba(var(--aa-primary-color-rgb), 1);
210203
height: auto;
@@ -213,6 +206,31 @@ body {
213206
width: var(--aa-input-icon-size);
214207
}
215208
}
209+
@at-root .aa-SubmitButton,
210+
.aa-LoadingIndicator {
211+
height: 100%;
212+
padding-left: calc(var(--aa-spacing) * 0.75 - 1px);
213+
padding-right: var(--aa-spacing-half);
214+
width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);
215+
@media (hover: none) and (pointer: coarse) {
216+
padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
217+
width: calc(var(--aa-icon-size) + (var(--aa-spacing) * 1.25) - 1px);
218+
}
219+
}
220+
@at-root .aa-SubmitButton {
221+
appearance: none;
222+
background: none;
223+
border: 0;
224+
margin: 0;
225+
}
226+
@at-root .aa-LoadingIndicator {
227+
align-items: center;
228+
display: flex;
229+
justify-content: center;
230+
&[hidden] {
231+
display: none;
232+
}
233+
}
216234
}
217235
@at-root .aa-InputWrapper {
218236
order: 3;
@@ -226,6 +244,7 @@ body {
226244
color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
227245
font: inherit;
228246
height: var(--aa-search-input-height);
247+
padding: 0;
229248
width: 100%;
230249
&::placeholder {
231250
color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
@@ -249,6 +268,7 @@ body {
249268
@at-root .aa-InputWrapperSuffix {
250269
align-items: center;
251270
display: flex;
271+
height: var(--aa-search-input-height);
252272
order: 4;
253273
// Accelerator to clear the query
254274
@at-root .aa-ClearButton {
@@ -258,8 +278,12 @@ body {
258278
color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
259279
cursor: pointer;
260280
display: flex;
281+
height: 100%;
261282
margin: 0;
262-
padding: 2px;
283+
padding: 0 calc(var(--aa-spacing) * (5 / 6) - 0.5px);
284+
@media (hover: none) and (pointer: coarse) {
285+
padding: 0 calc(var(--aa-spacing) * (2 / 3) - 0.5px);
286+
}
263287
&:hover,
264288
&:focus {
265289
color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));

0 commit comments

Comments
 (0)