UI: Add an experimental API for adding sidebar top toolbar

[ndelangen]

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:

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

[yannbf]

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]

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

With default logo:

Example with svg (notice the cog getting hidden):

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

[ndelangen]

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