Skip to content

UI: sidebar UI updates#24707

Merged
ndelangen merged 27 commits intorelease-8-0from
charles-sidebar-ui-updates
Nov 17, 2023
Merged

UI: sidebar UI updates#24707
ndelangen merged 27 commits intorelease-8-0from
charles-sidebar-ui-updates

Conversation

@cdedreuille
Copy link
Contributor

@cdedreuille cdedreuille commented Nov 3, 2023

Closes #24626

What I did

We are improving the way the sidebar looks, giving stories more space and a clearer way to search.

  • Replace arrows with chevrons for each expandable items.
  • Each line is now 28px height.
  • Better alignments vertically between every elements of the sidebar.
  • 12px padding on each side allowing space for scrollbar and drag handle.
  • Move clear history into a trash icon next to the title.
  • Move the "Go back to components" to a clear icon on the search input field.

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 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>

@cdedreuille cdedreuille added ui maintenance User-facing maintenance tasks ci:daily Run the CI jobs that normally run in the daily job. labels Nov 3, 2023
@cdedreuille cdedreuille self-assigned this Nov 3, 2023
@cdedreuille cdedreuille changed the base branch from next to release-8-0 November 3, 2023 15:30
@cdedreuille cdedreuille changed the title UI: Charles sidebar UI updates UI: sidebar UI updates Nov 6, 2023
@cdedreuille cdedreuille marked this pull request as ready for review November 6, 2023 17:23
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

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

Looking fantastic!!! ❤️ I'm not the best person to review, but nothing jumped out in the code. Great job 👏

Comment on lines -57 to -58
const RefTitle = styled.span(({ theme }) => ({
display: 'block',
Copy link
Contributor

Choose a reason for hiding this comment

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

Haha I love this

Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

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

Looks good to me! Great job!


export const ExpandableLongName = () => (
<>
<ComponentNode isExpandable>
Copy link
Contributor

Choose a reason for hiding this comment

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

To test word wrapping/breaking I think you want a story with a single long word with out spaces?

I might be misinterpreting the changes.

@ndelangen ndelangen merged commit 580101c into release-8-0 Nov 17, 2023
@ndelangen ndelangen deleted the charles-sidebar-ui-updates branch November 17, 2023 15:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:daily Run the CI jobs that normally run in the daily job. maintenance User-facing maintenance tasks ui

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants