From c7bffac080023f24f52fc8f0f29bdf6f832421eb Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 16 Aug 2023 11:55:32 +0100 Subject: [PATCH] Initial feedback addressed --- code/addons/highlight/README.md | 12 +++--------- docs/essentials/highlight.md | 4 ++-- .../angular/component-story-highlight-addon.ts.mdx | 3 --- .../angular/highlight-addon-custom-style.ts.mdx | 6 +----- .../react/component-story-highlight-addon.js.mdx | 1 - .../react/component-story-highlight-addon.ts-4-9.mdx | 2 -- .../react/component-story-highlight-addon.ts.mdx | 2 -- .../react/highlight-addon-custom-style.js.mdx | 4 +--- .../react/highlight-addon-custom-style.ts-4-9.mdx | 5 +---- .../react/highlight-addon-custom-style.ts.mdx | 5 +---- .../vue/component-story-highlight-addon.js.mdx | 1 - .../vue/component-story-highlight-addon.ts-4-9.mdx | 2 -- .../vue/component-story-highlight-addon.ts.mdx | 2 -- .../snippets/vue/highlight-addon-custom-style.js.mdx | 5 +---- .../vue/highlight-addon-custom-style.ts-4-9.mdx | 5 +---- .../snippets/vue/highlight-addon-custom-style.ts.mdx | 5 +---- .../component-story-highlight-addon.js.mdx | 1 - .../component-story-highlight-addon.ts.mdx | 2 -- .../highlight-addon-custom-style.js.mdx | 4 +--- .../highlight-addon-custom-style.ts.mdx | 5 +---- 20 files changed, 14 insertions(+), 62 deletions(-) diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index 814a914cd80..e8c1b6aae09 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -19,7 +19,7 @@ yarn add --dev @storybook/addon-highlight npm: ```sh -npm install --save-dev @storybook/addon-highlight --save-dev +npm install @storybook/addon-highlight --save-dev ``` pnpm: @@ -45,15 +45,13 @@ export default config; ### Highlighting DOM Elements -Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight. +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. ```ts // 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'; @@ -86,9 +84,7 @@ Highlights are automatically cleared when the story changes. You can also manual // MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; @@ -116,15 +112,13 @@ export const ResetHighlight: Story = { ### Customize style -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 configuration object and providing a `color` and `style` option. For example: +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: ```ts // 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'; diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md index 44a8cba7d7d..a70ed284d25 100644 --- a/docs/essentials/highlight.md +++ b/docs/essentials/highlight.md @@ -8,7 +8,7 @@ Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlig ## Highlighting DOM Elements -To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight. For example: +To highlight DOM elements with the addon, you'll need to emit 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. For example: @@ -48,7 +48,7 @@ Out of the box, Storybook automatically removes highlighted elements when transi ## Customize style -By default, 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 configuration object and providing a `color` and `style` option. For example: +By default, 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: diff --git a/docs/snippets/angular/component-story-highlight-addon.ts.mdx b/docs/snippets/angular/component-story-highlight-addon.ts.mdx index ff928d49278..b64a6c96bac 100644 --- a/docs/snippets/angular/component-story-highlight-addon.ts.mdx +++ b/docs/snippets/angular/component-story-highlight-addon.ts.mdx @@ -2,11 +2,8 @@ // MyComponent.stories.ts import type { Meta, StoryObj } from '@storybook/angular'; - import { componentWrapperDecorator } from '@storybook/angular'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent.component'; diff --git a/docs/snippets/angular/highlight-addon-custom-style.ts.mdx b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx index d30466ecd46..193a4387e61 100644 --- a/docs/snippets/angular/highlight-addon-custom-style.ts.mdx +++ b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx @@ -2,11 +2,8 @@ // MyComponent.stories.ts import type { Meta, StoryObj } from '@storybook/angular'; - import { componentWrapperDecorator } from '@storybook/angular'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent.component'; @@ -25,8 +22,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return story; }), diff --git a/docs/snippets/react/component-story-highlight-addon.js.mdx b/docs/snippets/react/component-story-highlight-addon.js.mdx index cfb875956eb..9d0f8b146d1 100644 --- a/docs/snippets/react/component-story-highlight-addon.js.mdx +++ b/docs/snippets/react/component-story-highlight-addon.js.mdx @@ -2,7 +2,6 @@ // MyComponent.stories.js|jsx import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx index c67b184b294..1d43de9ca1c 100644 --- a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx +++ b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/react/component-story-highlight-addon.ts.mdx b/docs/snippets/react/component-story-highlight-addon.ts.mdx index 1a191fc0bf6..bed23c3c4ba 100644 --- a/docs/snippets/react/component-story-highlight-addon.ts.mdx +++ b/docs/snippets/react/component-story-highlight-addon.ts.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/react/highlight-addon-custom-style.js.mdx b/docs/snippets/react/highlight-addon-custom-style.js.mdx index 9d1fa116215..18e410be4e1 100644 --- a/docs/snippets/react/highlight-addon-custom-style.js.mdx +++ b/docs/snippets/react/highlight-addon-custom-style.js.mdx @@ -2,7 +2,6 @@ // MyComponent.stories.js|jsx import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; @@ -18,8 +17,7 @@ export const StyledHighlight = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return storyFn(); }, diff --git a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx index 56b38bdcf90..969e2ea13e6 100644 --- a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx +++ b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; @@ -23,8 +21,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return storyFn(); }, diff --git a/docs/snippets/react/highlight-addon-custom-style.ts.mdx b/docs/snippets/react/highlight-addon-custom-style.ts.mdx index 1be32dac908..ea4534dd16a 100644 --- a/docs/snippets/react/highlight-addon-custom-style.ts.mdx +++ b/docs/snippets/react/highlight-addon-custom-style.ts.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import { MyComponent } from './MyComponent'; @@ -23,8 +21,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return storyFn(); }, diff --git a/docs/snippets/vue/component-story-highlight-addon.js.mdx b/docs/snippets/vue/component-story-highlight-addon.js.mdx index 3d5a1d0b5c6..3781ac9d3fc 100644 --- a/docs/snippets/vue/component-story-highlight-addon.js.mdx +++ b/docs/snippets/vue/component-story-highlight-addon.js.mdx @@ -2,7 +2,6 @@ // MyComponent.stories.js import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import MyComponent from './MyComponent.vue'; diff --git a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx index 382988c2824..462c5449844 100644 --- a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx +++ b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx @@ -3,9 +3,7 @@ // Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import MyComponent from './MyComponent.vue'; diff --git a/docs/snippets/vue/component-story-highlight-addon.ts.mdx b/docs/snippets/vue/component-story-highlight-addon.ts.mdx index 626f8924e69..94ad9f9c0a0 100644 --- a/docs/snippets/vue/component-story-highlight-addon.ts.mdx +++ b/docs/snippets/vue/component-story-highlight-addon.ts.mdx @@ -3,9 +3,7 @@ // Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import MyComponent from './MyComponent.vue'; diff --git a/docs/snippets/vue/highlight-addon-custom-style.js.mdx b/docs/snippets/vue/highlight-addon-custom-style.js.mdx index a8feb1e7a1e..698347ab3dc 100644 --- a/docs/snippets/vue/highlight-addon-custom-style.js.mdx +++ b/docs/snippets/vue/highlight-addon-custom-style.js.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.js import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; - import MyComponent from './MyComponent.vue'; export default { @@ -18,8 +16,7 @@ export const StyledHighlight = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return { template: '', diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx index 04491e4a6d7..eec2829fc50 100644 --- a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx +++ b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx @@ -3,9 +3,7 @@ // Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import MyComponent from './MyComponent.vue'; @@ -24,8 +22,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return { template: '', diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx index 9822f5cbb5a..34dd55cebca 100644 --- a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx +++ b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx @@ -3,9 +3,7 @@ // Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; import MyComponent from './MyComponent.vue'; @@ -24,8 +22,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return { template: '', diff --git a/docs/snippets/web-components/component-story-highlight-addon.js.mdx b/docs/snippets/web-components/component-story-highlight-addon.js.mdx index 70ed9e359ab..cfa00a6804a 100644 --- a/docs/snippets/web-components/component-story-highlight-addon.js.mdx +++ b/docs/snippets/web-components/component-story-highlight-addon.js.mdx @@ -2,7 +2,6 @@ // MyComponent.stories.js import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; export default { diff --git a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx index 7a83723b4c8..ce3194d5479 100644 --- a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx +++ b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts import type { Meta, StoryObj } from '@storybook/web-components'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; export default { diff --git a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx index f37e56fdfbb..0f2ffb53cb4 100644 --- a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx +++ b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx @@ -2,7 +2,6 @@ // MyComponent.stories.js import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; export default { @@ -16,8 +15,7 @@ export const StyledHighlight = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return story(); }, diff --git a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx index c1b977ae760..97967c3a6d1 100644 --- a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx +++ b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx @@ -2,9 +2,7 @@ // MyComponent.stories.ts import type { Meta, StoryObj } from '@storybook/web-components'; - import { useChannel } from '@storybook/preview-api'; - import { HIGHLIGHT } from '@storybook/addon-highlight'; export default { @@ -18,8 +16,7 @@ export const StyledHighlight: Story = { emit(HIGHLIGHT, { elements: ['h2', 'a', '.storybook-button'], color: 'blue', - // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed' - style: 'double', + style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' }); return story(); },