Skip to content

Commit 2ed616c

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent 97fe29f commit 2ed616c

File tree

87 files changed

+1079
-95
lines changed

Some content is hidden

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

87 files changed

+1079
-95
lines changed

‎.changeset/eleven-plants-grow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/generator": patch
3+
---
4+
5+
Update story templates to include the cssprops imports

‎.changeset/new-bulldogs-add.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/preview": minor
3+
---
4+
5+
New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.

‎.storybook/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default {
4545
"@chromaui/addon-visual-tests",
4646
// https://storybook.js.org/addons/@storybook/addon-designs/
4747
"@storybook/addon-designs",
48+
// https://github.com/ljcl/storybook-addon-cssprops
49+
"@ljcl/storybook-addon-cssprops",
4850
],
4951
core: {
5052
disableTelemetry: true,

‎.storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@babel/core": "^7.25.2",
3838
"@chromaui/addon-visual-tests": "^1.0.0",
3939
"@etchteam/storybook-addon-status": "^5.0.0",
40+
"@ljcl/storybook-addon-cssprops": "^4.0.0",
4041
"@storybook/addon-a11y": "^8.3.2",
4142
"@storybook/addon-actions": "^8.3.2",
4243
"@storybook/addon-console": "^3.0.0",

‎components/accordion/stories/accordion.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
44
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
5+
import data from "../metadata/metadata.json";
56
import pkgJson from "../package.json";
67
import { AccordionGroup } from "./accordion.test.js";
78
import { Template } from "./template.js";
@@ -57,6 +58,16 @@ export default {
5758
},
5859
chromatic: { disableSnapshot: true },
5960
packageJson: pkgJson,
61+
cssprops: {
62+
...data.modifiers.reduce((collection, item) => {
63+
const key = item.replace(/^--/, "");
64+
collection[key] = {
65+
control: key.includes("color") ? "color" : "text",
66+
category: "Modifiers",
67+
};
68+
return collection;
69+
}, {})
70+
},
6071
},
6172
tags: ["!autodocs"],
6273
};

‎components/actionbar/stories/actionbar.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
33
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
44
import { disableDefaultModes } from "@spectrum-css/preview/modes";
55
import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
6+
import data from "../metadata/metadata.json";
67
import pkgJson from "../package.json";
8+
79
import { ActionBarGroup } from "./actionbar.test.js";
810
import { Template } from "./template.js";
911

@@ -67,6 +69,16 @@ export default {
6769
url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
6870
},
6971
packageJson: pkgJson,
72+
cssprops: {
73+
...data.modifiers.reduce((collection, item) => {
74+
const key = item.replace(/^--/, "");
75+
collection[key] = {
76+
control: key.includes("color") ? "color" : "text",
77+
category: "Modifiers",
78+
};
79+
return collection;
80+
}, {})
81+
},
7082
},
7183
tags: ["!autodocs"],
7284
};

‎components/actionbutton/stories/actionbutton.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { ActionButtonGroup, ActionButtons } from "./actionbutton.test.js";
68

79
/**
@@ -73,6 +75,16 @@ export default {
7375
handles: ["click .spectrum-ActionButton:not([disabled])"],
7476
},
7577
packageJson: pkgJson,
78+
cssprops: {
79+
...data.modifiers.reduce((collection, item) => {
80+
const key = item.replace(/^--/, "");
81+
collection[key] = {
82+
control: key.includes("color") ? "color" : "text",
83+
category: "Modifiers",
84+
};
85+
return collection;
86+
}, {})
87+
},
7688
docs: {
7789
story: {
7890
height: "auto",

‎components/actiongroup/stories/actiongroup.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { ActionGroups } from "./actiongroup.test.js";
68

79
/**
@@ -61,6 +63,16 @@ export default {
6163
],
6264
},
6365
packageJson: pkgJson,
66+
cssprops: {
67+
...data.modifiers.reduce((collection, item) => {
68+
const key = item.replace(/^--/, "");
69+
collection[key] = {
70+
control: key.includes("color") ? "color" : "text",
71+
category: "Modifiers",
72+
};
73+
return collection;
74+
}, {})
75+
},
6476
},
6577
};
6678

‎components/actionmenu/stories/actionmenu.stories.js

+6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { default as Popover } from "@spectrum-css/popover/stories/popover.storie
55
import { disableDefaultModes } from "@spectrum-css/preview/modes";
66
import { isOpen } from "@spectrum-css/preview/types";
77
import pkgJson from "../package.json";
8+
89
import { ActionMenuGroup } from "./actionmenu.test.js";
910

1011
/**
@@ -49,6 +50,11 @@ export default {
4950
],
5051
},
5152
packageJson: pkgJson,
53+
cssprops: {
54+
...(Popover?.parameters?.cssprops ?? {}),
55+
...(ActionButton?.parameters?.cssprops ?? {}),
56+
...(Menu.parameters?.cssprops ?? {}),
57+
},
5258
docs: {
5359
story: {
5460
height: "200px",

‎components/alertbanner/stories/alertbanner.stories.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isOpen } from "@spectrum-css/preview/types";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { AlertBannerGroup } from "./alertbanner.test.js";
57
import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
68

@@ -68,6 +70,16 @@ export default {
6870
handles: ["click .spectrum-AlertBanner button"],
6971
},
7072
packageJson: pkgJson,
73+
cssprops: {
74+
...data.modifiers.reduce((collection, item) => {
75+
const key = item.replace(/^--/, "");
76+
collection[key] = {
77+
control: key.includes("color") ? "color" : "text",
78+
category: "Modifiers",
79+
};
80+
return collection;
81+
}, {})
82+
},
7183
},
7284
};
7385

@@ -133,7 +145,7 @@ Negative.parameters = {
133145
* The alert banner component can contain both an icon-only close button and a button with a contextual action to
134146
* take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue
135147
* associated with an alert. There should never be more than one button with a contextual action in an alert banner.
136-
*
148+
*
137149
* The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.
138150
*/
139151
export const ActionableOptions = ActionableOptionsTemplate.bind({});
@@ -160,4 +172,4 @@ TextOverflow.args = {
160172
};
161173
TextOverflow.parameters = {
162174
chromatic: { disableSnapshot: true },
163-
};
175+
};

