Skip to content

Commit e1b7102

Browse files
castastrophecastastrophe
authored
feat(storybook): update chromatic add-on to latest version (#3458)
BREAKING CHANGE: New chromatic configuration required for updated version support.
1 parent 74a55da commit e1b7102

17 files changed

+278
-816
lines changed

‎.changeset/tasty-pigs-tickle.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@spectrum-css/preview": major
3+
---
4+
5+
Update the Chromatic add-on to the currently maintained package:
6+
7+
- from "@chromaui/addon-visual-tests": "^1.0.0"
8+
- to "@chromatic-com/storybook": "^3.2.3"
9+
10+
This requires an update to the chromatic.config.json settings, removal of the generic argTypesRegex from the preview config, and a stricter import in the doc blocks.
11+
12+
To support a successful build, our test command must maintain the autodocs and mdx syntax.

‎.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ CHROMATIC_PROJECT_ID="Project:64762974a45b8bc5ca1705a2"
33
# Note: the build script here should be defined in .storybook/package.json
44
# this is used by the chromatic storybook addon to build the storybook on the fly
55
CHROMATIC_BUILD_SCRIPT_NAME="build"
6+
CHROMATIC_ONLY_CHANGED=true
7+
CHROMATIC_STORYBOOK_BASE_DIR=".storybook"
8+
CHROMATIC_ZIP=true
69

710
# NX settings
811
NX_PREFER_TS_NODE=true

‎.storybook/blocks/ColorPalette.jsx‎

Lines changed: 10 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,18 @@
11
import { ResetWrapper } from "@storybook/components";
2-
import { styled } from "@storybook/theming";
32
import { capitalize } from "lodash-es";
43
import React from "react";
5-
import { ThemeContainer } from "./ThemeContainer";
6-
import { Body, Heading } from "./Typography";
4+
import { List } from "./Layouts.jsx";
5+
import {
6+
Swatch,
7+
SwatchColors,
8+
SwatchGroup,
9+
SwatchGroupLabel,
10+
SwatchSet,
11+
} from "./Swatches.jsx";
12+
import { ThemeContainer } from "./ThemeContainer.jsx";
13+
import { Body, Heading } from "./Typography.jsx";
714
import { fetchToken } from "./utilities.js";
815

9-
export const SwatchGroupLabel = styled.div`
10-
display: flex;
11-
flex-direction: column;
12-
margin-top: 16px;
13-
align-self: flex-start;
14-
justify-content: center;
15-
text-wrap: nowrap;
16-
inline-size: max-content;
17-
block-size: ${props => props.size ?? 32}px;
18-
color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
19-
`;
20-
21-
export const SwatchSet = styled.div`
22-
display: flex;
23-
flex-direction: column;
24-
align-items: flex-start;
25-
gap: 2px;
26-
color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
27-
`;
28-
29-
export const Swatch = styled.div`
30-
position: relative;
31-
inline-size: var(--swatch-size, ${props => props.size ?? 32}px);
32-
block-size: var(--swatch-size, ${props => props.size ?? 32}px);
33-
outline: none;
34-
user-select: none;
35-
36-
&::before {
37-
position: absolute;
38-
inset: 0;
39-
inline-size: 100%;
40-
block-size: 100%;
41-
content: "";
42-
opacity: 1;
43-
44-
border: 1px solid rgba(0, 0, 0, 51%);
45-
46-
border-radius: ${props => `${props.theme.appBorderRadius}px` ?? `var(--spectrum-corner-radius-100, 4px)`};
47-
${props => props.background && `background: ${props.background};`}
48-
}
49-
50-
.spectrum--dark &::before,
51-
.spectrum--darkest &::before {
52-
border-color: rgba(255, 255, 255, 51%);
53-
}
54-
`;
55-
56-
export const SwatchColors = styled.div`
57-
display: inline-flex;
58-
flex-direction: row;
59-
flex-wrap: wrap;
60-
gap: ${props => props.size > 0 ? (props.size * 0.2) : 8}px;
61-
align-items: flex-start;
62-
justify-content: flex-start;
63-
`;
64-
65-
export const SwatchGroup = styled.div`
66-
position: relative;
67-
display: flex;
68-
flex-direction: column;
69-
flex: 1;
70-
`;
71-
72-
const List = styled.div`
73-
display: grid;
74-
gap: 24px;
75-
grid-template-columns: 1fr auto;
76-
grid-template-rows: auto;
77-
align-items: center;
78-
justify-content: center;
79-
`;
80-
8116
/**
8217
* A single color row your styleguide showing title, subtitle and one or more colors, used
8318
* as a child of `ColorPalette`.

‎.storybook/blocks/ComponentDetails.jsx‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,83 +4,14 @@ import { styled } from "@storybook/theming";
44
import React, { useEffect, useState } from "react";
55

66
import { Body, Code, Heading } from "./Typography.jsx";
7+
import { DDefinition, DList, DTerm } from "./Layouts.jsx";
78
import { fetchToken } from "./utilities.js";
89

910
import AdobeSVG from "../assets/images/adobe_logo.svg?raw";
1011
import GitHubSVG from "../assets/images/github_logo.svg?raw";
1112
import NpmSVG from "../assets/images/npm_logo.svg?raw";
1213
import WCSVG from "../assets/images/wc_logo.svg?raw";
1314

14-
export const DList = styled.dl`
15-
display: grid;
16-
grid-template-columns: max-content 1fr;
17-
column-gap: 20px;
18-
row-gap: 14px;
19-
padding-block: 0.75rem;
20-
margin-block: 0.5rem 2.5rem;
21-
border-block: ${props => !props.skipBorder ? "1px solid hsla(203deg, 50%, 30%, 15%)" : "0"};
22-
23-
& & {
24-
border-block: 0px;
25-
margin-block: 0;
26-
padding-inline-start: 0.75rem;
27-
padding-block-start: 0.25rem;
28-
}
29-
30-
details > & {
31-
margin-inline-start: 12px;
32-
}
33-
`;
34-
35-
export const DTerm = styled.dt`
36-
font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
37-
padding: 0;
38-
margin: 0;
39-
font-size: ${props => props.theme.typography.size.s};
40-
`;
41-
42-
export const Details = styled.details`
43-
cursor: pointer;
44-
grid-column: 1 / 3;
45-
padding: 0;
46-
47-
&[open] > summary::before {
48-
transform: rotate(90deg);
49-
}
50-
`;
51-
52-
export const Summary = styled.summary`
53-
display: inline-flex;
54-
align-items: center;
55-
font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
56-
padding: 0;
57-
padding-block-end: 0.75rem;
58-
margin: 0;
59-
font-size: ${props => props.theme.typography.size.s};
60-
list-style: none;
61-
62-
&::-webkit-details-marker {
63-
display: none;
64-
}
65-
66-
&::before {
67-
content: '';
68-
width: 10px;
69-
height: 10px;
70-
background-image: url('data:image/svg+xml,<svg focusable="false" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"></path></svg>');
71-
background-size: cover;
72-
margin-inline-end: .75em;
73-
transition: 0.2s;
74-
}
75-
`;
76-
77-
export const DDefinition = styled.dd`
78-
font-style: normal;
79-
padding: 0;
80-
margin: 0;
81-
font-size: ${props => props.theme.typography.size.s};
82-
`;
83-
8415
export const DSet = ({ term, children }) => {
8516
return (
8617
<>

‎.storybook/blocks/Layouts.jsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { styled } from "@storybook/theming";
2+
3+
export const Container = styled.section`
4+
color: var(--spectrum-neutral-content-color-default);
5+
background-color: var(--spectrum-background-layer-1-color);
6+
display: ${props => props.display ?? "flex" };
7+
padding-inline: 48px 24px;
8+
padding-block: 60px;
9+
flex-direction: column;
10+
align-items: flex-start;
11+
gap: 60px;
12+
border-radius: 16px;
13+
`;
14+
15+
export const List = styled.div`
16+
display: grid;
17+
gap: 24px;
18+
grid-template-columns: 1fr auto;
19+
grid-template-rows: auto;
20+
align-items: center;
21+
justify-content: center;
22+
`;
23+
24+
export const DList = styled.dl`
25+
display: grid;
26+
grid-template-columns: max-content 1fr;
27+
column-gap: 20px;
28+
row-gap: 14px;
29+
padding-block: 0.75rem;
30+
margin-block: 0.5rem 2.5rem;
31+
border-block: ${props => !props.skipBorder ? "1px solid hsla(203deg, 50%, 30%, 15%)" : "0"};
32+
33+
& & {
34+
border-block: 0px;
35+
margin-block: 0;
36+
padding-inline-start: 0.75rem;
37+
padding-block-start: 0.25rem;
38+
}
39+
40+
details > & {
41+
margin-inline-start: 12px;
42+
}
43+
`;
44+
45+
export const DTerm = styled.dt`
46+
font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
47+
padding: 0;
48+
margin: 0;
49+
font-size: ${props => props.theme.typography.size.s};
50+
`;
51+
52+
export const DDefinition = styled.dd`
53+
font-style: normal;
54+
padding: 0;
55+
margin: 0;
56+
font-size: ${props => props.theme.typography.size.s};
57+
`;
58+
59+
export const Details = styled.details`
60+
cursor: pointer;
61+
grid-column: 1 / 3;
62+
padding: 0;
63+
64+
&[open] > summary::before {
65+
transform: rotate(90deg);
66+
}
67+
`;
68+
69+
export const Summary = styled.summary`
70+
display: inline-flex;
71+
align-items: center;
72+
font-weight: ${props => props.theme.typography.weight.bold ?? "bold"};
73+
padding: 0;
74+
padding-block-end: 0.75rem;
75+
margin: 0;
76+
font-size: ${props => props.theme.typography.size.s};
77+
list-style: none;
78+
79+
&::-webkit-details-marker {
80+
display: none;
81+
}
82+
83+
&::before {
84+
content: '';
85+
width: 10px;
86+
height: 10px;
87+
background-image: url('data:image/svg+xml,<svg focusable="false" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 0 1-.615-1.498L5.88 5 2.385 1.547A.875.875 0 0 1 3.615.302L7.74 4.377a.876.876 0 0 1 0 1.246L3.615 9.698A.87.87 0 0 1 3 9.95"></path></svg>');
88+
background-size: cover;
89+
margin-inline-end: .75em;
90+
transition: 0.2s;
91+
}
92+
`;
93+
94+
export const Table = styled.table`
95+
--mod-table-cursor-row-default: auto;
96+
padding-block: 10px;
97+
`;

‎.storybook/blocks/PropertiesTable.jsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import { DocsContext, useOf } from "@storybook/blocks";
22
import { NAVIGATE_URL } from "@storybook/core-events";
3-
import { styled } from "@storybook/theming";
43
import React, { useContext } from 'react';
5-
4+
import { Table } from "./Layouts.jsx";
65
import { ThemeContainer } from "./ThemeContainer.jsx";
76
import { Body, Code, LinkableHeading } from "./Typography.jsx";
87

9-
export const Table = styled.table`
10-
--mod-table-cursor-row-default: auto;
11-
padding-block: 10px;
12-
`;
13-
148
/**
159
* Displays the modifiable custom properties for a component based on the metadata provided in the story.
1610
* The story metadata object is imported from the "metadata.json" file in the component's directory.

‎.storybook/blocks/Swatches.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { styled } from "@storybook/theming";
2+
3+
export const SwatchGroupLabel = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
margin-top: 16px;
7+
align-self: flex-start;
8+
justify-content: center;
9+
text-wrap: nowrap;
10+
inline-size: max-content;
11+
block-size: ${props => props.size ?? 32}px;
12+
color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
13+
`;
14+
15+
export const SwatchSet = styled.div`
16+
display: flex;
17+
flex-direction: column;
18+
align-items: flex-start;
19+
gap: 2px;
20+
color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
21+
`;
22+
23+
export const Swatch = styled.div`
24+
position: relative;
25+
inline-size: var(--swatch-size, ${props => props.size ?? 32}px);
26+
block-size: var(--swatch-size, ${props => props.size ?? 32}px);
27+
outline: none;
28+
user-select: none;
29+
30+
&::before {
31+
position: absolute;
32+
inset: 0;
33+
inline-size: 100%;
34+
block-size: 100%;
35+
content: "";
36+
opacity: 1;
37+
38+
border: 1px solid rgba(0, 0, 0, 51%);
39+
40+
border-radius: ${props => `${props.theme.appBorderRadius}px` ?? `var(--spectrum-corner-radius-100, 4px)`};
41+
${props => props.background && `background: ${props.background};`}
42+
}
43+
44+
.spectrum--dark &::before,
45+
.spectrum--darkest &::before {
46+
border-color: rgba(255, 255, 255, 51%);
47+
}
48+
`;
49+
50+
export const SwatchColors = styled.div`
51+
display: inline-flex;
52+
flex-direction: row;
53+
flex-wrap: wrap;
54+
gap: ${props => props.size > 0 ? (props.size * 0.2) : 8}px;
55+
align-items: flex-start;
56+
justify-content: flex-start;
57+
`;
58+
59+
export const SwatchGroup = styled.div`
60+
position: relative;
61+
display: flex;
62+
flex-direction: column;
63+
flex: 1;
64+
`;

0 commit comments

Comments
 (0)