toucan-form: Expose named blocks for textarea

[ynotdraw]

🚀 Description

This PR attempts to expose all named blocks from textarea within toucan-form. This is more of a conversation PR to see if we want to go with this approach due to the limitations with named blocks.

Depending on how this goes, I'll update all the other components as well (maybe via a feature branch for smaller PRs).

---

🔬 How to Test

• Green Build

---

📸 Images/Videos of Functionality

M/A

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0ac0249

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Preview URLs

Env: preview
Docs: https://797772cc.ember-toucan-core.pages.dev

[ynotdraw]

I described the issue in the comment here, but TL;DR:

The issue is we cannot do something like:

<@form.Field @name={{@name}} as |field|>
  <Form::Fields::Textarea
    @hint={{@hint}}
    @error={{this.mapErrors field.rawErrors}}
    @value={{this.assertString field.value}}
    {{! @glint-expect-error }}
    @onChange={{field.setValue}}
    @isDisabled={{@isDisabled}}
    @isReadOnly={{@isReadOnly}}
    @rootTestSelector={{@rootTestSelector}}
    name={{@name}}
    ...attributes
  >
    {{#if (has-block 'label')}}
      <:label>{{yield to='label'}}</:label>
    {{/if}}
  </Form::Fields::Textarea>
</@form.Field>

Or else we get the following due to emberjs/rfcs#735:

Build Error (PackagerRunner) in ../packages/ember-toucan-form/dist/-private/textarea-field.js

Module build failed (from ember-toucan-core/node_modules/.pnpm/[email protected][email protected]/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 5)
$TMPDIR/embroider/835ae7/packages/ember-toucan-form/dist/-private/textarea-field.js/textarea-field.js: Unexpected named block nested in a normal block:

|
|
|        <:label>{{yield to='label'}}</:label>
|
|

(error occurred in '$TMPDIR/embroider/835ae7/packages/ember-toucan-form/dist/-private/textarea-field.js' @ line 33 : column 31)

Essentially we have two layers of named blocks here:

1. In Form::Fields::Textarea - this is the source of the named blocks
2. When users use our <form.Textarea component in toucan-form

Due to this nesting, essentially passing blocks from a higher level component to a lower level one does not work as you'd expect. We essentially need something like splat-blocks or something I think to solve this?

[simonihmig]

I agree the implementation does not really look beautiful, but that's not our fault. We already used some "wilder" patterns that are making things easy and powerful at the same time for consumers while accepting increased complexity on our (library maintainers) side. And I think that choice is reasonable here.

[ynotdraw]

Thanks y'all for the feedback and discussion. I went ahead and created [feature-toucan-form-named-blocks](https://github.com/CrowdStrike/ember-toucan-core/tree/feature-toucan-form-named-blocks). I'm going to use that as my feature branch to keep PRs small, and then once everything is "feature complete", I'll put that PR up for merging into main 🎉