storybook [Feature Request]: Allow multiple conditional controls

a0zr77ik  于 6个月前  发布在  其他
关注(0)|答案(6)|浏览(44)

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

我正在将动态旋钮转换为控件,以便为7.0版本的旋钮弃用做准备。我们的一些更复杂的故事需要对某些控件设置多个条件。
以这种方式添加多个条件不是有效的解决方案。

{
    "control": {
        "type": "select"
    },
    "name": "Slides per view",
    "options": {
        "2": 2,
        "3": 3,
        "4": 4,
        "5": 5,
        "1 (default)": 1
    },
    if: { arg: 'type', eq: 'carousel'},
    if: { arg: 'carouseleffect', eq: 'slide'},
    ],
    "table": {
        "category": "Carousel"
    }
}

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

我希望能够将对象数组分配给'if',而不是单个对象。数组中的条件应该进行逻辑与运算。
建议的解决方案

{
    "control": {
        "type": "select"
    },
    "name": "Slides per view",
    "options": {
        "2": 2,
        "3": 3,
        "4": 4,
        "5": 5,
        "1 (default)": 1
    },
    "if": [
        {
            "arg": "type",
            "eq": "carousel"
        },
        {
            "arg": "carouseleffect",
            "eq": "slide"
        }
    ],
    "table": {
        "category": "Carousel"
    }
}

描述你考虑过的替代方案

我考虑过将情况分成不同的故事,但这会改变故事体验。

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

是的,我可以

其他上下文

  • 无响应*
deyfvvtc

deyfvvtc1#

你好,我正在尝试在storybook级别实现多个条件,并看到了这个PR。
我们是否考虑在每个"if"条件的级别上添加一些选项,例如:

level: {
      control: { type: 'select'},
      options: ['1', '2', '3']
},
variant: {
      control: { type: 'select'},
      if: {
        arg: "level", eq: '1',
        options: ['option1.var1', 'option1.var2', 'option1.var3']
      },
      if: {
        arg: "level", eq: '2',
        options: ['option2.var1', 'option2.var2', 'option2.var3']
      },
      if: {
         arg: "level", eq: '3', 
         options: ['option3.var1', 'option3.var2', 'option3.var3'},
    }
eeq64g8w

eeq64g8w2#

关于那个有什么新消息吗?

ct2axkht

ct2axkht3#

各位,这个功能非常重要,我很惊讶它之前没有被考虑过并包含在初始实现中,因为很明显这样的东西是需要的。

qyswt5oh

qyswt5oh4#

我研究了实现这个功能,并了解到 Storybook 使用 ComponentDriven/csf 标准来创建和验证条件参数(defined here)。我怀疑 storybook 维护者不想偏离这一标准,所以看起来需要向 csf 提交一个功能请求。

ruoxqz4g

ruoxqz4g5#

大家好,这个功能对于在故事书中维护设计系统非常重要。你们有什么解决方案吗?

ippsafx7

ippsafx76#

我需要类似的东西,并创建了一个PR:ComponentDriven/csf#76

相关问题