From 2ed616cde34c60c1802beeb84fd69e4f19f099df Mon Sep 17 00:00:00 2001 From: castastrophe Date: Thu, 26 Sep 2024 12:10:12 -0400 Subject: [PATCH] feat(storybook): custom properties panel --- .changeset/eleven-plants-grow.md | 5 +++ .changeset/new-bulldogs-add.md | 5 +++ .storybook/main.js | 2 + .storybook/package.json | 1 + .../accordion/stories/accordion.stories.js | 11 ++++++ .../actionbar/stories/actionbar.stories.js | 12 ++++++ .../stories/actionbutton.stories.js | 12 ++++++ .../stories/actiongroup.stories.js | 12 ++++++ .../actionmenu/stories/actionmenu.stories.js | 6 +++ .../stories/alertbanner.stories.js | 16 +++++++- .../stories/alertdialog.stories.js | 12 ++++++ components/asset/stories/asset.stories.js | 12 ++++++ .../assetcard/stories/assetcard.stories.js | 12 ++++++ .../assetlist/stories/assetlist.stories.js | 12 ++++++ components/avatar/stories/avatar.stories.js | 12 ++++++ components/badge/stories/badge.stories.js | 12 ++++++ .../breadcrumb/stories/breadcrumb.stories.js | 18 +++++++-- components/button/stories/button.stories.js | 16 +++++++- .../stories/buttongroup.stories.js | 12 ++++++ .../calendar/stories/calendar.stories.js | 12 ++++++ components/card/stories/card.stories.js | 12 ++++++ .../checkbox/stories/checkbox.stories.js | 26 +++++++++---- .../stories/clearbutton.stories.js | 12 ++++++ .../stories/closebutton.stories.js | 17 +++++++-- .../stories/coachindicator.stories.js | 14 ++++++- .../coachmark/stories/coachmark.stories.js | 12 ++++++ .../colorarea/stories/colorarea.stories.js | 12 ++++++ .../stories/colorhandle.stories.js | 12 ++++++ .../colorloupe/stories/colorloupe.stories.js | 12 ++++++ .../stories/colorslider.stories.js | 12 ++++++ .../colorwheel/stories/colorwheel.stories.js | 12 ++++++ .../combobox/stories/combobox.stories.js | 12 ++++++ .../stories/contextualhelp.stories.js | 12 ++++++ .../datepicker/stories/datepicker.stories.js | 12 ++++++ components/dial/stories/dial.stories.js | 12 ++++++ components/dialog/stories/dialog.stories.js | 14 ++++++- components/divider/stories/divider.stories.js | 16 +++++++- .../stories/dropindicator.stories.js | 12 ++++++ .../dropzone/stories/dropzone.stories.js | 12 ++++++ .../fieldgroup/stories/fieldgroup.stories.js | 12 ++++++ .../fieldlabel/stories/fieldlabel.stories.js | 12 ++++++ components/fieldlabel/stories/form.stories.js | 12 ++++++ .../stories/floatingactionbutton.stories.js | 12 ++++++ .../helptext/stories/helptext.stories.js | 18 +++++++-- components/icon/stories/icon.stories.js | 12 ++++++ .../stories/illustratedmessage.stories.js | 12 ++++++ .../stories/infieldbutton.stories.js | 12 ++++++ .../stories/inlinealert.stories.js | 22 ++++++++--- components/link/stories/link.stories.js | 12 ++++++ .../stories/logicbutton.stories.js | 12 ++++++ components/menu/stories/menu.stories.js | 12 ++++++ components/miller/stories/miller.stories.js | 12 ++++++ components/modal/stories/modal.stories.js | 12 ++++++ .../stories/opacitycheckerboard.stories.js | 12 ++++++ .../pagination/stories/pagination.stories.js | 16 +++++++- components/picker/stories/picker.stories.js | 12 ++++++ .../stories/pickerbutton.stories.js | 12 ++++++ components/popover/stories/popover.stories.js | 20 ++++++++-- .../progressbar/stories/meter.stories.js | 12 ++++++ .../stories/progresscircle.stories.js | 14 ++++++- components/radio/stories/radio.stories.js | 20 ++++++++-- components/rating/stories/rating.stories.js | 14 ++++++- components/search/stories/search.stories.js | 12 ++++++ components/sidenav/stories/sidenav.stories.js | 14 ++++++- components/slider/stories/slider.stories.js | 20 ++++++++-- .../splitview/stories/splitview.stories.js | 12 ++++++ .../stories/statuslight.stories.js | 12 ++++++ .../steplist/stories/steplist.stories.js | 14 ++++++- components/stepper/stories/stepper.stories.js | 12 ++++++ components/swatch/stories/swatch.stories.js | 24 +++++++++--- .../stories/swatchgroup.stories.js | 38 ++++++++++++------- components/switch/stories/switch.stories.js | 1 + components/table/stories/table.stories.js | 16 +++++++- components/tabs/stories/tabs.stories.js | 36 ++++++++++++------ components/tag/stories/tag.stories.js | 12 ++++++ .../taggroup/stories/taggroup.stories.js | 12 ++++++ .../textfield/stories/textfield.stories.js | 12 ++++++ .../thumbnail/stories/thumbnail.stories.js | 12 ++++++ components/toast/stories/toast.stories.js | 12 ++++++ components/tooltip/stories/tooltip.stories.js | 12 ++++++ components/tray/stories/tray.stories.js | 12 ++++++ .../treeview/stories/treeview.stories.js | 12 ++++++ .../typography/stories/typography.stories.js | 38 ++++++++++++------- .../underlay/stories/underlay.stories.js | 12 ++++++ components/well/stories/well.stories.js | 12 ++++++ .../stories/{{ folderName }}.stories.js.hbs | 14 ++++++- yarn.lock | 8 ++++ 87 files changed, 1079 insertions(+), 95 deletions(-) create mode 100644 .changeset/eleven-plants-grow.md create mode 100644 .changeset/new-bulldogs-add.md diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md new file mode 100644 index 0000000000..b08e57e166 --- /dev/null +++ b/.changeset/eleven-plants-grow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/generator": patch +--- + +Update story templates to include the cssprops imports diff --git a/.changeset/new-bulldogs-add.md b/.changeset/new-bulldogs-add.md new file mode 100644 index 0000000000..a5328a1d0a --- /dev/null +++ b/.changeset/new-bulldogs-add.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/preview": minor +--- + +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. diff --git a/.storybook/main.js b/.storybook/main.js index a00e74bff7..38cd343408 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -45,6 +45,8 @@ export default { "@chromaui/addon-visual-tests", // https://storybook.js.org/addons/@storybook/addon-designs/ "@storybook/addon-designs", + // https://github.com/ljcl/storybook-addon-cssprops + "@ljcl/storybook-addon-cssprops", ], core: { disableTelemetry: true, diff --git a/.storybook/package.json b/.storybook/package.json index c899284062..d417904381 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -37,6 +37,7 @@ "@babel/core": "^7.25.2", "@chromaui/addon-visual-tests": "^1.0.0", "@etchteam/storybook-addon-status": "^5.0.0", + "@ljcl/storybook-addon-cssprops": "^4.0.0", "@storybook/addon-a11y": "^8.3.2", "@storybook/addon-actions": "^8.3.2", "@storybook/addon-console": "^3.0.0", diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index af47f53cc1..11fe18901d 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -2,6 +2,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; import { AccordionGroup } from "./accordion.test.js"; import { Template } from "./template.js"; @@ -57,6 +58,16 @@ export default { }, chromatic: { disableSnapshot: true }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index d644fe48cb..3389143e8d 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -3,7 +3,9 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionBarGroup } from "./actionbar.test.js"; import { Template } from "./template.js"; @@ -67,6 +69,16 @@ export default { url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1", }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 6a214ab0a1..37fce786be 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionButtonGroup, ActionButtons } from "./actionbutton.test.js"; /** @@ -73,6 +75,16 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, docs: { story: { height: "auto", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index b4fc06f099..a97c1cd46c 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -1,7 +1,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionGroups } from "./actiongroup.test.js"; /** @@ -61,6 +63,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index 41420890ec..bb3c1e3fd7 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -5,6 +5,7 @@ import { default as Popover } from "@spectrum-css/popover/stories/popover.storie import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import pkgJson from "../package.json"; + import { ActionMenuGroup } from "./actionmenu.test.js"; /** @@ -49,6 +50,11 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...(Popover?.parameters?.cssprops ?? {}), + ...(ActionButton?.parameters?.cssprops ?? {}), + ...(Menu.parameters?.cssprops ?? {}), + }, docs: { story: { height: "200px", diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index fdeebb1eab..84f7903e7f 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertBannerGroup } from "./alertbanner.test.js"; import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js"; @@ -68,6 +70,16 @@ export default { handles: ["click .spectrum-AlertBanner button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -133,7 +145,7 @@ Negative.parameters = { * The alert banner component can contain both an icon-only close button and a button with a contextual action to * take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue * associated with an alert. There should never be more than one button with a contextual action in an alert banner. - * + * * The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert. */ export const ActionableOptions = ActionableOptionsTemplate.bind({}); @@ -160,4 +172,4 @@ TextOverflow.args = { }; TextOverflow.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 47a4ed4bac..14c79302d1 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -1,7 +1,9 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertDialogGroup } from "./alertdialog.test.js"; import { Template } from "./template.js"; @@ -49,6 +51,16 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 13d64fd732..bbe1b68dbe 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetGroup } from "./asset.test.js"; import { Template } from "./template.js"; @@ -36,6 +38,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index d088a28822..287ef8ae3a 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -1,7 +1,9 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isSelected } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetCardGroup } from "./assetcard.test.js"; import { Template } from "./template.js"; @@ -86,6 +88,16 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 2ee335d903..d3a9a6635d 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,6 +1,8 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetListGroup } from "./assetlist.test.js"; /** @@ -20,6 +22,16 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 83eb4abc37..0d6baa3e1f 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AvatarGroup } from "./avatar.test.js"; import { Template } from "./template.js"; @@ -58,6 +60,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index d5976ef5ba..b921a60a0b 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { BadgeGroup } from "./badge.test.js"; import { PreviewSets } from "./template.js"; @@ -62,6 +64,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 6689d7d7bb..7f29e24f52 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,17 +1,19 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { BreadcrumbGroup } from "./breadcrumb.test.js"; import { Template } from "./template"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. - * + * * ## Nesting * 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. - * + * * The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb. - * + * * ## Root Context * 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. */ @@ -41,6 +43,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0fc0cb8cd6..3fdf8f8844 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -2,7 +2,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ButtonGroups } from "./button.test.js"; import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js"; @@ -85,6 +87,16 @@ export default { handles: ["click .spectrum-Button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; @@ -266,7 +278,7 @@ Pending.parameters = { }; /** - * A button in a disabled state shows that an action exists, but is not available in that circumstance. + * A button in a disabled state shows that an action exists, but is not available in that circumstance. * This state can be used to maintain layout continuity and to communicate that an action may become * available later. */ @@ -281,7 +293,7 @@ Disabled.parameters = { }; /** - * When the button text is too long for the horizontal space available, it wraps to form another line. + * When the button text is too long for the horizontal space available, it wraps to form another line. * When there is no icon present, the text is aligned center. When there is an icon present, the text is * aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned * at the top. diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index 276ed44c84..715ebe0423 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,7 +1,9 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ButtonGroup } from "./buttongroup.test.js"; /** @@ -57,6 +59,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index cc0afa3b79..89d5a6a7a6 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,7 +1,9 @@ import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CalendarGroup } from "./calendar.test.js"; import { Template } from "./template.js"; @@ -96,6 +98,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 16fcc54c73..0fd325e845 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -2,7 +2,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CardGroup } from "./card.test.js"; import { Template } from "./template.js"; @@ -92,6 +94,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index 8bfe1cf1d2..2aa79c0918 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,18 +1,20 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; -import { DocsCheckboxGroup, AllVariantsCheckboxGroup, } from "./template"; + import { CheckboxGroup } from "./checkbox.test.js"; +import { AllVariantsCheckboxGroup, DocsCheckboxGroup, } from "./template"; /** * Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected. - * - * ## Usage notes - * - * Checkboxes should not be used on their own. They should always be used within a [field group](/docs/components-field-group--docs). Invalid checkboxes are indicated with an alert [help text](/docs/components-help-text--docs) when included in a Field group. - * - * When the label is too long for the horizontal space available, it wraps to form another line. + * + * ## Usage notes + * + * Checkboxes should not be used on their own. They should always be used within a [field group](/docs/components-field-group--docs). Invalid checkboxes are indicated with an alert [help text](/docs/components-help-text--docs) when included in a Field group. + * + * When the label is too long for the horizontal space available, it wraps to form another line. */ export default { title: "Checkbox", @@ -51,6 +53,16 @@ export default { handles: ["click input[type=\"checkbox\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 9270808c04..7cc6e113e9 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ClearButtonGroup } from "./clearbutton.test.js"; import { Template } from "./template"; @@ -59,6 +61,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 1475a07760..446abdce1e 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CloseButtonGroup } from "./closebutton.test.js"; import { CloseButtonExample, Template } from "./template.js"; @@ -46,6 +48,16 @@ export default { handles: ["click .spectrum-CloseButton"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -55,7 +67,7 @@ Default.args = {}; /** * Close button provides a "large" icon size option, for displaying a larger cross icon for each component size. * When using this option, the following UI icons should be used: - * + * * | Close button class name | UI icon class name | * | ------------------------------- | --------------------------- | * | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` | @@ -90,7 +102,7 @@ WithForcedColors.parameters = { /** * Close buttons come in four different sizes: small, medium, large, and extra-large. By default ("regular" icon size), the cross icon * within the close button should use the following UI icons for each component size: -* +* * | Close button class name | UI icon class name | * | ------------------------------- | --------------------------- | * | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross75` | @@ -136,4 +148,3 @@ StaticBlack.tags = ["!dev"]; StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; - diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index 971211a1da..a9a516d8c2 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,12 +1,14 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachIndicatorGroup } from "./coachindicator.test.js"; import { AllVariantsCoachIndicatorGroup } from "./template"; /** * The coach indicator component can be used to bring added attention to specific parts of a page. - * + * * Coach indicator is primarily used along with the [coach mark](/docs/components-coach-mark--docs) component. */ export default { @@ -32,6 +34,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index ca2e94c01e..84b51e6954 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -1,7 +1,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachMarkGroup } from "./coachmark.test.js"; import { Template } from "./template.js"; @@ -54,6 +56,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index d04ecca0c9..6489fdbb84 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorAreaGroup } from "./colorarea.test.js"; import { Template } from "./template.js"; @@ -41,6 +43,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index 494e115ad5..bad6bba896 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorHandleGroup } from "./colorhandle.test.js"; import { Template } from "./template.js"; @@ -46,6 +48,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index ccee023b9a..e8b10c2696 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorLoupeGroup } from "./colorloupe.test.js"; /** @@ -37,6 +39,16 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 81c42a2887..756bed6d30 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorSliderGroup } from "./colorslider.test.js"; import { Template } from "./template.js"; @@ -50,6 +52,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 5b5daf2771..f373ec327a 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorWheelGroup } from "./colorwheel.test.js"; import { Template } from "./template.js"; @@ -42,6 +44,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 3a1c476934..a50631566b 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,7 +1,9 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ComboBoxGroup } from "./combobox.test.js"; import { Template } from "./template.js"; @@ -67,6 +69,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 44714b4053..d96137d10b 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -1,6 +1,8 @@ import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ContextualHelpGroup } from "./contextualhelp.test.js"; import { Template } from "./template.js"; @@ -91,6 +93,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index afc9adb24c..fcdd2d1597 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -1,7 +1,9 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calendar.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DatePickerGroup } from "./datepicker.test.js"; import { Template } from "./template.js"; @@ -74,6 +76,16 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 87466157d4..f9cfb5ecb9 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DialGroup } from "./dial.test.js"; import { Template } from "./template.js"; @@ -33,6 +35,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 90fbf9fae2..efc68461b1 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -2,13 +2,15 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js"; import { Template } from "./template"; /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. - * + * * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). */ export default { @@ -119,6 +121,16 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 60fde7aa00..b98b0b0220 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -1,7 +1,9 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size, staticColor } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DividerGroup } from "./divider.test.js"; import { Template } from "./template.js"; @@ -34,11 +36,21 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; /** - * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. + * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. */ export const Default = DividerGroup.bind({}); Default.args = {}; diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js index af546a7e58..b47c6a0968 100644 --- a/components/dropindicator/stories/dropindicator.stories.js +++ b/components/dropindicator/stories/dropindicator.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DropIndicatorGroup } from "./dropindicator.test.js"; import { DocsDropIndicatorGroup } from "./template"; @@ -39,6 +41,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 247214a0e5..a52323a46a 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -4,7 +4,9 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; import { html } from "lit"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DropzoneGroup } from "./dropzone.test.js"; /** @@ -35,6 +37,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 428a24479b..8a7f2d9f4c 100644 --- a/components/fieldgroup/stories/fieldgroup.stories.js +++ b/components/fieldgroup/stories/fieldgroup.stories.js @@ -2,7 +2,9 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types"; import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js"; import { Template as Radio } from "@spectrum-css/radio/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FieldGroupSet } from "./fieldgroup.test.js"; import { Template } from "./template.js"; @@ -73,6 +75,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 639a5eda31..bf6e9b9a8f 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FieldLabelGroup } from "./fieldlabel.test.js"; /** @@ -42,6 +44,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldlabel/stories/form.stories.js b/components/fieldlabel/stories/form.stories.js index 956a380814..57ac453770 100644 --- a/components/fieldlabel/stories/form.stories.js +++ b/components/fieldlabel/stories/form.stories.js @@ -2,7 +2,9 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FormGroup } from "./form.test.js"; /** @@ -28,6 +30,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index f25f64d1d6..3a277cf7df 100644 --- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js +++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js"; import { Template } from "./template.js"; @@ -45,6 +47,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 3ddcaaa8a4..31a6715a0a 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { HelpTextGroup } from "./helptext.test.js"; import { NegativeTemplate, Template, VariantsTemplate } from "./template.js"; @@ -57,6 +59,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -113,10 +125,10 @@ Disabled.parameters = { /** * The negative variant is used to convey error messages and can have an optional icon. - * - * In most cases, help text is used with a component that already displays an icon communicating an error (e.g., + * + * In most cases, help text is used with a component that already displays an icon communicating an error (e.g., * [text field](?path=/docs/components-text-field--docs), - * [picker](?path=/docs/components-picker--docs), + * [picker](?path=/docs/components-picker--docs), * [combo box](?path=/docs/components-combobox--docs#standard---invalid)), * so it’s not necessary to include another icon. In other cases, help text that is used with a component that does not display an icon * communicating an error (e.g., [field group](?path=/docs/components-field-group--docs#invalid)) needs to display an icon. diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index a1548194fa..6831d011bc 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -3,7 +3,9 @@ import { size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { IconGroup } from "./icon.test.js"; import { Template } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; @@ -89,6 +91,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index b292562929..4522a30e29 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,7 +1,9 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { html } from "lit"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; @@ -44,6 +46,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 2d449dff95..44757938eb 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { InfieldButtonGroup } from "./infieldbutton.test.js"; import { Template } from "./template.js"; @@ -48,6 +50,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 405c65a58c..8ca663a168 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { InlineAlertGroup } from "./inlinealert.test.js"; import { Template } from "./template"; @@ -59,6 +61,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -71,7 +83,7 @@ Default.args = {}; // ********* DOCS ONLY ********* // /** * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Info_18_S.svg icon in the Express workflow icon set._ */ export const Informative = Template.bind({}); @@ -86,7 +98,7 @@ Informative.tags = ["!dev"]; /** * A negative variant uses the negative semantic color (red) and has an "alert" icon to help those with color vision deficiency to discern the message tone. Negative variants are used to show an error or failure, or to convey something that needs to be immediately acknowledged or addressed. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Negative = Template.bind({}); @@ -101,7 +113,7 @@ Negative.tags = ["!dev"]; /** * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_18_S.svg icon in the Express workflow icon set._ */ export const Positive = Template.bind({}); @@ -116,7 +128,7 @@ Positive.tags = ["!dev"]; /** * To warn about a situation that may need to be addressed soon, use the notice variant. It utilizes the notice semantic color (orange) and has an "alert" icon to help those with color vision deficiency to discern the message tone. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Notice = Template.bind({}); @@ -131,7 +143,7 @@ Notice.tags = ["!dev"]; /** * An in-line alert with a close button in the footer. Combine this strategy with any variant. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Closable = Template.bind({}); diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 5fc8782e28..2404ab1fb1 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { LinkGroup } from "./link.test.js"; import { TemplateWithFillerText } from "./template"; @@ -70,6 +72,16 @@ export default { handles: ["click .spectrum-Link"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index c56c44f06e..3eab7bca84 100644 --- a/components/logicbutton/stories/logicbutton.stories.js +++ b/components/logicbutton/stories/logicbutton.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { LogicButtonGroup } from "./logicbutton.test.js"; import { Template, VariantGroup } from "./template.js"; @@ -30,6 +32,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 8658cb8b33..b0025bff01 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isOpen, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js"; import { Template } from "./template.js"; @@ -186,6 +188,16 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index 6a49e68820..2911020a9b 100644 --- a/components/miller/stories/miller.stories.js +++ b/components/miller/stories/miller.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MillerGroup } from "./miller.test.js"; import { Template } from "./template.js"; @@ -77,6 +79,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 0c7847814b..f6c49087d1 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -2,7 +2,9 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ModalGroup } from "./modal.test.js"; /** @@ -49,6 +51,16 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index 327179205c..32d3ec8322 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js"; import { Template } from "./template.js"; @@ -30,6 +32,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index a3b2f09790..b7c54aa28a 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -1,12 +1,14 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PaginationGroup } from "./pagination.test.js"; import { Template } from "./template"; /** - * The pagination component displays numbered buttons or an input field to allow for navigation. + * The pagination component displays numbered buttons or an input field to allow for navigation. */ export default { title: "Pagination", @@ -68,11 +70,21 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; /** - * The default listing/page variant uses buttons for each page number. + * The default listing/page variant uses buttons for each page number. */ export const Default = PaginationGroup.bind({}); Default.storyName = "Default (listing)"; diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 12a0100c8d..12f8641579 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -1,7 +1,9 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PickerGroup } from "./picker.test.js"; /** @@ -84,6 +86,16 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index 0c8245ec4f..ba78e1dd10 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -2,7 +2,9 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PickerGroup } from "./pickerbutton.test.js"; import { CustomIconTemplate, Template } from "./template"; @@ -85,6 +87,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 2c5d922afb..b1d25328b7 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -5,17 +5,19 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PopoverGroup } from "./popover.test.js"; import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template"; /** * A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.). * It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface. - * + * * - Popover's position and distance to its source should be handled by the implementation. Positioning in Storybook is only for demonstration purposes. * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This - * offset is done with a CSS transform and animates with a CSS transition. + * offset is done with a CSS transform and animates with a CSS transition. */ export default { title: "Popover", @@ -91,13 +93,23 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; /** * By default, popovers do not have a tip. Popovers without a tip should be used when the source has a * visually distinct down state, in order to show the connection between the popover and its source. - * + * * This example uses the [menu](?path=/docs/components-menu--docs) component within the popover, and a button as the source. */ export const Default = PopoverGroup.bind({}); @@ -269,7 +281,7 @@ DialogStyle.parameters = { * the following naming convention: the first term is the popover's position and the second term is its * source's position. For example, for the `spectrum-Popover--top-left` class, the popover is positioned at the top and the * source is to the left. - * + * * #### Tip SVG * Depending on its position, the tip uses one of two different SVGs. * - Top and bottom popover positions use the same SVG. The CSS handles flipping the SVG vertically. diff --git a/components/progressbar/stories/meter.stories.js b/components/progressbar/stories/meter.stories.js index 69928bed33..550fcaa7a4 100644 --- a/components/progressbar/stories/meter.stories.js +++ b/components/progressbar/stories/meter.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MeterGroup } from "./meter.test.js"; import { default as ProgressBar } from "./progressbar.stories"; @@ -25,6 +27,16 @@ export default { args: ProgressBar.args, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index 65b5464342..3d22b8fd30 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ProgressCircleGroup } from "./progresscircle.test.js"; import { Template } from "./template"; @@ -27,6 +29,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -107,4 +119,4 @@ StaticWhiteIndeterminate.args = { }; StaticWhiteIndeterminate.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index be88ce4a12..7f3e1f35ee 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -1,13 +1,15 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { RadioGroup } from "./radio.test.js"; import { BasicGroupTemplate } from "./template"; /** * Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. - * + * * Radio buttons should not be used on their own, they should always be used within a [field group](?path=/docs/components-field-group--docs). Invalid radio buttons are signified by including * [help text](?path=/docs/components-help-text--docs) in a field group. Sample usage for an [invalid radio state](?path=/docs/components-field-group--docs#invalid) is included in the field group documentation. */ @@ -54,6 +56,16 @@ export default { handles: ["click input[type=\"radio\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -103,7 +115,7 @@ Sizing.parameters = { }; /** - * The emphasized option provides a visual prominence for the selected radio button. + * The emphasized option provides a visual prominence for the selected radio button. * It is best for forms, settings, lists or grids of assets, and other situations where a * radio button needs to be noticed. */ @@ -130,7 +142,7 @@ Disabled.parameters = { /** * A radio group has a read-only option for when it's in the disabled state but still needs to be shown. * This allows for content to be copied, but not interacted with or changed. - * + * * - Read-only radio buttons are disabled, but not all disabled radio buttons are read-only. * - Read-only radio buttons do not have a focus ring, but the button should be focusable. */ @@ -143,4 +155,4 @@ ReadOnly.args = { ReadOnly.tags = ["!dev"]; ReadOnly.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index 314aba98d3..0557af92d9 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -1,12 +1,14 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { RatingGroup } from "./rating.test.js"; import { Template } from "./template.js"; /** * The rating component is used to display or collect a user's rating of an item as represented by a number of stars. - * + * * ### Usage notes * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. @@ -53,6 +55,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index ef50bd6a0d..6af4514e55 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SearchGroup } from "./search.test.js"; /** @@ -28,6 +30,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index fc68aa78b9..949cd5a014 100644 --- a/components/sidenav/stories/sidenav.stories.js +++ b/components/sidenav/stories/sidenav.stories.js @@ -1,11 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SideNavGroup } from "./sidenav.test.js"; import { Template } from "./template.js"; /** * Side nav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation. - * + * * - A navigation item can be styled as disabled with the `is-disabled` class. * - A navigation item can be styled as the current or selected page with the `is-selected` class. This is accompanied by the use of the `aria-current` attribute on the anchor link. */ @@ -63,6 +65,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index c5f4119f6d..5d83479a86 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,20 +1,22 @@ -import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SliderGroup } from "./slider.test.js"; import { Template } from "./template.js"; /** * A slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. - * + * * ## Indicating focus * Focus must be bubbled up to the parent so its descendants can be styled. * * Thus, implementations should add the following class to the `.spectrum-Slider` parent class in the following situations: * * - `.is-disabled`: when the slider is disabled - * + * * Implementations should also bubble the following class to the `.spectrum-Slider-controls` parent class in the following situations: * - `.is-focused`: when the handle input is focused with the mouse or keyboard @@ -140,6 +142,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -154,7 +166,7 @@ Default.args = {}; * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”). */ export const WithoutLabel = Template.bind({}); -WithoutLabel.args = { +WithoutLabel.args = { label: "", }; WithoutLabel.tags = ["!dev"]; diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js index 3cc8ad40c5..c272875cd1 100644 --- a/components/splitview/stories/splitview.stories.js +++ b/components/splitview/stories/splitview.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SplitViewGroup } from "./splitview.test.js"; import { Template } from "./template.js"; @@ -79,6 +81,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b318b49813..5dbdfa215e 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { StatusLightGroup } from "./statuslight.test.js"; export default { @@ -57,6 +59,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 6c75bc1c43..2d60cce55a 100644 --- a/components/steplist/stories/steplist.stories.js +++ b/components/steplist/stories/steplist.stories.js @@ -1,11 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SteplistGroup } from "./steplist.test.js"; import { DocsSteplistGroup } from "./template"; /** * A steplist can communicate the progress of a task or workflow. It can help users understand where they are in a process and what they need to do next. - * + * * All variants of steplist can be static or interactive. */ export default { @@ -74,6 +76,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 5fe18fa5cf..f52e37fffe 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { StepperGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template"; @@ -42,6 +44,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index 8871631e05..8ac3ef3447 100644 --- a/components/swatch/stories/swatch.stories.js +++ b/components/swatch/stories/swatch.stories.js @@ -1,15 +1,17 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isSelected, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SwatchGroup } from "./swatch.test.js"; -import { Template, DisabledGroup, EmptyGroup, RoundingGroup, BorderGroup, SizingGroup } from "./template"; +import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template"; /** * A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object. - * + * * ## Usage notes - * + * * Set `--spectrum-picked-color` to customize the swatch fill background color. */ export default { @@ -108,6 +110,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -172,7 +184,7 @@ Selected.parameters = { }; /** - * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. + * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class. * - When and only when color swatches used in a swatch group have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class. */ @@ -182,7 +194,7 @@ Border.parameters = { chromatic: { disableSnapshot: true }, }; -/** +/** * Swatches can also have a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors). */ export const Shape = Template.bind({}); diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js index d94c91ba15..8b93fe02c5 100644 --- a/components/swatchgroup/stories/swatchgroup.stories.js +++ b/components/swatchgroup/stories/swatchgroup.stories.js @@ -1,29 +1,31 @@ -import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SwatchgroupGroup } from "./swatchgroup.test.js"; -import { Template, RoundingTemplate } from "./template"; +import { RoundingTemplate, Template } from "./template"; /** * The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs). - * + * * ## Usage notes - * + * * ### Corner rounding in swatch groups - * + * * A corner rounding of “none” (`.spectrum-Swatch--roundingNone` class) should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group. - * + * * The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options. - * + * * ### Apply border to low-contrast swatches only - * + * * When swatches within a swatch group have low contrast (below 3:1 contrast with the background), they have a less prominent border compared to a single swatch component used by itself, and should have the `.spectrum-Swatch--lightBorder` class. This reduces the likelihood of the UI interfering with color perception and comparisons. Otherwise, swatches within a swatch group that meet contrast should have the `.spectrum-Swatch--noBorder` class. - * + * * Implementations should apply the `.spectrum-Swatch--lightBorder` to the individual swatches of a swatch group that do not meet 3:1 contrast. - * + * * ### Density - * + * * Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density, but have less or more padding between each swatch, respectively. */ export default { @@ -112,6 +114,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -165,7 +177,7 @@ Rounding.parameters = { export const Sizing = (args, context) => Sizes({ Template, withBorder: false, - withHeading: false, + withHeading: false, ...args, }, context); Sizing.args = Default.args; @@ -176,7 +188,7 @@ Sizing.parameters = { /** * When swatches within a swatch group have low contrast (below 3:1 contrast with the background), the `.spectrum-Swatch--lightBorder` class should be applied to those swatches only. - * + * * The swatch group example below contains all swatches with low contrast in light mode, therefore each has the `.spectrum-Swatch--lightBorder` class applied. */ export const WithLightBorder = Template.bind({}); diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index f53be00fd7..f24613cbda 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -1,6 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types"; import pkgJson from "../package.json"; + import { SwitchGroup } from "./switch.test.js"; import { Template } from "./template.js"; diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index 5bbada7598..ee4f106612 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -1,7 +1,9 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TableGroup } from "./table.test.js"; import { Template } from "./template.js"; @@ -111,6 +113,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -341,7 +353,7 @@ SectionHeaderQuiet.parameters = { }; /** - * + * * A table can be wrapped in a fixed height `div` with the `.spectrum-Table-scroller` class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll). * * When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--mod-table-header-background-color-scrollable`. diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js index b328be7445..67ffadec00 100644 --- a/components/tabs/stories/tabs.stories.js +++ b/components/tabs/stories/tabs.stories.js @@ -1,21 +1,23 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TabsGroups } from "./tabs.test.js"; -import { Template, QuietGroup, OverflowGroup, VerticalGroup, CompactGroup } from "./template.js"; +import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js"; /** * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. Tabs can be either horizontal or vertical. - * + * * ## Usage notes - * + * * ### Use icons consistently * Icons are optional, but don’t mix the use of icons in tabs if they are utilized. Navigation controls require a clear spacial relationship to one another, and mixing the use of icons can dramatically impact the visual balance and presence for each tab item. - * + * * ### Setting the selected tab item * Only one tab item can be selected at any given time. The selected tab item is designated by the `is-selected` class. A selection indicator line is shown under or next to the selected tab item. - * + * */ export default { @@ -113,23 +115,33 @@ export default { handles: [".spectrum-Tabs-item"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; /** * Basic, default tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item. - * + * * By default, tabs have a divider that spans across all tab items. This style works as a way to anchor them to the page. These types of tabs are best used at the top of a page, as a top-level navigation. - * + * * Tabs are horizontal by default and should be used when horizontal space is limited. - * + * */ export const Default = TabsGroups.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // /** - * Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. + * Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. */ export const Vertical = VerticalGroup.bind({}); Vertical.args = { @@ -142,7 +154,7 @@ Vertical.parameters = { export const VerticalRight = Template.bind({}); VerticalRight.args = { - ...Vertical.args, + ...Vertical.args, hasRightAlignedTabs: true, }; VerticalRight.storyName = "Vertical right"; @@ -153,7 +165,7 @@ VerticalRight.parameters = { /** * When there are too many tabs to fit horizontally across the viewport, the tabs component can be displayed as a [quiet picker](/docs/components-picker--docs). The example below is non-functional. - * + * * When appropriate, alternative methods of overflowing tabs such as horizontal scrolling can be used. */ export const Overflow = OverflowGroup.bind({}); diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index d5b95fcf34..80223a3f4a 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TagGroups } from "./tag.test.js"; import { Template } from "./template.js"; @@ -93,6 +95,16 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index b1f4b6381a..11493fd327 100644 --- a/components/taggroup/stories/taggroup.stories.js +++ b/components/taggroup/stories/taggroup.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TagGroups } from "./taggroup.test.js"; import { Template } from "./template.js"; @@ -55,6 +57,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 683470204c..47124839bc 100644 --- a/components/textfield/stories/textfield.stories.js +++ b/components/textfield/stories/textfield.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, isRequired, isValid, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { TextFieldGroup } from "./textfield.test.js"; @@ -117,6 +119,16 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index e709de85e1..6b62a4c478 100644 --- a/components/thumbnail/stories/thumbnail.stories.js +++ b/components/thumbnail/stories/thumbnail.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { ThumbnailGroup } from "./thumbnail.test.js"; @@ -88,6 +90,16 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index a2069f1117..8d3efa4367 100644 --- a/components/toast/stories/toast.stories.js +++ b/components/toast/stories/toast.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { ToastGroup } from "./toast.test.js"; @@ -41,6 +43,16 @@ export default { handles: ["click .spectrum-Toast button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 17946b4693..34d140a88f 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PlacementVariants } from "./tooltip.test.js"; /** @@ -89,6 +91,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js index 564bf294d6..41b6327d41 100644 --- a/components/tray/stories/tray.stories.js +++ b/components/tray/stories/tray.stories.js @@ -1,7 +1,9 @@ import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TrayGroup } from "./tray.test.js"; /** @@ -42,6 +44,16 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js index a4f9a7e295..4e7f251710 100644 --- a/components/treeview/stories/treeview.stories.js +++ b/components/treeview/stories/treeview.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { TreeViewGroup } from "./treeview.test.js"; @@ -37,6 +39,16 @@ export default { handles: ["click .spectrum-TreeView-itemLink"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 3e1cd67cc5..612d236eaa 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -1,19 +1,21 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { - DocsBodyVariants, - DocsCodeVariants, - DocsDetailVariants, - DocsHeadingBodyPairing, - DocsHeadingVariants, - DocsInternationalizedBodyVariants, - DocsInternationalizedCodeVariants, - DocsInternationalizedDetailVariants, - DocsInternationalizedHeadingBodyPairing, - DocsInternationalizedHeadingVariants, - Template + DocsBodyVariants, + DocsCodeVariants, + DocsDetailVariants, + DocsHeadingBodyPairing, + DocsHeadingVariants, + DocsInternationalizedBodyVariants, + DocsInternationalizedCodeVariants, + DocsInternationalizedDetailVariants, + DocsInternationalizedHeadingBodyPairing, + DocsInternationalizedHeadingVariants, + Template } from "./template.js"; import { TypographyGroup } from "./typography.test.js"; @@ -78,6 +80,16 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, }, }; @@ -170,7 +182,7 @@ BodySizes.parameters = { /** * When typography elements are paired, such as with heading and body below, clear content hierarchies are shown. - * + * * Note that the body component is not available in XXS, but the XXS heading can be paired with the XS body as seen here. */ export const HeadingBodyHierarchy = (args, context) => Sizes({ @@ -255,7 +267,7 @@ DetailVariants.parameters = { /** * Code is used for text that represents code. - * + * * Multi-line blocks of code may be wrapped with `
` tags to allow block formatting.
  */
 export const CodeVariants = DocsCodeVariants.bind({});
diff --git a/components/underlay/stories/underlay.stories.js b/components/underlay/stories/underlay.stories.js
index 756fe8d9fd..e1986a9107 100644
--- a/components/underlay/stories/underlay.stories.js
+++ b/components/underlay/stories/underlay.stories.js
@@ -1,7 +1,9 @@
 import { Default as DialogStory } from "@spectrum-css/dialog/stories/dialog.stories.js";
 import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js";
 import { isOpen } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { Template } from "./template.js";
 
 /**
@@ -29,6 +31,16 @@ export default {
 		},
 		chromatic: { disableSnapshot: true },
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					control: key.includes("color") ? "color" : "text",
+					category: "Modifiers",
+				};
+				return collection;
+			}, {})
+		},
 	}
 };
 
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 1e3633d718..389a6fe178 100644
--- a/components/well/stories/well.stories.js
+++ b/components/well/stories/well.stories.js
@@ -1,7 +1,9 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { WellGroup } from "./well.test.js";
 
 /**
@@ -21,6 +23,16 @@ export default {
 			handles: [],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					control: key.includes("color") ? "color" : "text",
+					category: "Modifiers",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 
diff --git a/generator/templates/stories/{{ folderName }}.stories.js.hbs b/generator/templates/stories/{{ folderName }}.stories.js.hbs
index 552f294ce8..d5f2f9faff 100644
--- a/generator/templates/stories/{{ folderName }}.stories.js.hbs	
+++ b/generator/templates/stories/{{ folderName }}.stories.js.hbs	
@@ -3,6 +3,7 @@ import { Template } from "./template.js";
 import { isDisabled, isSelected, isHovered, isFocused } from "@spectrum-css/preview/types";
 import { {{ pascalCase name }}Group } from "./{{ pascalCase name }}.test.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
 
 /**
@@ -38,12 +39,21 @@ export default {
     actions: {
       handles: ["click .spectrum-{{ pascalCase name }}"],
     },
-    componentVersion: version,
     design: {
       type: "figma",
       url: "",
     },
-    componentVersion: pkgJson.version,
+		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					control: key.includes("color") ? "color" : "text",
+					category: "Modifiers",
+				};
+				return collection;
+			}, {})
+		},
   }
 };
 
diff --git a/yarn.lock b/yarn.lock
index d60896feed..7b04771797 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2197,6 +2197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ljcl/storybook-addon-cssprops@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@ljcl/storybook-addon-cssprops@npm:4.0.0"
+  checksum: 10c0/8b04b83da0d0ac955c66184c1f5a91eaff54cf21cf190537fd21f8402575ae87e68f6ff0928a8e34777ef9fd023c27fd7582af0ecd3e8717512a58650c51be29
+  languageName: node
+  linkType: hard
+
 "@ljharb/through@npm:^2.3.13":
   version: 2.3.13
   resolution: "@ljharb/through@npm:2.3.13"
@@ -3872,6 +3879,7 @@ __metadata:
     "@babel/core": "npm:^7.25.2"
     "@chromaui/addon-visual-tests": "npm:^1.0.0"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"
+    "@ljcl/storybook-addon-cssprops": "npm:^4.0.0"
     "@spectrum-css/tokens": "workspace:^"
     "@spectrum-css/typography": "workspace:^"
     "@spectrum-css/ui-icons": "workspace:^"