Process attributes coming from Storybook

Created on 16 June 2023, about 1 year ago
Updated 19 June 2023, about 1 year ago

Problem/Motivation

It is possible to define a component with the correct typing for attributes, so that Drupal will check and fail if anything else is passed. This is good

name: Button
status: experimental
props:
  type: object
  properties:
    (...)
    attributes:
      type: Drupal\Core\Template\Attribute

It is also possible, on storybook, to define the matching "attributes" prop and define it as an object, so that it will appear on the living styleguide.This is also good

title: Radix/Button
argTypes:
  (...)
  attributes:
    type: object <--- this tells storybook to treat this prop as an object
    name: attributes
    description: The Drupal Attributes object
    table:
      category: Drupal
      type:
        summary: \Drupal\Core\Template\Attribute <---- this is just the string that gets exposed to the user

And Storybook will let you modify the value of the attributes object in real time. This is awesome...

...but fails to pass the type check as Drupal receives an array and we have (correctly) typed the attributes as an instance of Drupal\Core\Template\Attribute

Proposed resolution

It would be extra awesome to have CL server intercept any attributes coming from CL_server and try to convert them to Drupal's own Drupal\Core\Template\Attribute (when there is actually an attributes entry defined on the component, of course).

This way, it could be easy to test different extra attributes the component might receive (i.e data-attributes, IDs, js modifiers) directly via the storybook UI.

Remaining tasks

Implement

User interface changes

None

API changes

None

Data model changes

None

✨ Feature request
Status

Fixed

Version

2.0

Component

Code

Created by

πŸ‡ͺπŸ‡ΈSpain idiaz.roncero Madrid

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024