From 6ce05a32c81df4ecd3264d380c677c94ffd1c9d2 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Nov 2024 11:20:58 -0500 Subject: [PATCH 01/12] feat: bug fixes for reducing theming variables --- components/coachmark/stories/coachmark.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index e13b70fce24..975039f95b3 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -69,6 +69,7 @@ export default { }; export const Default = CoachMarkGroup.bind({}); +Default.title = "Standard"; Default.tags = ["!autodocs"]; Default.args = {}; From 02cc9f18e161b1629f7642728baec5e5e6a69bdd Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:21:21 -0500 Subject: [PATCH 02/12] chore: release (s2-foundations) (#3421) Co-authored-by: github-actions[bot] --- .github/workflows/lint.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fe2f10c6172..c0be10e8b09 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -105,6 +105,7 @@ jobs: # stylelint_input: "components/*/index.css components/*/themes/*.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" + packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' - name: Run eslint on packages and stories uses: reviewdog/action-eslint@v1.33.2 From cbd0c907e6211f9a1ff543b85284a8ecc9c273df Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 18:03:09 -0500 Subject: [PATCH 03/12] fix(picker): update background and border color --- Co-authored-by: TarunAdobe --- .changeset/big-chairs-care.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/big-chairs-care.md diff --git a/.changeset/big-chairs-care.md b/.changeset/big-chairs-care.md new file mode 100644 index 00000000000..1e06436bf8b --- /dev/null +++ b/.changeset/big-chairs-care.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/picker": minor +"@spectrum-css/tokens": minor +--- + +Update background and border color for picker in Spectrum 2 theme [SWC-575] From 96e82e5d4d748c440102bde7ca218b4b0183feab Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 18:54:44 -0500 Subject: [PATCH 04/12] fix(combobox): retain border values for S1 --- .changeset/young-cheetahs-peel.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/young-cheetahs-peel.md diff --git a/.changeset/young-cheetahs-peel.md b/.changeset/young-cheetahs-peel.md new file mode 100644 index 00000000000..960240851c5 --- /dev/null +++ b/.changeset/young-cheetahs-peel.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/combobox": patch +"@spectrum-css/tokens": patch +--- + +Bug fix to retain border color values in S1 for combobox [SWC-582] From cf2cc3a71277d71fb6065e554e56036f0aa7d8bf Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 22:28:11 -0500 Subject: [PATCH 05/12] chore: update dependency versions ava and postcss --- yarn.lock | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 15076127210..eea7f250ad4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -837,7 +837,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1": version: 7.26.10 resolution: "@babel/runtime@npm:7.26.10" dependencies: @@ -846,6 +846,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.5.5": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c + languageName: node + linkType: hard + "@babel/template@npm:^7.22.5, @babel/template@npm:^7.26.9, @babel/template@npm:^7.3.3": version: 7.26.9 resolution: "@babel/template@npm:7.26.9" @@ -9422,7 +9431,19 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:~4.4.0": +"debug@npm:^4.0.0, debug@npm:^4.3.7": + version: 4.3.7 + resolution: "debug@npm:4.3.7" + dependencies: + ms: "npm:^2.1.3" + peerDependenciesMeta: + supports-color: + optional: true + checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b + languageName: node + linkType: hard + +"debug@npm:^4.1.1, debug@npm:~4.4.0": version: 4.4.0 resolution: "debug@npm:4.4.0" dependencies: From 39c23b1f71d153ec5d99c27e99eed5bea267ba78 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Thu, 19 Dec 2024 15:35:20 -0500 Subject: [PATCH 06/12] chore(assetcard,avatar,badge): remove mdx files (#3408) * docs(assetcard): remove MDX file - adds some missing documentation regarding stories, classes and custom properties - corrects sentence-casing of story names * docs(avatar): remove MDX file - adds some missing documentation regarding stories - reorganizes some information to sit with appropriate story/variant - migrates documentation from MDX file to the stories file instead * chore(avatar): fix disabled test arguments * docs(badge): remove MDX file - adds notice badge variants to semantic story - adds sizing story to docs page - migrates documentation in MDX to stories.js instead * docs(badge): pr fixes - remove empty doc block line - remove html wrapper in favor of content array - add notice badge to test coverage --- components/badge/stories/badge.stories.js | 5 +++-- components/badge/stories/badge.test.js | 2 +- components/badge/stories/template.js | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index fb9961227a2..7d5a17662d6 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,3 +1,4 @@ +import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { ArgGrid } from "@spectrum-css/preview/decorators"; import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; @@ -40,7 +41,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["neutral", "accent", "informative", "positive", "negative", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], control: "select", }, fixed: { @@ -84,7 +85,7 @@ Default.args = { export const SemanticVariants = (args, context) => ArgGrid({ Template, argKey: "variant", - options: ["neutral", "accent", "informative", "positive", "negative"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice"], withBorder: false, ...args, }, context); diff --git a/components/badge/stories/badge.test.js b/components/badge/stories/badge.test.js index d1068ec340a..b226b07b700 100644 --- a/components/badge/stories/badge.test.js +++ b/components/badge/stories/badge.test.js @@ -17,7 +17,7 @@ export const BadgeGroup = Variants({ Template: Badges, sizeDirection: "row", testData: [ - ...["neutral", "accent", "informative", "positive", "negative"].map((variant) => + ...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) => ({ testHeading: capitalize(variant), wrapperStyles: { diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index ee071e455fe..0ec22bbe5b2 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -1,3 +1,4 @@ +import { Container } from "@spectrum-css/preview/decorators"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; From 0d05ff1ffd462e6487404a60ec0051822ee0de56 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Sun, 29 Dec 2024 13:28:57 -0500 Subject: [PATCH 07/12] chore: align peerDependencies to local versions --- yarn.lock | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index eea7f250ad4..2b5e358b9dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8112,13 +8112,27 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": version: 1.0.30001703 resolution: "caniuse-lite@npm:1.0.30001703" checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91 languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001660 + resolution: "caniuse-lite@npm:1.0.30001660" + checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001673 + resolution: "caniuse-lite@npm:1.0.30001673" + checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b + languageName: node + linkType: hard + "capital-case@npm:^1.0.4": version: 1.0.4 resolution: "capital-case@npm:1.0.4" From f7707e108dc0d0d180e86b48f82643a3483e76bb Mon Sep 17 00:00:00 2001 From: castastrophe Date: Mon, 18 Nov 2024 11:15:52 -0500 Subject: [PATCH 08/12] feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror --- components/commons/package.json | 5 ++--- components/stepper/dist/metadata.json | 1 - components/stepper/index.css | 7 ++----- components/stepper/stories/template.js | 1 - components/stepper/themes/express.css | 1 + 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/components/commons/package.json b/components/commons/package.json index 78062afd633..76632cac5b0 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -15,11 +15,10 @@ }, "exports": { ".": "./index.css", - "./*.css": "./*.css", "./CHANGELOG.md": "./CHANGELOG.md", "./README.md": "./README.md", - "./package.json": "./package.json", - "./stories/*": "./stories/*" + "./*.css": "./*.css", + "./package.json": "./package.json" }, "main": "index.css", "files": [ diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index cfea6e878d6..5785f3655d1 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -32,7 +32,6 @@ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--sizeL", - ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", ".spectrum-Stepper.spectrum-Stepper--sizeXL", ".spectrum-Stepper:before", diff --git a/components/stepper/index.css b/components/stepper/index.css index f3c9682c07d..422ddee390e 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -82,11 +82,8 @@ --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); - } + --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); + --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fbb818b72f3..4dea14c20f8 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -52,7 +52,6 @@ export const Template = ({ "is-keyboardFocused": isKeyboardFocused, "is-invalid": isInvalid, "is-disabled": isDisabled, - "hide-stepper": hideStepper, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 724f4e973ff..f94a436c1b5 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -37,6 +37,7 @@ /** Invalid **/ --spectrum-stepper-border-color-invalid: transparent; + --spectrum-stepper-border-color-hover-invalid: transparent; --spectrum-stepper-border-color-focus-invalid: transparent; --spectrum-stepper-border-color-focus-hover-invalid: transparent; --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; From 1b7f595b338fa77b40d234c848871f742e1735dd Mon Sep 17 00:00:00 2001 From: castastrophe Date: Mon, 18 Nov 2024 11:15:52 -0500 Subject: [PATCH 09/12] feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror --- components/calendar/dist/metadata.json | 16 +++++++- components/calendar/index.css | 53 +++++++++++++++++++++++++ components/combobox/themes/spectrum.css | 2 + components/progressbar/index.css | 26 ++++++------ components/stepper/index.css | 9 ++++- 5 files changed, 90 insertions(+), 16 deletions(-) diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041f..8a1db3ea165 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Calendar-body", ".spectrum-Calendar-date", ".spectrum-Calendar-date.is-disabled", + ".spectrum-Calendar-date.is-disabled.is-range-selection", ".spectrum-Calendar-date.is-disabled.is-selected", ".spectrum-Calendar-date.is-focused", ".spectrum-Calendar-date.is-focused.is-range-selection", @@ -31,6 +32,7 @@ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end", ".spectrum-Calendar-date.is-range-selection.is-selection-start:after", ".spectrum-Calendar-date.is-range-selection.is-selection-start:before", + ".spectrum-Calendar-date.is-range-selection.is-today", ".spectrum-Calendar-date.is-range-selection:hover", ".spectrum-Calendar-date.is-selected", ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)", @@ -183,20 +185,32 @@ "--mod-actionbutton-min-width" ], "high-contrast": [ + "--highcontrast-calendar-button-icon-color", "--highcontrast-calendar-day-background-cap-selected", + "--highcontrast-calendar-day-background-color-cap-selected", + "--highcontrast-calendar-day-background-color-down", + "--highcontrast-calendar-day-background-color-hover", + "--highcontrast-calendar-day-background-color-key-focus", + "--highcontrast-calendar-day-background-color-selected", + "--highcontrast-calendar-day-background-color-selected-hover", "--highcontrast-calendar-day-background-down", "--highcontrast-calendar-day-background-focus", "--highcontrast-calendar-day-background-hover", "--highcontrast-calendar-day-background-selected", "--highcontrast-calendar-day-background-selected-hover", "--highcontrast-calendar-day-border-color-focus", + "--highcontrast-calendar-day-border-color-key-focus", "--highcontrast-calendar-day-text-color-cap-selected", + "--highcontrast-calendar-day-text-color-disabled", "--highcontrast-calendar-day-text-color-hover", "--highcontrast-calendar-day-text-color-key-focus", "--highcontrast-calendar-day-text-color-selected", "--highcontrast-calendar-day-title-text-color", + "--highcontrast-calendar-day-today-background-color-selected-hover", "--highcontrast-calendar-day-today-background-selected-hover", "--highcontrast-calendar-day-today-border-color", - "--highcontrast-calendar-day-today-text-color" + "--highcontrast-calendar-day-today-border-color-disabled", + "--highcontrast-calendar-day-today-text-color", + "--highcontrast-calendar-day-today-text-color-disabled" ] } diff --git a/components/calendar/index.css b/components/calendar/index.css index 2ca1bc289aa..e9325954336 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -13,6 +13,59 @@ @import "./themes/spectrum-two.css"; +@media (forced-colors: active) { + .spectrum-Calendar-prevMonth, + .spectrum-Calendar-nextMonth { + --highcontrast-calendar-button-icon-color: ButtonText; + } + + .spectrum-Calendar-date { + --highcontrast-calendar-day-background-color-cap-selected: Highlight; + --highcontrast-calendar-day-background-color-down: ButtonFace; + --highcontrast-calendar-day-background-color-hover: Transparent; + --highcontrast-calendar-day-background-color-key-focus: ButtonFace; + --highcontrast-calendar-day-background-color-selected-hover: Transparent; + --highcontrast-calendar-day-background-color-selected: Highlight; + --highcontrast-calendar-day-border-color-key-focus: ButtonText; + --highcontrast-calendar-day-text-color-cap-selected: HighlightText; + --highcontrast-calendar-day-text-color-disabled: GrayText; + --highcontrast-calendar-day-text-color-hover: ButtonText; + --highcontrast-calendar-day-text-color-key-focus: ButtonText; + --highcontrast-calendar-day-text-color-selected: HighlightText; + --highcontrast-calendar-day-title-text-color: CanvasText; + --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; + --highcontrast-calendar-day-today-border-color-disabled: GrayText; + --highcontrast-calendar-day-today-border-color: ButtonText; + --highcontrast-calendar-day-today-text-color-disabled: GrayText; + --highcontrast-calendar-day-today-text-color: ButtonText; + + forced-color-adjust: none; + + &.is-range-selection { + &.is-today { + color: HighlightText; + } + + &.is-selection-start::after, + &.is-selection-end::after { + content: none; + } + } + + &.is-disabled { + &.is-range-selection { + background: Highlight; + color: HighlightText; + } + + &.is-selected { + background: Highlight; + color: HighlightText; + } + } + } +} + .spectrum-Calendar { --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css index 5b0a3eea8bf..22503e258b2 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -27,3 +27,5 @@ --spectrum-combobox-border-color-disabled: transparent; } } + +@import "./spectrum-two.css"; diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 648c492df0f..80aa3e9f0da 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -98,21 +98,7 @@ &:lang(ko) { --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); } -} - -@media (forced-colors: active) { - .spectrum-ProgressBar { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - } - - .spectrum-ProgressBar-track { - forced-color-adjust: none; - border: 1px solid ButtonText; - } -} -.spectrum-ProgressBar { position: relative; display: inline-flex; flex-flow: row wrap; @@ -205,6 +191,18 @@ } } +@media (forced-colors: active) { + .spectrum-ProgressBar { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } + + .spectrum-ProgressBar-track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } +} + @keyframes indeterminate-loop { from { transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate))); diff --git a/components/stepper/index.css b/components/stepper/index.css index 422ddee390e..f60008f8bde 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -90,6 +90,12 @@ --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75)); } + &, + &.spectrum-Stepper--sizeM { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --spectrum-stepper-height: var(--spectrum-component-height-100); + } + &.spectrum-Stepper--sizeL { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large)); --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200)); @@ -315,12 +321,13 @@ transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out; } -/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ +/* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ .spectrum-Stepper.hide-stepper .spectrum-Stepper-input { border-start-end-radius: var(--spectrum-stepper-border-radius); border-end-end-radius: var(--spectrum-stepper-border-radius); border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } +/* stylelint-enable selector-class-pattern */ /* --- Quiet variant styles --- */ .spectrum-Stepper--quiet { From efcf2f983a35ebef3968dfaa82429afa405d60fc Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Nov 2024 11:20:58 -0500 Subject: [PATCH 10/12] feat: bug fixes for reducing theming variables --- components/calendar/dist/metadata.json | 16 +------- components/calendar/index.css | 53 -------------------------- components/progressbar/index.css | 26 +++++++------ components/stepper/index.css | 9 +---- components/stepper/stories/template.js | 1 + components/stepper/themes/express.css | 1 - 6 files changed, 17 insertions(+), 89 deletions(-) diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 8a1db3ea165..676c81a041f 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -6,7 +6,6 @@ ".spectrum-Calendar-body", ".spectrum-Calendar-date", ".spectrum-Calendar-date.is-disabled", - ".spectrum-Calendar-date.is-disabled.is-range-selection", ".spectrum-Calendar-date.is-disabled.is-selected", ".spectrum-Calendar-date.is-focused", ".spectrum-Calendar-date.is-focused.is-range-selection", @@ -32,7 +31,6 @@ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end", ".spectrum-Calendar-date.is-range-selection.is-selection-start:after", ".spectrum-Calendar-date.is-range-selection.is-selection-start:before", - ".spectrum-Calendar-date.is-range-selection.is-today", ".spectrum-Calendar-date.is-range-selection:hover", ".spectrum-Calendar-date.is-selected", ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)", @@ -185,32 +183,20 @@ "--mod-actionbutton-min-width" ], "high-contrast": [ - "--highcontrast-calendar-button-icon-color", "--highcontrast-calendar-day-background-cap-selected", - "--highcontrast-calendar-day-background-color-cap-selected", - "--highcontrast-calendar-day-background-color-down", - "--highcontrast-calendar-day-background-color-hover", - "--highcontrast-calendar-day-background-color-key-focus", - "--highcontrast-calendar-day-background-color-selected", - "--highcontrast-calendar-day-background-color-selected-hover", "--highcontrast-calendar-day-background-down", "--highcontrast-calendar-day-background-focus", "--highcontrast-calendar-day-background-hover", "--highcontrast-calendar-day-background-selected", "--highcontrast-calendar-day-background-selected-hover", "--highcontrast-calendar-day-border-color-focus", - "--highcontrast-calendar-day-border-color-key-focus", "--highcontrast-calendar-day-text-color-cap-selected", - "--highcontrast-calendar-day-text-color-disabled", "--highcontrast-calendar-day-text-color-hover", "--highcontrast-calendar-day-text-color-key-focus", "--highcontrast-calendar-day-text-color-selected", "--highcontrast-calendar-day-title-text-color", - "--highcontrast-calendar-day-today-background-color-selected-hover", "--highcontrast-calendar-day-today-background-selected-hover", "--highcontrast-calendar-day-today-border-color", - "--highcontrast-calendar-day-today-border-color-disabled", - "--highcontrast-calendar-day-today-text-color", - "--highcontrast-calendar-day-today-text-color-disabled" + "--highcontrast-calendar-day-today-text-color" ] } diff --git a/components/calendar/index.css b/components/calendar/index.css index e9325954336..2ca1bc289aa 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -13,59 +13,6 @@ @import "./themes/spectrum-two.css"; -@media (forced-colors: active) { - .spectrum-Calendar-prevMonth, - .spectrum-Calendar-nextMonth { - --highcontrast-calendar-button-icon-color: ButtonText; - } - - .spectrum-Calendar-date { - --highcontrast-calendar-day-background-color-cap-selected: Highlight; - --highcontrast-calendar-day-background-color-down: ButtonFace; - --highcontrast-calendar-day-background-color-hover: Transparent; - --highcontrast-calendar-day-background-color-key-focus: ButtonFace; - --highcontrast-calendar-day-background-color-selected-hover: Transparent; - --highcontrast-calendar-day-background-color-selected: Highlight; - --highcontrast-calendar-day-border-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-cap-selected: HighlightText; - --highcontrast-calendar-day-text-color-disabled: GrayText; - --highcontrast-calendar-day-text-color-hover: ButtonText; - --highcontrast-calendar-day-text-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-selected: HighlightText; - --highcontrast-calendar-day-title-text-color: CanvasText; - --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; - --highcontrast-calendar-day-today-border-color-disabled: GrayText; - --highcontrast-calendar-day-today-border-color: ButtonText; - --highcontrast-calendar-day-today-text-color-disabled: GrayText; - --highcontrast-calendar-day-today-text-color: ButtonText; - - forced-color-adjust: none; - - &.is-range-selection { - &.is-today { - color: HighlightText; - } - - &.is-selection-start::after, - &.is-selection-end::after { - content: none; - } - } - - &.is-disabled { - &.is-range-selection { - background: Highlight; - color: HighlightText; - } - - &.is-selected { - background: Highlight; - color: HighlightText; - } - } - } -} - .spectrum-Calendar { --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 80aa3e9f0da..648c492df0f 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -98,7 +98,21 @@ &:lang(ko) { --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); } +} + +@media (forced-colors: active) { + .spectrum-ProgressBar { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } + + .spectrum-ProgressBar-track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } +} +.spectrum-ProgressBar { position: relative; display: inline-flex; flex-flow: row wrap; @@ -191,18 +205,6 @@ } } -@media (forced-colors: active) { - .spectrum-ProgressBar { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - } - - .spectrum-ProgressBar-track { - forced-color-adjust: none; - border: 1px solid ButtonText; - } -} - @keyframes indeterminate-loop { from { transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate))); diff --git a/components/stepper/index.css b/components/stepper/index.css index f60008f8bde..422ddee390e 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -90,12 +90,6 @@ --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-75)); } - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --spectrum-stepper-height: var(--spectrum-component-height-100); - } - &.spectrum-Stepper--sizeL { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-large)); --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-200)); @@ -321,13 +315,12 @@ transition: border-color var(--spectrum-stepper-animation-duration) ease-in-out; } -/* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ +/* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */ .spectrum-Stepper.hide-stepper .spectrum-Stepper-input { border-start-end-radius: var(--spectrum-stepper-border-radius); border-end-end-radius: var(--spectrum-stepper-border-radius); border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } -/* stylelint-enable selector-class-pattern */ /* --- Quiet variant styles --- */ .spectrum-Stepper--quiet { diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index 4dea14c20f8..fbb818b72f3 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -52,6 +52,7 @@ export const Template = ({ "is-keyboardFocused": isKeyboardFocused, "is-invalid": isInvalid, "is-disabled": isDisabled, + "hide-stepper": hideStepper, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index f94a436c1b5..724f4e973ff 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -37,7 +37,6 @@ /** Invalid **/ --spectrum-stepper-border-color-invalid: transparent; - --spectrum-stepper-border-color-hover-invalid: transparent; --spectrum-stepper-border-color-focus-invalid: transparent; --spectrum-stepper-border-color-focus-hover-invalid: transparent; --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; From 9884420ba1431ed0744b68f9e3815f99db60493a Mon Sep 17 00:00:00 2001 From: castastrophe Date: Thu, 26 Sep 2024 12:10:12 -0400 Subject: [PATCH 11/12] feat(storybook): custom properties panel --- .changeset/eleven-plants-grow.md | 5 +++++ .changeset/new-bulldogs-add.md | 5 +++++ .storybook/main.js | 2 ++ components/accordion/stories/accordion.stories.js | 11 +++++++++++ components/actionbar/stories/actionbar.stories.js | 11 +++++++++++ .../actionbutton/stories/actionbutton.stories.js | 11 +++++++++++ components/actiongroup/stories/actiongroup.stories.js | 11 +++++++++++ components/actionmenu/stories/actionmenu.stories.js | 5 +++++ components/alertbanner/stories/alertbanner.stories.js | 11 +++++++++++ components/alertdialog/stories/alertdialog.stories.js | 11 +++++++++++ components/asset/stories/asset.stories.js | 11 +++++++++++ components/assetcard/stories/assetcard.stories.js | 11 +++++++++++ components/assetlist/stories/assetlist.stories.js | 11 +++++++++++ components/avatar/stories/avatar.stories.js | 11 +++++++++++ components/badge/stories/badge.stories.js | 11 +++++++++++ components/breadcrumb/stories/breadcrumb.stories.js | 11 +++++++++++ components/button/stories/button.stories.js | 11 +++++++++++ components/buttongroup/stories/buttongroup.stories.js | 11 +++++++++++ components/calendar/stories/calendar.stories.js | 11 +++++++++++ components/card/stories/card.stories.js | 11 +++++++++++ components/checkbox/stories/checkbox.stories.js | 11 +++++++++++ components/clearbutton/stories/clearbutton.stories.js | 11 +++++++++++ components/closebutton/stories/closebutton.stories.js | 11 +++++++++++ .../coachindicator/stories/coachindicator.stories.js | 11 +++++++++++ components/coachmark/stories/coachmark.stories.js | 11 +++++++++++ components/colorarea/stories/colorarea.stories.js | 11 +++++++++++ components/colorhandle/stories/colorhandle.stories.js | 11 +++++++++++ components/colorloupe/stories/colorloupe.stories.js | 11 +++++++++++ components/colorslider/stories/colorslider.stories.js | 11 +++++++++++ components/colorwheel/stories/colorwheel.stories.js | 11 +++++++++++ components/combobox/stories/combobox.stories.js | 11 +++++++++++ .../contextualhelp/stories/contextualhelp.stories.js | 11 +++++++++++ components/datepicker/stories/datepicker.stories.js | 11 +++++++++++ components/dial/stories/dial.stories.js | 11 +++++++++++ components/dialog/stories/dialog.stories.js | 11 +++++++++++ components/divider/stories/divider.stories.js | 11 +++++++++++ .../dropindicator/stories/dropindicator.stories.js | 11 +++++++++++ components/dropzone/stories/dropzone.stories.js | 11 +++++++++++ components/fieldgroup/stories/fieldgroup.stories.js | 11 +++++++++++ components/fieldlabel/stories/fieldlabel.stories.js | 11 +++++++++++ .../stories/floatingactionbutton.stories.js | 11 +++++++++++ components/form/stories/form.stories.js | 11 +++++++++++ components/helptext/stories/helptext.stories.js | 11 +++++++++++ components/icon/stories/icon.stories.js | 11 +++++++++++ .../stories/illustratedmessage.stories.js | 11 +++++++++++ .../infieldbutton/stories/infieldbutton.stories.js | 11 +++++++++++ components/inlinealert/stories/inlinealert.stories.js | 11 +++++++++++ components/link/stories/link.stories.js | 11 +++++++++++ components/logicbutton/stories/logicbutton.stories.js | 11 +++++++++++ components/menu/stories/menu.stories.js | 11 +++++++++++ components/meter/stories/meter.stories.js | 11 +++++++++++ components/miller/stories/miller.stories.js | 11 +++++++++++ components/modal/stories/modal.stories.js | 11 +++++++++++ .../stories/opacitycheckerboard.stories.js | 11 +++++++++++ components/pagination/stories/pagination.stories.js | 11 +++++++++++ components/picker/stories/picker.stories.js | 11 +++++++++++ .../pickerbutton/stories/pickerbutton.stories.js | 11 +++++++++++ components/popover/stories/popover.stories.js | 11 +++++++++++ components/progressbar/stories/progressbar.stories.js | 11 +++++++++++ .../progresscircle/stories/progresscircle.stories.js | 11 +++++++++++ components/radio/stories/radio.stories.js | 11 +++++++++++ components/rating/stories/rating.stories.js | 11 +++++++++++ components/search/stories/search.stories.js | 11 +++++++++++ components/sidenav/stories/sidenav.stories.js | 11 +++++++++++ components/slider/stories/slider.stories.js | 11 +++++++++++ components/splitview/stories/splitview.stories.js | 11 +++++++++++ components/statuslight/stories/statuslight.stories.js | 11 +++++++++++ components/steplist/stories/steplist.stories.js | 11 +++++++++++ components/stepper/stories/stepper.stories.js | 11 +++++++++++ components/swatch/stories/swatch.stories.js | 11 +++++++++++ components/swatchgroup/stories/swatchgroup.stories.js | 11 +++++++++++ components/switch/stories/switch.stories.js | 11 +++++++++++ components/table/stories/table.stories.js | 11 +++++++++++ components/tabs/stories/tabs.stories.js | 11 +++++++++++ components/tag/stories/tag.stories.js | 11 +++++++++++ components/taggroup/stories/taggroup.stories.js | 11 +++++++++++ components/textfield/stories/textarea.stories.js | 11 +++++++++++ components/textfield/stories/textfield.stories.js | 11 +++++++++++ components/thumbnail/stories/thumbnail.stories.js | 11 +++++++++++ components/toast/stories/toast.stories.js | 11 +++++++++++ components/tooltip/stories/tooltip.stories.js | 11 +++++++++++ components/tray/stories/tray.stories.js | 11 +++++++++++ components/treeview/stories/treeview.stories.js | 11 +++++++++++ components/typography/stories/typography.stories.js | 11 +++++++++++ components/underlay/stories/underlay.stories.js | 11 +++++++++++ components/well/stories/well.stories.js | 11 +++++++++++ .../templates/stories/{{ folderName }}.stories.js.hbs | 10 ++++++++++ 87 files changed, 929 insertions(+) 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 ccd00e2f45e..4358da23c19 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -75,6 +75,8 @@ export default { "@chromatic-com/storybook", // 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/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 3709e75871f..116e06eff7d 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -68,6 +68,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index aa2e867ea09..b1173b12b60 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -72,6 +72,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index a08f0f7bbfc..91963f6fe03 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -90,6 +90,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "auto", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index a83857b9e54..46695c3390c 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -99,6 +99,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index e9cdd3b8a14..cb3bf0e2e40 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -49,6 +49,11 @@ export default { ], }, packageJson, + 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 cd49c21a70e..8aabdfda7a2 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -75,6 +75,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 87c83d18ff9..a6d8e359015 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -56,6 +56,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 927c1009aad..7fe6bdf21d2 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -38,6 +38,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index 2e917fbc25c..9a662f3399e 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -92,6 +92,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index d421267b95d..da008fe582c 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -22,6 +22,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 3ef54b07b71..8083bd0d77e 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -59,6 +59,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index 7d5a17662d6..1d8101a4d1d 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -69,6 +69,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index a25c76c285c..1f3e205524a 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -47,6 +47,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 2de4d54053b..c020849fd5a 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -95,6 +95,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index ba7e125de76..40d324db8e9 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -64,6 +64,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index 303121e9610..48032c3cf46 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -117,6 +117,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 2d8147cda37..a128a1e60ae 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -127,6 +127,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index cbcad99494f..a2498360e4d 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -59,6 +59,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index a8dd5359278..7180118ab5c 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -61,6 +61,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index f048e3e23b0..29c5368805c 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -52,6 +52,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index f206b3bef9a..2e8279d10ca 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -30,6 +30,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index 975039f95b3..1dffd3a7891 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -60,6 +60,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "300px", diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index ec418649f05..83185c87aa6 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -49,6 +49,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index b3923e6d17e..ae4be826630 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -52,6 +52,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index f07cdf83ee7..167815f6539 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -45,6 +45,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 633fa48b8be..f8a46e72fbf 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -62,6 +62,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 15bba48a20a..04a48d8aeba 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -53,6 +53,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index baea4599d01..7246293615d 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -144,6 +144,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 4b7abd0296a..7b64d2d33ae 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -97,6 +97,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "200px", diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index 0d40c563888..1c6cd9023f1 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -77,6 +77,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 9e9970e234b..ed1be66e7aa 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -35,6 +35,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 45bec9bc1d1..7efd6aa0a5e 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -117,6 +117,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 306e5c0c453..9f1926a767a 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -40,6 +40,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js index ea28cb3b5f1..739799119dc 100644 --- a/components/dropindicator/stories/dropindicator.stories.js +++ b/components/dropindicator/stories/dropindicator.stories.js @@ -41,6 +41,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 9d0d7e4c3d2..501f97494c3 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -41,6 +41,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 18c06b181f5..2d010fe65a1 100644 --- a/components/fieldgroup/stories/fieldgroup.stories.js +++ b/components/fieldgroup/stories/fieldgroup.stories.js @@ -96,6 +96,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 1a268284d7f..1894ea46567 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -51,6 +51,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index 3d96790255d..5129e735baa 100644 --- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js +++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js @@ -49,6 +49,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 233f18adb21..6d6d5ee7dce 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -107,6 +107,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 5274cec9f78..681d12680ee 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -63,6 +63,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index da5fc2cda00..ec019a10b6f 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -102,6 +102,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index 2b00b063d31..e35dadc7f98 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -50,6 +50,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 0f435313795..3d60873abdc 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -50,6 +50,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 6ed4d7c5f18..2cf71f29314 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -65,6 +65,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 53c71bfacb2..bb454336a11 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -76,6 +76,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index 6b38a131275..6d2f87f09c2 100644 --- a/components/logicbutton/stories/logicbutton.stories.js +++ b/components/logicbutton/stories/logicbutton.stories.js @@ -32,6 +32,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 23f82bfd300..cfd340fbed1 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -88,6 +88,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js index 15603bc9d7c..c5ed96ee88d 100644 --- a/components/meter/stories/meter.stories.js +++ b/components/meter/stories/meter.stories.js @@ -47,6 +47,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index a255362e891..37cfbded5e5 100644 --- a/components/miller/stories/miller.stories.js +++ b/components/miller/stories/miller.stories.js @@ -79,6 +79,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index a4ce483de5f..79a647e8618 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -51,6 +51,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index e908a5cd05b..fc5ba2e533c 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -32,6 +32,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index 7fa6fa909e1..e6e2c6fbf9b 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -70,6 +70,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index c2fa56e619d..2a36f7299fd 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -139,6 +139,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index c01a0f00eec..bda6a3f8440 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -87,6 +87,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index e5e7f986607..55f61b6311f 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -97,6 +97,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index 4468a701277..bd77ea2b9c3 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -98,6 +98,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index f64c2f2780a..31a07a6dc8b 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -33,6 +33,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index 1d6ff3d9b16..30ccfb77b27 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -60,6 +60,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index e9315f918c2..bf0de801059 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -59,6 +59,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index fd3e3807c8e..739af6c4b1f 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -62,6 +62,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index b5381efd78d..c3e9385d82c 100644 --- a/components/sidenav/stories/sidenav.stories.js +++ b/components/sidenav/stories/sidenav.stories.js @@ -69,6 +69,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 1d6f5b9d479..7ab5d5d683b 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -146,6 +146,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js index 1c615f12b97..4e61bb4f8c5 100644 --- a/components/splitview/stories/splitview.stories.js +++ b/components/splitview/stories/splitview.stories.js @@ -81,6 +81,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b385bcc9da3..b25218486ac 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -71,6 +71,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 9266631e646..527aa5cbe2f 100644 --- a/components/steplist/stories/steplist.stories.js +++ b/components/steplist/stories/steplist.stories.js @@ -76,6 +76,17 @@ export default { parameters: { packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 8775574a342..37ad4e4d98c 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -48,6 +48,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index d3d1b44b1c2..c2d501321e0 100644 --- a/components/swatch/stories/swatch.stories.js +++ b/components/swatch/stories/swatch.stories.js @@ -105,6 +105,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js index 2a842f06695..e1ea2364ccb 100644 --- a/components/swatchgroup/stories/swatchgroup.stories.js +++ b/components/swatchgroup/stories/swatchgroup.stories.js @@ -118,6 +118,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index 5286b307882..640c13b2e82 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -45,6 +45,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index 834a90f4630..a05f98baddf 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -117,6 +117,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js index 1b26856e13f..088b4826be0 100644 --- a/components/tabs/stories/tabs.stories.js +++ b/components/tabs/stories/tabs.stories.js @@ -119,6 +119,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 6061c450e7d..c9edc70e74c 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -100,6 +100,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index 66ef23e885d..c170b550319 100644 --- a/components/taggroup/stories/taggroup.stories.js +++ b/components/taggroup/stories/taggroup.stories.js @@ -61,6 +61,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js index 340820af2db..c093de02af2 100644 --- a/components/textfield/stories/textarea.stories.js +++ b/components/textfield/stories/textarea.stories.js @@ -27,6 +27,17 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=725-2579", }, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, } }; diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 79f5ec0415d..474df326e13 100644 --- a/components/textfield/stories/textfield.stories.js +++ b/components/textfield/stories/textfield.stories.js @@ -142,6 +142,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index cf32fab1dbb..2beb9ac55a3 100644 --- a/components/thumbnail/stories/thumbnail.stories.js +++ b/components/thumbnail/stories/thumbnail.stories.js @@ -94,6 +94,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index 9271ef70225..c451975f809 100644 --- a/components/toast/stories/toast.stories.js +++ b/components/toast/stories/toast.stories.js @@ -54,6 +54,17 @@ export default { url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=2666-4482", }, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index a594409e4b7..85d888233aa 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -96,6 +96,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js index 2f9221df9f6..e51ee908a4e 100644 --- a/components/tray/stories/tray.stories.js +++ b/components/tray/stories/tray.stories.js @@ -40,6 +40,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js index 19621954270..71a75a831da 100644 --- a/components/treeview/stories/treeview.stories.js +++ b/components/treeview/stories/treeview.stories.js @@ -43,6 +43,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index c6595cb6a24..de8ee34dbea 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -83,6 +83,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/underlay/stories/underlay.stories.js b/components/underlay/stories/underlay.stories.js index 4b9a61662ba..eb9c255d1b7 100644 --- a/components/underlay/stories/underlay.stories.js +++ b/components/underlay/stories/underlay.stories.js @@ -31,6 +31,17 @@ export default { chromatic: { disableSnapshot: true }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, } }; diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js index 0858075e6e4..4ecb6617d1d 100644 --- a/components/well/stories/well.stories.js +++ b/components/well/stories/well.stories.js @@ -23,6 +23,17 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? undefined : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs index f161bee76cf..8445212e1bf 100644 --- a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs +++ b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs @@ -44,6 +44,16 @@ export default { }, packageJson, metadata, + cssprops: { + ...metadata.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + control: key.includes("color") ? "color" : "text", + category: "Modifiers", + }; + return collection; + }, {}) + }, } }; From 72dc2557eb5e6aa47e13d40bde5f3c3656023780 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 6 Dec 2024 17:02:17 -0500 Subject: [PATCH 12/12] feat: fork into custom local add-on --- .changeset/big-chairs-care.md | 6 - .changeset/young-cheetahs-peel.md | 6 - .eslintrc | 12 +- .github/workflows/lint.yml | 1 - .storybook/decorators/utilities.js | 4 +- .storybook/main.js | 10 +- .storybook/package.json | 7 +- components/accordion/index.css | 1 + .../accordion/stories/accordion.stories.js | 19 +- .../actionbar/stories/actionbar.stories.js | 19 +- components/actionbar/stories/template.js | 5 +- .../stories/actionbutton.stories.js | 19 +- components/actionbutton/stories/template.js | 2 +- .../stories/actiongroup.stories.js | 19 +- components/actiongroup/stories/template.js | 5 +- .../actionmenu/stories/actionmenu.stories.js | 10 +- components/actionmenu/stories/template.js | 2 +- .../stories/alertbanner.stories.js | 15 +- components/alertbanner/stories/template.js | 4 +- .../stories/alertdialog.stories.js | 19 +- components/alertdialog/stories/template.js | 2 +- components/asset/stories/asset.stories.js | 19 +- .../assetcard/stories/assetcard.stories.js | 19 +- components/assetcard/stories/template.js | 2 +- .../assetlist/stories/assetlist.stories.js | 17 +- components/assetlist/stories/template.js | 7 +- components/avatar/stories/avatar.stories.js | 19 +- components/badge/stories/badge.stories.js | 24 +- components/badge/stories/badge.test.js | 2 +- components/badge/stories/template.js | 1 - .../breadcrumb/stories/breadcrumb.stories.js | 19 +- components/breadcrumb/stories/template.js | 133 +- components/button/stories/button.stories.js | 19 +- .../stories/buttongroup.stories.js | 19 +- .../calendar/stories/calendar.stories.js | 19 +- components/card/stories/card.stories.js | 19 +- .../checkbox/stories/checkbox.stories.js | 17 +- .../stories/clearbutton.stories.js | 19 +- .../stories/closebutton.stories.js | 20 +- components/closebutton/stories/template.js | 2 +- .../stories/coachindicator.stories.js | 19 +- .../coachmark/stories/coachmark.stories.js | 19 +- .../colorarea/stories/colorarea.stories.js | 19 +- .../stories/colorhandle.stories.js | 19 +- .../colorloupe/stories/colorloupe.stories.js | 17 +- .../stories/colorslider.stories.js | 19 +- .../colorwheel/stories/colorwheel.stories.js | 19 +- .../combobox/stories/combobox.stories.js | 19 +- components/combobox/themes/spectrum.css | 2 - .../stories/contextualhelp.stories.js | 19 +- components/contextualhelp/stories/template.js | 2 +- .../datepicker/stories/datepicker.stories.js | 19 +- components/datepicker/stories/template.js | 2 +- components/dial/stories/dial.stories.js | 19 +- components/dialog/stories/dialog.stories.js | 19 +- components/divider/stories/divider.stories.js | 19 +- .../stories/dropindicator.stories.js | 19 +- .../dropzone/stories/dropzone.stories.js | 17 +- components/dropzone/stories/template.js | 2 +- .../fieldgroup/stories/fieldgroup.stories.js | 19 +- .../fieldlabel/stories/fieldlabel.stories.js | 19 +- components/fieldlabel/stories/template.js | 2 +- .../stories/floatingactionbutton.stories.js | 19 +- components/form/stories/form.stories.js | 19 +- .../helptext/stories/helptext.stories.js | 19 +- components/helptext/stories/template.js | 2 +- components/icon/stories/icon.stories.js | 17 +- .../stories/illustratedmessage.stories.js | 19 +- .../stories/infieldbutton.stories.js | 19 +- .../stories/inlinealert.stories.js | 19 +- components/link/stories/link.stories.js | 19 +- .../stories/logicbutton.stories.js | 19 +- components/menu/stories/menu.stories.js | 19 +- components/menu/stories/template.js | 4 +- components/meter/stories/meter.stories.js | 19 +- components/miller/stories/miller.stories.js | 19 +- components/modal/stories/modal.stories.js | 17 +- .../stories/opacitycheckerboard.stories.js | 19 +- .../pagination/stories/pagination.stories.js | 19 +- components/picker/stories/picker.stories.js | 19 +- .../stories/pickerbutton.stories.js | 19 +- components/pickerbutton/stories/template.js | 2 +- components/popover/stories/popover.stories.js | 19 +- .../stories/progressbar.stories.js | 19 +- .../stories/progresscircle.stories.js | 19 +- components/radio/stories/radio.stories.js | 19 +- components/rating/stories/rating.stories.js | 19 +- components/search/stories/search.stories.js | 19 +- components/sidenav/stories/sidenav.stories.js | 19 +- components/slider/stories/slider.stories.js | 19 +- .../splitview/stories/splitview.stories.js | 19 +- .../stories/statuslight.stories.js | 19 +- .../steplist/stories/steplist.stories.js | 19 +- components/stepper/dist/metadata.json | 1 + components/stepper/index.css | 7 +- components/stepper/stories/stepper.stories.js | 19 +- components/swatch/stories/swatch.stories.js | 19 +- .../stories/swatchgroup.stories.js | 19 +- components/swatchgroup/stories/template.js | 2 +- components/switch/stories/switch.stories.js | 19 +- components/table/stories/table.stories.js | 19 +- components/tabs/stories/tabs.stories.js | 20 +- components/tag/stories/tag.stories.js | 19 +- .../taggroup/stories/taggroup.stories.js | 19 +- components/textfield/stories/template.js | 2 +- .../textfield/stories/textarea.stories.js | 19 +- .../textfield/stories/textfield.stories.js | 19 +- .../thumbnail/stories/thumbnail.stories.js | 19 +- components/toast/stories/toast.stories.js | 19 +- components/tooltip/stories/tooltip.stories.js | 19 +- components/tray/stories/tray.stories.js | 17 +- .../treeview/stories/treeview.stories.js | 19 +- .../typography/stories/typography.stories.js | 23 +- .../underlay/stories/underlay.stories.js | 17 +- components/well/stories/well.stories.js | 17 +- package.json | 9 +- .../CHANGELOG.md | 0 .../README.md | 78 + .../components/CssPropsContext.jsx | 68 + .../components/CssPropsPanel.jsx | 78 + .../components/Element.jsx | 58 + .../components/HighlightToggle.jsx | 76 + .../components/PanelMessage.jsx | 17 + .../components/PropertiesTable.jsx | 100 + .../components/Skeleton.jsx | 97 + .../constants.js | 15 + .../expected/basic.json | 462 ++ .../fixtures/basic.css | 355 ++ .../index.js | 6 + .../manager.jsx | 37 + .../package.json | 62 + .../project.json | 16 + .../storybook-addon-custom-properties/test.js | 40 + .../title.js | 13 + .../tools/extractor.js | 150 + .../tools/storage.js | 90 + .../tools/types.js | 57 + .../tools/useInjectStyle.js | 63 + .../tools/utilities.js | 46 + .../stories/{{ folderName }}.stories.js.hbs | 81 +- yarn.lock | 4749 ++++++++++++++++- 141 files changed, 7150 insertions(+), 1474 deletions(-) delete mode 100644 .changeset/big-chairs-care.md delete mode 100644 .changeset/young-cheetahs-peel.md create mode 100644 plugins/storybook-addon-custom-properties/CHANGELOG.md create mode 100644 plugins/storybook-addon-custom-properties/README.md create mode 100644 plugins/storybook-addon-custom-properties/components/CssPropsContext.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/CssPropsPanel.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/Element.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/HighlightToggle.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/PanelMessage.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/PropertiesTable.jsx create mode 100644 plugins/storybook-addon-custom-properties/components/Skeleton.jsx create mode 100644 plugins/storybook-addon-custom-properties/constants.js create mode 100644 plugins/storybook-addon-custom-properties/expected/basic.json create mode 100644 plugins/storybook-addon-custom-properties/fixtures/basic.css create mode 100644 plugins/storybook-addon-custom-properties/index.js create mode 100644 plugins/storybook-addon-custom-properties/manager.jsx create mode 100644 plugins/storybook-addon-custom-properties/package.json create mode 100644 plugins/storybook-addon-custom-properties/project.json create mode 100644 plugins/storybook-addon-custom-properties/test.js create mode 100644 plugins/storybook-addon-custom-properties/title.js create mode 100644 plugins/storybook-addon-custom-properties/tools/extractor.js create mode 100644 plugins/storybook-addon-custom-properties/tools/storage.js create mode 100644 plugins/storybook-addon-custom-properties/tools/types.js create mode 100644 plugins/storybook-addon-custom-properties/tools/useInjectStyle.js create mode 100644 plugins/storybook-addon-custom-properties/tools/utilities.js diff --git a/.changeset/big-chairs-care.md b/.changeset/big-chairs-care.md deleted file mode 100644 index 1e06436bf8b..00000000000 --- a/.changeset/big-chairs-care.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@spectrum-css/picker": minor -"@spectrum-css/tokens": minor ---- - -Update background and border color for picker in Spectrum 2 theme [SWC-575] diff --git a/.changeset/young-cheetahs-peel.md b/.changeset/young-cheetahs-peel.md deleted file mode 100644 index 960240851c5..00000000000 --- a/.changeset/young-cheetahs-peel.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@spectrum-css/combobox": patch -"@spectrum-css/tokens": patch ---- - -Bug fix to retain border color values in S1 for combobox [SWC-582] diff --git a/.eslintrc b/.eslintrc index f422aa9e96a..90621e80f66 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,6 +8,11 @@ "parserOptions": { "sourceType": "module" }, + "settings": { + "react": { + "version": "detect" + } + }, "extends": "eslint:recommended", "rules": { "brace-style": ["warn", "stroustrup", { "allowSingleLine": true }], @@ -17,7 +22,8 @@ "no-console": ["warn", { "allow": ["warn", "error"] }], "quotes": ["warn", "double"], "semi": ["warn", "always"], - "space-before-blocks": ["warn", "always"] + "space-before-blocks": ["warn", "always"], + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] }, "overrides": [ { @@ -172,8 +178,10 @@ "files": [ "components/*/stories/*.js", ".storybook/*.js", - ".storybook/**/*.js" + ".storybook/**/*.js", + "plugins/storybook-addon-*/*.js" ], + "extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c0be10e8b09..fe2f10c6172 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -105,7 +105,6 @@ jobs: # stylelint_input: "components/*/index.css components/*/themes/*.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" - packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' - name: Run eslint on packages and stories uses: reviewdog/action-eslint@v1.33.2 diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js index f6722ae79ea..bd22ac68401 100644 --- a/.storybook/decorators/utilities.js +++ b/.storybook/decorators/utilities.js @@ -556,12 +556,12 @@ export const renderContent = (content = [], { if (content.length === 0) return nothing; return html` - ${content.map((c) => { + ${content.map((c, idx) => { if (typeof c === "undefined") return nothing; /* If the content is an object (but not a lit object), we need to merge the object with the template */ if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) { - return callback({ ...args, ...c }, context); + return callback({ ...args, ...c, idx }, context); } if (typeof c === "function") { diff --git a/.storybook/main.js b/.storybook/main.js index 4358da23c19..93e1f9f8f53 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -63,11 +63,13 @@ export default { name: "@storybook/addon-actions", options: {}, }, - // https://www.npmjs.com/package/@whitespace/storybook-addon-html - "@whitespace/storybook-addon-html", + // Local: plugins/storybook-addon-custom-properties + "@spectrum-tools/storybook-addon-custom-properties", // https://github.com/storybookjs/storybook/tree/next/code/addons/a11y - "@storybook/addon-a11y", + "@whitespace/storybook-addon-html", // https://storybook.js.org/addons/@etchteam/storybook-addon-status + "@storybook/addon-a11y", + // https://www.npmjs.com/package/@whitespace/storybook-addon-html "@etchteam/storybook-addon-status", // https://github.com/storybookjs/storybook/tree/next/code/addons/interactions "@storybook/addon-interactions", @@ -75,8 +77,6 @@ export default { "@chromatic-com/storybook", // 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 30ab7f9cddf..5ae48b7784c 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -46,9 +46,10 @@ "@spectrum-css/ui-icons": "1.1.2" }, "devDependencies": { - "@babel/core": "^7.26.0", + "@babel/core": "^7.26.10", "@chromatic-com/storybook": "^3.2.3", "@etchteam/storybook-addon-status": "^5.0.0", + "@spectrum-tools/storybook-addon-custom-properties": "0.0.0", "@storybook/addon-a11y": "8.4.7", "@storybook/addon-actions": "8.4.7", "@storybook/addon-designs": "^8.2.1", @@ -65,7 +66,7 @@ "@storybook/theming": "8.4.7", "@storybook/web-components-vite": "8.4.7", "@whitespace/storybook-addon-html": "^6.1.1", - "chromatic": "^11.22.2", + "chromatic": "^11.27.0", "lit": "^3.2.1", "lodash-es": "^4.17.21", "npm-registry-fetch": "^18.0.2", @@ -77,7 +78,7 @@ "remark-gfm": "^4.0.0", "rollup-plugin-postcss-lit": "^2.1.0", "storybook": "8.4.7", - "vite": "^5.4.11" + "vite": "^5.4.14" }, "keywords": [ "design-system", diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a7616455..5efc16a6419 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -72,6 +72,7 @@ &:lang(ja), &:lang(zh), &:lang(ko) { + /* @description When the language is CJK, update line-height values to prevent cut off diacritics */ --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 116e06eff7d..b3aae204bf5 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -3,11 +3,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AccordionGroup } from "./accordion.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements. * @@ -68,17 +71,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index b1173b12b60..1c5706fbd1d 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -3,11 +3,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionBarGroup } from "./actionbar.test.js"; import { BehavioralTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time. * @@ -72,17 +75,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd2..d1b9125cfcc 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,10 +1,11 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; @@ -14,6 +15,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", + id = getRandomId("action-bar"), size = "m", isOpen = true, isEmphasized = false, @@ -36,6 +38,7 @@ export const Template = ({ "is-open": isOpen, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} + id=${ifDefined(id)} style=${styleMap(customStyles)} > ${Popover({ diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 91963f6fe03..db2ab14815a 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -2,11 +2,14 @@ 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, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionButtonGroup } from "./actionbutton.test.js"; import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The action button component represents an action a user can take. * @@ -90,17 +93,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, docs: { story: { height: "auto", diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115c..8fe3fb96d59 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -46,6 +46,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; */ export const Template = ({ rootClass = "spectrum-ActionButton", + id = getRandomId("action-button"), size = "m", iconName, iconSet = "workflow", @@ -65,7 +66,6 @@ export const Template = ({ customStyles = {}, customIconClasses = [], onclick, - id = getRandomId("actionbutton"), testId, role = "button", } = {}, context = {}) => { diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 46695c3390c..f1de7f56585 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -2,11 +2,14 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionGroups } from "./actiongroup.test.js"; import { OverflowOption, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other. */ @@ -99,17 +102,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64aa..29bf8f1af7c 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -1,7 +1,8 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; -import { Container, renderContent } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; @@ -12,6 +13,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", + id = getRandomId("accordion-group"), size = "m", areQuiet = false, areEmphasized = false, @@ -41,6 +43,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} + id=${ifDefined(id)} > ${renderContent(content, { callback: ActionButton, diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index cb3bf0e2e40..44bc6cc0f6c 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -4,9 +4,11 @@ import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; -import packageJson from "../package.json"; import { ActionMenuGroup } from "./actionmenu.test.js"; +// Local assets to render the component styles and structure +import packageJson from "../package.json"; + /** * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu. */ @@ -49,11 +51,7 @@ export default { ], }, packageJson, - cssprops: { - ...(Popover?.parameters?.cssprops ?? {}), - ...(ActionButton?.parameters?.cssprops ?? {}), - ...(Menu.parameters?.cssprops ?? {}), - }, + cssprops: false, docs: { story: { height: "200px", diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js index c4bc29768d9..19b6e722612 100644 --- a/components/actionmenu/stories/template.js +++ b/components/actionmenu/stories/template.js @@ -4,7 +4,7 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; export const Template = ({ - id = getRandomId("actionmenu"), + id = getRandomId("action-menu"), testId, triggerId = getRandomId("actionmenu-trigger"), customClasses = [], diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index 8aabdfda7a2..581607409be 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -5,6 +5,9 @@ import packageJson from "../package.json"; import { AlertBannerGroup } from "./alertbanner.test.js"; import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; + /** * The alert banner shows pressing and high-signal messages, such as system alerts. It is meant to be noticed and prompt users to take action. * It should occupy all of the available horizontal space until it reaches its maximum allowed width. @@ -75,17 +78,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c0612..11134f2a311 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -16,7 +16,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", - id = getRandomId("alertbanner"), + id = getRandomId("alert-banner"), testId, isOpen = true, text, @@ -35,7 +35,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} - id=${id} + id=${ifDefined(id)} data-testid=${ifDefined(testId)} >
{ - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, decorators: [ withUnderlayWrapper, diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js index 5de1e37972c..8d7fc093b2f 100644 --- a/components/alertdialog/stories/template.js +++ b/components/alertdialog/stories/template.js @@ -13,13 +13,13 @@ import "../index.css"; export const Dialog = ({ rootClass = "spectrum-AlertDialog", + id = getRandomId("alert-dialog"), heading, content, customClasses = [], buttons, variant, icon = false, - id = getRandomId("alertdialog"), customStyles = {}, } = {}, context = {}) => { return html` diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 7fe6bdf21d2..8ace5641b75 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AssetGroup } from "./asset.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided. */ @@ -38,17 +41,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index 9a662f3399e..a56e9eeb17a 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AssetCardGroup } from "./assetcard.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The asset card component allows users to select and manage assets and their metadata in a grid. * @@ -92,17 +95,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b7..6620830bba5 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -14,6 +14,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", + id = getRandomId("asset-card"), image, exampleImage, title, @@ -25,7 +26,6 @@ export const Template = ({ isDropTarget = false, customClasses = [], customStyles = {}, - id = getRandomId("assetcard"), testId, } = {}, context = {}) => { const { updateArgs } = context; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index da008fe582c..3f0b733070c 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,8 +1,11 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { AssetListGroup } from "./assetlist.test.js"; + +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { AssetListGroup } from "./assetlist.test.js"; /** * A selectable list of assets, often used inside of miller columns. @@ -22,17 +25,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80c..ec54c32659e 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -25,6 +25,7 @@ export const AssetListItem = ({ isBranch = false, onclick = () => {}, } = {}, context = {}) => html` + ${when(styles, () => html``)}
  • + ${when(image, () => html`asset image thumbnail` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, @@ -76,9 +77,9 @@ export const AssetListItem = ({ export const Template = ({ rootClass = "spectrum-AssetList", + id = getRandomId("asset-list"), items = [], customClasses = [], - id = getRandomId("assetlist"), } = {}, context = {}) => { return html`
      { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index 1d8101a4d1d..b128d205cee 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,14 +1,16 @@ -import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { ArgGrid } from "@spectrum-css/preview/decorators"; import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { BadgeGroup } from "./badge.test.js"; import { ContentOptions, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge: * - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior. @@ -41,7 +43,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], + options: ["neutral", "accent", "informative", "positive", "negative", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], control: "select", }, fixed: { @@ -69,17 +71,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; @@ -96,7 +88,7 @@ Default.args = { export const SemanticVariants = (args, context) => ArgGrid({ Template, argKey: "variant", - options: ["neutral", "accent", "informative", "positive", "negative", "notice"], + options: ["neutral", "accent", "informative", "positive", "negative"], withBorder: false, ...args, }, context); diff --git a/components/badge/stories/badge.test.js b/components/badge/stories/badge.test.js index b226b07b700..d1068ec340a 100644 --- a/components/badge/stories/badge.test.js +++ b/components/badge/stories/badge.test.js @@ -17,7 +17,7 @@ export const BadgeGroup = Variants({ Template: Badges, sizeDirection: "row", testData: [ - ...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) => + ...["neutral", "accent", "informative", "positive", "negative"].map((variant) => ({ testHeading: capitalize(variant), wrapperStyles: { diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 0ec22bbe5b2..ee071e455fe 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -1,4 +1,3 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 1f3e205524a..af1f45d0bc7 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { BreadcrumbGroup } from "./breadcrumb.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. * @@ -47,17 +50,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index 3f0db2ad30b..1b85be2de9b 100644 --- a/components/breadcrumb/stories/template.js +++ b/components/breadcrumb/stories/template.js @@ -1,14 +1,81 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +export const BreadcrumbItem = ({ + rootClass = "spectrum-Breadcrumbs", + id = getRandomId("breadcrumb-item"), + label, + isDisabled, + isDragged, + iconName, + iconSet, + idx = 0, + totalItems = 1, +} = {}, context = {}) => { + const isNotLastItem = idx < totalItems - 1; + return html` +
    • + ${when(iconName, () => + ActionButton({ + iconName, + iconSet, + isDisabled, + isQuiet: true, + customIconClasses: [`${rootClass}-folder`], + size: "m", + }, context) + )} + ${when(isNotLastItem, + () => html` +
      + ${label} +
      + `, + () => html` + + ${label} + + ` + )} + ${when(isNotLastItem, () => + Icon({ + iconName: "ChevronRight100", + setName: "ui", + customClasses: [`${rootClass}-itemSeparator`], + }, context), + )} +
      • + `; +}; + export const Template = ({ rootClass = "spectrum-Breadcrumbs", + id = getRandomId("breadcrumbs"), + customStyles = {}, customClasses = [], items = [], variant, @@ -22,63 +89,17 @@ export const Template = ({ [`${rootClass}--${variant}`]: typeof variant !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} + id=${ifDefined(id)} + style=${styleMap(customStyles)} > - ${items.map((item, idx, arr) => { - const { label, isDisabled, iconName, iconSet } = item; - return html`
    • - ${when( - iconName, - () => - ActionButton( - { - iconName, - iconSet, - isDisabled, - isQuiet: true, - customIconClasses: [`${rootClass}-folder`], - size: "m", - }, - context, - ), - () => - when( - idx !== arr.length - 1, - () => - html`
      - ${label} -
      `, - () => - html`${label}`, - ), - )} - ${when(idx !== arr.length - 1, () => - Icon( - { - iconName: "ChevronRight100", - setName: "ui", - customClasses: [`${rootClass}-itemSeparator`], - }, - context, - ), - )} -
      • `; + ${renderContent(items, { + callback: BreadcrumbItem, + context, + args: { + rootClass, + isDragged, + totalItems: items.length, + }, })}
    diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index c020849fd5a..eaebf344006 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -2,11 +2,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ButtonGroups } from "./button.test.js"; import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow. * @@ -95,17 +98,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index 40d324db8e9..c0778981d27 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ButtonGroup } from "./buttongroup.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A button group is a grouping of buttons whose actions are related to each other. */ @@ -64,17 +67,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index 48032c3cf46..699437f72d1 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CalendarGroup } from "./calendar.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + const months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }) ); @@ -117,17 +120,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index a128a1e60ae..96024b10944 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -2,11 +2,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CardGroup } from "./card.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A card represents a rectangular space to contain text or images. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs. */ @@ -127,17 +130,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index a2498360e4d..ad053fb21df 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -6,6 +6,11 @@ import packageJson from "../package.json"; import { CheckboxGroup } from "./checkbox.test.js"; import { AllVariantsCheckboxGroup, DocsCheckboxGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected. * @@ -59,17 +64,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 7180118ab5c..631c8cf0388 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ClearButtonGroup } from "./clearbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The clear button component is an in-field button used in search and tags. * @@ -61,17 +64,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 29c5368805c..a9e7353cbb7 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CloseButtonGroup } from "./closebutton.test.js"; import { CloseButtonExample, Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Close button is used to close or dismiss its parent component. It is used inside of other components such * as [toast](?path=/docs/components-toast--docs) and [action bar](?path=/docs/components-action-bar--docs). @@ -52,17 +55,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; @@ -146,7 +139,6 @@ StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; - // ********* VRT ONLY ********* // export const WithForcedColors = CloseButtonGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f62..d7d54e207e2 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -12,6 +12,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", + id = getRandomId("close-button"), size = "m", iconSize = "regular", label = "Close", @@ -21,7 +22,6 @@ export const Template = ({ isFocused = false, isKeyboardFocused = false, customClasses = [], - id = getRandomId("closebutton"), onclick, } = {}, context = {}) => { return html` diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index 2e8279d10ca..8d6b67ce602 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CoachIndicatorGroup } from "./coachindicator.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The coach indicator component can be used to bring added attention to specific parts of a page. * @@ -30,17 +33,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index 1dffd3a7891..25d021cea58 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -1,11 +1,14 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CoachMarkGroup } from "./coachmark.test.js"; import { CoachmarkMenuStatesTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import styles from "../index.css?inline"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs). */ @@ -60,17 +63,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, docs: { story: { height: "300px", diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index 83185c87aa6..155d2c0c087 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorAreaGroup } from "./colorarea.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs). * @@ -49,17 +52,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index ae4be826630..f23ba91a643 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorHandleGroup } from "./colorhandle.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector. */ @@ -52,17 +55,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index 167815f6539..30fd98b6378 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -1,8 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isOpen } from "@spectrum-css/preview/types"; +import { ColorLoupeGroup } from "./colorloupe.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; import packageJson from "../package.json"; -import { ColorLoupeGroup } from "./colorloupe.test.js"; /** * The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. @@ -45,17 +48,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index f8a46e72fbf..789054dd034 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorSliderGroup } from "./colorslider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The color slider component lets users visually change an individual channel of a color. * @@ -62,17 +65,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 04a48d8aeba..57252f375b9 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorWheelGroup } from "./colorwheel.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The color wheel component lets users visually change an individual channel of a color on a circular track. * @@ -53,17 +56,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 7246293615d..45cba6bcf8f 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -2,11 +2,14 @@ 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, isReadOnly, size } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ComboBoxGroup } from "./combobox.test.js"; import { Template, VariantGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. * @@ -144,17 +147,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css index 22503e258b2..5b0a3eea8bf 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -27,5 +27,3 @@ --spectrum-combobox-border-color-disabled: transparent; } } - -@import "./spectrum-two.css"; diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 7b64d2d33ae..c7ffe7be60e 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -1,10 +1,13 @@ import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ContextualHelpGroup } from "./contextualhelp.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Contextual help shows a user extra information in relation to another component or view. */ @@ -97,17 +100,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, docs: { story: { height: "200px", diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js index aaeac140d32..136b4b339db 100644 --- a/components/contextualhelp/stories/template.js +++ b/components/contextualhelp/stories/template.js @@ -11,7 +11,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-ContextualHelp", - id = getRandomId("contextualhelp"), + id = getRandomId("contextual-help"), iconName, iconSet = "workflow", title, diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index 1c6cd9023f1..d590976f8fc 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -2,11 +2,14 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DatePickerGroup } from "./datepicker.test.js"; import { OpenClosedTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range. * @@ -77,17 +80,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..d79f7ee42aa 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -15,7 +15,7 @@ import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", - id = getRandomId("datepicker"), + id = getRandomId("date-picker"), customClasses = [], isOpen = true, isInvalid = false, diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index ed1be66e7aa..729e5efa89f 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DialGroup } from "./dial.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited. */ @@ -35,17 +38,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 7efd6aa0a5e..25d2863561a 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -2,11 +2,14 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen, size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. * @@ -117,17 +120,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 9f1926a767a..cff0b88d70b 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DividerGroup } from "./divider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Dividers bring clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy. */ @@ -40,17 +43,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js index 739799119dc..6585e95bbfd 100644 --- a/components/dropindicator/stories/dropindicator.stories.js +++ b/components/dropindicator/stories/dropindicator.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DropIndicatorGroup } from "./dropindicator.test.js"; import { DocsDropIndicatorGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The drop indicator component is used to show the insertion position into a list or table. */ @@ -41,17 +44,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 501f97494c3..7ae1a340f76 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -4,9 +4,12 @@ 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 { DropzoneGroup } from "./dropzone.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; import packageJson from "../package.json"; -import { DropzoneGroup } from "./dropzone.test.js"; /** * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog. @@ -41,17 +44,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface7..227ab0fa17d 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -20,7 +20,7 @@ export const Template = ({ heading, description, label, - id = getRandomId("dropzone"), + id = getRandomId("drop-zone"), } = {}, context = {}) => { return html`
    { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 1894ea46567..39e845b7a76 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FieldLabelGroup } from "./fieldlabel.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The field label component is used along with inputs to display a label for that input. */ @@ -51,17 +54,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 7f5477e4d5f..e7f808da67e 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ customStyles = {}, size = "m", label, - id = getRandomId("fieldlabel"), + id = getRandomId("field-label"), testId, forInput, alignment, diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index 5129e735baa..5dbcf947833 100644 --- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js +++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The floating action button component is used to give users a more prominent button for high frequency actions. * @@ -49,17 +52,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 6d6d5ee7dce..9a6828fe4f1 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -3,11 +3,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FormGroup } from "./form.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields. */ @@ -107,17 +110,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 681d12680ee..8074cc33d75 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { HelpTextGroup } from "./helptext.test.js"; import { NegativeTemplate, Template, VariantsTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms. */ @@ -63,17 +66,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 74fa628ae2a..8b08ceabaab 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -15,7 +15,7 @@ export const Template = ({ hideIcon = false, text, variant, - id = getRandomId("helptext"), + id = getRandomId("help-text"), customClasses = [], customStyles = {}, } = {}, context = {}) => { diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index ec019a10b6f..ddb501d4fb5 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -7,6 +7,11 @@ import { IconGroup } from "./icon.test.js"; import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Create a list of all UI Icons with their sizing numbers. * @@ -102,17 +107,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index e35dadc7f98..b76362325be 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,11 +1,14 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { html } from "lit"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. */ @@ -50,17 +53,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 3d60873abdc..9f12168c107 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { InfieldButtonGroup } from "./infieldbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The in-field button component is a button used inside a text field. */ @@ -50,17 +53,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 2cf71f29314..78b31f36ac9 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { InlineAlertGroup } from "./inlinealert.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields. */ @@ -65,17 +68,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index bb454336a11..a87e706294f 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { LinkGroup } from "./link.test.js"; import { TemplateWithFillerText } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text. */ @@ -76,17 +79,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index 6d2f87f09c2..8575adebed1 100644 --- a/components/logicbutton/stories/logicbutton.stories.js +++ b/components/logicbutton/stories/logicbutton.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { LogicButtonGroup } from "./logicbutton.test.js"; import { Template, VariantGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A logic button displays an operator within a boolean logic sequence. */ @@ -32,17 +35,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index cfd340fbed1..cdf4cf11717 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -2,11 +2,14 @@ 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, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js"; import { DisabledItemGroup, OverflowGroup, SelectionGroup, SubmenuInPopover, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A menu is used for creating a menu list. The various elements inside a menu can be: a menu group, a menu item, or a * menu divider. Often a menu will appear in a popover so that it displays as a toggling menu. @@ -88,17 +91,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb696..feae8f6270c 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -41,7 +41,7 @@ export const MenuItem = ( iconName, iconSet = "workflow", hasActions = false, - id = getRandomId("menuitem"), + id = getRandomId("menu-item"), idx = 0, isActive = false, isCollapsible = false, @@ -226,7 +226,7 @@ export const MenuGroup = ( { hasActions = false, heading, - id = getRandomId("menugroup"), + id = getRandomId("menu-group"), idx = 0, items = [], isDisabled = false, diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js index c5ed96ee88d..ebb97e78703 100644 --- a/components/meter/stories/meter.stories.js +++ b/components/meter/stories/meter.stories.js @@ -2,11 +2,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MeterGroup } from "./meter.test.js"; import { FillGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions. * @@ -47,17 +50,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index 37cfbded5e5..d95371245b1 100644 --- a/components/miller/stories/miller.stories.js +++ b/components/miller/stories/miller.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MillerGroup } from "./miller.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Miller columns are a browsing/visualization technique that can be applied to tree structures. The columns allow for multiple levels of the hierarchy to be open at once and provide a visual representation of the current location. */ @@ -79,17 +82,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 79a647e8618..78be019d738 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -2,9 +2,12 @@ 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 { ModalGroup } from "./modal.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; import packageJson from "../package.json"; -import { ModalGroup } from "./modal.test.js"; /** * A modal component is a dialog box/popup window that is displayed on top of the current page using `position: fixed`. @@ -51,17 +54,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index fc5ba2e533c..514ab6ae874 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Opacity checkerboard is used with other components to highlight opacity. */ @@ -32,17 +35,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index e6e2c6fbf9b..5de433218e9 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -1,11 +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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PaginationGroup } from "./pagination.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The pagination component displays numbered buttons or an input field to allow for navigation. */ @@ -70,17 +73,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 2a36f7299fd..e52ec4e1b3c 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -2,11 +2,14 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PickerGroup } from "./picker.test.js"; import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The picker component (sometimes known as a "dropdown" or "select") allows users to choose from a list of options in a limited space. The list of options can change based on the context. */ @@ -139,17 +142,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index bda6a3f8440..efdb7b6ee31 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -2,11 +2,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PickerGroup } from "./pickerbutton.test.js"; import { CustomIconTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs). */ @@ -87,17 +90,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 3df4f85b636..47472844720 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -14,7 +14,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-PickerButton", - id = getRandomId("pickerbutton"), + id = getRandomId("picker-button"), size = "m", label, position, diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 55f61b6311f..fd93933b08f 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -5,11 +5,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PopoverGroup } from "./popover.test.js"; import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. @@ -97,17 +100,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index bd77ea2b9c3..d80243a50a4 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ProgressBarGroup } from "./progressbar.test.js"; import { IndeterminateGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The progress bar component shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. * @@ -98,17 +101,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index 31a07a6dc8b..80d5fab24d6 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ProgressCircleGroup } from "./progresscircle.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress. */ @@ -33,17 +36,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index 30ccfb77b27..528445d7ce3 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { RadioGroup } from "./radio.test.js"; import { BasicGroupTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -60,17 +63,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index bf0de801059..9e55e252dde 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { RatingGroup } from "./rating.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The rating component is used to display or collect a user's rating of an item as represented by a number of stars. * @@ -59,17 +62,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index 739af6c4b1f..3f57b556828 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SearchGroup } from "./search.test.js"; import { SearchOptions, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A search field is used for searching and filtering items. * @@ -62,17 +65,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index c3e9385d82c..64adf1bf9bc 100644 --- a/components/sidenav/stories/sidenav.stories.js +++ b/components/sidenav/stories/sidenav.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SideNavGroup } from "./sidenav.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -69,17 +72,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 7ab5d5d683b..225ab67a507 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SliderGroup } from "./slider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -146,17 +149,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js index 4e61bb4f8c5..09d94b56d73 100644 --- a/components/splitview/stories/splitview.stories.js +++ b/components/splitview/stories/splitview.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SplitViewGroup } from "./splitview.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + export default { title: "Split view", component: "SplitView", @@ -81,17 +84,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b25218486ac..fe42ea289e4 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { StatusLightGroup } from "./statuslight.test.js"; import { NonsemanticGroup, SemanticGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories. */ @@ -71,17 +74,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 527aa5cbe2f..ad8d5afec5a 100644 --- a/components/steplist/stories/steplist.stories.js +++ b/components/steplist/stories/steplist.stories.js @@ -1,9 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SteplistGroup } from "./steplist.test.js"; import { DocsSteplistGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -76,17 +79,7 @@ export default { parameters: { packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 5785f3655d1..cfea6e878d6 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -32,6 +32,7 @@ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--sizeL", + ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", ".spectrum-Stepper.spectrum-Stepper--sizeXL", ".spectrum-Stepper:before", diff --git a/components/stepper/index.css b/components/stepper/index.css index 422ddee390e..f3c9682c07d 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -82,8 +82,11 @@ --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); + &, + &.spectrum-Stepper--sizeM { + --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); + --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); + } &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 37ad4e4d98c..d188828c567 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { StepperGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A stepper can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value. */ @@ -48,17 +51,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index c2d501321e0..009fb863ecd 100644 --- a/components/swatch/stories/swatch.stories.js +++ b/components/swatch/stories/swatch.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SwatchGroup } from "./swatch.test.js"; import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -105,17 +108,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js index e1ea2364ccb..571af6b18c3 100644 --- a/components/swatchgroup/stories/swatchgroup.stories.js +++ b/components/swatchgroup/stories/swatchgroup.stories.js @@ -1,11 +1,14 @@ 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 metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SwatchgroupGroup } from "./swatchgroup.test.js"; import { RoundingTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs). * @@ -118,17 +121,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js index 01c059998bd..caa7978e606 100644 --- a/components/swatchgroup/stories/template.js +++ b/components/swatchgroup/stories/template.js @@ -9,6 +9,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-SwatchGroup", + id = getRandomId("swatch-group"), customClasses = [], size = "m", density = "regular", @@ -19,7 +20,6 @@ export const Template = ({ customStyles = {}, isDisabled =false, isSelected = false, - id = getRandomId("swatchgroup"), } = {}, context = {}) => html`
    { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index a05f98baddf..f2f68cc36f5 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TableGroup } from "./table.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A table is used to create a container for displaying information. It allows users to sort, compare, and take action on large amounts of data. */ @@ -117,17 +120,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js index 088b4826be0..23741a24b89 100644 --- a/components/tabs/stories/tabs.stories.js +++ b/components/tabs/stories/tabs.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TabsGroups } from "./tabs.test.js"; import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * 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. * @@ -18,7 +21,6 @@ import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from * 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 { title: "Tabs", component: "Tabs", @@ -119,17 +121,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index c9edc70e74c..1e2d8b9106a 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -2,11 +2,14 @@ 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 { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TagGroups } from "./tag.test.js"; import { SelectedTemplate, TagsDefaultOptions } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A tag categorizes content. It can represent keywords or people, and are [grouped](?path=/docs/components-tag-group--docs) to describe an item or a search request. */ @@ -100,17 +103,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index c170b550319..342cbb33f98 100644 --- a/components/taggroup/stories/taggroup.stories.js +++ b/components/taggroup/stories/taggroup.stories.js @@ -1,10 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TagGroups } from "./taggroup.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + const ignoreProps = ["rootClass", "hasClearButton", "label"]; /** @@ -61,17 +64,7 @@ export default { }, packageJson, metadata, - cssprops: { - ...metadata.modifiers.reduce((collection, item) => { - const key = item.replace(/^--/, ""); - collection[key] = { - category: "Modifiers", - control: key.includes("color") ? "color" : "text", - value: key.includes("color") ? undefined : " ", - }; - return collection; - }, {}) - }, + cssprops: { styles }, }, }; diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 5f20b0abb86..7798391b612 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -57,6 +57,7 @@ import "../themes/express.css"; */ export const Template = ({ rootClass = "spectrum-Textfield", + id = getRandomId("text-field"), size = "m", customClasses = [], customInputClasses = [], @@ -83,7 +84,6 @@ export const Template = ({ placeholder, name, helpText = "", - id = getRandomId("textfield"), value = "", type = "text", autocomplete = true, diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js index c093de02af2..a70ddad4301 100644 --- a/components/textfield/stories/textarea.stories.js +++ b/components/textfield/stories/textarea.stories.js @@ -1,11 +1,14 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { HelpTextOptionsTextArea, KeyboardFocusTemplate, Template, TextAreaOptions } from "./textarea.template.js"; import { TextAreaGroup } from "./textarea.test.js"; import { default as Textfield } from "./textfield.stories.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import styles from "../index.css?inline"; +import packageJson from "../package.json"; + /** * A text area is multi-line text field using the `