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.

Sign up for GitHub

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

Jump to bottom

[Meta] Storybook #6674

Closed
36 of 229 tasks
JasonStoltz opened this issue Apr 3, 2023 · 2 comments
Closed
36 of 229 tasks

[Meta] Storybook #6674

JasonStoltz opened this issue Apr 3, 2023 · 2 comments
Labels
meta

Comments

@JasonStoltz
Copy link
Member

JasonStoltz commented Apr 3, 2023 •
edited by tkajtoch
Loading

As part of a larger effort to replace the existing EUI documentation and build up EUI into a more robust design system, we would like to build out a storybook for EUI.

Storybook spike: #6583
Related #6816, #6652

Why add a storybook?

  • Better Developer Experience for our users -- we can better illustrate various use cases and states for components and create a space for them to explore the effect of various props and options.
  • Better testing for ourselves -- We will be able to visually diff our stories as we roll out updates, giving us more confidence that we are not breaking UX and causing regressions.
  • Better Developer Experience for EUI contributors -- Having an isolated space to develop components will be a huge improvement for our own development workflows.
  • Embeddable examples for our Design System website -- by creating a Storybook for EUI, authors documenting patterns and components in our upcoming Design System website will be able to embed functional examples hosted in Storybook.
  • Predictable discovery for Kibana developers - 30+ Storybooks are deployed across Kibana already, having our library in the same format and colocated will help developers find the components they need.

Some considerations

  • Our current docs system lets us dynamically switch library versions via a path parameter. We'd like to have a similar setup with the new storybook. This helps us compare visuals between versions and identify regressions.
  • Individual stories will be embedded into a larger documentation system. Most of the design guidance will live in that documentation site, so this storybook will primarily be a tool for our developers, not designers.

TODO: Task this out. Is the creation of individual stories a separate effort?

Component stories
Preview Give feedback
@cee-chen
Copy link
Contributor

Completed: Storybook set up and running locally with yarn storybook (#6816)

Left to do:

  • Commit built Storybook app to source control so that EUI+ can embed them?... (not clear to me what the pattern should be for this)
  • Set up buildkite to start staging instances with Storybook
  • Discuss as a team what the stories for each component should look like and what patterns we want to adopt across the codebase
  • Discuss what we want to do in Storybook vs other frameworks (e.g. visual screenshot diffs, a11y tests)
  • Individual storybook creation (which is basically going down a massive list of each component)

This was referenced Dec 6, 2023
Open
Open
@JasonStoltz
Copy link
Member Author

I'm going to close this issue as it seems to be superseded by #7405

@cee-chen cee-chen closed this as not planned Won't fix, can't repro, duplicate, stale Mar 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
meta
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cee-chen @tkajtoch @JasonStoltz