Automatically use radio buttons for "small enums" and dropdown for "big enums"

As the screenshot shows: this works, except that the radios are not actually clickable. IOW: it shows the expected form, but it doesn't work.

It looks like 📌 Get Options as buttons in Page Data form working Active might help get us to a point where this is (close to) working!

I'll review this.

Hi @wim leers, I applied the provided MR as a patch, and it was successfully applied without any errors. However, after applying the patch, I'm encountering the following issues:

1. UI error: "An unexpected error has occurred while rendering the component's form."
2. Console error: "Experience Builder determined the options_buttons field widget plugin must be used to populate the experience_builder:custom-cta prop on the cta_count component. However, no xb.transforms metadata is defined on the field widget plugin definition. This makes it impossible for this widget to work. Please define the missing metadata."

Before applying the patch, the components were functioning properly.

I'm sharing the component YAML file I'm using below for reference:

name: CTA Button
description: This is component for adding CTA.
status: stable
props:
  type: object
  properties:
    cta_url:
      type: string
      title: Link URL
      description: Add the url to be used.
      format: uri
      examples:
        - 'https://www.drupal.org'
    cta_title:
      type: string
      title: Link Title
      description: Add the title to be shown on hovering
      examples:
        - 'Learn more'
    cta_icon:
      type: string
      title: CTA icon
      description: Choose the icon to bePDF display for cta
      examples: ['PDF', 'Video', 'Arrow', 'External Icon']
      default: Video
      enum:
        - ''
        - PDF
        - Video
        - External link
        - Arrow icon
    cta_count:
      type: integer
      title: CTA Count
      description: Store the cta count
      enum:
        - 1
        - 2
      examples:
        - 2
    cta_redirect_count:
      type: integer
      title: CTA redirect count
      description: Count redirection of CTA
      enum:
        - 1
        - 2
        - 3
      examples:
        - 3
    cta_redirect_counter:
      type: integer
      title: CTA redirect counter
      description: Count redirection of CTA
      enum:
        - 1
        - 2
        - 3
        - 4
      examples:
        - 4

Additionally, I tried enabling the all-props.component.yml from "tests/modules/sdc_test_all_props/components/all-props/all-props.component.yml" by copying it to "/modules/contrib/experience_builder/components/" with a different component name to debug the issue. However, the component is not appearing under "Components" in the Experience Builder UI.

I'm unsure whether I'm missing something in my configuration or if the recent changes introduced this issue. The same component worked perfectly fine before applying the patch.

For reference, I'm also attaching the screenshots of the component before and after the patch was applied.

Thanks!