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

Problem/Motivation

Icon props across the Educare 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 Educare site template in the installer.
2. Open any Canvas page in the editor and select a Button, a Badge, an Icon, an Icon Card, 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 six 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/icon/icon.component.yml, 51
• components/organisms/card-icon/card-icon.component.yml, 43
• components/organisms/icon-toggle/icon-toggle.component.yml, 50

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. The matching recipe change on Educare (install the module, set the icon packs, re-export the Canvas component configs) is a separate issue, and it has to follow this one: the stored component-version hashes in those exported configs are derived from these manifests.

What was verified

On a fresh Varbase 11 install with the Educare 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, Educare 1.0.x-dev, Educare theme 1.0.0-alpha4):

• The Icon field renders the picker, with previews, a search box, a pack filter and recently-used, and no [icon] select element exists anywhere on the form.
• Curation is honoured: 51 curated ids offered for the Icon component against 2,092 for an unconstrained prop. The none sentinel in the badge/button/card-icon enums resolves to no glyph and is simply absent from the grid, leaving 50 tiles.
• Picking people stores people, not bootstrap_icons:people. Published, the page renders <i class="btn__icon-circle-glyph bi bi-people d-inline-block lh-1 fs-5"> to an anonymous visitor. Zero bi-bootstrap_icons classes anywhere in the output.
• Clearing with "Remove icon" stores an empty string with no validation error: the props are required: false, and the templates already treat empty and none alike.
• Anonymous requests to /canvas-icon-picker/index and /canvas-icon-picker/sprite both return 403. The picker's assets do not appear on public pages.
• Nine front-end pages return 200. Nothing new is logged at Error or worse.

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

User interface changes

• In the Drupal Canvas editor, the Icon field on Button, Badge, Icon, Icon Card, 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 stored component version. Stored prop values are unchanged: both shapes hold the same bare scalar.
• Content pinned to a pre-conversion stored version keeps rendering. Bringing that content onto the picker is config-side and belongs to the Educare recipe issue.

Release notes snippet

• Icon fields across the Educare 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.