storybook 控件:添加文本区域控件选项

m4pnthwp  于 2个月前  发布在  其他
关注(0)|答案(4)|浏览(26)

你的功能请求是否与问题相关?请描述

目前有一个 text 控件,具有以下选项:
https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/types.ts#L68-L70
这创建了一个单行文本输入框。然而,如果能支持一个多行文本输入框(textarea)控件,将更容易支持较长的文本字符串。

描述你希望实现的解决方案

我们可以添加以下选项:

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

如果设置了该选项,它将把行数传递给底层的 Form.Textarea 组件:
https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/Text.tsx#L51

描述你考虑过的替代方案

我们也可以创建一个新的控件类型。但我认为添加一个选项更轻量级、更简洁。

你是否能够协助将这个功能变为现实?

是的,我可以

其他信息

  • 无响应*
46scxncf

46scxncf1#

I like the idea of a rows option! 👍

l0oc07j2

l0oc07j22#

@shilman

根据我目前看到的,Text控制是一个具有max-height: 400px;规则的自动调整大小的文本区域,因此它可以很好地支持较长的文本字符串。我们是否仍然需要这个新属性?

lztngnrs

lztngnrs3#

当前的解决方案并不完美,因为调整大小的切换按钮太小了,而且相当难以点击。用户肯定会喜欢一些默认的"扩展"大小。
额外的情况是:raw 交换机几乎与调整大小的切换按钮有100%的重叠,当以“原始”模式编辑对象时
文本区域在这里也会非常有用。

3qpi33ja

3qpi33ja4#

当前的解决方案并不完美,因为调整大小的切换按钮太小,而且相当难以点击。用户肯定会喜欢一些默认的"展开"大小。

另外一种情况是:raw 开关几乎100%与调整大小的切换按钮重叠,当以“原始”模式编辑对象时,这里的文本区域也非常有用。

+1,这个UI bug正在让我们的测试人员发疯,试图在那么小的区域内点击调整大小的手柄。

另一种选择(对象编辑器)也有自己的问题:添加新值会将库代码中的默认不可更改属性添加到故事书控件中-这些属性和值甚至开发者都无法更改。它占用空间,没有用...我会为这个问题记录一个bug。

对于任何寻找一个临时解决方法的人,直到这个问题得到修复,你可以尝试像这样(自己添加最小高度):
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);
}

上述代码的缺点是它会影响所有的文本区域,而不仅仅是用于对象编辑的那些,所以根据需要进行调整。

相关问题