feat(app): customize layout modal, iOS-style topbar, per-story storyOptions (closes #620, #558)#833
feat(app): customize layout modal, iOS-style topbar, per-story storyOptions (closes #620, #558)#83350rayn wants to merge 10 commits intohistoire-dev:mainfrom
Conversation
|
|
✅ Deploy Preview for histoire-examples-svelte3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-vue3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-controls ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
histoire
@histoire/app
@histoire/controls
@histoire/plugin-nuxt
@histoire/plugin-percy
@histoire/plugin-screenshot
@histoire/plugin-svelte
@histoire/plugin-vue
@histoire/shared
@histoire/vendors
commit: |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive layout customization features, allowing users to toggle the visibility of the story list and story options, and adjust the placement of story options (right or bottom). This includes new components for layout settings, a dedicated layout modal, and corresponding Cypress tests to ensure functionality and persistence across reloads. Toolbar elements for search, dark mode, and story actions have been refactored and moved into new AppActions and TopBar components for better organization and responsiveness. Additionally, a storyOptions meta property was added to allow per-story overrides of the global story options visibility. Review comments highlight a bug where the dark mode keyboard shortcut becomes inactive when the story list is hidden, a typo in a base list item class name, and unused code in the ToolbarBackground component.
| onKeyboardShortcut(['ctrl+shift+l', 'meta+shift+l'], (event) => { | ||
| isLayoutOpen.value = !isLayoutOpen.value | ||
| event.preventDefault() | ||
| }) |
There was a problem hiding this comment.
The dark mode keyboard shortcut (ctrl+shift+d / meta+shift+d) is currently registered in AppHeader.vue. However, with the new layout customization, AppHeader is not rendered when the story list is hidden on desktop (see the v-else block at line 172). This causes the shortcut to stop working when the story list is toggled off.
Please move the dark mode shortcut registration to App.vue alongside the search and layout shortcuts to ensure it remains active globally. You will also need to import toggleDark from ./util/dark.
| <template> | ||
| <a | ||
| class="istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100" | ||
| class="histoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100" |
There was a problem hiding this comment.
There is a typo in the class name histoire-base-list-ite. It should be histoire-base-list-item to match the component name and standard naming conventions.
class="histoire-base-list-item htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
| placement="bottom-end" | ||
| :skidding="6" | ||
| class="histoire-toolbar-background htw-h-full htw-flex-none" | ||
| class="histoire-toolbar-background htw-flex-none" |
There was a problem hiding this comment.
The contrastColor computed property (defined at line 16) appears to be unused now that the preview circle has been removed from the template. Consider removing it and the getContrastColor import to clean up dead code.
1 participant
What
localStorage. Open via header icon ormeta+shift+l/ctrl+shift+l; close via backdrop, Esc, or ×.meta.storyOptionsoverride — docs-heavy stories can hide the options pane while the rest keep it. Story-level value always wins over the global setting. Closes New story option : disable the right side panel #558.backdrop-blur+ soft border + shadow). Left: app actions (Layout / Search / Dark mode). Center: fixed-height title block (variant title + parent story name, no layout jump between 1- and 2-row states). Right: variant toolbar (Responsive / Background / Text dir / New Tab / Open in editor).Inspired by VSCode's Customize Layout panel (reference screenshot in #620).
Why
Closes #620 — layout customization was the most-requested ergonomic improvement: reviewers want Story List out of the way, docs authors want the options pane gone, side-by-side vs. bottom placement is a constant trade-off depending on screen width.
Closes #558 — the per-story override means you don't have to choose one global layout for mixed doc/component story files.
Screenshots
Test plan
A new Cypress suite covers the main flows — `examples/vue3/cypress/e2e/layout.cy.js`, 8 specs: