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
| Comment | File | Size | Author |
|---|---|---|---|
| Screenshot_20230616_111522.png | 3.28 KB | idiaz.roncero | |
| Screenshot_20230616_112022.png | 24.18 KB | idiaz.roncero |
Issue fork cl_server-3367208
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
idiaz.ronceroFirst idea for a solution commited to new branch.
This line bugs me and it might be a better way to do it:
Comment #4
e0ipsoComment #5
idiaz.ronceroComment #6
e0ipsoThis looks good to me. Merging.
Comment #8
e0ipsoComment #9
idiaz.ronceroAwesome, thanks