Args: Add possibility to mark controls as read-only

[valentinpalkovic]

Closes #14048

What I did

I've added the possibility of indicating that the control for a particular arg should be read-only. It is possible to hide argument rows completely via argTypes.<input>.table.disable = true or to only hide the control of an argument via argTypes.<input>.control = false.

I have introduced argTypes.<input>.table.readonly = true|false to mark the control of an argument as read-only, so that it is visible, but not editable.

export default {
  component: YourComponent,
  argTypes: {
    foo: {
      table: {
        readonly: true // Would show the control and display its value but won't make it editable
      }
    }
  }
};

This change will be applied everywhere, where controls are shown:

• ArgTypes doc block,
• Controls doc block,
• Controls addon panel.

Visually, I apply an opacity: 0.5 and show a cursor: 'not-allowed' where appropriate to the input and its contextual surroundings.

Some inputs get the readonly attribute, if the input type supports it, otherwise disabled is set on the input element.

The manager's Storybook has a new example story which showcases the readonly state for the default Button component: ?path=/docs/blocks-examples-button-readonly--docs. Additionally, I have added read-only stories for all control components.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser
3. Access the Button Story and define some arguments via argTypes as readonly (like described above)
4. Check whether the argument's control is in a read-only state in the ArgTypes doc block, Controls doc block, and the Controls addon panel.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5ac51f6. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=8

---

Sent with 💌 from NxCloud.

[yannbf]

LGTM! it would be nice to have stories with the readonly argTypes somewhere, so we can see it in action (e.g. in controls panel, in args table)

[valentinpalkovic]

I have created https://635781f3500dd2c49e189caf-kmzeyumeln.chromatic.com/?path=/docs/blocks-examples-button-readonly--docs, but it doesn't show all argument control types, only the ones that are available on the button. I will extend this example to show all kinds of inputs in a read-only state.

[cdedreuille]

Thanks @valentinpalkovic. I think as a V1 this looks good to me. If people are using this feature quite often we might revisit some of these patterns, specially the non native items like boolean, ...