Check list

### Onboarding **testing with**: pnpm + react-vite-ts | yarn + react-vite-js - [x] 1. Initialize Storybook in a React project - [x] 2. Check whether Storybook automatically starts after init and the onboarding welcome modal gets triggered - [x] 3. Go through the onboarding and make sure each step looks properly and make it until the end (end: click on "Configure your Project" docs). - [x] 4. Optional: Initialize Storybook in a Typescript/Non-Typescript project and check, whether the code examples are correct (they have to be typed in Typescript projects) - [x] 5. Optional: Toggle your OS to dark mode/light mode and go through the onboarding once again. Does everything look properly? You can retrigger it by appending "?path=/onboarding" to the localhost URL. - [x] 6. Optional: Test the initialization and onboarding with different package managers (pnpm, yarn + pnp, npm) ### Styling addon **testing with**: pnpm + react-vite-ts + emotion - [x] 1 Review the documentation at https://storybook.js.org/addons/@storybook/addon-styling - [x] 2 Choose a new project without Storybook using one of: Tailwind, Material UI, Styled-components, Emotion. NOTE: auto-configuration below not currently supported in monorepos! - [x] 3 Install Storybook 7.1 prerelease using `npx storybook@next init` - [x] 4 Install addon styling with `storybook add @storybook/addon-styling` - [x] 5 Auto-configure the styling addon using `yarn add-styling-setup` (see https://github.com/storybookjs/addon-styling/blob/main/docs/auto-configuration.md) - [x] 6 Verify your project components render correctly with their expected styles ### Changelog **testing with**: pnpm + sveltekit | yarn + nextjs - [x] 1 Initialize Storybook in any kind of project, and make sure to put the feature flag whatsNewNotifications: true in main.ts. - [x] 2 When starting storybook for the first time with the onboarding flow, you should not see a notification. - [x] 3 When you refresh the page after you have done the onboarding flow, you should see a what's new notification. - [x] 4 Dismiss the notification, you should still see a green dot in your settings menu, when clicking on the dot, you should see a highlighted "What's new entry" - [x] 5 When clicking on the what's new entry, you should go to the what's new post, and the green dot should disappear. - [x] 6 After resetting your node_module cache, you should see the What's new notification again. - [x] 7 When you click directly on the notification, to read the post, the notification should disappear, and the green dot as well. ### TOC addons **testing with**: pnpm + svelte-vite | yarn + vue3 - [x] 1 Review the documentation draft https://chromatic-ui.notion.site/TOC-in-addon-docs-9db53c27a91b49aa9262bc8bb961f903?pvs=4 - [x] 2 Create or reuse a storybook with a mix of autodocs, attached/unattached MDX pages - [x] 3 Enable the TOC feature globally by setting the `parameters.docs.toc = {}` in `.storybook/preview.js` - [x] 4 Browse the different docs pages in both desktop and mobile (less than 768px) viewports - [x] 5 Try out the key parameters on different components and with different content lengths and levels heading nesting (disable, headingSelector, ignoreSelector, title)

## Findings ### Onboarding 1. The old `Configure.mdx` page is still used, waiting for https://github.com/storybookjs/storybook/pull/23340 to be merged - UPDATE: merged 2. Non-happy paths are a bit buggy. Eg. when at the step when you need to click the boolean Control, the user can freely navigate around or resize and the tooltip will stay in (mis)place. ![image](https://github.com/storybookjs/storybook/assets/5678122/6cd27d86-8396-44a7-9e56-ea702b9ed4a7) 3. The copy is slightly wrong for the file name, the file is either `.js` or `.ts` and never `.tsx` ![image](https://github.com/storybookjs/storybook/assets/5678122/579b6f53-da4d-42ed-afba-7e1b65914136) ![image](https://github.com/storybookjs/storybook/assets/5678122/875a4228-4890-467b-a89e-02431e855bab) Oddly, the copy in the code-stepper is good in JS: ![image](https://github.com/storybookjs/storybook/assets/5678122/514b4314-5a57-4a0e-8a26-794c09b73c8b) 4. The example code for `meta` doesn't match what's in the file: ![image](https://github.com/storybookjs/storybook/assets/5678122/d9a9bf51-d970-4750-9bb0-568644c5996a) ![image](https://github.com/storybookjs/storybook/assets/5678122/f5d2cb34-9ab9-426f-8eb1-73d29ebb6695) 5. 🚨 The code to copy is TypeScript even in a JavaScript project. Vite React JS + Yarn - UPDATE: FIXED ### Changelog 6. 🚨 The What's New page in dark mode has dark text on dark background ![image](https://github.com/storybookjs/storybook/assets/5678122/824bfbed-93e5-4dcd-8422-9748781e9b2e) 7. ~🚨 On some viewports (like my regular sized viewport) I can't scroll completely to the bottom of the What's New page. This changes depending on how wide my browser window is.~ ![image](https://github.com/storybookjs/storybook/assets/5678122/804a1900-b61f-4278-89bd-1d567877c9c2) 8. When clearing `node_modules/.cache` and restarting the server, the first load will not show the notification in the bottom, but will show the green dot. Any later reloads will show the notification 9. > When starting storybook for the first time with the onboarding flow, you should not see a notification. That is only true because the feature flag is off. If I enable the feature flag, restart storybook, visit `http://localhost:6006/?path=/onboarding` I do get both the onboarding flow and the notification at the same time ![image](https://github.com/storybookjs/storybook/assets/5678122/ba44a05f-70ca-4705-a8c5-83e9afe7d65d) ### TOC 1. When adding H1's in story descriptions, they will impact the nesting weirdly because tocbot doesn't know that stories are sections ![image](https://github.com/storybookjs/storybook/assets/5678122/1fbfc6e4-5c6d-4733-8041-80300c9cbf50) 2. I couldn't get `title` as a React component to work, only plain strings

7.1-beta QA Tasks #23293

Company

Community

Support

Connect