Add monospace support to textareas
Either we should add monospace support to `GlFormTextarea`, or create a new component.
For https://gitlab.com/gitlab-org/gitlab/-/issues/455660, I was looking at migrating [this textarea](https://gitlab.com/gitlab-org/gitlab/-/blob/57c337987e5ff72ef33cdb82b1fc1f6b87ad8e5b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue#L29-37) to `GlFormTextarea`. A naive migration produces something quite different:
<details><summary>Click to expand code diff</summary>
```diff
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
index 0a02b1c0e4de..a9e45c7d8d8a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
@@ -1,5 +1,10 @@
<script>
+import { GlFormTextarea } from '@gitlab/ui';
+
export default {
+ components: {
+ GlFormTextarea,
+ },
props: {
value: {
type: String,
@@ -26,15 +31,15 @@ export default {
</label>
<slot name="header"></slot>
</div>
- <textarea
+ <gl-form-textarea
:id="inputId"
:value="value"
- class="form-control js-gfm-input gl-mb-3 commit-message-edit"
+ class="js-gfm-input gl-mb-3 commit-message-edit"
dir="auto"
required="required"
rows="7"
@input="$emit('input', $event.target.value)"
- ></textarea>
+ />
</div>
</li>
</template>
```
</details>
| Before | After |
| ------ | ------ |
|  |  |
Differences include:
- Line height it reduced
- Element height is reduced (i.e., [the `rows` attribute/prop is overridden](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2609))
- Font family is sans-serif
- Padding is slightly different
While these can all be fixed by applying various utility classes, that is not a scalable approach as it doesn't guarantee consistency (e.g., different authors might apply different utilities).
issue