‎components/alertdialog/stories/alertdialog.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isOpen } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AlertDialogGroup } from "./alertdialog.test.js";
68
import { Template } from "./template.js";
79

@@ -49,6 +51,16 @@ export default {
4951
}
5052
},
5153
packageJson: pkgJson,
54+
cssprops: {
55+
...data.modifiers.reduce((collection, item) => {
56+
const key = item.replace(/^--/, "");
57+
collection[key] = {
58+
control: key.includes("color") ? "color" : "text",
59+
category: "Modifiers",
60+
};
61+
return collection;
62+
}, {})
63+
},
5264
},
5365
decorators: [
5466
withUnderlayWrapper,

‎components/asset/stories/asset.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
2+
import data from "../metadata/metadata.json";
23
import pkgJson from "../package.json";
4+
35
import { AssetGroup } from "./asset.test.js";
46
import { Template } from "./template.js";
57

@@ -36,6 +38,16 @@ export default {
3638
},
3739
parameters: {
3840
packageJson: pkgJson,
41+
cssprops: {
42+
...data.modifiers.reduce((collection, item) => {
43+
const key = item.replace(/^--/, "");
44+
collection[key] = {
45+
control: key.includes("color") ? "color" : "text",
46+
category: "Modifiers",
47+
};
48+
return collection;
49+
}, {})
50+
},
3951
},
4052
tags: ["!autodocs"],
4153
};

‎components/assetcard/stories/assetcard.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isFocused, isSelected } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AssetCardGroup } from "./assetcard.test.js";
68
import { Template } from "./template.js";
79

@@ -86,6 +88,16 @@ export default {
8688
handles: [...(Checkbox.parameters?.actions?.handles ?? [])],
8789
},
8890
packageJson: pkgJson,
91+
cssprops: {
92+
...data.modifiers.reduce((collection, item) => {
93+
const key = item.replace(/^--/, "");
94+
collection[key] = {
95+
control: key.includes("color") ? "color" : "text",
96+
category: "Modifiers",
97+
};
98+
return collection;
99+
}, {})
100+
},
89101
},
90102
tags: ["!autodocs"],
91103
};

‎components/assetlist/stories/assetlist.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { AssetListGroup } from "./assetlist.test.js";
57

68
/**
@@ -20,6 +22,16 @@ export default {
2022
handles: [...(Checkbox.parameters?.actions?.handles ?? [])],
2123
},
2224
packageJson: pkgJson,
25+
cssprops: {
26+
...data.modifiers.reduce((collection, item) => {
27+
const key = item.replace(/^--/, "");
28+
collection[key] = {
29+
control: key.includes("color") ? "color" : "text",
30+
category: "Modifiers",
31+
};
32+
return collection;
33+
}, {})
34+
},
2335
},
2436
};
2537

‎components/avatar/stories/avatar.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isDisabled, size } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AvatarGroup } from "./avatar.test.js";
68
import { Template } from "./template.js";
79

@@ -58,6 +60,16 @@ export default {
5860
},
5961
parameters: {
6062
packageJson: pkgJson,
63+
cssprops: {
64+
...data.modifiers.reduce((collection, item) => {
65+
const key = item.replace(/^--/, "");
66+
collection[key] = {
67+
control: key.includes("color") ? "color" : "text",
68+
category: "Modifiers",
69+
};
70+
return collection;
71+
}, {})
72+
},
6173
},
6274
tags: ["!autodocs"],
6375
};

‎components/badge/stories/badge.stories.js

+12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { BadgeGroup } from "./badge.test.js";
68
import { PreviewSets } from "./template.js";
79

@@ -62,6 +64,16 @@ export default {
6264
},
6365
parameters: {
6466
packageJson: pkgJson,
67+
cssprops: {
68+
...data.modifiers.reduce((collection, item) => {
69+
const key = item.replace(/^--/, "");
70+
collection[key] = {
71+
control: key.includes("color") ? "color" : "text",
72+
category: "Modifiers",
73+
};
74+
return collection;
75+
}, {})
76+
},
6577
},
6678
tags: ["!autodocs"],
6779
};

‎components/breadcrumb/stories/breadcrumb.stories.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isDragged } from "@spectrum-css/preview/types";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { BreadcrumbGroup } from "./breadcrumb.test.js";
57
import { Template } from "./template";
68

79
/**
810
* Breadcrumbs show hierarchy and navigational context for a user's location within an app.
9-
*
11+
*
1012
* ## Nesting
1113
* Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon.
12-
*
14+
*
1315
* The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb.
14-
*
16+
*
1517
* ## Root Context
1618
* Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful.
1719
*/
@@ -41,6 +43,16 @@ export default {
4143
},
4244
parameters: {
4345
packageJson: pkgJson,
46+
cssprops: {
47+
...data.modifiers.reduce((collection, item) => {
48+
const key = item.replace(/^--/, "");
49+
collection[key] = {
50+
control: key.includes("color") ? "color" : "text",
51+
category: "Modifiers",
52+
};
53+
return collection;
54+
}, {})
55+
},
4456
},
4557
};
4658

0 commit comments

Comments
 (0)