[Tracking]: Mobile UI

[JReinhold]

Tracking issue for new mobile UI

Design

Storybook on mobile has not been worked on for a long time and a lot of patterns from desktop doesn’t work on mobile. The mobile storybook experience is becoming more important both for the web and React Native. With this project we have an opportunity to improve how people discover stories and use Storybook more to test their app on mobile.

Mobile.-.V2.mp4

Tasks

Beta Give feedback

1. Overhaul panel layout refactor #24215
   +0
   
2. Update Layout to be responsive instead of desktop & mobile being separate #24213
   +0
   
3. Improve test coverage of Layout (Jeppe) (e2e tests for dragging to resize panels) #24252
   +0
   
4. Build navigation drawer #24216
   +0
   
5. Add mobile-specific About page to navigation drawer #24220
   +0
   
6. Build addon panel drawer #24221
   +0
   
7. Merge all drawers into the mobile menu #24222
   +0
   
8. Remove corner on right side of the manager #24253
   +0
   
9. On the sidebar, make it toggle when clicking on a component #24255
   +0
   
10. Change the background of the sidebar on mobile #24256
    +0
    
11. Add close button on the menu drawer #24254
    +0
    
12. [Bug] Mobile UI: custom theming does not work #24365
    +0
    
13. Truncate story name on mobile #24257
    +0
    
14. Remove height: 100svh in favour of a solution that work for Chrome 100 and above #24261
    +0
    
15. [Bug]: Storybook 7.2.1: When I click on the canvas navlink in mobile view the selected sidebar story is not shown #23723
    bug sev:S2 ui upgrade:7.2 +4
    
16. If the height is set on preview, and the height of the window is smaller, you don't see the mobile navigation #24424
    bug help wanted sev:S3 ui +4
    
17. [Bug]: Sidebar content is hidden if the content is too big horizontally #24626
    bug ui +2
18. Remove the keyboard shortcut on the search input on mobile
19. Drag handles doesn't seem to appear on the addon panel (right & bottom) when it is closed.

Nice-to-haves

Beta Give feedback

1. Check why the default size of the sidebar is different from what we have today.
2. Add drag handle to navigation drawer to close
3. Add drag handle to addon panel to resize

Ensure we don't break things

Beta Give feedback

1. Query parameters https://chromaticqa.slack.com/archives/C05M98X79U0/p1694592037758769
2. Notifications - Desktop
3. Notifications - Mobile
4. Onboarding addon
5. Full screen toggle - Desktop
6. Full screen toggle - Mobile
7. Resize panels - Desktop