[8.0 QA] New Layout #25688
Replies: 13 comments 19 replies
-
|
Project: None - but visible in this sandbox Any custom tabs added via the register-addon API are not shown in the toolbar as they used to be. See this screenshot from 7.6: Compare with 8.0: It's also possible that this is not a layout issue but the API to register addon tabs have a change or bug. Here's an 8.0 sandbox demonstrating the issue: And the exact same code in a 7.6 sandbox showing the tab: |
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25758. |
Beta Was this translation helpful? Give feedback.
-
|
Project: Bitwarden (Angular) When the panel is resized fast, the changes aren't always applied: Aufzeichnung.2024-01-23.153723.mp4Reproduction:
|
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25759 |
Beta Was this translation helpful? Give feedback.
-
|
Project: MealDrop When activating the blurred vision filter from the accessibility addon, the preview area shows weird borders: Storybook 7 Storybook 8 This is caused because of this newly added box-shadow in the preview iframe: Repro:
|
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25818 |
Beta Was this translation helpful? Give feedback.
-
|
Project: MealDrop It seems that not all parts of Storybook are using the new icons, so the browser console gets many deprecation warnings when older icons are being used such as: Use of deprecated props in the button component detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components
Use of the deprecated Icons (check) component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
Use of the deprecated Icons (play) component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecatedScenario 1: When using addon-interactions and accessing a story that contains a play function. The addon interactions panel seems to be using old icons (check, play). Scenario 2: When creating your own toolbar (from official docs), you can define icons via their name like so: const preview = {
//... other properties,
globalTypes: {
theme: {
name: 'Theme',
description: 'Theme for the components',
defaultValue: 'light',
toolbar: {
icon: 'circlehollow',
items: [
{ value: 'light', icon: 'circlehollow', title: 'light' },
{ value: 'dark', icon: 'circle', title: 'dark' },
{ value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
],
},
},
},
};
export default preview;When clicking on the newly created toolbar button, you will get as many warnings as the amount of icons you create: Repro:
|
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25760 |
Beta Was this translation helpful? Give feedback.
-
|
Project: Chromatic
|
Beta Was this translation helpful? Give feedback.
-
|
I experienced the same thing, but I think this is cached in |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it's cached, if you press the reset to defaults button at the bottom you get the new shortcuts. |
Beta Was this translation helpful? Give feedback.
-
|
Yes this is specified in the migration notes. As they are cached you to either clear your cache or press the reset button. |
Beta Was this translation helpful? Give feedback.
-
|
Project: Chromatic It's possible to resize the side bar to a point where the gear icon gets cut off 
|
Beta Was this translation helpful? Give feedback.
-
|
@cdedreuille I'd expect this to be the composition header issue we discussed. |
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25817 |
Beta Was this translation helpful? Give feedback.
-
|
Project: MealDrop When selecting a story that is placed at the bottom of the sidebar, then toggling the addon panel, the panel jumps to the bottom:
Repro:
|
Beta Was this translation helpful? Give feedback.
-
|
On the mobile view we should not hint at keyboard shortcuts, the search bar has the keyboard shortcut indicator |
Beta Was this translation helpful? Give feedback.
-
|
tracked in #25816 |
Beta Was this translation helpful? Give feedback.
-
|
Project: Bitwarden When a Story is focused and |
Beta Was this translation helpful? Give feedback.
-
|
tracked #25815 |
Beta Was this translation helpful? Give feedback.
-
|
Project: MealDrop I don't know how bad this one is, as I was only able to reproduce it when first loading a Chromatic published Storybook (after it won't happen), but it's quite weird. When you open a Storybook for the first time, if it lands on a docs page (I assume), the preview container is shorter than it should be. I think it's potentially because it's saving room for the addons panel, even though the addons panel will never exist for a docs page. Check this gif, and notice that about 15% of the width (right side) is white:
The reason I assume it has something to do with addon panel logic is because when you visit a normal story, the panel takes the same width on the right side: Repro:
|
Beta Was this translation helpful? Give feedback.
-
|
Project: React Vite Yarn PnP
|
Beta Was this translation helpful? Give feedback.
-
|
Fix: #25768 |
Beta Was this translation helpful? Give feedback.
-
|
@ndelangen I believe you are the best person to answer this question |
Beta Was this translation helpful? Give feedback.
-
|
I can't replicate it anymore |
Beta Was this translation helpful? Give feedback.
-
|
I'd need to know how this happened:
Because what should happen is the builder-manager globalizes I looked at this with @valentinpalkovic yesterday and couldn't demonstrate the problem. |
Beta Was this translation helpful? Give feedback.
-
|
Project: React Vite When using an addon that provides a "tabs mode", such as @storybook/addon-designs, the tabs bar seems to have a slight misalignment (look at Canvas, Design): 
Very minor, but I bet @cdedreuille would like to know about it |
Beta Was this translation helpful? Give feedback.
-
|
Yes I know about this one but I think that's ok for now. I personally don't think the blue line should touch the left side. |
Beta Was this translation helpful? Give feedback.
-
|
Very minor, but the "run tests" button floats atop the scrollbar (Storybook 8.1.0):
|
Beta Was this translation helpful? Give feedback.
-
|
Where is the settings icon? |
Beta Was this translation helpful? Give feedback.
-
|
Good question, maybe it was a big bug altogether. But still, the circle thingy shouldn't have a z-index higher than the scrollbar |
Beta Was this translation helpful? Give feedback.
-
|
I can reproduce this too. In my large Storybook (2000 stories + composition), the ⚙️ settings and I believe this is because long list items (aka the stories) don't wrap when the sidebar is narrow for some reason. |
Beta Was this translation helpful? Give feedback.
-
New Layout
Feature owner: @cdedreuille
Please comment in this discussion thread for any bug report and feedback for this feature as you test out Storybook 8. Kindly adhere to the following format:
Feature owner should triage the comments here frequently and open issues as needed.
Beta Was this translation helpful? Give feedback.
All reactions