Controls: Add textarea control option

[shilman]

Is your feature request related to a problem? Please describe

Currently there is a text control, that has the following options:

https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/types.ts#L68-L70

This creates a single-line text input. However, it would be nice to support a textarea control which makes it easier to support longer text strings.

Describe the solution you'd like

We could add the following option:

export interface TextConfig {
  maxLength?: number;
  rows?: number;
}

If set, it would pass the rows to the underlying Form.Textarea component here:

https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/Text.tsx#L51

Describe alternatives you've considered

We could also create a new control type. But I think adding an option is lighter weight/cleaner.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[JReinhold]

I like the idea of a rows option! 👍

[phunguyenmurcul]

@shilman As I can see currently the Text control is an auto resize textarea with max-height: 400px; rule, so it supports longer text strings well. Do we still need this new prop?

[alexander-ignatow]

Сurrent solution is not perfect, as the resize toggle is small and rather hard to hit. Users definitely would love some default "expanded" size.

Additional scenario - raw switch almost 100% overlaps with resize toggle, when editing objects in "raw" mode Textarea would be very useful here too.

[teodorachiosa]

Сurrent solution is not perfect, as the resize toggle is small and rather hard to hit. Users definitely would love some default "expanded" size.

Additional scenario - raw switch almost 100% overlaps with resize toggle, when editing objects in "raw" mode Textarea would be very useful here too.

+1, this UI bug is driving our testers mad, trying to click on the resize handle in that tiny amount of space.

The alternative (the object editor) has its own bugs: adding new values adds the default unchangeable properties from the library code to the storybook control - properties and values that a developer using the library wouldn't even be able to change. It uses up space, it's not useful... I'll log a bug for that issue.

For anyone looking for a dirty workaround until this is fixed, you can try something like this (adding a min-height yourself):

preview.js:

const storybookPanelRoot = window.parent.document.querySelector('#storybook-panel-root');

let textareaElements;
const targetNode = storybookPanelRoot;
const config = { attributes: true, childList: true, subtree: true };

if (storybookPanelRoot) {
  const callback = (mutationList, observer) => {
    for (const mutation of mutationList) {
      if (mutation.type === 'childList') {
        textareaElements = window.parent.document.querySelectorAll('textarea');
        textareaElements.forEach(element => {
          element.style.minHeight = '120px';
        });
      }
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

The downside to the code above being that it affects all Textareas, not just the ones used for object editing, so refine it as you wish.

[jwalkerinterpres]

This ticket has been around for over a year, has 10+ upvotes, the original submitter has offered to help implement it ... and literally all it involves is changing <input/> => <textarea/>.

Maintainers, what more do you need? This is as low-hanging as fruit gets!