From 61593efe40b3a7e684f3bb965812bf7627b784b5 Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 29 Sep 2026 14:21:34 +0200 Subject: [PATCH] Fix combobox docs HTML and add screenshots pages Replace the emails in the avatar example with roles so the rendered HTML has no link inside a button, fix the related dropdown link, and add two screenshots pages for the combobox. --- docs/content/ui/forms/combobox.mdx | 12 ++-- screenshots/pages/combobox-field.astro | 46 ++++++++++++++ screenshots/pages/combobox.astro | 88 ++++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 6 deletions(-) create mode 100644 screenshots/pages/combobox-field.astro create mode 100644 screenshots/pages/combobox.astro diff --git a/docs/content/ui/forms/combobox.mdx b/docs/content/ui/forms/combobox.mdx index b9e2759f7..1a3a9f854 100644 --- a/docs/content/ui/forms/combobox.mdx +++ b/docs/content/ui/forms/combobox.mdx @@ -4,7 +4,7 @@ seoTitle: Combobox select order: 14 summary: A select-like field built from a toggle button and a dropdown menu, with custom item content, live search and multiple selection. description: Add a customizable combobox (select replacement) with search, multiple selection, rich items, form submission and full keyboard support. -related: [/ui/forms/elements, /ui/components/dropdowns, /ui/forms/validation] +related: [/ui/forms/elements, /ui/components/dropdown, /ui/forms/validation] source: core/scss/ui/forms/_combobox.scss css-vars: combobox css-plugins: [flags, payments] @@ -486,7 +486,7 @@ Show the person next to the name. -Add a name and an email with `.dropdown-item-content` and `.dropdown-item-description`. +Add a name and a role with `.dropdown-item-content` and `.dropdown-item-description`.
@@ -498,7 +498,7 @@ Add a name and an email with `.dropdown-item-content` and `.dropdown-item-descri Paweł Kuna - pawel@example.com + Product designer @@ -506,7 +506,7 @@ Add a name and an email with `.dropdown-item-content` and `.dropdown-item-descri Jeffie Lewzey - jeffie@example.com + Front-end developer @@ -514,7 +514,7 @@ Add a name and an email with `.dropdown-item-content` and `.dropdown-item-descri Mallory Hulme - mallory@example.com + Project manager @@ -522,7 +522,7 @@ Add a name and an email with `.dropdown-item-content` and `.dropdown-item-descri Dunn Slane - dunn@example.com + QA engineer diff --git a/screenshots/pages/combobox-field.astro b/screenshots/pages/combobox-field.astro new file mode 100644 index 000000000..cfbbbad85 --- /dev/null +++ b/screenshots/pages/combobox-field.astro @@ -0,0 +1,46 @@ +--- +// A single combobox field on its own, open: a country picker with a flag next +// to every name. The capture never clicks, so the open state is written into +// the markup (`show` on the toggle and the menu); the menu sits right under the +// field. Poland is already chosen; Spain is drawn in its hover state, with the fake cursor on it. +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import FormGroup from '@ui/FormGroup.astro' + +const countries: [string, string][] = [ + ['us', 'United States'], + ['gb', 'United Kingdom'], + ['de', 'Germany'], + ['fr', 'France'], + ['pl', 'Poland'], + ['es', 'Spain'], + ['jp', 'Japan'], +] +const check = '' +--- + + + +
+ +
+
+ +
+ { + countries.map(([code, name]) => ( + + )) + } +
+
+ + diff --git a/screenshots/pages/combobox.astro b/screenshots/pages/combobox.astro new file mode 100644 index 000000000..8138c5f05 --- /dev/null +++ b/screenshots/pages/combobox.astro @@ -0,0 +1,88 @@ +--- +// Combobox in context: the "New task" form of an issue tracker, with the +// assignee field open. The capture never clicks, so the open state is written +// into the markup (`show` on the toggle and the menu); the menu sits right +// under the field and covers the next one, like the real thing. The menu holds +// avatars with a name and a role, a search field and a check on the person +// who is already chosen. The fake cursor points at the next person. +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Card from '@ui/Card.astro' +import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' +import FormGroup from '@ui/FormGroup.astro' +import Avatar from '@ui/Avatar.astro' +import { personById } from '@shared/lib/people' + +const team = [1, 4, 2, 6].map((id) => personById(id)) +const labels = ['Bug', 'Backend', 'Urgent', 'Design', 'Docs'] +const check = '' +--- + + + + + New task + Pick who works on it. Search by name, or use the arrow keys. + + + + + +
+ + +
+ +
+ +
+ +
+
+ +
+ { + team.map((person, index) => ( + + )) + } +
+
+
+ + + + + + + + + +
+ + +
+ + +