For now, you should be able to get appropriate TextArea styles as long as you don't need icons by doing this (and loading the codex-styles module):

<div class="cdx-text-area">
  <textarea class="cdx-text-area__textarea" placeholder="Start typing..." />
</div>

You can apply other attributes of <textarea> besides placeholder too.

Change 987751 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextArea: Add CSS-only version

https://gerrit.wikimedia.org/r/987751

Change 987751 merged by jenkins-bot:

[design/codex@main] TextArea: Add CSS-only version

https://gerrit.wikimedia.org/r/987751

@lwatson Design sign-off done. Listing here some corrections I've detected:

1. The Autosize demo is missing in the CSS-only version.
2. Demo With icons: I would display the placeholder in that demo as we do with the normal version.
3. I would unify the section names in both normal and CSS-versions. So I would rename the "Disabled" section to "With disabled". Or vice-versa, we can rename the normal version "With disabled" to just "Disabled".
4. Also, I would unify the demos in both normal and CSS-only versions. So I would include the Readonly and Form field demos as we do in the normal version.

Thanks for the feedback @bmartinezcalvo!

1. The autosize feature requires JavaScript so unfortunately that feature isn't included in the CSS-only version.
2. I'll add the placeholder to the CSS-only demo with icons. Then both demos with icons look the same and display a placeholder.
3. Yes, I agree the section names should be the same. After comparing the section names of TextArea to TextInput, I'll use "Disabled" to name the section.
4. I can look into adding CSS-only demos with readonly and Form field.

In T346815#9456854, @lwatson wrote:

Thanks for the feedback @bmartinezcalvo!

1. The autosize feature requires JavaScript so unfortunately that feature isn't included in the CSS-only version.

@lwatson we could include a text explaining this in the CSS-only version to clarify it.

2. I'll add the placeholder to the CSS-only demo with icons. Then both demos with icons look the same and display a placeholder.
3. Yes, I agree the section names should be the same. After comparing the section names of TextArea to TextInput, I'll use "Disabled" to name the section.
4. I can look into adding CSS-only demos with readonly and Form field.

Great, thank you!

In T346815#9457142, @bmartinezcalvo wrote:

@lwatson we could include a text explaining this in the CSS-only version to clarify it.

I don't think we should include anything in the component itself if that's what you mean. Someone interacting with the CSS-only version wouldn't know that there is supposed to be autosize functionality. I think it's worth highlighting in the component docs somewhere for sure though!

Change 990329 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextArea: CSS-only version follow-up

https://gerrit.wikimedia.org/r/990329

In T346815#9457156, @CCiufo-WMF wrote:

In T346815#9457142, @bmartinezcalvo wrote:

@lwatson we could include a text explaining this in the CSS-only version to clarify it.

I don't think we should include anything in the component itself if that's what you mean. Someone interacting with the CSS-only version wouldn't know that there is supposed to be autosize functionality. I think it's worth highlighting in the component docs somewhere for sure though!

@CCiufo-WMF @lwatson sorry, I meant to include this info in the CSS-only demo description (not within the component itself).

@bmartinezcalvo here's a preview of TextArea CSS-only version based on feedback from you and Chris. I added a custom container to document that the autosize is not available for CSS-only version. Let me know what you think

In T346815#9465977, @lwatson wrote:

@bmartinezcalvo here's a preview of TextArea CSS-only version based on feedback from you and Chris. I added a custom container to document that the autosize is not available for CSS-only version. Let me know what you think

This looks good to me! A minor note: the Form Field demo seems to have a few tabs pre-inserted on page load, not sure what happened there!

In T346815#9465977, @lwatson wrote:

@bmartinezcalvo here's a preview of TextArea CSS-only version based on feedback from you and Chris. I added a custom container to document that the autosize is not available for CSS-only version. Let me know what you think

@lwatson thank you! With this note is much easier to understand why the autosize is not found there. Some minor improvements:

1. Include the autosize with this code look as we do with the rest of props names.
2. Since we usually use the present in the rest of the text in the demos, I would rephrase the note to "The CSS-only version lacks the autosize feature as it requires JavaScript."
3. In other demos we use this other notice note style with blue border. Could we unify all of them? I personally prefer this new one you are using with gray bg and border since it's more similar to the notice Message component.
   

This looks good to me! A minor note: the Form Field demo seems to have a few tabs pre-inserted on page load, not sure what happened there!

@CCiufo-WMF Thanks for catching that. The demos are very whitespace sensitive. Within the demo, it picked up on the indentation between the opening and closing textarea tags.

Before:

<textarea
  class="cdx-text-area__textarea"
  placeholder="Describe what you changed"
>
<-- some white space or indentation -->
</textarea>

After:

<textarea
  class="cdx-text-area__textarea"
  placeholder="Describe what you changed"
></textarea>

@lwatson thank you! With this note is much easier to understand why the autosize is not found there. Some minor improvements:

1. Include the autosize with this code look as we do with the rest of props names.
2. Since we usually use the present in the rest of the text in the demos, I would rephrase the note to "The CSS-only version lacks the autosize feature as it requires JavaScript."
3. In other demos we use this other notice note style with blue border. Could we unify all of them? I personally prefer this new one you are using with gray bg and border since it's more similar to the notice Message component.
   

@bmartinezcalvo
#1 I think I understand that you would like me create an inline code by wrapping the prop (autosize) in backticks. So update autosize to autosize.
#2 & 3 Anne mentioned in Gerrit that we don't point out JavaScript features that aren't available in other CSS-only components and suggest removing the container for consistency. I'll remove the container for now and maybe we can revisit it in the future.

Change 990329 merged by jenkins-bot:

[design/codex@main] TextArea: CSS-only version follow-up

https://gerrit.wikimedia.org/r/990329

Change 992533 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533

Change 992533 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533