Skip to content

Commit

Permalink
Tweak search box (#686)
Browse files Browse the repository at this point in the history 
* make esc button more prominent/separate

* tweaks

* fix hovers
  • Loading branch information
@Rich-Harris
Rich-Harris authored Oct 29, 2024
1 parent b00f797 commit 2712586
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 64 deletions.
170 changes: 107 additions & 63 deletions packages/site-kit/src/lib/search/SearchBox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,31 +159,37 @@ It appears when the user clicks on the `Search` component or presses the corresp
use:trap
>
<div class="search-box">
<div style="background: var(--background); padding: 0.5rem">
<input
use:forcefocus
onkeydown={(e) => {
<div class="controls">
<div class="input-group">
<input
use:forcefocus
onkeydown={(e) => {
if (e.key === 'Enter' && !e.isComposing) {
const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
element?.click();
}
}}
oninput={(e) => {
$search_query = e.currentTarget.value;
}}
value={$search_query}
{placeholder}
aria-describedby="search-description"
aria-label={placeholder}
spellcheck="false"
/>
oninput={(e) => {
$search_query = e.currentTarget.value;
}}
value={$search_query}
{placeholder}
aria-describedby="search-description"
aria-label={placeholder}
spellcheck="false"
/>

<button aria-label="Clear" onclick={() => ($search_query = '')}>
<Icon name="close" />
</button>
</div>

<button class="raised" aria-label="Close" onclick={close}>
<!-- <Icon name="close" /> -->
<kbd>Esc</kbd>
</button>
</div>

<button aria-label="Close" onclick={close}>
<!-- <Icon name="close" /> -->
<kbd>Esc</kbd>
</button>

<span id="search-description" class="visually-hidden">
{#if search_description}
{@render search_description()}
Expand Down Expand Up @@ -222,14 +228,15 @@ It appears when the user clicks on the `Search` component or presses the corresp
</a>

<button
class="raised icon"
aria-label="Delete"
onclick={(e) => {
$search_recent = $search_recent.filter((href) => href !== search.href);
e.stopPropagation();
e.preventDefault();
}}
>
<Icon name="delete" />
<Icon name="delete" size={16} />
</button>
</li>
{/each}
Expand Down Expand Up @@ -302,50 +309,85 @@ It appears when the user clicks on the `Search` component or presses the corresp
}
}
input {
font: var(--sk-font-ui-large);
width: 100%;
padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
height: 6rem;
border: none;
border-bottom: 1px solid var(--sk-back-3);
flex-shrink: 0;
background: var(--sk-back-3);
color: var(--sk-text-1);
&::selection {
background-color: var(--sk-back-translucent);
}
.controls {
background: var(--background);
padding: 0.5rem;
display: flex;
gap: 1rem;
}
&::placeholder {
color: var(--sk-text-2);
opacity: 0.3;
.input-group {
position: relative;
flex: 1;
input {
font: var(--sk-font-ui-large);
width: 100%;
padding: var(--padding) 6rem var(--padding) calc(var(--padding) - 0.5rem);
height: 6rem;
border: none;
flex-shrink: 0;
color: var(--sk-text-1);
border-bottom: 1px solid var(--sk-back-6);
background: inherit;
&::selection {
background-color: var(--sk-back-translucent);
}
&::placeholder {
color: var(--sk-text-2);
opacity: 0.3;
}
&:focus-visible {
outline-offset: -2px;
}
}
&:focus-visible {
outline-offset: -3px;
button {
position: absolute;
right: 0;
top: 0;
height: 100%;
aspect-ratio: 1;
color: var(--sk-text-4);
&:hover,
&:focus {
color: var(--sk-text-3);
}
&:focus-visible {
outline-offset: -2px;
}
}
}
button[aria-label='Close'] {
--size: 2rem;
position: absolute;
top: 0.5rem;
right: 0;
width: 5rem;
height: 6rem;
height: 100%;
aspect-ratio: 1;
background: none;
color: var(--sk-text-2);
opacity: 0.3;
&:hover,
&:focus {
color: var(--sk-text-3);
}
&:focus-visible {
opacity: 1;
outline-offset: -3px;
outline-offset: -2px;
}
kbd {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font: var(--sk-font-ui-small);
background: none;
font: var(--sk-font-ui-medium);
color: var(--sk-text-4);
width: 100%;
height: 100%;
}
}
Expand All @@ -365,38 +407,40 @@ It appears when the user clicks on the `Search` component or presses the corresp
li {
position: relative;
display: flex;
padding: 0.2rem var(--padding);
gap: 1rem;
&:hover {
background: var(--sk-back-3);
}
a {
color: var(--sk-text-2);
display: block;
text-decoration: none;
padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
&:hover {
background: rgba(0, 0, 0, 0.05);
}
margin: 0 -0.5rem;
padding: 0.5rem;
flex: 1;
&:focus {
outline-offset: -3px;
}
}
button[aria-label='Delete'] {
position: absolute;
top: 0;
right: 0;
width: 5rem;
height: 100%;
color: var(--sk-text-2);
opacity: 0.1;
width: 3.2rem;
height: 3.2rem;
color: var(--sk-text-4);
background-color: var(--sk-back-2);
&:hover {
opacity: 1;
outline: none;
color: var(--sk-text-3);
}
&:focus-visible {
opacity: 1;
color: var(--sk-text-3);
outline-offset: -3px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/search/SearchResultList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
}
&:hover {
--background: var(--sk-back-4);
--background: var(--sk-back-3);
text-decoration: none;
}
Expand Down

0 comments on commit 2712586

Please sign in to comment.