![pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers](https://cdn.sanity.io/images/cgdhsj6q/production/c06a5b74512bcc6da29d38cef96a454fa947810d-1024x1024.webp?w=400&fit=max&auto=format)
Security News
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
@storybook/addon-highlight
Advanced tools
Readme
Storybook addon allows for highlighting specific DOM nodes within your story.
Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, Accessibility addon uses it to highlight DOM nodes that are failing accessibility checks.
This addon requires Storybook 6.5 or later. Highlight is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
yarn:
yarn add --dev @storybook/addon-highlight
npm:
npm install @storybook/addon-highlight --save-dev
pnpm:
pnpm add --save-dev @storybook/addon-highlight
Add "@storybook/addon-highlight"
to the addons array in your .storybook/main.js|ts
:
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
addons: ['@storybook/addon-highlight'],
};
export default config;
Highlight DOM nodes by emitting the HIGHLIGHT
event from within a story or an addon. The event payload must contain an elements
property assigned to an array of selectors matching the elements you want to highlight.
// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const Highlighted: Story = {
decorators: [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
return storyFn();
},
],
};
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the RESET_HIGHLIGHT
event.
// MyComponent.stories.ts|tsx
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const ResetHighlight: Story = {
decorators: [
(storyFn) => {
const emit = useChannel({});
emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
emit(HIGHLIGHT, {
elements: ['header', 'section', 'footer'],
});
return storyFn();
},
],
};
The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a color
and/or style
properties. For example:
// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const StyledHighlight: Story = {
decorators: [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
color: 'red',
style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
});
return storyFn();
},
],
};
FAQs
Unknown package
We found that @storybook/addon-highlight demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.