Back to Blog
The benefits are immense: instant application start times. It ships as a compiled code base instead of a set of instructions that you then have to compile yourself. Storybook 7.0 pre-bundles the Storybook application. But there were tradeoffs: running both steps takes more time, especially as you build more UI components to Storybook. That gave folks more control and insight into the bundling process and the dependencies therein. The Storybook application was bundled on-demand every time you ran it on your local machine. In earlier versions, running Storybook involved two steps: bundling the Storybook application and building your component code. In 7.0, we reevaluated the fundamental architecture of Storybook. Pre-bundled for speed & no dependency conflicts That means icons are sharper to the human eye and load much faster. We redrew each icon path from the ground up to increase visual acuity, then optimized it to reduce weight. Storybook has a custom set of 200 icons that are used across the open source project. Sign up to the mailing list to get a sneak peek when it's announced (MDX2, embed, and much more). There's not enough space in this post to cover all the improvements. If you have Docs or DocsPage enabled, you’ll find a customizable “Docs” item next to your component’s stories.ĭocs is getting overhauled in 7.0 thanks to community feedback. The “Docs” tab is moving to the sidebar for greater discoverability. □ Background: Change the background of the canvas iframe.⤴ Outline: Outline DOM elements for alignment.⌧ Grid: Show a grid in the canvas iframe for alignment.□ Measure: Measure dimensions and spacing in pixels.□ Viewports: Cycle through preset viewport dimensions (also customizable).□ Zoom: Zoom in and out to inspect each pixel.□ Remount: Remount the currently selected story.7.0 reorganizes the tools to reduce how much you have to move the mouse (or tab for keyboard users). Storybook comes with a set of tools that help you debug UI appearance and layout. All of this while preserving the information density you’d expect from a developer tool. You’ll find a new, more subtle menu along with spacing refinements to increase the search bar’s clickable area. Every pixel dedicated to development makes Storybook more convenient to use. That gives you more room to build and document your UI. Layout updatesħ.0 alpha expands Canvas size edge-to-edge. Sign up to the mailing list to get early access to these features. Rest assured, we’re updating the design in parallel with work on performance, stability, and bundle size that befits a major version bump. 7.0 revamps Storybook’s ergonomics to integrate these workflows into one seamless experience. Storybook is now used for UI development along with testing and documentation. In the last 3 years, our features expanded to meet the needs of a growing community. From global companies like Shopify and Microsoft to government services in the Netherlands, UK, and Italy. Thousands of teams use Storybook to ship UIs around the world. We believe small ergonomic improvements add up to big productivity boosts over time. I’m thrilled to announce that these updates are now available in alpha (instructions below). Last month, I shared a sneak peek of Storybook 7.0’s design that streamlines core UI patterns that devs use every day. Despite giant leaps in functionality over the last few years, the core user experience hasn’t changed since version 5.0. Storybook supports every major view layer, countless workflows, and legions of frontend developers.
0 Comments
Read More
Leave a Reply. |