From 6ef4d69c6e11dc6a412e67eefbec1aa20ff3c9c7 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 | 12 ++++++ .../actionbar/stories/actionbar.stories.js | 13 +++++++ .../stories/actionbutton.stories.js | 13 +++++++ .../stories/actiongroup.stories.js | 13 +++++++ .../actionmenu/stories/actionmenu.stories.js | 6 +++ .../stories/alertbanner.stories.js | 13 +++++++ .../stories/alertdialog.stories.js | 13 +++++++ components/asset/stories/asset.stories.js | 13 +++++++ .../assetcard/stories/assetcard.stories.js | 13 +++++++ .../assetlist/stories/assetlist.stories.js | 13 +++++++ components/avatar/stories/avatar.stories.js | 13 +++++++ components/badge/stories/badge.stories.js | 13 +++++++ .../breadcrumb/stories/breadcrumb.stories.js | 19 +++++++-- components/button/stories/button.stories.js | 17 +++++++- .../stories/buttongroup.stories.js | 13 +++++++ .../calendar/stories/calendar.stories.js | 13 +++++++ components/card/stories/card.stories.js | 13 +++++++ .../checkbox/stories/checkbox.stories.js | 27 +++++++++---- .../stories/clearbutton.stories.js | 13 +++++++ .../stories/closebutton.stories.js | 18 +++++++-- .../stories/coachindicator.stories.js | 13 +++++++ .../coachmark/stories/coachmark.stories.js | 18 ++++++++- .../colorarea/stories/colorarea.stories.js | 13 +++++++ .../stories/colorhandle.stories.js | 13 +++++++ .../colorloupe/stories/colorloupe.stories.js | 13 +++++++ .../stories/colorslider.stories.js | 13 +++++++ .../colorwheel/stories/colorwheel.stories.js | 13 +++++++ .../combobox/stories/combobox.stories.js | 13 +++++++ .../stories/contextualhelp.stories.js | 13 +++++++ .../datepicker/stories/datepicker.stories.js | 13 +++++++ components/dial/stories/dial.stories.js | 13 +++++++ components/dialog/stories/dialog.stories.js | 15 ++++++- components/divider/stories/divider.stories.js | 17 +++++++- .../stories/dropindicator.stories.js | 13 +++++++ .../dropzone/stories/dropzone.stories.js | 13 +++++++ .../fieldgroup/stories/fieldgroup.stories.js | 13 +++++++ .../fieldlabel/stories/fieldlabel.stories.js | 13 +++++++ components/fieldlabel/stories/form.stories.js | 13 +++++++ .../stories/floatingactionbutton.stories.js | 13 +++++++ .../helptext/stories/helptext.stories.js | 19 +++++++-- components/icon/stories/icon.stories.js | 18 ++++++++- .../stories/illustratedmessage.stories.js | 13 +++++++ .../stories/infieldbutton.stories.js | 13 +++++++ .../stories/inlinealert.stories.js | 23 ++++++++--- components/link/stories/link.stories.js | 13 +++++++ .../stories/logicbutton.stories.js | 13 +++++++ components/menu/stories/menu.stories.js | 13 +++++++ components/miller/stories/miller.stories.js | 13 +++++++ components/modal/stories/modal.stories.js | 13 +++++++ .../stories/opacitycheckerboard.stories.js | 13 +++++++ .../pagination/stories/pagination.stories.js | 17 +++++++- components/picker/stories/picker.stories.js | 13 +++++++ .../stories/pickerbutton.stories.js | 13 +++++++ components/popover/stories/popover.stories.js | 21 ++++++++-- .../progressbar/stories/meter.stories.js | 13 +++++++ .../stories/progresscircle.stories.js | 15 ++++++- components/radio/stories/radio.stories.js | 21 ++++++++-- components/rating/stories/rating.stories.js | 15 ++++++- components/search/stories/search.stories.js | 13 +++++++ components/sidenav/stories/sidenav.stories.js | 15 ++++++- components/slider/stories/slider.stories.js | 21 ++++++++-- .../splitview/stories/splitview.stories.js | 13 +++++++ .../stories/statuslight.stories.js | 13 +++++++ .../steplist/stories/steplist.stories.js | 15 ++++++- components/stepper/stories/stepper.stories.js | 13 +++++++ components/swatch/stories/swatch.stories.js | 25 +++++++++--- .../stories/swatchgroup.stories.js | 39 ++++++++++++------- components/switch/stories/switch.stories.js | 1 + components/table/stories/table.stories.js | 17 +++++++- components/tabs/stories/tabs.stories.js | 37 ++++++++++++------ components/tag/stories/tag.stories.js | 13 +++++++ .../taggroup/stories/taggroup.stories.js | 13 +++++++ .../textfield/stories/textfield.stories.js | 13 +++++++ .../thumbnail/stories/thumbnail.stories.js | 13 +++++++ components/toast/stories/toast.stories.js | 13 +++++++ components/tooltip/stories/tooltip.stories.js | 13 +++++++ components/tray/stories/tray.stories.js | 13 +++++++ .../treeview/stories/treeview.stories.js | 13 +++++++ .../typography/stories/typography.stories.js | 17 +++++++- .../underlay/stories/underlay.stories.js | 13 +++++++ components/well/stories/well.stories.js | 13 +++++++ .../stories/{{ folderName }}.stories.js.hbs | 14 ++++++- yarn.lock | 8 ++++ 87 files changed, 1152 insertions(+), 83 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..beb3da5393 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,17 @@ export default { }, chromatic: { disableSnapshot: true }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index d644fe48cb..83bf6b334e 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,17 @@ 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] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 6a214ab0a1..3edda84037 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,17 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "auto", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index b4fc06f099..2f267904c9 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + 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 060d302407..988957242d 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"; @@ -69,6 +71,17 @@ export default { handles: ["click .spectrum-AlertBanner button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 22598d4f75..122e971997 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"; @@ -50,6 +52,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 13d64fd732..6a411e599c 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index d088a28822..f22597b0de 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,17 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 2ee335d903..e10a217642 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,17 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 83eb4abc37..488054097d 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index d5976ef5ba..314bb7c393 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 6689d7d7bb..8343227f26 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0fc0cb8cd6..39c8606605 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,17 @@ export default { handles: ["click .spectrum-Button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; @@ -266,7 +279,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 +294,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..882c7ee345 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index cc0afa3b79..66ef9da01c 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 16fcc54c73..7513ea3fbc 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index 8bfe1cf1d2..41f64c67fe 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,17 @@ export default { handles: ["click input[type=\"checkbox\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 9270808c04..c87198a117 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 1475a07760..90e707c310 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,17 @@ export default { handles: ["click .spectrum-CloseButton"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -55,7 +68,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 +103,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 +149,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 9d6e59b0cc..55e3cef82a 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,6 +1,8 @@ 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"; @@ -32,6 +34,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index 52eb8bd5fc..4bb053d23a 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 } from "@spectrum-css/preview/modes"; +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"; @@ -55,6 +57,20 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, + chromatic: { + modes: mobile, + }, docs: { story: { height: "300px", diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index d04ecca0c9..f7945beeee 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index e9c5760e1c..48d0d71a55 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index ccee023b9a..4a80d6e346 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,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 81c42a2887..a9495ca5ea 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 5b5daf2771..4093d6a5df 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 3a1c476934..10639ba606 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index dc5e3e45d2..1e1811c62c 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "200px", diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index afc9adb24c..7ba57f28d5 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,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 87466157d4..8dd7333781 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 5a6be25b16..cbe6f8295e 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 { @@ -120,6 +122,17 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 60fde7aa00..4e23be54fe 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,22 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + 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..bf5838def4 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 247214a0e5..880ac78bc3 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 428a24479b..9b79adaebb 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 639a5eda31..ac74ef73d4 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldlabel/stories/form.stories.js b/components/fieldlabel/stories/form.stories.js index 956a380814..68c19e75c4 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index f25f64d1d6..8f9823abe6 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 3ddcaaa8a4..98648b9b0a 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -113,10 +126,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 978535f323..9950a7c569 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,9 +1,11 @@ -import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes"; 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,20 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, + chromatic: { + modes: mobile, + }, }, tags: ["!autodocs"], }; diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index b292562929..f9bfbc9774 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 2d449dff95..cd513d2183 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 405c65a58c..3837113d55 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -71,7 +84,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 +99,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 +114,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 +129,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 +144,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..ff6bd67964 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,17 @@ export default { handles: ["click .spectrum-Link"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index c56c44f06e..6a2c28eddf 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 607304e066..07bafb473f 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 } 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,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index 6a49e68820..8bb464e606 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 0c7847814b..17637843d9 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,17 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index 327179205c..14859522e4 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index a3b2f09790..112e503485 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,22 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + 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..13e5c031e4 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,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index 0c8245ec4f..e58f60d283 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 9f6f88f246..98cf2d0346 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,24 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + 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 +282,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..6e871e6559 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,17 @@ export default { args: ProgressBar.args, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index 65b5464342..36a41785b1 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -107,4 +120,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..08e18d33c6 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,17 @@ export default { handles: ["click input[type=\"radio\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -103,7 +116,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 +143,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 +156,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..f37f6f0993 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index ef50bd6a0d..273a50e50a 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index fc68aa78b9..086649a544 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index c5f4119f6d..b82f85834f 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -154,7 +167,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..8e15bbb5a7 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b318b49813..f387f055ff 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 6c75bc1c43..993a97c76b 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 5fe18fa5cf..af35200abb 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index 8871631e05..4240c3d87b 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -172,7 +185,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 +195,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..9ce8308045 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -165,7 +178,7 @@ Rounding.parameters = { export const Sizing = (args, context) => Sizes({ Template, withBorder: false, - withHeading: false, + withHeading: false, ...args, }, context); Sizing.args = Default.args; @@ -176,7 +189,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..5f15a9faf5 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -341,7 +354,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..d578ac7efd 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,34 @@ export default { handles: [".spectrum-Tabs-item"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + 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 +155,7 @@ Vertical.parameters = { export const VerticalRight = Template.bind({}); VerticalRight.args = { - ...Vertical.args, + ...Vertical.args, hasRightAlignedTabs: true, }; VerticalRight.storyName = "Vertical right"; @@ -153,7 +166,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..d486dcf774 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,17 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index b1f4b6381a..b6a7313cfb 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 683470204c..7e24e43836 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,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index e709de85e1..0c4f7ddccd 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,17 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index a2069f1117..e1127f3175 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,17 @@ export default { handles: ["click .spectrum-Toast button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 17946b4693..074b53d282 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,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js index cbbf9dce2a..326d864e2a 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 } 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"; /** @@ -38,6 +40,17 @@ export default { defaultViewport: "mobile2" }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js index a4f9a7e295..0968708364 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,17 @@ export default { handles: ["click .spectrum-TreeView-itemLink"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 3e1cd67cc5..c0644ea24d 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -1,7 +1,9 @@ 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, @@ -78,6 +80,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; @@ -170,7 +183,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 +268,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 8d3a4cbb60..8a4f47b51f 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,17 @@ export default {
 		},
 		chromatic: { disableSnapshot: true },
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	}
 };
 
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 1e3633d718..f5e6350a2c 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,17 @@ export default {
 			handles: [],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				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:^"