Use the Canvas Icon Picker for the icon props of the components

Problem/Motivation

Every icon prop in Vartheme BS5 renders in the Drupal Canvas editor as a long select list of icon names. There is no preview and no search, so an editor picking an icon reads machine names instead of seeing icons.

Canvas Icon Picker gives Drupal Canvas a searchable visual icon picker for component string props, built on the Drupal core Icon API through UI Icons. A prop opts in by adding x-canvas-icon to its *.component.yml.

Until recently enum and x-canvas-icon were mutually exclusive: Drupal Canvas derived a list_string shape from the enum, the picker widget was silently discarded, and the editor fell back to the select list. Adopting the picker would have meant deleting the curated enums, which is 2316 entries across these components. That was reported and fixed upstream in #3619510, now Fixed: the module forces the string field type, carries the enum forward as the allowed icon ids, and writes enum-format values client-side. The curated sets and the picker now coexist.

Steps to reproduce

1. Install Varbase 11 with the Varbase Starter site template, on Vartheme BS5.
2. Install drupal/canvas_icon_picker and UI Icons with the Bootstrap Icons pack.
3. Edit a page in the Drupal Canvas editor and place a Button component.
4. Open its Icon prop.

The prop is a select list of 51 icon names. No preview, no search, no picker.

Proposed resolution

Add x-canvas-icon to the icon prop of seven components. Seven added lines across seven files, nothing removed. Every curated enum stays exactly as it is, and no Twig change is needed.

• atoms/button - 51 enum values - x-canvas-icon: ['bootstrap_icons']
• atoms/icon - 51 enum values - x-canvas-icon: ['bootstrap_icons']
• atoms/badge - 43 enum values - x-canvas-icon: ['bootstrap_icons']
• atoms/bootstrap-icon - 2078 enum values - x-canvas-icon: ['bootstrap_icons']
• organisms/card-icon - 43 enum values - x-canvas-icon: ['bootstrap_icons']
• organisms/icon-toggle - 50 enum values - x-canvas-icon: ['bootstrap_icons']
• foundation/icons - no enum - x-canvas-icon: true

The editor gets a visual picker scoped to precisely the icons the design allows: 51 for Button, 43 for Badge, 50 for Icon toggle, and so on.

This needs drupal/canvas_icon_picker with the #3619510 fix, which is the next release after 1.0.3, or the patch Varbase carries in the meantime in vardot/varbase-patches 11.0.40. Against 1.0.3 alone the picker will not appear.

Verified on a clean Varbase 11 install with the Varbase Starter site template (Drupal core 11.4.5, PHP 8.4.20, Drupal Canvas 1.10.1, UI Icons 1.1.2, Canvas Icon Picker 1.0.3 plus the merged fix):

• All five Canvas-registered components report field_type: string with field_widget: canvas_icon_picker and their full enum as the allowed icon ids (51, 43, 51, 43, 50).
• Every stored component version stays valid: 0 would fail, 10 checked. Existing content on the five Starter pages keeps editing normally and no migration is needed.
• Front page HTTP 200 throughout.

atoms/bootstrap-icon is not registered as a Canvas component, being the internal atom the others delegate to, so its opt-in only affects SDC validation and Storybook.

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 prop of these components becomes a searchable visual icon picker instead of a select list of icon names, scoped to each component's curated icon set.
• No change to the rendered front-end output.

API changes

• N/A

Data model changes

• N/A. The stored value format is unchanged, and existing stored component versions stay valid.

Release notes snippet

• The icon props of the Button, Icon, Badge, Bootstrap Icon, Card Icon, Icon Toggle and Icons components now use the Canvas Icon Picker in the Drupal Canvas editor, scoped to each component's curated icon set. Requires Canvas Icon Picker with the fix from #3619510.

AI-Generated: Yes