Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add argTypes.<input>.control.readonly option #14048

Closed
Vadorequest opened this issue Feb 25, 2021 · 6 comments · Fixed by #26577
Closed

Add argTypes.<input>.control.readonly option #14048

Vadorequest opened this issue Feb 25, 2021 · 6 comments · Fixed by #26577

Comments

@Vadorequest
Copy link

Vadorequest commented Feb 25, 2021

Is your feature request related to a problem? Please describe
Currently, it's possible to disable an arg type, or make it disappear. See https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties

export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      table:{
        disable:true // Will hide the row in the table
      }
    }
  }
};
export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      control:{
        disable:true // Will show the control but display "-" instead of the value and it won't be editable
      }
    }
  }
};

It's not possible to display the value while making it readonly, though.

Describe the solution you'd like

export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      control:{
        readonly: true // Would show the control and display its value but won't make it editable
      }
    }
  }
};

Describe alternatives you've considered
None.

Are you able to assist to bring the feature to reality?
I could, but never contributed to the base code and don't know where to start.

Additional context
The goal is to display the value while disabling the ability to change it.

It'd be useful when we want the user to see the value, but where editing it would be confusing, such as for initial props that are meant to initialize states and won't have any effect if manually updated. In such cases, seeing the actual value is useful, but editing it would be confusing because it wouldn't reflect on the component.

@shilman
Copy link
Member

shilman commented Feb 25, 2021

Love it. ❤️ If you're interested in contributing we'd be happy to help you get going. https://discord.gg/storybook

@nayeftechno
Copy link

Awesome👍

@shilman shilman removed the P1 label Oct 18, 2022
@vvannada
Copy link

vvannada commented Mar 9, 2023

Any updates on this?

@shilman shilman removed the todo label Jun 20, 2023
@snitin315
Copy link

I'll implement this.

@embostan
Copy link

Any progress?

@FRITS-Kh
Copy link

FRITS-Kh commented Jan 2, 2024

@snitin315 are you working on it or do we need a new volunteer?

@valentinpalkovic valentinpalkovic self-assigned this Mar 19, 2024
@valentinpalkovic valentinpalkovic added this to the 8.0-stabilization milestone Mar 19, 2024
@valentinpalkovic valentinpalkovic changed the title Add argTypes.controls.readonly option Add argTypes.<input>.table.readonly option Mar 20, 2024
@valentinpalkovic valentinpalkovic changed the title Add argTypes.<input>.table.readonly option Add argTypes.<input>.control.readonly option Mar 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants