Nested Children

[jowan]

Describe the bug I can not nest pattern fields in my wingsuit yml file. In other words, I can not set children patterns fields in children patterns.

This could be a feature request, but the docs were unclear as to whether children can only be one level deep (flat).

Storybook just outputs

[object Map]

with my template print children pattern

{{ children }}

Expected behavior When nesting using children, they are rendered correctly.

Additional context In Drupal, children in children in children is pretty typical. Especially in forms with field elements, they are heavily nested. I really like to mock up my forms in Storybook. With Wingsuit I can do it almost entirely in yml with pattern/children - this is great ! But, it needs to wok with nested children, as I want to set some settings and fields in the yml.

Here is some yml that does not work. I think you can see what I am trying to do.

form-checkboxes has a multi value pattern children field, but trying to set it does not work :( I just get the output as above.

tag-checkboxes:
  namespace: "Atoms/TM - Forms"
  use: "@atoms/tm-forms/tag-checkbox/_tag-checkboxes.twig"
  label: Tag Checkboxes
  description: Tag Checkboxes

  settings:
    attributes:
      type: attributes
      label: Attributes

  fields:
    children:
      type: pattern
      label: Children
      multi_value_type: single_value
      preview:
        id: form-checkboxes
        fields:
          children:
            - id: form-element
              variant: "checkbox"
              fields:
                description_content: ""
                errors: ""
              settings:
                type: checkbox
            - id: form-element
              variant: "checkbox"
              fields:
                description_content: ""
                errors: ""
              settings:
                type: checkbox

thanks for any help.

[christianwiedemann]

Hi, I think it is a great feature and I implemented it and I just released it in 1.1-alpha-1 right now.

Would be great if you like to test it.

[jowan]

Oh that's great.

Is there any documentation on how it needs to be implemented ? such as - do the nested patterns (which are children of patterns) need to be declared as such in the yml ? or will it just work ?

[christianwiedemann]

it will just work. Actually the rendering just works recursive.

[jowan]

easy !

[jowan]

Hi there, Thanks for the work on this. I couldn't quite get it to work yet :( It might just be syntax, and I'm not structuring my yml correctly, if so, please throw me a working example.

I've created a repo with a test https://github.com/jowan/wingsuit-nested-test using what I thought was the correct syntax in the yml.

Here is a breakdown of the yml, I'm sure you'll get it:

Super simple pattern with a single {{text}} in the template.

nested_child:
  namespace: "Templates/Tests"
  use: "@templates/tests/_child.twig"
  label: Child A
  fields:
    text:
      type: text
      label: Text
      preview: "Hi - I'm a child"

This is a pretty standard pattern with some child pattern fields. The preview defaults and variants all work correctly - all good so far.

nested_parent:
  namespace: "Templates/Tests"
  use: "@templates/tests/_parent.twig"
  label: Parent
  fields:
    child_a:
      type: pattern
      label: 'Child A'
      preview:
        id: 'nested_child'
    child_b:
      type: pattern
      label: 'Child B'
      preview:
        id: 'nested_child'
  variants:
    __default:
      label: "Default"
    happy_children:
      label: "Happy children"
      fields:
        child_a:
          id: 'nested_child'
          fields:
            text: "I am happy"
        child_b:
          id: 'nested_child'
          fields:
            text: "I am happy too"
    sad_children:
      label: "Sad children"
      fields:
        child_a:
          id: 'nested_child'
          fields:
            text: "I'm so sad"
        child_b:
          id: 'nested_child'
          fields:
            text: "Yeh, me too :("

My demo/test example using nested children, this doesn't seem to work:

nested_grand_parent:
  namespace: "Templates/Tests"
  use: "@templates/tests/_grand_parent.twig"
  label: Grand parent
  fields:
    parent:
      type: pattern
      label: 'Parent'
      preview:
        id: 'nested_parent'
  variants:
    __default:
      label: "Default"
    happy_grand_children:
      label: "Happy grand children"
      fields:
        parent:
          id: 'nested_parent'
          variant: 'happy_children'
    blue_grand_children:
      label: "Blue grand children"
      fields:
        parent:
          id: 'nested_parent'
          fields:
            child_a:
              id: 'nested_child'
              fields:
                text: "I'm am blue"
            child_b:
              id: 'nested_child'
              fields:
                text: "Soo blue"

Here is what I observed:

(working)

1. The __default variant for 'nested_grand_parent' correctly loads the default values for 'nested_parent' which in turn loads the default values for 'nested_child' - great.
2. The 'happy_grand_children' variant for 'nested_grand_parent' correctly loads the 'happy_children' variant for 'nested_parent' - great.
3. Setting a variant for the preview of the pattern correctly loads those values eg:

nested_grand_parent:
  namespace: "Templates/Tests"
  use: "@templates/tests/_grand_parent.twig"
  label: Grand parent
  fields:
    parent:
      type: pattern
      label: 'Parent'
      preview:
        id: 'nested_parent'
        variant: 'happy_children'

(not working)

1. The 'blue_grand_children' variant for 'nested_grand_parent' does not work, and does not set the values for fields 'child_a' and 'child_b' text fields in the 'nested_parent' template, instead I get the error Error: Cannot read property 'child_a' of undefined
2. Trying to set any values in the preview for a nested pattern in 'nested_grand_parent' results in a similar error to the above eg:

nested_grand_parent:
  namespace: "Templates/Tests"
  use: "@templates/tests/_grand_parent.twig"
  label: Grand parent
  fields:
    parent:
      type: pattern
      label: 'Parent'
      preview:
        id: 'nested_parent'
        fields:
          child_a:
            id: 'nested_child'
            fields:
              text: "FOO!"
          child_b:
            id: 'nested_child'
            fields:
              text: "Foo you to"

So it looks to me like variants work great for nested patterns, but setting fields does not, in both the preview of the pattern field, and in a variant.

Hope that helps.

[christianwiedemann]

Hi there,

thanks for testing! And thanks for the testing repository. Helps me a lot. I fixed the issue. A problem with the merge of the resulting array. Fixed that. Think now it is a step forward.

[christianwiedemann]

You can test the new version with yarn upgrade

[jowan]

Hi there,

I can confirm this is working for me using 1.1.0-y.0

This has addressed the issue above which manifested in two places:

1. The default settings for a nested pattern when declared in the fields:
2. Changing the values of fields of nested patterns when set in a variant.

So the below "grand parent" pattern definition works exactly as expected ! whereas before it only respected child/grandchild variants, not setting values for their fields.

This is really great, and means I can sketch out whole forms in yml - just have {{ form }} in my template.

Thanks for your work on this.

I presume this is going to get merged into the next major release ? whats your plan there ? is it coming soon and worth holding off ?

nested_grand_parent:
  namespace: "Templates/Tests"
  use: "@templates/tests/_grand_parent.twig"
  label: Grand parent
  fields:
    parent:
      type: pattern
      label: 'Parent'
      preview:
        id: 'nested_parent'
        fields:
          child_a:
            id: 'nested_child'
            fields:
              text: "I am not the default"
          child_b:
            id: 'nested_child'
            fields:
              text: "Neither am I default"
  variants:
    __default:
      label: "Default"
    happy_grand_children:
      label: "Happy grand children"
      fields:
        parent:
          id: 'nested_parent'
          variant: 'happy_children'
    blue_grand_children:
      label: "Blue grand children"
      fields:
        parent:
          id: 'nested_parent'
          fields:
            child_a:
              id: 'nested_child'
              fields:
                text: "I'm am blue"
            child_b:
              id: 'nested_child'
              fields:
                text: "Soo blue"

[jowan]

Not sure whether I should close - but this is fixed :)

[christianwiedemann]

I released 1.1 yesterday. Please open a new issue.

[christianwiedemann]

If something is not working. Of course :)