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

Improve Storybook UX #662

Merged
merged 2 commits into from
Jul 25, 2024
Merged

Improve Storybook UX #662

merged 2 commits into from
Jul 25, 2024

Conversation

pouretrebelle
Copy link
Member

@pouretrebelle pouretrebelle commented Jul 23, 2024 •
edited
Loading

Summary

Some tweaks to make Storybook easier and more intuitive to navigate, based on the audit in https://github.com/github/primer/issues/3635

List of notable changes:

  • Components in the sidebar are sorted alphabetically - previously they were sorted by load order, so it was mostly alphabetical but some nested folders like forms and river were at the bottom
  • Components always show Default, then Playground, then sub-folders (examples + feature stories)
  • Examples and feature stories are ordered in the order they're written in the file
  • Moved Controls to be the first panel in addon sidebar so it opens automatically (previously was a11y panel)
  • Removed Links addon (unused and cluttering sidebar)

Supporting resources (related issues, external links, etc):

PRC has a more complex sorting algorithm to handle top-level sorting, but our top level order of 'components, misc, recipes' is fine unless we add more granularity up there.

Contributor checklist:

  • Tests prove that the feature works and covers both happy and unhappy paths
  • Any drop in coverage, breaking changes or regressions have been documented above
  • Related issues have been referenced in the PR description

Reviewer checklist:

  • Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • Check that tests prove the feature works and covers both happy and unhappy paths
  • Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Before After

old sidebar order

new sidebar order

@pouretrebelle
Intuitively sort Storybook sidebar
b6ba615
@pouretrebelle
Reorder addon panel
748bb48 
This makes Controls the first panel in the addons so it opens
automatically (previously this was a11y). Since most people should
land on the Playground story for each component, defaulting to
Controls makes the most sense.

It then has Code, A11y, and Interactions. I removed the Actions addon
because we're not using it anywhere, it was just an empty panel in
the sidebar.

Ideally I'd like the Code addon to open when you open a Default,
feature, or example story, and the Controls to open when you open
a Playground story, but this doesn't seem to be possible with the SB
API.
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 23, 2024

⚠️ No Changeset found

Latest commit: 748bb48

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

🟢 No design token changes found

@github-actions GitHub Actions
Copy link
Contributor

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

@pouretrebelle pouretrebelle marked this pull request as ready for review July 23, 2024 15:27
joshfarrant
joshfarrant approved these changes Jul 25, 2024
View reviewed changes
Copy link
Contributor

@joshfarrant joshfarrant left a comment

Choose a reason for hiding this comment

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

Great improvements, thanks @pouretrebelle! 💖

@pouretrebelle pouretrebelle merged commit 1a67a5f into main Jul 25, 2024
18 checks passed
@pouretrebelle pouretrebelle deleted the pouretrebelle/storybook-ux branch July 25, 2024 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joshfarrant joshfarrant joshfarrant approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@pouretrebelle @joshfarrant