From 27b6165d84ee2e587e6eabc91632d0e9e97667db 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 | 17 +++++++- .../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 | 15 ++++++- .../coachmark/stories/coachmark.stories.js | 13 +++++++ .../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 | 13 +++++++ .../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 | 39 ++++++++++++------- .../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, 1158 insertions(+), 95 deletions(-) create mode 100644 .changeset/eleven-plants-grow.md create mode 100644 .changeset/new-bulldogs-add.md diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md new file mode 100644 index 00000000000..b08e57e1660 --- /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 00000000000..a5328a1d0ac --- /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 a00e74bff70..38cd343408a 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 c8992840622..d4179043812 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 af47f53cc13..7a6a3e52550 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index d644fe48cb5..27368c27111 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 6a214ab0a18..be309105e71 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "auto", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index b4fc06f0996..545c9a104ae 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index 41420890ec4..bb3c1e3fd78 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 fdeebb1eaba..839e488951d 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertBannerGroup } from "./alertbanner.test.js"; import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js"; @@ -68,6 +70,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -133,7 +146,7 @@ Negative.parameters = { * The alert banner component can contain both an icon-only close button and a button with a contextual action to * take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue * associated with an alert. There should never be more than one button with a contextual action in an alert banner. - * + * * The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert. */ export const ActionableOptions = ActionableOptionsTemplate.bind({}); @@ -160,4 +173,4 @@ TextOverflow.args = { }; TextOverflow.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 47a4ed4bacb..b69e4acaf46 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -1,7 +1,9 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertDialogGroup } from "./alertdialog.test.js"; import { Template } from "./template.js"; @@ -49,6 +51,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 13d64fd732b..6ce54bc0d4d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index d088a288225..22f10fde861 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 2ee335d9033..1f275f9e294 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 83eb4abc37c..ff34d79fdb5 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index d5976ef5ba8..fcf764cc36d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 6689d7d7bb4..fa84fd85e43 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0fc0cb8cd6a..314553b0d55 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 276ed44c84c..60015971b7d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index cc0afa3b79d..24ca7e997c5 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 16fcc54c73e..75d680b1291 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index 8bfe1cf1d2b..7b760c28d1f 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 9270808c04f..508cb89768d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 1475a07760e..e16f1f980ec 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 971211a1daa..5a99cfcf79b 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,12 +1,14 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachIndicatorGroup } from "./coachindicator.test.js"; import { AllVariantsCoachIndicatorGroup } from "./template"; /** * The coach indicator component can be used to bring added attention to specific parts of a page. - * + * * Coach indicator is primarily used along with the [coach mark](/docs/components-coach-mark--docs) component. */ export default { @@ -32,6 +34,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index ca2e94c01ec..e8fbc730400 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -1,7 +1,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachMarkGroup } from "./coachmark.test.js"; import { Template } from "./template.js"; @@ -54,6 +56,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index d04ecca0c9c..8363eee6332 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index 494e115ad5e..7a9e901b9a7 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index ccee023b9af..d58dfc0d61c 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 81c42a28876..bacb2e5f621 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 5b5daf2771c..644d1c23c25 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 3a1c476934b..ba3e46d0e5b 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 44714b4053a..2cd13df4e0d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index afc9adb24c7..b70a90eb869 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 87466157d40..8bc53a7ba68 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 90fbf9fae2a..e691ce93856 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -2,13 +2,15 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js"; import { Template } from "./template"; /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. - * + * * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). */ export default { @@ -119,6 +121,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 60fde7aa00e..0015cb98e74 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 af546a7e58a..39063eb6a76 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 247214a0e50..d00aabf5d02 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 428a24479b9..3c8faf492f7 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 639a5eda318..0652802782d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldlabel/stories/form.stories.js b/components/fieldlabel/stories/form.stories.js index 956a380814c..d1bf3c65527 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index f25f64d1d65..89f09726b91 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 3ddcaaa8a4c..1121c73db50 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 a1548194fae..c5522a2f269 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -3,7 +3,9 @@ import { size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { IconGroup } from "./icon.test.js"; import { Template } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; @@ -89,6 +91,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index b292562929d..1e0cc41df0b 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 2d449dff953..1e4406bcd91 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 405c65a58cc..cf2a0692d1b 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 5fc8782e289..a45f58b14d9 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index c56c44f06e2..29d0085b122 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 8658cb8b331..a393d21f74f 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isOpen, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js"; import { Template } from "./template.js"; @@ -186,6 +188,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index 6a49e68820e..012a8810bdf 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 0c7847814bd..fe48f55cc58 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index 327179205cc..92d696ef76b 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index a3b2f097908..db9fa528cce 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 12a0100c8d2..84cee34ea13 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index 0c8245ec4f1..00127b0e361 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 2c5d922afba..eb48b344bef 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 69928bed336..12011e7881f 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index 65b5464342b..4be34a756a9 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 be88ce4a129..14e4f41b8ca 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 314aba98d33..81565517a38 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index ef50bd6a0dc..c1bbf5518e7 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index fc68aa78b93..42a03f5a199 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index c5f4119f6d8..636a271fbf8 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 3cc8ad40c5e..9e45e23a468 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b318b498139..6bdabe383b9 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 6c75bc1c43b..bc46a0ee1a2 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 5fe18fa5cfe..20df8239255 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index 8871631e05f..30fb8e17f56 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 d94c91ba15c..814ee513dd2 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 f53be00fd7a..f24613cbda7 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 5bbada75980..8aef1094482 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 b328be74452..f3740f0213d 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 d5b95fcf342..7a319b10925 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index b1f4b6381aa..3fa1b87ad75 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 683470204cd..abb32339aaf 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index e709de85e1b..29c68952db0 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index a2069f11174..f6b668b4acc 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 17946b4693e..81a29ba6ffa 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js index 564bf294d63..56be95f95dd 100644 --- a/components/tray/stories/tray.stories.js +++ b/components/tray/stories/tray.stories.js @@ -1,7 +1,9 @@ import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TrayGroup } from "./tray.test.js"; /** @@ -42,6 +44,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js index a4f9a7e2955..a2d08ce6491 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") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 3e1cd67cc5c..1eed76b2585 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -1,19 +1,21 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { - DocsBodyVariants, - DocsCodeVariants, - DocsDetailVariants, - DocsHeadingBodyPairing, - DocsHeadingVariants, - DocsInternationalizedBodyVariants, - DocsInternationalizedCodeVariants, - DocsInternationalizedDetailVariants, - DocsInternationalizedHeadingBodyPairing, - DocsInternationalizedHeadingVariants, - Template + DocsBodyVariants, + DocsCodeVariants, + DocsDetailVariants, + DocsHeadingBodyPairing, + DocsHeadingVariants, + DocsInternationalizedBodyVariants, + DocsInternationalizedCodeVariants, + DocsInternationalizedDetailVariants, + DocsInternationalizedHeadingBodyPairing, + DocsInternationalizedHeadingVariants, + Template } from "./template.js"; import { TypographyGroup } from "./typography.test.js"; @@ -78,6 +80,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") ? "rgba(0, 0, 0, 0)" : " ", + }; + 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 756fe8d9fd6..e07d22e06a7 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") ? "rgba(0, 0, 0, 0)" : " ",
+				};
+				return collection;
+			}, {})
+		},
 	}
 };
 
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 1e3633d718a..6031a32ff49 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") ? "rgba(0, 0, 0, 0)" : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 
diff --git a/generator/templates/stories/{{ folderName }}.stories.js.hbs b/generator/templates/stories/{{ folderName }}.stories.js.hbs
index 552f294ce89..d5f2f9faffd 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 d60896feed0..7b047717978 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:^"