Skip to content

fix(modal): change modal background color to transparent #3604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 11, 2025
Merged

fix(modal): change modal background color to transparent #3604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
65ae653
refactor(modal): update modal background color to transparent
marissahuysentruyt Mar 4, 2025
455b990
docs(dialog): remove custom modal style
marissahuysentruyt Mar 5, 2025
a69dc5f
chore(modal): create changeset
marissahuysentruyt Mar 5, 2025
7c3f7e0
chore: rebase and update metadata.json
marissahuysentruyt Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/polite-moments-stay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
1 change: 0 additions & 1 deletion components/dialog/stories/dialog.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ export default {
options: ["default", "fullscreen", "fullscreenTakeover"],
control: "select",
},
isOpen,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An extra isOpen must have been brought over by mistake during a rebase or something.

isDismissible: {
name: "Dismissible",
type: { name: "boolean" },
Expand Down
8 changes: 0 additions & 8 deletions components/dialog/stories/dialog.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dialog has a defined background color, so these custom background colors are no longer needed.

...(args.customStyles ?? {}),
"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
},
}, context);
},
sizeDirection: "column",
Expand Down Expand Up @@ -66,7 +62,6 @@ export const DialogFullscreen = Variants({
*/
customStyles: {
margin: showTestingGrid ? "16px" : undefined,
"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
},
}, context);
},
Expand All @@ -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,
Expand Down
3 changes: 0 additions & 3 deletions components/dialog/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,6 @@ export const Template = ({
isOpen,
content: Dialog,
variant: layout,
customStyles: {
"--mod-modal-background-color": "transparent"
},
}, context);
}
else {
Expand Down
1 change: 0 additions & 1 deletion components/modal/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [],
Expand Down
2 changes: 1 addition & 1 deletion components/modal/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
3 changes: 3 additions & 0 deletions components/modal/stories/modal.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm open to suggestions on how to describe this.

*/
export const Default = ModalGroup.bind({});
Default.args = {
content: [
Expand Down
2 changes: 2 additions & 0 deletions components/picker/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Loading