Skip to content

Commit

Permalink
feat(autocomplete-theme-classic): align search box properly (#511)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@sarahdayan @shortcuts
sarahdayan and shortcuts committed Apr 8, 2021
1 parent eaa2026 commit c807ed4
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 53 deletions.
88 changes: 45 additions & 43 deletions examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,55 +70,57 @@ export function createGitHubReposPlugin(

return (
<Fragment>
<div className="aa-ItemIcon">
<img
src={item.owner.avatar_url}
alt={item.full_name}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
<div style={{ display: 'flex' }}>
<div>{item.full_name}</div>
<div
style={{
alignItems: 'center',
display: 'flex',
marginLeft: 'var(--aa-spacing-half)',
position: 'relative',
top: '1px',
}}
>
<svg
aria-label={`${stars} stars`}
style={{
display: 'block',
width: 'calc(var(--aa-spacing-half) * 2)',
height: 'calc(var(--aa-spacing-half) * 2)',
color: '#ffa724',
}}
viewBox="0 0 20 20"
fill="currentColor"
>
<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" />
</svg>{' '}
<span
aria-hidden="true"
<div className="aa-ItemIcon aa-ItemIcon--alignTop">
<img
src={item.owner.avatar_url}
alt={item.full_name}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<div style={{ display: 'flex' }}>
<div>{item.full_name}</div>
<div
style={{
color: 'var(--aa-content-text-color)',
fontSize: '0.8em',
lineHeight: 'normal',
alignItems: 'center',
display: 'flex',
marginLeft: 'var(--aa-spacing-half)',
position: 'relative',
top: '1px',
}}
>
{stars}
</span>
<svg
aria-label={`${stars} stars`}
style={{
display: 'block',
width: 'calc(var(--aa-spacing-half) * 2)',
height: 'calc(var(--aa-spacing-half) * 2)',
color: '#ffa724',
}}
viewBox="0 0 20 20"
fill="currentColor"
>
<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" />
</svg>{' '}
<span
aria-hidden="true"
style={{
color: 'var(--aa-content-text-color)',
fontSize: '0.8em',
lineHeight: 'normal',
}}
>
{stars}
</span>
</div>
</div>
</div>
</div>
<div className="aa-ItemContentDescription">
{item.description}
<div className="aa-ItemContentDescription">
{item.description}
</div>
</div>
</div>
<div className="aa-ItemActions">
Expand Down
44 changes: 34 additions & 10 deletions packages/autocomplete-theme-classic/src/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,6 @@ body {
display: flex;
line-height: 1em;
margin: 0;
padding: 0 calc(var(--aa-spacing) - 2px) 0 calc(var(--aa-spacing) - 1px);
position: relative;
width: 100%;
&:focus-within {
Expand All @@ -189,22 +188,16 @@ body {
align-items: center;
display: flex;
flex-shrink: 0;
height: var(--aa-search-input-height);
order: 1;
// Container for search and loading icons
@at-root .aa-Label,
.aa-LoadingIndicator {
cursor: initial;
flex-shrink: 0;
height: 100%;
padding: 0;
text-align: left;
width: calc(var(--aa-icon-size) + var(--aa-spacing));
button {
appearance: none;
background: none;
border: 0;
margin: 0;
padding: 2px;
}
svg {
color: rgba(var(--aa-primary-color-rgb), 1);
height: auto;
Expand All @@ -213,6 +206,31 @@ body {
width: var(--aa-input-icon-size);
}
}
@at-root .aa-SubmitButton,
.aa-LoadingIndicator {
height: 100%;
padding-left: calc(var(--aa-spacing) * 0.75 - 1px);
padding-right: var(--aa-spacing-half);
width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);
@media (hover: none) and (pointer: coarse) {
padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
width: calc(var(--aa-icon-size) + (var(--aa-spacing) * 1.25) - 1px);
}
}
@at-root .aa-SubmitButton {
appearance: none;
background: none;
border: 0;
margin: 0;
}
@at-root .aa-LoadingIndicator {
align-items: center;
display: flex;
justify-content: center;
&[hidden] {
display: none;
}
}
}
@at-root .aa-InputWrapper {
order: 3;
Expand All @@ -226,6 +244,7 @@ body {
color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
font: inherit;
height: var(--aa-search-input-height);
padding: 0;
width: 100%;
&::placeholder {
color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
Expand All @@ -249,6 +268,7 @@ body {
@at-root .aa-InputWrapperSuffix {
align-items: center;
display: flex;
height: var(--aa-search-input-height);
order: 4;
// Accelerator to clear the query
@at-root .aa-ClearButton {
Expand All @@ -258,8 +278,12 @@ body {
color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
cursor: pointer;
display: flex;
height: 100%;
margin: 0;
padding: 2px;
padding: 0 calc(var(--aa-spacing) * (5 / 6) - 0.5px);
@media (hover: none) and (pointer: coarse) {
padding: 0 calc(var(--aa-spacing) * (2 / 3) - 0.5px);
}
&:hover,
&:focus {
color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
Expand Down

0 comments on commit c807ed4

Please sign in to comment.