Show permutation for text control with/without value, using at least one example value

[tiffmaelite]

Is your feature request related to a problem? Please describe.
If I have a component which behaves differently when a certain property has a text value, or does not have a value at all, I need to define manually 2 stories to cover those "withvalue/withoutvalue" permutations. If I have 4 such properties on my component, then the work is as messy as without the permutation addon, and if I need to combine this with other non textual properties with a fixed set of values between which I want to use the permutation addon, the user will need to switch between using the permutation tab and manually changing stories.

As an example, imagine a form component accepting the following properties: label (optional text), tooltip (optional text, rendered next to the label if there is one or omitted if there is no label), description (rendered below the field), isRequired (adding an asterisk next to the label if there is one), isEnabled, displayOrientation (Horizontal/Vertical), textOrientation (leftToRight/rightToLeft) and showErrors (true/false). It makes sense to have a story showing all permutations with left-to-right text, and have another story with all permutations with right-to-left text. Or even one story for all permutations when in enabled state and another one for all permutations when in disabled state.

But have a story for all permutations given tooltip&label, another one for all permutations given description only, another one for label&description only etc? This sounds like a perfect use case for the permutation table: imagine being able to see the component marked a required and with a label and without tooltip, next to the same component marked as optional and with a label and with a tooltip, and next to the same component marked as required and without label, and next to the same component marked as optional and with a label and without a tooltip?

My component may also have special display rules depending on the length or content of my text value (e.g. ellipsis on label when component is disabled) and it would be nice to additionally have a way to showcase such scenarios without the need to create manually always more stories.

Describe the solution you'd like
I would love to be able to define preset textual values as "example permutations" for my text controls in addition to the permutations of my other controls.

Thank you for this great addon, and considering my proposal.

[dongyunlee-daim]

First, thank you for your interest in this add-on.

I've taken a good look at your suggestions with pleasure. To summarize, it sounds like you're requesting the addition of preset permutation functionality for text/object arguments, which permutation-table doesn't currently provide.

While we believe this would be a great feature leap for the project, most of permutation-table's functionality relies on the storybook addon api, so we're not sure if it's feasible at this point, and we need to plan for a UI for setting preset permutations.

As a result, we're not ready to embrace this idea right away, but it's definitely a good idea. I'll put it on the team agenda and share our progress on this page. Thanks again!

[tiffmaelite]

Thank you @dongyunlee-daim for the update on the topic.

For information, and for whoever may come in the future with a similar need, I managed to achieve most of my goal with the following workaround, for example with the "label" parameter:

1. Besides existing argType "label" of control type "text", add new argType "isWithLabel" of control type "boolean".
2. Set a preset arg value for "label"
3. Change the render method of your meta story (or define one if the default is used) so that the "label" component parameter is now conditionally set based on the value of "isWithLabel"
4. Now you will have a permutation for "isWithLabel=true" for which the preset label value is taken into account, and one for "isWithLabel=false" for which the preset label value is ignored
5. Repeat for each text arg for which you want a with/without permutation

With this workaround, I dislike having the possibility to change the value of "label" when "isWithLabel" is false, and I dislike having 2 controls to set when I want to change the label value. I tried making the "label" argType conditional on "isWithLabel" being true, but somehow it completely broke the stories, and I decided not to dig further on this.

Such a workaround also only allows for 1 example preset value of the text parameters, but it's better than nothing. I guess I could push it to add more parameters for more variations, such as isWithLongLabel, isWithShortLabel etc and make those mutually exclusive parameters... But it just feels too much tweaking around.

[dongyunlee-daim]

Thanks for sharing your experience, but putting additional arguments in the component seems like it would be a disconnect from the prod environment. Is there a situation where the code below doesn't work?

export const Basic = (args) => {
  return (
    <React.Fragment>
      <Form {...args} label=""/>  // Story when label is blank 
      <Form {...args} label="Lorem ipsum."/>  // Story when label is filled
    </React.Fragment>
  )
}

inline props override the args even with permutation table enabled