From 0e61e76420b5ce80eeb9fc794ca83cb1cc7c84b8 Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Wed, 31 Mar 2021 13:18:36 +0200 Subject: [PATCH] fix(combobox): fix google combobox demo --- .changeset/fresh-chairs-film.md | 5 + docs/components/inputs/combobox/examples.md | 76 +++++++++ .../assets/google-clear-icon.js | 9 + .../assets/google-search-icon.js | 9 + .../assets/google-voice-search-icon.js | 19 +++ .../assets/googlelogo_color_272x92dp.png | Bin 0 -> 5969 bytes .../src}/google-combobox/google-combobox.js | 2 +- packages/combobox/docs/Subclassers.md | 159 ------------------ 8 files changed, 119 insertions(+), 160 deletions(-) create mode 100644 .changeset/fresh-chairs-film.md create mode 100644 docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js create mode 100644 docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js create mode 100644 docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js create mode 100644 docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png rename {packages/combobox/docs => docs/components/inputs/combobox/src}/google-combobox/google-combobox.js (99%) delete mode 100644 packages/combobox/docs/Subclassers.md diff --git a/.changeset/fresh-chairs-film.md b/.changeset/fresh-chairs-film.md new file mode 100644 index 000000000..9df8666df --- /dev/null +++ b/.changeset/fresh-chairs-film.md @@ -0,0 +1,5 @@ +--- +'@lion/combobox': patch +--- + +Fix combobox google demo diff --git a/docs/components/inputs/combobox/examples.md b/docs/components/inputs/combobox/examples.md index 85d119706..97ed14e53 100644 --- a/docs/components/inputs/combobox/examples.md +++ b/docs/components/inputs/combobox/examples.md @@ -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` @@ -19,6 +29,8 @@ export const MaterialDesign = () => html` `; ``` +## Github + ```js preview-story export const Github = () => html` @@ -31,6 +43,8 @@ export const Github = () => html` `; ``` +## Whatsapp + ```js preview-story export const Whatsapp = () => html` @@ -75,3 +89,65 @@ export const Whatsapp = () => html` `; ``` + +**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` + + Apple + Artichoke + Asparagus + Banana + Beets + +
+ `; +}; +``` + +**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) diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js b/docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js new file mode 100644 index 000000000..d31ec2637 --- /dev/null +++ b/docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js @@ -0,0 +1,9 @@ +import { html } from '@lion/core'; + +export default html` + + + +`; diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js b/docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js new file mode 100644 index 000000000..8ceaa571e --- /dev/null +++ b/docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js @@ -0,0 +1,9 @@ +import { html } from '@lion/core'; + +export default html` + + + +`; diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js b/docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js new file mode 100644 index 000000000..c439b89c7 --- /dev/null +++ b/docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js @@ -0,0 +1,19 @@ +import { html } from '@lion/core'; + +export default html` + + + + + + +`; diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png b/docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png new file mode 100644 index 0000000000000000000000000000000000000000..333bda93710d1668ca6452a507ab8a12c343996e GIT binary patch literal 5969 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�U0N z3m6JPKp0sW8@)7ef#2ByzNjH_8IB}mH>f&eAXG;q!hPy}p-9g4)~36>eW@M_@Y*0J zu()+zMC5S+-TB@6)yQVYsmCP7Eu0(m(S@+;dYRA#Wi`_Spy`oEjm1TS`wRsw9sEbOIWFBIc zOd}Gyb8#`kUPSRe7fBA8nmI}&FiV0!hA^gqg#-vodh*@Mwh^D8=m5uFB0s#G;JZlb zhac7*EK7i?GLFx##DnX_Mm%Ytb{3JxEyL+Z&?6&RD5xo?Io|6H%v%{m%Qfs1Q6*s^ zFuSWd4o4O4_&=!KOj66KoEM6j37#A^>vkl=q;2MG>xXjF)UDpp$O<<#Wa5%z9hN{r z8e-D_U6K>(R#HYs2vWFQ@>;L7^P4^_H*a_IN9Yl^dIEu=RmnEiNtAD2M{^yM1e)g% z#ZpKrbTpFg9+<#gZ%qWln+Bo1fcn#Rg0pjZZyJnzU>}Dg38EEy{>G2OVgT*j2w!bC z=%tVb;aGJU3yJa!;|N(BxSg|1FCXp6fNop3ONr=ZgCu!uq5805bb`n;Y?Yiu_m&`% zO9e5Ecoc;pGDK^Fq&7&t|5ki1MgVdlJRiI$m(=$*amQPP2jFN4cuXh2*C%hVly#ybtNS?fMsTH@Ft<4uUv_k~-QFBv8|nMP556&n<;Q8KqwAJD3CEs8Y-t zFNA#0=P)sVg$1PR-0^?XD#U@!VY@zUqY{oXuysqqaBa*v#pjXDPmolh>KDjkDLzjK zVb>RNUEfK=wbA&7Cb+ow9Fn#DogIfn(k5>^!90T1TdXVN1{*U@a1x6UkOvcdLX@ro zH-CntS6FWj_=LnfnSVLv&nWPCX<-5(~Bk~r}GnDnnkOjxmCE1_UNRbW&ERdtdG1bBJogx&BkK}AF@d6+j45~k4; z3Cg9m>%G>jhy&_Flzv&0Q8Ng65z4Aj+s>7;=9Q`&r9?hrFA*Iq!g$L_i39J4r~{M! z6#_G1Y}fx*R1dGeR2uzbm;i-9kf>KeAcQuH0=FKHnm7>Q6m!Nj7AK$tgz(FD{9Cvi zlp`jMZSW!CPH;|c!Fq+8Q@#nQ#I0^bB#lNK#jNSn%;HcE=sm=Z-`!|Lva^A%2l|j^ zcacNSQPVp^UKsy@u_X{KzO5gulXBEiMj(XBU^#1Kkdqr_2t3JC7piN#XX4C_5o#h= zVmrY-Fo1!iT%v}*#&*01ITB}1a3Vp?8Y_^e5a-4mawLVU_0(tsvhn|z?2nnFg`AaD z?eb2_kMy?XkRuUCoTo7QaRB>!ouGHXSrd;~fa(3-qC6$pWPC zf=ni&SE|U3)8JT#2%|qUX)>Z^#gT@Fh6WVO1Oi#bYN4T_p@Ad!Xas^hA8S2mXlNk6 z20^2$_l76y7@HTZp`kIOYv8@y_2**pAj+sJ%J}FACu&AcU>X`4$p<=eIjSqJw|Uo_ z*na>C(PmF4fc7N8iGB?Y4U}c!4Kv!LL3~YQKhvq0h-?V?kDoFP4UOaiz8yrp&}PU2 zSc8CNMJ6A-K%C3_&rCx@Be}@U-*^~Rc!;LXMyB;cqzDH*qR4T>tgh-FOhZE>*~qy5 zjZ&=+Av&@#-A=}F&vty5wFWdabkzkVRmnkTFJd?pqKc7vw&2T)F(l~dmgt)qz-MBu z0SyfeNYTUkdWakTQQPqs+pg~*azI4G9dCKK#yc#34r?uFXlQ@{;x?^9jszkz){4;3 z(8^P9XEwaA&)pjjXRQwn4IPOfm(fH5d5K`s-Ad5V z(7@OZIEkq}wgh)7bH3Bi(1_nKh&#b`Q9HCljS90XHuj;Rp#g_6?gUq(G~37|L!J-% z;95qQ@ITg|p`ih9Q`lk(BDsb;{^KJJX3ylkEl{7@u74XuXE0`F8X6iJZ=Ym`(reoF zkLFIL1OBMo^^W4M|9-9KXf html` - - Apple - Artichoke - Asparagus - Banana - Beets - -`; -``` - -## Github - -```js preview-story -export const Github = () => html` - - master - develop - release - feat/abc - feat/xyz123 - -`; -``` - -## Whatsapp - -```js preview-story -export const Whatsapp = () => html` - - - - - - - -`; -``` - -**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` - - Apple - Artichoke - Asparagus - Banana - Beets - -
- `; -}; -``` - -**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)