Skip to content

Commit 9d1831a

Browse files
kylegachkylegach
committed
Merge branch 'next' into docs-update-testing-section
* next: (36 commits) Remove `withActions` and `parameters.action.handles` dont collect telemetry on selectedStoryCount Docs: Misc SB 9 updates flush any pending test case results when test run completes Update CHANGELOG.md for v8.6.14 [skip ci] Increase test resilience by adding retry logic to web-components properties tests Apply requested changes reduce CI failures due to vue3 testrunner Bump version from "9.0.0-rc.1" to "9.0.0-rc.2" [skip ci] CSF-Tools: Add support for existing node imports and improve import handling Write changelog for 9.0.0-rc.2 [skip ci] Bump version from "9.0.0-rc.0" to "9.0.0-rc.1" [skip ci] Update CHANGELOG.md for v8.6.13 [skip ci] Extract to constant Fix undefined error Test: Patch HTMLElement.prototype.focus method for settable focus in tests Force a mininum height/width for the targetable area for each highlight ReactNativeWeb: JSX should be set to automatic Remove duplicate notification dot on sidebar buttons on mobile Update docs ...
2 parents 1480a0c + a8efe8f commit 9d1831a

File tree

86 files changed

+768
-663
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+768
-663
lines changed

‎CHANGELOG.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1+
## 8.6.14
2+
3+
- CLI: Add skip onboarding, recommended/minimal config - [#30930](https://github.com/storybookjs/storybook/pull/30930), thanks @shilman!
4+
- Core: Fix using dates in expect statements - [#28413](https://github.com/storybookjs/storybook/pull/28413), thanks @yann-combarnous!
5+
- React Native Web: Fix expo router by setting JSX to automatic - [#31484](https://github.com/storybookjs/storybook/pull/31484), thanks @dannyhw!
6+
- Test: Make sure that lit arrays are not cloned - [#31435](https://github.com/storybookjs/storybook/pull/31435), thanks @kasperpeulen!
7+
8+
## 8.6.13
9+
10+
- Controls: Fix boxShadow on empty controls - [#27193](https://github.com/storybookjs/storybook/pull/27193), thanks @H0onnn!
11+
- React Native Web: Update `react-native-web` - [#31324](https://github.com/storybookjs/storybook/pull/31324), thanks @ndelangen!
12+
113
## 8.6.12
214

315
- CLI: Only install Visual Test Addon if test feature is selected - [#30966](https://github.com/storybookjs/storybook/pull/30966), thanks @ghengeveld!
416
- Core: Fix telemetry error on Storybook UI - [#30953](https://github.com/storybookjs/storybook/pull/30953), thanks @yannbf!
517
- Ember: Fix `ember-template-compiler` import for ember 6+ - [#30682](https://github.com/storybookjs/storybook/pull/30682), thanks @leoeuclids!
6-
- Next: Upgrade vite-plugin-storybook-nextjs for Next v14 compatibility - [#30997](https://github.com/storybookjs/storybook/pull/30997), thanks @kasperpeulen!
18+
- Next: Update vite-plugin-storybook-nextjs to 2.0.0--canary.33.17a2310.0 - [#30997](https://github.com/storybookjs/storybook/pull/30997), thanks @kasperpeulen!
719
- Svelte: Exclude `node_modules` from docgen - [#30981](https://github.com/storybookjs/storybook/pull/30981), thanks @JReinhold!
820

921
## 8.6.11

‎CHANGELOG.prerelease.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
## 9.0.0-rc.2
2+
3+
- Addon Docs: Simplify color parsing and color cycling logic - [#29840](https://github.com/storybookjs/storybook/pull/29840), thanks @leyvae!
4+
- Addon Vitest: Fix watch mode for new files - [#31156](https://github.com/storybookjs/storybook/pull/31156), thanks @valentinpalkovic!
5+
- CodePanel: Show originalSource code - [#31456](https://github.com/storybookjs/storybook/pull/31456), thanks @valentinpalkovic!
6+
- Core: Builder-manager disable metafile - [#31467](https://github.com/storybookjs/storybook/pull/31467), thanks @ndelangen!
7+
- Core: Remove duplicate notification dot on sidebar buttons on mobile - [#31485](https://github.com/storybookjs/storybook/pull/31485), thanks @ghengeveld!
8+
- Core: Set a minimum height/width for the targetable area of highlights - [#31486](https://github.com/storybookjs/storybook/pull/31486), thanks @ghengeveld!
9+
- Core: Support groups and info icon in highlight popover menu - [#31475](https://github.com/storybookjs/storybook/pull/31475), thanks @ghengeveld!
10+
- React Native Web: Fix expo router by setting JSX to automatic - [#31484](https://github.com/storybookjs/storybook/pull/31484), thanks @dannyhw!
11+
- React: Don't use Act wrapper in Storybook when rendering in docs - [#31483](https://github.com/storybookjs/storybook/pull/31483), thanks @kasperpeulen!
12+
- Test: Patch HTMLElement.prototype.focus method for settable focus in tests - [#31487](https://github.com/storybookjs/storybook/pull/31487), thanks @valentinpalkovic!
13+
14+
## 9.0.0-rc.1
15+
16+
- Addon Docs: Fix docs-content overflow with TOC - [#27167](https://github.com/storybookjs/storybook/pull/27167), thanks @njsokol!
17+
- Addon Vitest: Ignore mdx files as part of tests - [#31457](https://github.com/storybookjs/storybook/pull/31457), thanks @yannbf!
18+
- Core: Do not show 'Render story' step in interactions - [#31452](https://github.com/storybookjs/storybook/pull/31452), thanks @ghengeveld!
19+
- Dependencies: Update docgen - [#31465](https://github.com/storybookjs/storybook/pull/31465), thanks @ndelangen!
20+
- Source Loader: Remove package - [#31466](https://github.com/storybookjs/storybook/pull/31466), thanks @valentinpalkovic!
21+
- Vitest: Remove beforeAll in vitest.setup.ts in automigration - [#31460](https://github.com/storybookjs/storybook/pull/31460), thanks @kasperpeulen!
22+
123
## 9.0.0-rc.0
224

325
- Addon A11y: Fix usage of axe-core in pnpm projects - [#31422](https://github.com/storybookjs/storybook/pull/31422), thanks @yannbf!

‎code/addons/a11y/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-a11y",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "Test component compliance with web accessibility standards",
55
"keywords": [
66
"a11y",

‎code/addons/a11y/src/components/A11yContext.tsx

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
type StoryFinishedPayload,
1010
} from 'storybook/internal/core-events';
1111

12-
import type { ClickEventDetails } from 'storybook/highlight';
12+
import type { ClickEventDetails, HighlightMenuItem } from 'storybook/highlight';
1313
import { HIGHLIGHT, REMOVE_HIGHLIGHT, SCROLL_INTO_VIEW } from 'storybook/highlight';
1414
import {
1515
experimental_getStatusStore,
@@ -215,16 +215,18 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
215215
const handleSelect = useCallback(
216216
(itemId: string, details: ClickEventDetails) => {
217217
const [type, id] = itemId.split('.');
218-
const index =
219-
results?.[type as RuleType]
220-
?.find((r) => r.id === id)
221-
?.nodes.findIndex((n) => details.selectors.some((s) => s === String(n.target))) ?? -1;
222-
if (index !== -1) {
223-
const key = `${type}.${id}.${index + 1}`;
224-
setSelectedItems(new Map([[`${type}.${id}`, key]]));
225-
setTimeout(() => {
226-
document.getElementById(key)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
227-
}, 100);
218+
const { helpUrl, nodes } = results?.[type as RuleType]?.find((r) => r.id === id) || {};
219+
const openedWindow = helpUrl && window.open(helpUrl, '_blank', 'noopener,noreferrer');
220+
if (nodes && !openedWindow) {
221+
const index =
222+
nodes.findIndex((n) => details.selectors.some((s) => s === String(n.target))) ?? -1;
223+
if (index !== -1) {
224+
const key = `${type}.${id}.${index + 1}`;
225+
setSelectedItems(new Map([[`${type}.${id}`, key]]));
226+
setTimeout(() => {
227+
document.getElementById(key)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
228+
}, 100);
229+
}
228230
}
229231
},
230232
[results]
@@ -324,16 +326,28 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
324326
focusStyles: {
325327
backgroundColor: 'transparent',
326328
},
327-
menu: results?.[tab as RuleType].map((result) => ({
328-
id: `${tab}.${result.id}`,
329-
title: getTitleForAxeResult(result),
330-
description: getFriendlySummaryForAxeResult(result),
331-
clickEvent: EVENTS.SELECT,
332-
selectors: result.nodes
329+
menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
330+
const selectors = result.nodes
333331
.flatMap((n) => n.target)
334332
.map(String)
335-
.filter((e) => selected.includes(e)),
336-
})),
333+
.filter((e) => selected.includes(e));
334+
return [
335+
{
336+
id: `${tab}.${result.id}:info`,
337+
title: getTitleForAxeResult(result),
338+
description: getFriendlySummaryForAxeResult(result),
339+
selectors,
340+
},
341+
{
342+
id: `${tab}.${result.id}`,
343+
iconLeft: 'info',
344+
iconRight: 'shareAlt',
345+
title: 'Learn how to resolve this violation',
346+
clickEvent: EVENTS.SELECT,
347+
selectors,
348+
},
349+
];
350+
}),
337351
});
338352

339353
const others = results?.[tab as RuleType]
@@ -352,16 +366,28 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
352366
focusStyles: {
353367
backgroundColor: 'transparent',
354368
},
355-
menu: results?.[tab as RuleType].map((result) => ({
356-
id: `${tab}.${result.id}`,
357-
title: getTitleForAxeResult(result),
358-
description: getFriendlySummaryForAxeResult(result),
359-
clickEvent: EVENTS.SELECT,
360-
selectors: result.nodes
369+
menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
370+
const selectors = result.nodes
361371
.flatMap((n) => n.target)
362372
.map(String)
363-
.filter((e) => !selected.includes(e)),
364-
})),
373+
.filter((e) => !selected.includes(e));
374+
return [
375+
{
376+
id: `${tab}.${result.id}:info`,
377+
title: getTitleForAxeResult(result),
378+
description: getFriendlySummaryForAxeResult(result),
379+
selectors,
380+
},
381+
{
382+
id: `${tab}.${result.id}`,
383+
iconLeft: 'info',
384+
iconRight: 'shareAlt',
385+
title: 'Learn how to resolve this violation',
386+
clickEvent: EVENTS.SELECT,
387+
selectors,
388+
},
389+
];
390+
}),
365391
});
366392
}, [emit, highlighted, results, tab, selectedItems]);
367393

‎code/addons/a11y/src/components/Report/Details.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const Details = ({ id, item, type, selection, handleSelectionChange }: De
143143
<RuleId>{item.id}</RuleId>
144144
<Description>
145145
{getFriendlySummaryForAxeResult(item)}{' '}
146-
<Link href={item.helpUrl} target="_blank" withArrow>
146+
<Link href={item.helpUrl} target="_blank" rel="noopener noreferrer" withArrow>
147147
Learn how to resolve this violation
148148
</Link>
149149
</Description>

‎code/addons/docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-docs",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "Document component usage and properties in Markdown",
55
"keywords": [
66
"addon",

‎code/addons/docs/src/blocks/controls/Color.tsx

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -142,52 +142,51 @@ const stringToArgs = (value: string) => {
142142
return [x, y, z, a].map(Number);
143143
};
144144

145-
const parseValue = (value: string): ParsedColor | undefined => {
146-
if (!value) {
147-
return undefined;
148-
}
149-
let valid = true;
145+
const parseRgb = (value: string): ParsedColor => {
146+
const [r, g, b, a] = stringToArgs(value);
147+
const [h, s, l] = convert.rgb.hsl([r, g, b]) || [0, 0, 0];
150148

151-
if (RGB_REGEXP.test(value)) {
152-
const [r, g, b, a] = stringToArgs(value);
153-
const [h, s, l] = convert.rgb.hsl([r, g, b]) || [0, 0, 0];
154-
return {
155-
valid,
156-
value,
157-
keyword: convert.rgb.keyword([r, g, b]),
158-
colorSpace: ColorSpace.RGB,
159-
[ColorSpace.RGB]: value,
160-
[ColorSpace.HSL]: `hsla(${h}, ${s}%, ${l}%, ${a})`,
161-
[ColorSpace.HEX]: `#${convert.rgb.hex([r, g, b]).toLowerCase()}`,
162-
};
163-
}
149+
return {
150+
valid: true,
151+
value,
152+
keyword: convert.rgb.keyword([r, g, b]),
153+
colorSpace: ColorSpace.RGB,
154+
[ColorSpace.RGB]: value,
155+
[ColorSpace.HSL]: `hsla(${h}, ${s}%, ${l}%, ${a})`,
156+
[ColorSpace.HEX]: `#${convert.rgb.hex([r, g, b]).toLowerCase()}`,
157+
};
158+
};
164159

165-
if (HSL_REGEXP.test(value)) {
166-
const [h, s, l, a] = stringToArgs(value);
167-
const [r, g, b] = convert.hsl.rgb([h, s, l]) || [0, 0, 0];
168-
return {
169-
valid,
170-
value,
171-
keyword: convert.hsl.keyword([h, s, l]),
172-
colorSpace: ColorSpace.HSL,
173-
[ColorSpace.RGB]: `rgba(${r}, ${g}, ${b}, ${a})`,
174-
[ColorSpace.HSL]: value,
175-
[ColorSpace.HEX]: `#${convert.hsl.hex([h, s, l]).toLowerCase()}`,
176-
};
177-
}
160+
const parseHsl = (value: string): ParsedColor => {
161+
const [h, s, l, a] = stringToArgs(value);
162+
const [r, g, b] = convert.hsl.rgb([h, s, l]) || [0, 0, 0];
163+
164+
return {
165+
valid: true,
166+
value,
167+
keyword: convert.hsl.keyword([h, s, l]),
168+
colorSpace: ColorSpace.HSL,
169+
[ColorSpace.RGB]: `rgba(${r}, ${g}, ${b}, ${a})`,
170+
[ColorSpace.HSL]: value,
171+
[ColorSpace.HEX]: `#${convert.hsl.hex([h, s, l]).toLowerCase()}`,
172+
};
173+
};
178174

175+
const parseHexOrKeyword = (value: string): ParsedColor => {
179176
const plain = value.replace('#', '');
177+
// Try interpreting as keyword or hex
180178
const rgb = convert.keyword.rgb(plain as any) || convert.hex.rgb(plain);
181179
const hsl = convert.rgb.hsl(rgb);
182180

183181
let mapped = value;
184-
185182
if (/[^#a-f0-9]/i.test(value)) {
183+
// Possibly a keyword
186184
mapped = plain;
187185
} else if (HEX_REGEXP.test(value)) {
188186
mapped = `#${plain}`;
189187
}
190188

189+
let valid = true;
191190
if (mapped.startsWith('#')) {
192191
valid = HEX_REGEXP.test(mapped);
193192
} else {
@@ -209,6 +208,19 @@ const parseValue = (value: string): ParsedColor | undefined => {
209208
};
210209
};
211210

211+
const parseValue = (value: string): ParsedColor | undefined => {
212+
if (!value) {
213+
return undefined;
214+
}
215+
if (RGB_REGEXP.test(value)) {
216+
return parseRgb(value);
217+
}
218+
if (HSL_REGEXP.test(value)) {
219+
return parseHsl(value);
220+
}
221+
return parseHexOrKeyword(value);
222+
};
223+
212224
const getRealValue = (value: string, color: ParsedColor | undefined, colorSpace: ColorSpace) => {
213225
if (!value || !color?.valid) {
214226
return fallbackColor[colorSpace];
@@ -279,15 +291,14 @@ const useColorInput = (
279291
);
280292

281293
const cycleColorSpace = useCallback(() => {
282-
let next = COLOR_SPACES.indexOf(colorSpace) + 1;
283-
284-
if (next >= COLOR_SPACES.length) {
285-
next = 0;
286-
}
287-
setColorSpace(COLOR_SPACES[next]);
288-
const update = color?.[COLOR_SPACES[next]] || '';
289-
setValue(update);
290-
onChange(update);
294+
const currentIndex = COLOR_SPACES.indexOf(colorSpace);
295+
const nextIndex = (currentIndex + 1) % COLOR_SPACES.length;
296+
const nextSpace = COLOR_SPACES[nextIndex];
297+
298+
setColorSpace(nextSpace);
299+
const updatedValue = color?.[nextSpace] || '';
300+
setValue(updatedValue);
301+
onChange(updatedValue);
291302
}, [color, colorSpace, onChange]);
292303

293304
return { value, realValue, updateValue, color, colorSpace, cycleColorSpace };

‎code/addons/docs/src/manager.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22

33
import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
44

@@ -36,14 +36,15 @@ addons.register(ADDON_ID, (api) => {
3636
match: ({ viewMode }) => viewMode === 'story',
3737
render: ({ active }) => {
3838
const channel = api.getChannel();
39+
const currentStory = api.getCurrentStoryData();
3940

4041
const lastEvent = channel?.last(SNIPPET_RENDERED)?.[0];
4142

4243
const [codeSnippet, setSourceCode] = useState<{
43-
source: string;
44-
format: SyntaxHighlighterFormatTypes;
44+
source: string | undefined;
45+
format: SyntaxHighlighterFormatTypes | undefined;
4546
}>({
46-
source: lastEvent?.source ?? '',
47+
source: lastEvent?.source,
4748
format: lastEvent?.format ?? undefined,
4849
});
4950

@@ -52,6 +53,13 @@ addons.register(ADDON_ID, (api) => {
5253
theme: 'dark',
5354
});
5455

56+
useEffect(() => {
57+
setSourceCode({
58+
source: undefined,
59+
format: undefined,
60+
});
61+
}, [currentStory?.id]);
62+
5563
useChannel({
5664
[SNIPPET_RENDERED]: ({ source, format }) => {
5765
setSourceCode({ source, format });
@@ -66,7 +74,9 @@ addons.register(ADDON_ID, (api) => {
6674
<SourceStyles>
6775
<Source
6876
{...parameter.source}
69-
code={parameter.source?.code || codeSnippet.source}
77+
code={
78+
parameter.source?.code || codeSnippet.source || parameter.source?.originalSource
79+
}
7080
format={codeSnippet.format}
7181
dark={isDark}
7282
/>

‎code/addons/jest/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-jest",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "React storybook addon that show component jest report",
55
"keywords": [
66
"addon",

‎code/addons/links/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-links",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "Link stories together to build demos and prototypes with your UI components",
55
"keywords": [
66
"storybook-addons",

‎code/addons/onboarding/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-onboarding",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
55
"keywords": [
66
"storybook-addons",

‎code/addons/pseudo-states/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "storybook-addon-pseudo-states",
3-
"version": "9.0.0-rc.0",
3+
"version": "9.0.0-rc.2",
44
"description": "CSS pseudo states for Storybook",
55
"keywords": [
66
"storybook",

0 commit comments

Comments
 (0)