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

[Storybook] update Storybook utils to ensure merging of control configs #7611

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Mar 21, 2024

Summary

closes #7583

This PR updates the internal Storybook utils hideStorybookControls, disableStorybookControls and moveStorybookControlsToCategory to ensure they merge control table updates into the Preview/Component/Story config instead of potentially overwriting existing settings.

To ensure this, the functions now take the config as an argument and add the new control setting onto it.
This means the following things:

  • the util should be called after creating the config
  • the passed config is mutated (limitation of current story CSF setup)
  • multiple utils can be called without overwriting other control settings unless the same key is overwritten with a primitive value

The proposed way of using the utils:

const meta: Meta<EuiComponentProps> = {
  title: 'EuiComponentName',
  component: EuiComponent,
  argTypes: {
    ...
  },
  args: {
    ...
  },
};

moveStorybookControlsToCategory(meta, ['controlName']);
disableStorybookControls(meta, ['controlName']);

Additionally, this PR updates all usages of those three util functions inside available story files.

QA

  • check an example story (e.g. for SkipLink) and verify that:
    • the props color, fill and size are moved to the category EuiButton props
  • checkout this pr locally and verify that multiple calls of utils on the same config work as expected
    • gh pr checkout 7611
    • open facet_button_stories.tsx
    • add fullWidth to disableStorybookControls(meta, ['buttonRef']); on line 56
    • verify that the control is moved to the category EuiButtonEmpty props AND it's now disabled instead of type boolean
  • verify that the props css, className and data-test-subj are not displayed on any story control table (globally hidden in preview.tsx)

@mgadewoll mgadewoll added documentation Issues or PRs that only affect documentation - will not need changelog entries skip-changelog labels Mar 21, 2024
@mgadewoll mgadewoll marked this pull request as ready for review March 22, 2024 08:47
@mgadewoll mgadewoll requested a review from a team as a code owner March 22, 2024 08:48
.storybook/utils.test.ts Outdated Show resolved Hide resolved
.storybook/utils.ts Show resolved Hide resolved
.storybook/utils.ts Outdated Show resolved Hide resolved
.storybook/utils.ts Show resolved Hide resolved
.storybook/utils.ts Outdated Show resolved Hide resolved
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Thanks so much for answering all my annoying questions!! 😁 Feel free to address the returned object discussion if you feel like it or just merge if you're OK with it as is!

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@mgadewoll mgadewoll merged commit 43b7c5f into elastic:main Mar 26, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Issues or PRs that only affect documentation - will not need changelog entries skip-changelog
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Storybook] Update utils to ensure properly merged story configs
4 participants