Opt the icon props into the Canvas Icon Picker with x-canvas-icon, keeping the curated enum lists

Problem/Motivation

Icon props across the Horizon Aid components render as a plain select list of icon names. There is no preview and no search. On atoms/bootstrap-icon that list runs to 2,078 entries.

Canvas Icon Picker replaces that select with a searchable, visual picker inside the Drupal Canvas editor, built on core's Icon API through UI Icons, which Varbase already installs. A string prop opts in with x-canvas-icon in its *.component.yml.

This theme curates its icon sets with enum, and until recently that ruled the picker out: Drupal Canvas had already derived a list_string/options_select shape from the enum, the module overrode only the widget, and the picker was silently dropped: no error, no warning, just the long select list. That is fixed upstream in #3619510 and #3619785, both in canvas_icon_picker 1.0.3: the module now forces the plain-string field type, reads the enum into allowed_icon_ids, and stores the bare icon id.

So the curation can be kept. Nothing has to be deleted, and no Twig has to change.

Steps to reproduce

1. Build a Varbase 11 site and pick the Horizon Aid site template in the installer.
2. Open any Canvas page in the editor and select a Button, a Badge, an Icon, an Icon Card, a Date, or the header search toggle.
3. The Icon field is a select list of icon names, with no preview and no search.

Proposed resolution

Add x-canvas-icon: ['bootstrap_icons'] to the icon prop of seven components, keeping every enum exactly as it is:

• components/atoms/badge/badge.component.yml, 43 curated ids
• components/atoms/bootstrap-icon/bootstrap-icon.component.yml, 2,078
• components/atoms/button/button.component.yml, 51
• components/atoms/date/date.component.yml, 7
• components/atoms/icon/icon.component.yml, 51
• components/organisms/card-icon/card-icon.component.yml, 43
• components/organisms/icon-toggle/icon-toggle.component.yml, 50

components/foundation/icons is deliberately left alone: it is noUi: true and has no enum, so it is never offered in the Canvas UI and converting it would change nothing for an editor.

CanvasIconPickerHooks::canvasStorablePropShapeAlter() then forces field_type: string, sets allowed_icon_pack from the x-canvas-icon array and allowed_icon_ids from the enum. The picker stores the bare id, which is what 'bi-' ~ icon in bootstrap-icon.twig already expects, so there is no pack-prefix handling to add and no template to touch.

Requires drupal/canvas_icon_picker >= 1.0.3.

Order matters, and more than it does for the other site templates. Changing these manifests changes the component version hash Drupal Canvas derives for each of them, and recipes/horizonaid/recipe.yml hardcodes 134 component_version values, 13 of which are the pre-conversion hashes of components in this list. Landing this theme change on its own makes a fresh Horizon Aid install fail:

There were validation errors in canvas.content_template.node.blog.impressed_card_large:
- component_tree.24ba3122-....component_version: '13d91759ac4fcdfe' is not a version
  that exists on component config entity 'sdc.vartheme_bs5_horizonaid.badge'.
  Available versions: '60738022e738eef8', '6110e8f5a7d6d5cf'.

So this issue must land together with the recipe-side change on Horizon Aid, which re-exports the affected component configs so the old hashes still exist as stored versions. Verified by installing with the theme converted and the recipe untouched: it fails as above; with both changed, it installs green.

What was verified

On a fresh Varbase 11 install with the Horizon Aid site template (Drupal core 11.4.5, PHP 8.4, Drupal Canvas 1.10.1, UI Icons 1.1.2, Canvas Icon Picker 1.0.3, Varbase 11.0.x-dev, Horizon Aid theme 1.0.0-alpha3):

• Every component's every stored version resolves the icon prop to field_widget: canvas_icon_picker with field_type: string; none left on options_select.
• allowed_icon_ids counts match the manifests exactly: badge 43, button 51, date 7, icon 51, icon-toggle 50, card-icon 43.
• The Icon field renders the picker in the Canvas sidebar, with previews, a search box, a pack filter and a recently-used row. No [icon] select element exists on the form.
• Curation is honoured in the drawer: searching heart on the Button returns nothing, because heart is not in that prop's 51 curated ids; searching arrow-right returns exactly arrow-right and arrow-right-circle-fill.
• Picking arrow-right stores arrow-right, not bootstrap_icons:arrow-right. Published, the Donate button renders <i data-component-id="vartheme_bs5_horizonaid:bootstrap-icon" class="bi bi-arrow-right d-inline-block lh-1 fs-4"> to an anonymous visitor. Zero bi-bootstrap_icons classes anywhere in the output.
• All eight Canvas pages return 200 anonymously. Anonymous requests to /canvas-icon-picker/index and /canvas-icon-picker/sprite both return 403.
• No log entries at Error or worse. The install's remaining warnings (system_branding_block, system_menu_block.main, views_exposed_filter_block) appear with identical counts on an unmodified Horizon Aid install, so they are pre-existing.

Drafted with AI assistance (AI-Generated: Yes), per the Drupal AI policy. Every claim above was verified by running it.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ✅ Release, vartheme_bs5_horizonaid-1.0.0-alpha4

User interface changes

• In the Drupal Canvas editor, the Icon field on Button, Badge, Icon, Icon Card, Date, Bootstrap Icon and the header Icon Toggle becomes a searchable icon picker with live previews instead of a select list of names. The set of selectable icons is unchanged, because the curated enum lists are preserved.
• No change for site visitors.

API changes

• N/A

Data model changes

• The icon prop's derived Canvas field shape changes from list_string/options_select to string/canvas_icon_picker, so each affected component gets a new derived component version: badge 13d91759ac4fcdfe to 60738022e738eef8, button 64089b7681474537 to 22dfe88e799bff14, date d3ef992079effe12 to 7b870a5d2bc56530, icon 1a1be90969d87a65 to 9bc1e1a79ad3aca5, icon-toggle c42c2d3c773c4f6c to 9b1120a77a9891d1, card-icon 24fe816827665e54 to 62345acf6ed14ba8.
• Stored prop values are unchanged: both field shapes hold the same bare scalar.
• Because the recipe pins those hashes by hand, the config-side companion change is required for a fresh install to succeed. See the Horizon Aid recipe issue.

Release notes snippet

• Icon fields across the Horizon Aid components now use the Canvas Icon Picker, so editors search and see icons instead of reading a list of names. The curated icon sets are unchanged. Requires Canvas Icon Picker 1.0.3 or newer, and the matching Horizon Aid recipe release.