new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · all subjects

essentials/measure-outline

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Measure feature overview

The measure feature in Storybook's toolbar allows you to quickly visualize each component's measurements. When enabled, hovering over an element in your story displays that element's dimensions and whitespace including margin, padding, and border. You can toggle measure on and off by clicking the measure button in the toolbar or pressing the 'm' key on your keyboard.

Outline feature overview

The outline feature toggles the outlines associated with all UI elements in your story, making it easy to spot layout bugs and broken layouts instantly. Click the outline button in the toolbar to enable or disable this feature, which is particularly useful when checking the visual alignment of components spread apart or containing unique shapes.

Measure and outline use cases

Measure and outline features provide tooling to inspect and visually debug CSS layout and alignment issues within stories. These features help catch UI bugs early in development, particularly when dealing with composite components, page layouts, whitespace (margin, padding, border), and individual component measurements. They eliminate the need to manually open browser development tools and inspect the DOM tree.

Disable measure or outline for a story

To disable measure or outline for a specific story, configure the `measure` or `outline` parameter in that story's configuration. To disable either feature across your entire Storybook, configure it in your main configuration file.

measure and outline disable parameter

The `disable` parameter under the `measure` or `outline` namespace is a boolean that removes the tool from the toolbar and disables the feature's behavior. If set to `true` at the project level, it can be re-enabled by setting it to `false` at the meta (component) or story level, allowing for granular control at different hierarchy levels.

Give your agent this brain