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/highlight

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

REMOVE_HIGHLIGHT event API

The REMOVE_HIGHLIGHT event removes a previously created highlight by accepting an id parameter. Usage: channel.emit(REMOVE_HIGHLIGHT, id).

RESET_HIGHLIGHT event API

The RESET_HIGHLIGHT event clears all highlights with no parameters. Usage: channel.emit(RESET_HIGHLIGHT).

HIGHLIGHT event API

The HIGHLIGHT event accepts an options parameter of type HighlightOptions. Usage: channel.emit(HIGHLIGHT, options).

Highlight feature purpose

Storybook's Highlight feature is a tool for visually debugging components by highlighting specific DOM nodes within stories. It can be used directly or to enhance addons such as the Accessibility addon to inform developers of accessibility issues.

Emit HIGHLIGHT event to highlight DOM elements

To highlight DOM elements, emit the HIGHLIGHT event from within a story or addon. The event payload must contain a 'selectors' property assigned to an array of selectors matching the elements to highlight.

Highlight selector specificity recommendation

Choose the most specific selector possible when highlighting to avoid highlighting elements other addons use. The feature tries to match selectors against the entire DOM tree.

Default highlight appearance

By default, highlighted elements have a standard outline style applied to the selected elements.

Customize highlight appearance

Highlighted elements can be customized by extending the HIGHLIGHT payload object with additional properties. The 'hoverStyles' and 'focusStyles' properties are recommended for use with the 'menu' property. Pseudo-classes and pseudo-elements are not supported.

Highlight menu feature

The Highlight feature includes a built-in debugging menu allowing you to select highlighted elements when you click them. This lets you preview a list of elements matching the selector provided. Each menu item must include an 'id' and a 'title', and can optionally provide a 'selectors' property to limit the menu item to specific highlighted elements.

Removing individual highlights

To remove a highlight from a specific element, emit the REMOVE_HIGHLIGHT event and provide the 'id' of the highlight to remove.

Reset all highlights

Storybook automatically removes highlighted elements when transitioning between stories. To manually clear all highlights, emit the RESET_HIGHLIGHT event from within a story or addon. This removes all highlights, even ones created by other addons.

Scroll element into view and highlight

To scroll an element into view and highlight it, emit the SCROLL_INTO_VIEW event from within a story or addon. The event payload must contain a 'selector' property to target the element. When the element is visible, it will be highlighted for a brief moment.

Highlight parameter disable

The 'disable' parameter under the 'highlight' namespace disables the Highlight feature behavior when set to true. This parameter is most useful for overriding at specific levels: 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.

Highlight exports from storybook/highlight

The following events are exported from 'storybook/highlight': HIGHLIGHT, REMOVE_HIGHLIGHT, RESET_HIGHLIGHT, and SCROLL_INTO_VIEW.

HighlightOptions interface

The HighlightOptions interface contains: id (optional string, unique identifier for the highlight), selectors (required string array, HTML selectors of elements), priority (optional number, defaults to 0, higher takes precedence), styles (optional Record<string, string>, CSS styles to apply), hoverStyles (optional Record<string, string>, CSS styles on hover), focusStyles (optional Record<string, string>, CSS styles when focused or selected), keyframes (optional string, required for animations), and menu (optional HighlightMenuItem[][], groups of menu items).

HighlightMenuItem interface

The HighlightMenuItem interface contains: id (required string, unique identifier), title (required string, title of the menu item), description (optional string), iconLeft (optional enum: 'chevronLeft' | 'chevronRight' | 'info' | 'shareAlt'), iconRight (optional enum: 'chevronLeft' | 'chevronRight' | 'info' | 'shareAlt'), clickEvent (optional string, channel event name to trigger on click), and selectors (optional string array, subset of HighlightOptions selectors where this item should show).

ClickEventDetails interface

When a menu item with a clickEvent is clicked, the channel event receives the menu item id and a ClickEventDetails object containing: top (number, vertical position), left (number, horizontal position), width (number, element width), height (number, element height), selectors (string array, matching selectors), and element (object with attributes Record<string, string>, localName string, tagName string, outerHTML string).

SCROLL_INTO_VIEW event API

The SCROLL_INTO_VIEW event accepts a selector parameter and an optional options object inheriting from ScrollIntoViewOptions API to customize scroll behavior. Usage: channel.emit(SCROLL_INTO_VIEW, selector, options).

Give your agent this brain