JsComponents `enum` props should have human-readable labels: use `meta:enum`

Created on 9 May 2025, 24 days ago

Overview

As with SDC covered in šŸ“Œ Leap ahead of #3493070 in core: SDC `enum` props should have human-readable labels: use `meta:enum` Active , enum values do not have (translatable) labels.

We need human-readable equivalents, and those equivalents must be translatable (using Drupal's interface translation mechanism).

āš ļø Out-of-scope here: translatability. Nothing in XB is translatable yet today. This will add the necessary infrastructure to make it feasible later šŸ‘

Proposed resolution

  1. XB "in-browser code components" (aka JavaScriptComponent config entities), should use the same metadata structure as SDCs.

    For that, see the attached config schema patch → .

  2. Modify \Drupal\Tests\experience_builder\Functional\XbConfigEntityHttpApiTest::testJavaScriptComponent() to also create a enum prop. This should first fail validation (422 response), then upon adding the matching meta:enum, it should pass validation.

    This is XB's equivalent for

    1. TEST: kernel test asserting that a meta:enum not matching the enum triggers a \LogicException
  3. XB must change the logic in \Drupal\experience_builder\JsonSchemaInterpreter\SdcPropJsonSchemaType::toDataTypeShapeRequirements() to do the equivalent of
    1. INFRA: add a getEnumOptions(string $prop): array<string, TranslatableMarkup> method to \Drupal\Core\Theme\Component\ComponentMetadata inspired by ui_patterns' \Drupal\ui_patterns\EnumTrait::getEnumOptions(). (The thing that ui_patterns does not yet do is pass it through Drupal's t().)

    That means changing e.g.

          SdcPropJsonSchemaType::STRING => match (TRUE) {
            array_key_exists('enum', $schema) => new DataTypeShapeRequirement('Choice', [
              'choices' => $schema['enum'],
            ], NULL),
    

    to actually use the meta:enum values.

    (Note that here, they must NOT be translated — translation must happen at runtime — this corresponds to a FieldConfig config entity aka configuration.)

  4. Now update ui/tests/e2e/prop-types.cy.js to prove that the labels for the enum indeed appear in the UI, by updating the it('Enum (select) - string', () => { test case.

    This is XB's equivalent for

    1. TEST: kernel test asserting that 2 identical type: string, enum: […] props can have different translations for the same enum values. For example: a '' enum value results in Same window for the target prop and in None for a rel prop.
      → verifies it works end-to-end, and supports translation contexts

User interface changes

  • Any code component that has a string enum and a matching meta:enum will now be asked for labels instead of values, and the values will be automatically generated client-side.
  • āš ļø Follow-up: The UI should provide the ability to customize the values. āš ļø
  • Any code component that does have both enum and a matching meta:enum will now see those labels in the component inputs form on the right-hand side.
šŸ“Œ Task
Status

Active

Version

0.0

Component

Component sources

Created by

šŸ‡ŖšŸ‡øSpain penyaskito Seville šŸ’ƒ, Spain šŸ‡ŖšŸ‡ø, UTC+2 šŸ‡ŖšŸ‡ŗ

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024