ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1302 from ing-bank/chore/combobox-google-demo

Browse source 
fix(combobox): fix google combobox demo
This commit is contained in:
Thijs Louisse 2021-03-31 13:35:37 +02:00 committed by GitHub
commit ba16a9cd8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 119 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fresh-chairs-film.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/combobox': patch
---
Fix combobox google demo

76
docs/components/inputs/combobox/examples.md
View file

@ -5,8 +5,18 @@ import { html } from '@lion/core';
import './src/md-combobox/md-combobox.js';
import './src/gh-combobox/gh-combobox.js';
import './src/wa-combobox/wa-combobox.js';
import './src/google-combobox/google-combobox.js';
```
Below several extensions can be found. They illustrate that complex UI components can be created
easily from an extended Lion component, just by:
- **configuring**: setting properties or providing conditions via methods
- **enhancing**: adding extra html/styles/logic without changing behavior of the extended element
- **overriding**: replace html/styles/logic of the extended element with your own
## Material Design
```js preview-story
export const MaterialDesign = () => html`
<md-combobox name="combo" label="Default">
@ -19,6 +29,8 @@ export const MaterialDesign = () => html`
`;
```
## Github
```js preview-story
export const Github = () => html`
<gh-combobox name="combo" label="Switch branches/tags">
@ -31,6 +43,8 @@ export const Github = () => html`
`;
```
## Whatsapp
```js preview-story
export const Whatsapp = () => html`
<wa-combobox name="combo" label="Filter chats">
@ -75,3 +89,65 @@ export const Whatsapp = () => html`
</wa-combobox>
`;
```
**Whatsapp example shows:**
- advanced styling
- how to match/highlight text on multiple rows of the option (not just choiceValue)
- how to animate options
## Google Search
```js preview-story
export const GoogleSearch = () => {
return html`
<google-combobox name="combo" label="Google Search">
<google-option
href="https://www.google.com/search?query=apple"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Apple'}
>Apple</google-option
>
<google-option
href="https://www.google.com/search?query=Artichoke"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Artichoke'}
>Artichoke</google-option
>
<google-option
href="https://www.google.com/search?query=Asparagus"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Asparagus'}
>Asparagus</google-option
>
<google-option
href="https://www.google.com/search?query=Banana"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Banana'}
>Banana</google-option
>
<google-option
href="https://www.google.com/search?query=Beets"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Beets'}
>Beets</google-option
>
</google-combobox>
<div style="height:200px;"></div>
`;
};
```
**Google Search example shows:**
- advanced styling
- how to use options that are links
- create exact user experience of Google Search, by:
- using autocomplete 'list' as a fundament (we don't want inline completion in textbox)
- enhancing `_showOverlayCondition`: open on focus
- enhancing `_syncToTextboxCondition`: always sync to textbox when navigating by keyboard (this needs to be enabled, since it's not provided in the "autocomplete=list" preset)

9
docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js Normal file
View file

@ -0,0 +1,9 @@
import { html } from '@lion/core';
export default html`
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
></path>
</svg>
`;

9
docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js Normal file
View file

@ -0,0 +1,9 @@
import { html } from '@lion/core';
export default html`
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
`;

19
docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js Normal file
View file

@ -0,0 +1,19 @@
import { html } from '@lion/core';
export default html`
<svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
fill="#4285f4"
></path>
<path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path>
<path
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
fill="#f4b400"
></path>
<path
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
fill="#ea4335"
></path>
</svg>
`;

BIN
docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

2
packages/combobox/docs/google-combobox/google-combobox.js → docs/components/inputs/combobox/src/google-combobox/google-combobox.js
View file

@ -1,7 +1,7 @@
import { css, html } from '@lion/core';
import { LionOption } from '@lion/listbox';
import { renderLitAsNode } from '@lion/helpers';
import { LionCombobox } from '../../src/LionCombobox.js';
import { LionCombobox } from '@lion/combobox';
import { LinkMixin } from '../LinkMixin.js';
import googleSearchIcon from './assets/google-search-icon.js';
import googleVoiceSearchIcon from './assets/google-voice-search-icon.js';

159
packages/combobox/docs/Subclassers.md
View file

@ -1,159 +0,0 @@
# Combobox Extensions
```js script
import { html } from '@lion/core';
import './md-combobox/md-combobox.js';
import './gh-combobox/gh-combobox.js';
import './wa-combobox/wa-combobox.js';
import './google-combobox/google-combobox.js';
export default {
title: 'Forms/Combobox/Extensions',
};
```
Below several extensions can be found. They illustrate that complex UI components can be created
easily from an extended Lion component, just by:
- **configuring**: setting properties or providing conditions via methods
- **enhancing**: adding extra html/styles/logic without changing behavior of the extended element
- **overriding**: replace html/styles/logic of the extended element with your own
## Material Design
```js preview-story
export const MaterialDesign = () => html`
<md-combobox name="combo" label="Default">
<md-option .choiceValue=${'Apple'}>Apple</md-option>
<md-option .choiceValue=${'Artichoke'}>Artichoke</md-option>
<md-option .choiceValue=${'Asparagus'}>Asparagus</md-option>
<md-option .choiceValue=${'Banana'}>Banana</md-option>
<md-option .choiceValue=${'Beets'}>Beets</md-option>
</md-combobox>
`;
```
## Github
```js preview-story
export const Github = () => html`
<gh-combobox name="combo" label="Switch branches/tags">
<gh-option href="https://www.github.com" .choiceValue=${'master'} default>master</gh-option>
<gh-option .choiceValue=${'develop'}>develop</gh-option>
<gh-option .choiceValue=${'release'}>release</gh-option>
<gh-option .choiceValue=${'feat/abc'}>feat/abc</gh-option>
<gh-option .choiceValue=${'feat/xyz123'}>feat/xyz123</gh-option>
</gh-combobox>
`;
```
## Whatsapp
```js preview-story
export const Whatsapp = () => html`
<wa-combobox name="combo" label="Filter chats">
<wa-option
title="Barack Obama"
text="Yup, let's try that for now👍"
time="15:02"
is-user-text
is-user-text-read
image="https://pbs.twimg.com/profile_images/822547732376207360/5g0FC8XX_400x400.jpg"
.choiceValue=${'Barack Obama'}
></wa-option>
<wa-option
title="Donald Trump"
text="Take care!"
time="14:59"
is-user-text
image="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg"
.choiceValue=${'Donald Trump'}
></wa-option>
<wa-option
title="Joe Biden"
text="Hehe😅. You too, man, you too..."
time="yesterday"
image="https://pbs.twimg.com/profile_images/1308769664240160770/AfgzWVE7_400x400.jpg"
.choiceValue=${'Joe Biden'}
></wa-option>
<wa-option
title="George W. Bush"
time="friday"
text="You bet I will. Let's catch up soon!"
image="https://pbs.twimg.com/profile_images/828483922266877954/ljYUWUCu_400x400.jpg"
.choiceValue=${'George W. Bush'}
></wa-option>
<wa-option
title="Bill Clinton"
time="thursday"
text="Dude...😂 😂 😂"
image="https://pbs.twimg.com/profile_images/1239440892664086529/iY0Z83Dr_400x400.jpg"
.choiceValue=${'Bill Clinton'}
></wa-option>
</wa-combobox>
`;
```
**Whatsapp example shows:**
- advanced styling
- how to match/highlight text on multiple rows of the option (not just choiceValue)
- how to animate options
## Google Search
```js preview-story
export const GoogleSearch = () => {
const appleLogoUrl = new URL('./google-combobox/assets/appleLogo.png', import.meta.url).href;
return html`
<google-combobox name="combo" label="Google Search">
<google-option
href="https://www.google.com/search?query=apple"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Apple'}
.imageUrl=${appleLogoUrl}
>Apple</google-option
>
<google-option
href="https://www.google.com/search?query=Artichoke"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Artichoke'}
>Artichoke</google-option
>
<google-option
href="https://www.google.com/search?query=Asparagus"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Asparagus'}
>Asparagus</google-option
>
<google-option
href="https://www.google.com/search?query=Banana"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Banana'}
>Banana</google-option
>
<google-option
href="https://www.google.com/search?query=Beets"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Beets'}
>Beets</google-option
>
</google-combobox>
<div style="height:200px;"></div>
`;
};
```
**Google Search example shows:**
- advanced styling
- how to use options that are links
- create exact user experience of Google Search, by:
- using autocomplete 'list' as a fundament (we don't want inline completion in textbox)
- enhancing `_showOverlayCondition`: open on focus
- enhancing `_syncToTextboxCondition`: always sync to textbox when navigating by keyboard (this needs to be enabled, since it's not provided in the "autocomplete=list" preset)