From f380fa24d1ff8845886131eb9c2c6d23228f8f60 Mon Sep 17 00:00:00 2001 From: Hamza Makraz Date: Sat, 18 Apr 2026 15:48:03 +0100 Subject: [PATCH] add combobox --- src/Toolkit/CHANGELOG.md | 1 + .../assets/controllers/combobox_controller.js | 294 ++++++++++++++++++ .../combobox/examples/Clearable.html.twig | 15 + .../shadcn/combobox/examples/Demo.html.twig | 13 + .../combobox/examples/Disabled.html.twig | 12 + .../combobox/examples/Empty State.html.twig | 11 + .../combobox/examples/Long List.html.twig | 59 ++++ .../shadcn/combobox/examples/Usage.html.twig | 13 + .../examples/With Default Value.html.twig | 14 + .../combobox/examples/With Form.html.twig | 21 ++ .../combobox/examples/With Groups.html.twig | 24 ++ .../kits/shadcn/combobox/manifest.json | 19 ++ .../templates/components/Combobox.html.twig | 159 ++++++++++ ...box, code file Clearable.html.twig__1.html | 62 ++++ ...combobox, code file Demo.html.twig__1.html | 59 ++++ ...obox, code file Disabled.html.twig__1.html | 50 +++ ...x, code file Empty State.html.twig__1.html | 45 +++ ...box, code file Long List.html.twig__1.html | 289 +++++++++++++++++ ... file With Default Value.html.twig__1.html | 60 ++++ ...box, code file With Form.html.twig__1.html | 72 +++++ ...x, code file With Groups.html.twig__1.html | 99 ++++++ 21 files changed, 1391 insertions(+) create mode 100644 src/Toolkit/kits/shadcn/combobox/assets/controllers/combobox_controller.js create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Clearable.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Disabled.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Empty State.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Long List.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/With Default Value.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/With Form.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/examples/With Groups.html.twig create mode 100644 src/Toolkit/kits/shadcn/combobox/manifest.json create mode 100644 src/Toolkit/kits/shadcn/combobox/templates/components/Combobox.html.twig create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Clearable.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Demo.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Disabled.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Empty State.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Long List.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Default Value.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Form.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Groups.html.twig__1.html diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md index f5529d1b814..ff59bb861bf 100644 --- a/src/Toolkit/CHANGELOG.md +++ b/src/Toolkit/CHANGELOG.md @@ -2,6 +2,7 @@ ## 3.1 +- [Shadcn] Add `combobox` recipe - [Toolkit] Add `avatar` recipe - [Toolkit] Add `dropdown` recipe diff --git a/src/Toolkit/kits/shadcn/combobox/assets/controllers/combobox_controller.js b/src/Toolkit/kits/shadcn/combobox/assets/controllers/combobox_controller.js new file mode 100644 index 00000000000..d7982b0716e --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/assets/controllers/combobox_controller.js @@ -0,0 +1,294 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = [ + 'trigger', + 'label', + 'popover', + 'search', + 'option', + 'empty', + 'hiddenInput', + 'group', + 'clearButton', + ]; + + static values = { + value: { type: String, default: '' }, + placeholder: { type: String, default: 'Select option...' }, + }; + + #activeIndex = -1; + #isOpen = false; + #outsideClickHandler = null; + + connect() { + this.#outsideClickHandler = this.#onOutsideClick.bind(this); + } + + disconnect() { + this.#close(); + } + + toggle() { + if (this.#isOpen) { + this.#close(); + } else { + this.#open(); + } + } + + clear(event) { + event.stopPropagation(); + this.valueValue = ''; + } + + onSearch(event) { + const query = event.target.value.toLowerCase(); + let firstVisibleIndex = -1; + let visibleCount = 0; + + const targets = this.optionTargets; + for (let i = 0; i < targets.length; i++) { + const matches = targets[i].dataset.label.toLowerCase().includes(query); + targets[i].hidden = !matches; + if (matches) { + if (firstVisibleIndex === -1) firstVisibleIndex = i; + visibleCount++; + } + } + + for (const group of this.groupTargets) { + group.hidden = !targets.filter((o) => group.contains(o)).some((o) => !o.hidden); + } + + this.emptyTarget.hidden = visibleCount > 0; + this.#setActive(firstVisibleIndex); + } + + onSelect(event) { + this.#selectOption(event.currentTarget); + } + + onOptionHover(event) { + const index = this.optionTargets.indexOf(event.currentTarget); + if (index !== -1 && !event.currentTarget.hidden) { + this.#setActive(index); + } + } + + onTriggerKeydown(event) { + switch (event.key) { + case 'ArrowDown': + event.preventDefault(); + this.#open(); + this.#setActive(this.#firstVisibleIndex()); + break; + case 'ArrowUp': + event.preventDefault(); + this.#open(); + this.#setActive(this.#lastVisibleIndex()); + break; + case 'Enter': + case ' ': + event.preventDefault(); + this.#open(); + break; + } + } + + onSearchKeydown(event) { + switch (event.key) { + case 'ArrowDown': { + event.preventDefault(); + const next = this.#nextVisibleIndex(this.#activeIndex); + if (next !== -1) this.#setActive(next); + break; + } + case 'ArrowUp': { + event.preventDefault(); + const prev = this.#prevVisibleIndex(this.#activeIndex); + if (prev !== -1) this.#setActive(prev); + break; + } + case 'Home': + event.preventDefault(); + this.#setActive(this.#firstVisibleIndex()); + break; + case 'End': + event.preventDefault(); + this.#setActive(this.#lastVisibleIndex()); + break; + case 'Enter': + event.preventDefault(); + if (this.#activeIndex !== -1) { + this.#selectOption(this.optionTargets[this.#activeIndex]); + } + break; + case 'Escape': + event.preventDefault(); + this.#close(); + this.triggerTarget.focus(); + break; + case 'Tab': + this.#close(); + break; + } + } + + valueValueChanged() { + this.#syncLabel(); + this.#syncCheckIcons(); + if (this.hasHiddenInputTarget) { + this.hiddenInputTarget.value = this.valueValue; + } + } + + #open() { + if (this.#isOpen) return; + this.#isOpen = true; + + this.searchTarget.value = ''; + for (const option of this.optionTargets) { + option.hidden = false; + } + for (const group of this.groupTargets) { + group.hidden = false; + } + this.emptyTarget.hidden = true; + this.#setActive(-1); + + const popover = this.popoverTarget; + popover.hidden = false; + popover.dataset.state = 'open'; + this.#positionPopover(); + this.triggerTarget.setAttribute('aria-expanded', 'true'); + + document.addEventListener('pointerdown', this.#outsideClickHandler); + + requestAnimationFrame(() => { + this.searchTarget.focus(); + }); + } + + #close() { + if (!this.#isOpen) return; + this.#isOpen = false; + + const popover = this.popoverTarget; + popover.hidden = true; + popover.dataset.state = 'closed'; + popover.style.cssText = ''; + this.triggerTarget.setAttribute('aria-expanded', 'false'); + + document.removeEventListener('pointerdown', this.#outsideClickHandler); + } + + #selectOption(option) { + const { value, label } = option.dataset; + this.valueValue = value; + this.dispatch('change', { detail: { value, label }, bubbles: true }); + this.#close(); + this.triggerTarget.focus(); + } + + #syncLabel() { + if (!this.hasLabelTarget) return; + const selected = this.hasOptionTarget + ? this.optionTargets.find((o) => o.dataset.value === this.valueValue) + : null; + const label = selected ? selected.dataset.label : ''; + this.labelTarget.textContent = label || this.placeholderValue; + this.labelTarget.classList.toggle('text-muted-foreground', !label); + if (this.hasClearButtonTarget) { + this.clearButtonTarget.hidden = !label; + } + } + + #syncCheckIcons() { + if (!this.hasOptionTarget) return; + for (const option of this.optionTargets) { + const selected = option.dataset.value === this.valueValue; + option.setAttribute('aria-selected', String(selected)); + const icon = option.querySelector('svg'); + if (icon) { + icon.classList.toggle('opacity-0', !selected); + icon.classList.toggle('opacity-100', selected); + } + } + } + + #setActive(index) { + if (this.#activeIndex !== -1 && this.optionTargets[this.#activeIndex]) { + delete this.optionTargets[this.#activeIndex].dataset.active; + } + + this.#activeIndex = index; + + if (index === -1) { + if (this.hasSearchTarget) { + this.searchTarget.removeAttribute('aria-activedescendant'); + } + return; + } + + const option = this.optionTargets[index]; + if (!option) return; + + option.dataset.active = ''; + this.searchTarget.setAttribute('aria-activedescendant', option.id); + option.scrollIntoView({ block: 'nearest' }); + } + + #firstVisibleIndex() { + return this.optionTargets.findIndex((o) => !o.hidden); + } + + #lastVisibleIndex() { + const targets = this.optionTargets; + for (let i = targets.length - 1; i >= 0; i--) { + if (!targets[i].hidden) return i; + } + return -1; + } + + #nextVisibleIndex(from) { + const targets = this.optionTargets; + for (let i = from + 1; i < targets.length; i++) { + if (!targets[i].hidden) return i; + } + return from; + } + + #prevVisibleIndex(from) { + const targets = this.optionTargets; + for (let i = from - 1; i >= 0; i--) { + if (!targets[i].hidden) return i; + } + return from; + } + + #positionPopover() { + const triggerRect = this.triggerTarget.getBoundingClientRect(); + const popover = this.popoverTarget; + const popoverHeight = popover.offsetHeight; + + popover.style.position = 'fixed'; + popover.style.width = `${triggerRect.width}px`; + popover.style.left = `${triggerRect.left}px`; + popover.style.zIndex = '50'; + + const spaceBelow = window.innerHeight - triggerRect.bottom; + if (spaceBelow < popoverHeight && triggerRect.top > spaceBelow) { + popover.style.top = `${Math.max(0, triggerRect.top - popoverHeight)}px`; + } else { + popover.style.top = `${triggerRect.bottom}px`; + } + } + + #onOutsideClick(event) { + if (!this.element.contains(event.target) && !this.popoverTarget.contains(event.target)) { + this.#close(); + } + } +} diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Clearable.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Clearable.html.twig new file mode 100644 index 00000000000..5deee78da73 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Clearable.html.twig @@ -0,0 +1,15 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'icons', label: 'UX Icons'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Demo.html.twig new file mode 100644 index 00000000000..7a75807679f --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Demo.html.twig @@ -0,0 +1,13 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'icons', label: 'UX Icons'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Disabled.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Disabled.html.twig new file mode 100644 index 00000000000..9613018ea4f --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Disabled.html.twig @@ -0,0 +1,12 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Empty State.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Empty State.html.twig new file mode 100644 index 00000000000..67cc5a71386 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Empty State.html.twig @@ -0,0 +1,11 @@ +{% set frameworks = [ + {value: 'next', label: 'Next.js'}, + {value: 'sveltekit', label: 'SvelteKit'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Long List.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Long List.html.twig new file mode 100644 index 00000000000..4afd5e49fff --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Long List.html.twig @@ -0,0 +1,59 @@ +{% set languages = [ + {value: 'php', label: 'PHP'}, + {value: 'javascript', label: 'JavaScript'}, + {value: 'typescript', label: 'TypeScript'}, + {value: 'python', label: 'Python'}, + {value: 'ruby', label: 'Ruby'}, + {value: 'go', label: 'Go'}, + {value: 'rust', label: 'Rust'}, + {value: 'java', label: 'Java'}, + {value: 'kotlin', label: 'Kotlin'}, + {value: 'swift', label: 'Swift'}, + {value: 'csharp', label: 'C#'}, + {value: 'cpp', label: 'C++'}, + {value: 'c', label: 'C'}, + {value: 'scala', label: 'Scala'}, + {value: 'elixir', label: 'Elixir'}, + {value: 'erlang', label: 'Erlang'}, + {value: 'haskell', label: 'Haskell'}, + {value: 'ocaml', label: 'OCaml'}, + {value: 'fsharp', label: 'F#'}, + {value: 'clojure', label: 'Clojure'}, + {value: 'dart', label: 'Dart'}, + {value: 'r', label: 'R'}, + {value: 'matlab', label: 'MATLAB'}, + {value: 'perl', label: 'Perl'}, + {value: 'lua', label: 'Lua'}, + {value: 'julia', label: 'Julia'}, + {value: 'groovy', label: 'Groovy'}, + {value: 'shell', label: 'Shell'}, + {value: 'powershell', label: 'PowerShell'}, + {value: 'sql', label: 'SQL'}, + {value: 'html', label: 'HTML'}, + {value: 'css', label: 'CSS'}, + {value: 'sass', label: 'Sass'}, + {value: 'less', label: 'Less'}, + {value: 'graphql', label: 'GraphQL'}, + {value: 'yaml', label: 'YAML'}, + {value: 'toml', label: 'TOML'}, + {value: 'json', label: 'JSON'}, + {value: 'xml', label: 'XML'}, + {value: 'markdown', label: 'Markdown'}, + {value: 'latex', label: 'LaTeX'}, + {value: 'zig', label: 'Zig'}, + {value: 'nim', label: 'Nim'}, + {value: 'crystal', label: 'Crystal'}, + {value: 'reason', label: 'ReasonML'}, + {value: 'elm', label: 'Elm'}, + {value: 'purescript', label: 'PureScript'}, + {value: 'coffeescript', label: 'CoffeeScript'}, + {value: 'objective-c', label: 'Objective-C'}, + {value: 'vba', label: 'VBA'}, + {value: 'cobol', label: 'COBOL'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/Usage.html.twig new file mode 100644 index 00000000000..e8de12005a8 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/Usage.html.twig @@ -0,0 +1,13 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'icons', label: 'UX Icons'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/With Default Value.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/With Default Value.html.twig new file mode 100644 index 00000000000..6000db80b60 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/With Default Value.html.twig @@ -0,0 +1,14 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'icons', label: 'UX Icons'}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/With Form.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/With Form.html.twig new file mode 100644 index 00000000000..7175f996f49 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/With Form.html.twig @@ -0,0 +1,21 @@ +{% set packages = [ + {value: 'turbo', label: 'UX Turbo'}, + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'icons', label: 'UX Icons'}, +] %} +
+ + + diff --git a/src/Toolkit/kits/shadcn/combobox/examples/With Groups.html.twig b/src/Toolkit/kits/shadcn/combobox/examples/With Groups.html.twig new file mode 100644 index 00000000000..b2ccb8862f9 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/examples/With Groups.html.twig @@ -0,0 +1,24 @@ +{% set packages = [ + {label: 'Stimulus', choices: [ + {value: 'twig-component', label: 'UX Twig Component'}, + {value: 'live-component', label: 'UX Live Component'}, + {value: 'autocomplete', label: 'UX Autocomplete'}, + {value: 'turbo', label: 'UX Turbo'}, + ]}, + {label: 'Frontend Frameworks', choices: [ + {value: 'react', label: 'UX React'}, + {value: 'vue', label: 'UX Vue'}, + {value: 'svelte', label: 'UX Svelte'}, + ]}, + {label: 'UI & Visualization', choices: [ + {value: 'icons', label: 'UX Icons'}, + {value: 'chartjs', label: 'UX Chart.js'}, + {value: 'map', label: 'UX Map'}, + ]}, +] %} + diff --git a/src/Toolkit/kits/shadcn/combobox/manifest.json b/src/Toolkit/kits/shadcn/combobox/manifest.json new file mode 100644 index 00000000000..d2ceff5d802 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/manifest.json @@ -0,0 +1,19 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Combobox", + "description": "Autocomplete input and command palette with a list of suggestions.", + "copy-files": { + "assets/": "assets/", + "templates/": "templates/" + }, + "dependencies": { + "composer": [ + "symfony/ux-icons", + "twig/extra-bundle", + "twig/html-extra:^3.24.0", + "tales-from-a-dev/twig-tailwind-extra:^1.0.0", + "symfony/ux-twig-component:^2.35" + ] + } +} diff --git a/src/Toolkit/kits/shadcn/combobox/templates/components/Combobox.html.twig b/src/Toolkit/kits/shadcn/combobox/templates/components/Combobox.html.twig new file mode 100644 index 00000000000..36883aaffa4 --- /dev/null +++ b/src/Toolkit/kits/shadcn/combobox/templates/components/Combobox.html.twig @@ -0,0 +1,159 @@ +{# @prop id string Unique identifier for ARIA references and internal element IDs. #} +{# @prop name string|null If set, renders a hidden input for form submission. Defaults to `null`. #} +{# @prop value string The initially selected value. Must match a choices entry. Defaults to `''`. #} +{# @prop choices array List of choices: [{value: '...', label: '...'}] or grouped [{label: '...', choices: [{value: '...', label: '...'}]}]. Defaults to `[]`. #} +{# @prop placeholder string Text shown on the trigger when nothing is selected. Defaults to `'Select option...'`. #} +{# @prop searchPlaceholder string Placeholder inside the search input. Defaults to `'Search...'`. #} +{# @prop emptyMessage string Shown when the filter matches nothing. Defaults to `'No results found.'`. #} +{# @prop disabled boolean Whether the widget is disabled. Defaults to `false`. #} +{# @prop required boolean Adds required to the hidden input (only applies when name is set). Defaults to `false`. #} +{# @prop clearable boolean Shows a clear button when a value is selected. Defaults to `false`. #} +{%- props id, name = null, value = '', choices = [], placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyMessage = 'No results found.', disabled = false, required = false, clearable = false -%} + +{%- set _is_grouped = choices is not empty and choices|first.choices is defined -%} +{%- set _selected_label = '' -%} +{%- if _is_grouped -%} + {%- for group in choices -%} + {%- for choice in group.choices -%} + {%- if choice.value == value -%}{%- set _selected_label = choice.label -%}{%- endif -%} + {%- endfor -%} + {%- endfor -%} +{%- else -%} + {%- for choice in choices -%} + {%- if choice.value == value -%}{%- set _selected_label = choice.label -%}{%- endif -%} + {%- endfor -%} +{%- endif -%} + +
+ + + {% if name is not null %} + + {% endif %} + + +
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Clearable.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Clearable.html.twig__1.html new file mode 100644 index 00000000000..d1975cf494c --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Clearable.html.twig__1.html @@ -0,0 +1,62 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Demo.html.twig__1.html new file mode 100644 index 00000000000..e9d9a28c0d0 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Demo.html.twig__1.html @@ -0,0 +1,59 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Disabled.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Disabled.html.twig__1.html new file mode 100644 index 00000000000..c409f58f196 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Disabled.html.twig__1.html @@ -0,0 +1,50 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Empty State.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Empty State.html.twig__1.html new file mode 100644 index 00000000000..a5cfb1a5e99 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Empty State.html.twig__1.html @@ -0,0 +1,45 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Long List.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Long List.html.twig__1.html new file mode 100644 index 00000000000..e4f69ef6cb9 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file Long List.html.twig__1.html @@ -0,0 +1,289 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Default Value.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Default Value.html.twig__1.html new file mode 100644 index 00000000000..f8678a93770 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Default Value.html.twig__1.html @@ -0,0 +1,60 @@ + +
+ + + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Form.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Form.html.twig__1.html new file mode 100644 index 00000000000..15e3e83c258 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Form.html.twig__1.html @@ -0,0 +1,72 @@ + +
+
+ + + + + +
+ + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Groups.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Groups.html.twig__1.html new file mode 100644 index 00000000000..768d9afb7a2 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component combobox, code file With Groups.html.twig__1.html @@ -0,0 +1,99 @@ + +
+ + + + +
\ No newline at end of file