Skip to content

Commit

Permalink
fix(theme): update icons and Detached mode design (#443)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shipow
Shipow authored Feb 11, 2021
1 parent 09da36c commit af43a37
Show file tree
Hide file tree
Showing 8 changed files with 42 additions and 80 deletions.
6 changes: 3 additions & 3 deletions bundlesize.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
},
{
"path": "packages/autocomplete-js/dist/umd/index.production.js",
"maxSize": "14 kB"
"maxSize": "14.25 kB"
},
{
"path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
Expand All @@ -18,11 +18,11 @@
},
{
"path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
"maxSize": "3.5 kB"
"maxSize": "3.75 kB"
},
{
"path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
"maxSize": "3 kB"
"maxSize": "3.25 kB"
}
]
}
17 changes: 3 additions & 14 deletions examples/js/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ function ProductItem({ hit, insights }: ProductItemProps) {
type="button"
title="Select"
>
<svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
</svg>
</button>
Expand All @@ -161,19 +161,8 @@ function ProductItem({ hit, insights }: ProductItemProps) {
});
}}
>
<svg
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
width="20"
height="20"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
/>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M19 5h-14l1.5-2h11zM21.794 5.392l-2.994-3.992c-0.196-0.261-0.494-0.399-0.8-0.4h-12c-0.326 0-0.616 0.156-0.8 0.4l-2.994 3.992c-0.043 0.056-0.081 0.117-0.111 0.182-0.065 0.137-0.096 0.283-0.095 0.426v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.219-0.071-0.422-0.189-0.585-0.004-0.005-0.007-0.010-0.011-0.015zM4 7h16v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707zM15 10c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121c0-0.552-0.448-1-1-1s-1 0.448-1 1c0 1.38 0.561 2.632 1.464 3.536s2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
</svg>
</button>
</div>
Expand Down
21 changes: 7 additions & 14 deletions packages/autocomplete-js/src/__tests__/autocomplete.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,13 @@ describe('autocomplete-js', () => {
>
<svg
class="aa-SubmitIcon"
fill="currentColor"
height="20"
viewBox="0 0 20 20"
viewBox="0 0 24 24"
width="20"
>
<path
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.4"
d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
/>
</svg>
</button>
Expand Down Expand Up @@ -138,14 +133,12 @@ describe('autocomplete-js', () => {
<svg
class="aa-ResetIcon"
fill="currentColor"
height="20"
viewBox="0 0 20 20"
width="20"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path
clip-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
fill-rule="evenodd"
d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
/>
</svg>
</button>
Expand Down
10 changes: 4 additions & 6 deletions packages/autocomplete-js/src/components/ResetIcon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,16 @@ import { Component } from '../types/Component';
export const ResetIcon: Component<{}, SVGSVGElement> = () => {
const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('class', 'aa-ResetIcon');
element.setAttribute('viewBox', '0 0 20 20');
element.setAttribute('width', '20');
element.setAttribute('height', '20');
element.setAttribute('viewBox', '0 0 24 24');
element.setAttribute('width', '18');
element.setAttribute('height', '18');
element.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute(
'd',
'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
'M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z'
);
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('clip-rule', 'evenodd');

element.appendChild(path);

Expand Down
11 changes: 3 additions & 8 deletions packages/autocomplete-js/src/components/SearchIcon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,16 @@ import { Component } from '../types/Component';
export const SearchIcon: Component<{}, SVGSVGElement> = () => {
const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('class', 'aa-SubmitIcon');
element.setAttribute('viewBox', '0 0 20 20');
element.setAttribute('viewBox', '0 0 24 24');
element.setAttribute('width', '20');
element.setAttribute('height', '20');
element.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute(
'd',
'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z'
'M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z'
);
path.setAttribute('stroke', 'currentColor');
path.setAttribute('fill', 'none');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('stroke-width', '1.4');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');

element.appendChild(path);

Expand Down
17 changes: 4 additions & 13 deletions packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,8 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
stroke="currentColor"
fill="none"
fillRule="evenodd"
strokeWidth="1.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
</svg>
</div>
<div className="aa-ItemContent">
Expand All @@ -47,12 +39,11 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
>
<svg
viewBox="0 0 24 24"
fill="currentColor"
width="18"
height="18"
fill="currentColor"
>
<rect fill="none" height="24" width="24" />
<path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
<path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
</svg>
</button>
</div>
Expand Down
15 changes: 4 additions & 11 deletions packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ export function getTemplates<TItem extends RecentSearchesItem>({
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
<svg width="20" height="20" viewBox="0 0 22 22" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
</svg>
</div>
<div className="aa-ItemContent">
Expand All @@ -42,15 +41,9 @@ export function getTemplates<TItem extends RecentSearchesItem>({
viewBox="0 0 24 24"
width="18"
height="18"
fill="none"
stroke="currentColor"
fill="currentColor"
>
<path
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
<path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
</svg>
</button>
</div>
Expand Down
25 changes: 14 additions & 11 deletions packages/autocomplete-theme-classic/src/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,18 +486,21 @@ body {
.aa-DetachedOverlay {
background: var(--aa-background-color);
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
padding: var(--aa-spacing-half) 0 var(--aa-spacing-half)
var(--aa-spacing-half);
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;

.aa-DetachedFormContainer {
border-bottom: solid 1px var(--aa-selected-color);
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: var(--aa-spacing-half);
padding-bottom: var(--aa-spacing-half);
padding: var(--aa-spacing-half);
.aa-Form {
padding: 0 var(--aa-spacing-half) 0 0;
}
Expand All @@ -512,18 +515,18 @@ body {
}
.aa-Panel {
background-color: var(--aa-background-color);
height: 100vh; // TODO: compute with js
left: var(--aa-spacing-half);
overflow-y: auto;
padding-bottom: var(--aa-spacing);
padding-right: var(--aa-spacing-half);
padding-top: var(--aa-spacing-half);
right: 0;
overflow: hidden;
padding: 0 var(--aa-spacing-half);
position: relative;

.aa-PanelLayout {
box-shadow: none;
height: 100%;
margin: 0;
max-height: none;
overflow-y: auto;
padding: 0;
width: 100%;
}
.aa-Item {
border-radius: 3px;
Expand Down

0 comments on commit af43a37

Please sign in to comment.