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

UI: Add an experimental API for adding sidebar top toolbar #23811

Merged
merged 11 commits into from
Aug 24, 2023

Conversation

ndelangen
Copy link
Member

@ndelangen ndelangen commented Aug 11, 2023

Telescoped off: #23778

What I did

I added a new type of addon that will be injected into a new top bar of the sidebar.
It looks like this:

Screenshot 2023-08-11 at 17 34 59
Notice the "accessibility" icon besides the regular gear icon

How to test

Here's how to add something to the ui storybook:
code/ui/.storybook/manager.ts:

import React from 'react';
import { addons, types } from '@storybook/manager-api';
import { styled } from '@storybook/theming';
import { IconButton, Icons } from '@storybook/components';

const SidebarIconButton = styled(IconButton)(({ theme }) => ({
  position: 'relative',
  overflow: 'visible',
  color: theme.textMutedColor,
  marginTop: 0,
  zIndex: 1,
}));

addons.register('my/addon', () => {
  addons.add('my/addon', {
    type: types.experimental_SIDEBAR_TOP,
    render: () => (
      <SidebarIconButton>
        <Icons icon="accessibility" />
      </SidebarIconButton>
    ),
  });
});

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

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.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

🦋 Canary release

This pull request has been released as version 0.0.0-pr-23811-sha-d3c4b6e3. Install it by pinning all your Storybook dependencies to that version.

More information
Published version 0.0.0-pr-23811-sha-d3c4b6e3
Triggered by @ndelangen
Repository storybookjs/storybook
Branch norbert/add-sidebar-top-slot
Commit d3c4b6e3
Datetime Wed Aug 23 14:29:14 UTC 2023 (1692800954)
Workflow run 5952692816

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

…ar-top-slot

# Conflicts:
#	code/lib/manager-api/src/lib/addons.ts
#	code/lib/manager-api/src/modules/addons.ts
#	code/lib/types/src/modules/addons.ts
@tmeasday tmeasday changed the title UI: Add an experimental API for adding sidebar bottom toolbar UI: Add an experimental API for adding sidebar top toolbar Aug 12, 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.

Similar to the bottom bar PR, the top bar is added quite fast, while the sidebar is still loading and before the cog icon is available. Is that OK?

@yannbf
Copy link
Member

yannbf commented Aug 21, 2023

There are a few debatable UI issues related to this change:

With default logo:
2023-08-20 10 56 53

Example with svg (notice the cog getting hidden):
2023-08-20 20 21 44

Example with png (notice that the logo shrinks a lot in the default position, but even more when reducing the sidebar size):
2023-08-20 20 23 06

@ndelangen
Copy link
Member Author

@yannbf I think I addressed all your (very valid) concerns/findings.

Base automatically changed from norbert/add-sidebar-footer-slot to next August 24, 2023 12:24
@ndelangen ndelangen merged commit c1044d6 into next Aug 24, 2023
15 checks passed
@ndelangen ndelangen deleted the norbert/add-sidebar-top-slot branch August 24, 2023 12:26
@github-actions github-actions bot mentioned this pull request Aug 25, 2023
15 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants