Open malalancette opened 2 years ago
Hi Maxim,
I know learning Wingsuit/UI Patterns is not that easy. And I know it should be much more documented. Have you seen the slack account. Don't hessitate to ask me (or discuss) if you have any questions.
Can you describe what are your (biggest) pain points in the documentation? Actually, an explanation Video about Wingsuit/UI Patterns would good.
(To your bug. I will check that.)
Hi Christian,
Thanks for the quick answer.
I looked for the slack account, but I'm not able to join. Do I need an invite or something?
Before talking about my issues with the documentation, I have to tell you, my specialty in web dev is HTML, CSS and JavaScript (not NodeJS, Webpack, etc.). I can find my way around a NodeJs and a Webpack server, but I'm not the one that set it up, because it's way outside my knowledge capabilities (when the programming logic is getting really deep, my brain shortcuts) and interests. So, if I don't have a documentation that easily explain to me what does what and what goes where, I will have difficulty to to what I have to do.
Also, I hope that I don't like I'm angry. I assure you that I'm not.
As for the documentation, it's a collegue of mine that installed Wingsuit, so for what I need to do the only part of the documentation that I use is related to pattern definition and twig file, but I also needed to add assets so the two major sections of the documentation that I used are :
With that said, I'll start with the Assets one. I needed to add Font-Awesome webfonts and Alpine.js. When I read the Assets doc, it didn't really tell me how to add the webfonts. So I searched into the Github repository and the project issues to find clues on how that works. I found one of your answers in one issue about webfonts, so I used that and it worked, but it was not anywhere in the documentation. For Alpine.js, I followed the doc for JavaScript Assets and it didn't work. So I searched the Github repository and found this file. It was exactly what I needed, but even if it was a lot alike the documentation, what was inside Drupal.behaviors.alpinejs = {}
was not in the documentation. With some help from my collegue, I was able to make this works because alpinejs.vendor.js
was not compiled by TypeScript (I had to add "allowJs": true
option to make this works).
As for the Components documentation :
pattern.wingsuit.yml
works, what can it do in Storybook and in Drupal (also compare the differences in Storybook vs Drupal), etc.
else if
to use the Storybook "number" control and it worked, so I think that there is room for improvement here.<select>
box and when I tried using the "checkboxes" type (also tried "checkbox"), but it gave me a simple text <input>
. No explanation in Wingsuit doc, no explanation anywhere. After analysing Wingsuit's code, like I did for the field types, I saw that it didn't support some of Storybook's controls. The "radios" type has a bug, as explained in my first comment here. Also, "checkboxes" type is not supported like I said above. So, here too there is room for improvement and it could be mentionned in doc.attributes
, token
, group
, colorwidget
and coloriswidget
. I know that it's something used by Drupal, but I don't find any documentation about these types.pattern
and type object
. The documentation says that "These extensions are not compatible with UI Patterns Library.". So I suppose it means that it can't be used by Drupal, isn't it? What is the purpose then? I can't see what to use them for and how to use them.pattern_configuration
. I know that it's use in some Twig files, but I saw no doc to explain what it does or how to use it.In conclusion, what I suggest you is to add screenshots to your documentation. It will help to visualize what the documentation says.
So, that's about it.
Hi @christianwiedemann,
Did you see my last post?
Does that makes senses what I wrote?
I just wanted a follow up.
Thanks
Hi @malalancette,
Yes it makes sense and thanks for your explanation! So to your questions:
Would be great if you can come to slack than we can chat/talk directly.
thanks to both of you for a detailed issue here, but I believe we got a bit off-topic here, which is a whole other issue.
I still believe the radios
type should be fixed regardless, any ideas on that part @christianwiedemann ?
Hi,
I've been working with Wingsuit in the past two weeks, trying to make sense of it and also of UI Patterns and UI Patterns Settings. I don't have a lot of experience with Drupal and its modules, so I read the documentation of these two modules as listed on https://wingsuit-designsystem.github.io/components/wingsuit/ and also of the Wingsuit documentation and I became really frustrated with the lack of explanations for the patterns definitions (*.wingsuit.yml files).
I had to analyse how Wingsuit work under the hood to make sense of it all. Two weeks later, I think I understand it better now. Well... I hope.
What makes me write this issue is I think there is an issue in the code for the setting type "radios".
https://github.com/wingsuit-designsystem/wingsuit/blob/68dfedbfc4fe8ed4288fcbf5fdccbe4d5b2d4942/packages/storybook/src/index.tsx#L147-L160
At line 159 in the code above, I think that the first instance of the word
radio
, should be plural as seen at line 149. Because it is not, setting type "radios" use a<select>
in Storybook instead of radio buttons.I tested it and when I fix the word, the select box become radio buttons as you can see in the image below.