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

Angular: Introduce argsToTemplate for property and event Bindings #24434

Merged
merged 6 commits into from
Oct 11, 2023

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Oct 11, 2023

Closes #22222

What I did

This PR introduces the utility function argsToTemplate designed to assist in the generation of Angular component templates for Storybook stories. The primary goal of this utility is to seamlessly handle both property bindings and event bindings, aligning closely with Angular's practices.

Highlights:

  1. Event Binding Recognition: The function identifies if an argument value is a function. If true, it considers this as an Angular event binding, accommodating scenarios like button clicks or other custom component events.

  2. Efficient Filtering: Leveraging the Set data structure allows for efficient filtering of included or excluded keys.

  3. Descriptive Types: The ArgsToTemplateOptions interface has been introduced to provide a clear understanding of the options passed to the function.

Examples and Motivations:

This utility addresses two key challenges with Angular in the context of Storybook:

  • Angular treats undefined values in property bindings as actual values, inhibiting the default values' application. This behavior is often non-intuitive and has been a bug source.
  • The earlier setup, while utilizing a default property value, didn't offer users control override capabilities.

The new utility ensures that component templates align better with Angular's expected behaviors and provides robust support for Storybook controls.

Documentation:

In-depth inline comments and JSDoc descriptions have been added to elucidate the function's behavior and the introduced interface. An example has also been provided, showcasing the function in a real-world context.

Request for Review:

Feedback on the utility, especially potential edge cases or areas for further enhancement, would be greatly valued.

Additional work:

  • Angular Stories were converted from CSF2 to CSF3
  • Updated documentation

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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 pull request has been released as version 0.0.0-pr-24434-sha-0d375607. Install it by pinning all your Storybook dependencies to that version.

More information
Published version 0.0.0-pr-24434-sha-0d375607
Triggered by @valentinpalkovic
Repository storybookjs/storybook
Branch valentin/angular-args-to-template
Commit 0d375607
Datetime Wed Oct 11 08:59:38 UTC 2023 (1697014778)
Workflow run 6480283607

To request a new release of this pull request, mention the @storybookjs/core team.

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

@valentinpalkovic valentinpalkovic added bug angular ci:daily Run the CI jobs that normally run in the daily job. labels Oct 11, 2023
@valentinpalkovic valentinpalkovic self-assigned this Oct 11, 2023
Copy link
Member

@yannbf yannbf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@yannbf yannbf merged commit a9d1dfc into next Oct 11, 2023
99 of 100 checks passed
@yannbf yannbf deleted the valentin/angular-args-to-template branch October 11, 2023 14:57
@github-actions github-actions bot mentioned this pull request Oct 11, 2023
13 tasks
@yannbf yannbf mentioned this pull request Oct 17, 2023
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
angular bug ci:daily Run the CI jobs that normally run in the daily job.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: storybook 7 ignores Angular default values
2 participants