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 000000000..333bda937 Binary files /dev/null and b/docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png differ diff --git a/packages/combobox/docs/google-combobox/google-combobox.js b/docs/components/inputs/combobox/src/google-combobox/google-combobox.js similarity index 99% rename from packages/combobox/docs/google-combobox/google-combobox.js rename to docs/components/inputs/combobox/src/google-combobox/google-combobox.js index fe6601773..4d77a3ab4 100644 --- a/packages/combobox/docs/google-combobox/google-combobox.js +++ b/docs/components/inputs/combobox/src/google-combobox/google-combobox.js @@ -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'; diff --git a/packages/combobox/docs/Subclassers.md b/packages/combobox/docs/Subclassers.md deleted file mode 100644 index 1dc9fcfd2..000000000 --- a/packages/combobox/docs/Subclassers.md +++ /dev/null @@ -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` - - 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)