feat: #3619736 Use the Canvas Icon Picker for the icon props of the components

Rajab Natshahrequested to merge
issue/vartheme_bs5-3619736:3619736-use-the-canvas into 5.0.x

Issue: #3619736 Use the Canvas Icon Picker for the icon props of the components

Problem / Motivation

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. Today a Vartheme BS5 icon prop renders in the Canvas editor as a long select list of icon names, with no preview and no search.

Proposed resolution

Opt the icon props in. Seven added lines across seven files, nothing removed:

Component enum Line added
Button (atoms/button) 51 x-canvas-icon: ['bootstrap_icons']
Icon (atoms/icon) 51 x-canvas-icon: ['bootstrap_icons']
Badge (atoms/badge) 43 x-canvas-icon: ['bootstrap_icons']
Bootstrap Icon (atoms/bootstrap-icon) 2078 x-canvas-icon: ['bootstrap_icons']
Card Icon (organisms/card-icon) 43 x-canvas-icon: ['bootstrap_icons']
Icon Toggle (organisms/icon-toggle) 50 x-canvas-icon: ['bootstrap_icons']
Icons (foundation/icons) none x-canvas-icon: true

Every curated enum stays, so the editor gets a picker scoped to exactly the icons the design allows. No Twig change is needed.

Why this was not possible until now

enum and x-canvas-icon used to be mutually exclusive: 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, 2316 entries across these components. Reported and fixed upstream in Canvas Icon Picker #3619510, now Fixed.

Requirement

Needs drupal/canvas_icon_picker carrying the #3619510 fix: the release after 1.0.3, or the patch Varbase ships meanwhile in vardot/varbase-patches 11.0.40. Against 1.0.3 alone the picker silently does not appear.

Testing

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.

  • The five Canvas-registered components report field_type: string, 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, no migration needed.
  • Front page HTTP 200 throughout.
  • atoms/bootstrap-icon is not Canvas-registered (it is the internal atom the others delegate to), so its opt-in only affects SDC validation and Storybook.

Not done: the local gitlab-ci-local green-gate was not run for this branch. In its place all seven files were parsed with PyYAML and the added key asserted to land on the icon prop in each. The fork pipeline 940430 is green and covers build, cspell, eslint and stylelint.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports