From 65ae65363871519caaa81b027158dc1515701ab2 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 4 Mar 2025 13:06:50 -0500 Subject: [PATCH 1/4] refactor(modal): update modal background color to transparent - adds documentation to modal docs page - updates metadata.json --- components/modal/dist/metadata.json | 1 - components/modal/index.css | 2 +- components/modal/stories/modal.stories.js | 3 +++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 43de95295b1..c27c44872d7 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -45,7 +45,6 @@ "--spectrum-animation-ease-out", "--spectrum-corner-radius-extra-large-default", "--spectrum-dialog-confirm-entry-animation-distance", - "--spectrum-gray-75", "--spectrum-window-to-edge" ], "passthroughs": [], diff --git a/components/modal/index.css b/components/modal/index.css index 2829b930d18..4dad9fccf32 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -24,7 +24,7 @@ --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75)); + --spectrum-modal-background-color: var(--mod-modal-background-color, transparent); --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index a4ce483de5f..560f5663e43 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -57,6 +57,9 @@ export default { ], }; +/** + * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class. + */ export const Default = ModalGroup.bind({}); Default.args = { content: [ From 455b9909ad9c127e2f4ddcde4d187583d1f30c9a Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 5 Mar 2025 13:57:47 -0500 Subject: [PATCH 2/4] docs(dialog): remove custom modal style - removes the customStyles object that was setting --mod-modal- background-color in the dialog template - removes the custom wrapper styles in the dialog tests that were intending to set the dialog apart from the modal - remove a duplicate isOpen control in dialog.stories.js --- components/dialog/stories/dialog.stories.js | 1 - components/dialog/stories/dialog.test.js | 8 -------- components/dialog/stories/template.js | 3 --- 3 files changed, 12 deletions(-) diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 091098a0068..9e862c31749 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -90,7 +90,6 @@ export default { options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", }, - isOpen, isDismissible: { name: "Dismissible", type: { name: "boolean" }, diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js index a6b6b177114..d5a9a5f076d 100644 --- a/components/dialog/stories/dialog.test.js +++ b/components/dialog/stories/dialog.test.js @@ -16,10 +16,6 @@ export const DialogGroup = Variants({ // TODO: The dialog's heading arg is getting passed as the "Sizing" heading arg (instead of the // TODO: word "Sizing"). We should be able to remove this arg once that no longers happens. heading: showTestingGrid ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit" : args.heading, - customStyles: { - ...(args.customStyles ?? {}), - "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, - }, }, context); }, sizeDirection: "column", @@ -66,7 +62,6 @@ export const DialogFullscreen = Variants({ */ customStyles: { margin: showTestingGrid ? "16px" : undefined, - "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, }, }, context); }, @@ -85,9 +80,6 @@ export const DialogFullscreen = Variants({ export const DialogFullscreenTakeover = Variants({ Template, withSizes: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, testData: [ { showModal: false, diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 1f20f54109c..b8c84b04a92 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -171,9 +171,6 @@ export const Template = ({ isOpen, content: Dialog, variant: layout, - customStyles: { - "--mod-modal-background-color": "transparent" - }, }, context); } else { From a69dc5fee6bdbe595bbfa3f5450e75661dc6b345 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 5 Mar 2025 14:14:09 -0500 Subject: [PATCH 3/4] chore(modal): create changeset --- .changeset/polite-moments-stay.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-moments-stay.md diff --git a/.changeset/polite-moments-stay.md b/.changeset/polite-moments-stay.md new file mode 100644 index 00000000000..38fb80afbed --- /dev/null +++ b/.changeset/polite-moments-stay.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/modal": patch +--- + +In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers. From 7c3f7e02b1300873ec65fe526f1a2d85614c40df Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Tue, 11 Mar 2025 12:03:58 -0400 Subject: [PATCH 4/4] chore: rebase and update metadata.json --- components/picker/dist/metadata.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index cc449eab846..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,7 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", "--spectrum-gray-500", "--spectrum-gray-600", "--spectrum-gray-700",