Skip to content
62 changes: 62 additions & 0 deletions .changeset/lemon-flowers-poke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
"@spectrum-css/alertdialog": major
---

#### S2 migration for alert dialog

This migrates the `alert dialog` component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

The icon in the dialog header has been moved from the right side to the left.

The dialog divider has been removed.

Primary button style has been updated to filled.
Comment thread
cdransf marked this conversation as resolved.

The following variants remain supported:

- Confirmation
- Information
- Destructive
- Warning (with `AlertDiamond` icon)
- Error (with `AlertTriangle` icon)

Dialog buttons may be displayed either horizontally or vertically.

##### Removed custom properties

`--spectrum-alert-dialog-description-to-buttons`
`--spectrum-alert-dialog-divider-to-description`
`--spectrum-alert-dialog-padding`
`--spectrum-alert-dialog-title-size`
`--spectrum-alert-dialog-title-to-divider`
`--spectrum-alert-dialog-title-to-icon`

##### New custom properties

`--spectrum-alert-dialog-background-color`
`--spectrum-alert-dialog-corner-radius`
`--spectrum-alert-dialog-description-font-size`
`--spectrum-alert-dialog-description-to-button-group`
`--spectrum-alert-dialog-edge-to-content`
`--spectrum-alert-dialog-heading-size`
`--spectrum-alert-dialog-title-to-description`

##### Removed mods

`--mod-alert-dialog-body-font-size`
`--mod-alert-dialog-description-to-buttons`
`--mod-alert-dialog-divider-to-description`
`--mod-alert-dialog-padding`
`--mod-alert-dialog-title-to-divider`
`--mod-alert-dialog-title-to-icon`

##### New mods

`--mod-alert-dialog-background-color`
`--mod-alert-dialog-corner-radius`
`--mod-alert-dialog-description-content-size`
`--mod-alert-dialog-description-to-button-group`
`--mod-alert-dialog-edge-to-content`
`--mod-alert-dialog-heading-size`
`--mod-alert-dialog-minimum-title-to-icon`
`--mod-alert-dialog-title-to-description`
40 changes: 23 additions & 17 deletions components/alertdialog/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,77 +5,83 @@
".spectrum-AlertDialog .spectrum-Icon",
".spectrum-AlertDialog--error",
".spectrum-AlertDialog--warning",
".spectrum-AlertDialog-buttongroup",
".spectrum-AlertDialog-content",
".spectrum-AlertDialog-grid",
".spectrum-AlertDialog-header",
".spectrum-AlertDialog-heading"
],
"modifiers": [
"--mod-alert-dialog-background-color",
"--mod-alert-dialog-body-color",
"--mod-alert-dialog-body-font-family",
"--mod-alert-dialog-body-font-size",
"--mod-alert-dialog-body-font-style",
"--mod-alert-dialog-body-font-weight",
"--mod-alert-dialog-body-line-height",
"--mod-alert-dialog-description-to-buttons",
"--mod-alert-dialog-divider-to-description",
"--mod-alert-dialog-corner-radius",
"--mod-alert-dialog-description-content-size",
"--mod-alert-dialog-description-to-button-group",
"--mod-alert-dialog-edge-to-content",
"--mod-alert-dialog-error-icon-color",
"--mod-alert-dialog-heading-size",
"--mod-alert-dialog-icon-size",
"--mod-alert-dialog-max-width",
"--mod-alert-dialog-min-width",
"--mod-alert-dialog-padding",
"--mod-alert-dialog-minimum-title-to-icon",
"--mod-alert-dialog-title-color",
"--mod-alert-dialog-title-font-family",
"--mod-alert-dialog-title-font-size",
"--mod-alert-dialog-title-font-style",
"--mod-alert-dialog-title-font-weight",
"--mod-alert-dialog-title-line-height",
"--mod-alert-dialog-title-to-divider",
"--mod-alert-dialog-title-to-icon",
"--mod-alert-dialog-title-to-description",
"--mod-alert-dialog-warning-icon-color"
],
"component": [
"--spectrum-alert-dialog-background-color",
"--spectrum-alert-dialog-body-color",
"--spectrum-alert-dialog-body-font-family",
"--spectrum-alert-dialog-body-font-size",
"--spectrum-alert-dialog-body-font-style",
"--spectrum-alert-dialog-body-font-weight",
"--spectrum-alert-dialog-body-line-height",
"--spectrum-alert-dialog-description-size",
"--spectrum-alert-dialog-description-to-buttons",
"--spectrum-alert-dialog-divider-to-description",
"--spectrum-alert-dialog-corner-radius",
"--spectrum-alert-dialog-description-content-size",
"--spectrum-alert-dialog-description-font-size",
"--spectrum-alert-dialog-description-to-button-group",
"--spectrum-alert-dialog-edge-to-content",
"--spectrum-alert-dialog-error-icon-color",
"--spectrum-alert-dialog-heading-size",
"--spectrum-alert-dialog-icon-size",
"--spectrum-alert-dialog-max-width",
"--spectrum-alert-dialog-maximum-width",
"--spectrum-alert-dialog-min-width",
"--spectrum-alert-dialog-minimum-title-to-icon",
"--spectrum-alert-dialog-minimum-width",
"--spectrum-alert-dialog-padding",
"--spectrum-alert-dialog-title-color",
"--spectrum-alert-dialog-title-font-family",
"--spectrum-alert-dialog-title-font-size",
"--spectrum-alert-dialog-title-font-style",
"--spectrum-alert-dialog-title-font-weight",
"--spectrum-alert-dialog-title-line-height",
"--spectrum-alert-dialog-title-size",
"--spectrum-alert-dialog-title-to-divider",
"--spectrum-alert-dialog-title-to-icon",
"--spectrum-alert-dialog-title-to-description",
"--spectrum-alert-dialog-warning-icon-color"
],
"global": [
"--spectrum-background-layer-2-color",
"--spectrum-body-color",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-corner-radius-extra-large-default",
"--spectrum-heading-color",
"--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-style",
"--spectrum-heading-sans-serif-font-weight",
"--spectrum-line-height-100",
"--spectrum-line-height-200",
"--spectrum-negative-visual-color",
"--spectrum-notice-visual-color",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-200",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
"--spectrum-spacing-500",
"--spectrum-workflow-icon-size-100"
],
"passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"],
Expand Down
40 changes: 24 additions & 16 deletions components/alertdialog/index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Copyright 2024 Adobe. All rights reserved.
* Copyright 2025 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
Expand All @@ -15,30 +15,32 @@
--spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
--spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
--spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
--spectrum-alert-dialog-corner-radius: var(--spectrum-corner-radius-extra-large-default);

/* color */
--spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
--spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
--spectrum-alert-dialog-background-color: var(--spectrum-background-layer-2-color);

/* typography */
--spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
--spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
--spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
--spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
--spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
--spectrum-alert-dialog-heading-size: var(--spectrum-alert-dialog-title-font-size);
--spectrum-alert-dialog-description-content-size: var(--spectrum-alert-dialog-description-font-size);

--spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
--spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
--spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
--spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-200);
--spectrum-alert-dialog-body-color: var(--spectrum-body-color);

/* spacing */
--spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
--spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
--spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
--spectrum-alert-dialog-title-to-description: var(--spectrum-spacing-300);
--spectrum-alert-dialog-minimum-title-to-icon: var(--spectrum-spacing-100);
--spectrum-alert-dialog-description-to-button-group: var(--spectrum-spacing-500);

/* @passthrough -- mods for nested component */
--mod-buttongroup-justify-content: flex-end;
Expand All @@ -51,13 +53,14 @@
min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
max-block-size: inherit;
background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color));
outline: none;
padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
padding: var(--mod-alert-dialog-edge-to-content, var(--spectrum-alert-dialog-edge-to-content));
border-radius: var(--mod-alert-dialog-corner-radius, var(--spectrum-alert-dialog-corner-radius));

.spectrum-Icon {
Comment thread
cdransf marked this conversation as resolved.
inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
flex-shrink: 0;
}
}
Expand All @@ -74,40 +77,45 @@

.spectrum-AlertDialog-grid {
display: grid;
inline-size: 100%;
}

.spectrum-AlertDialog-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--mod-alert-dialog-minimum-title-to-icon, var(--spectrum-alert-dialog-minimum-title-to-icon));
align-items: center;
margin-block-end: var(--mod-alert-dialog-title-to-description, var(--spectrum-alert-dialog-title-to-description));
}

.spectrum-AlertDialog-heading {
Comment thread
cdransf marked this conversation as resolved.
font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size));
font-size: var(--mod-alert-dialog-heading-size, var(--spectrum-alert-dialog-heading-size));
line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
margin: 0;
margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider));
}

.spectrum-AlertDialog-content {
font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family));
font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight));
font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style));
font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size));
font-size: var(--mod-alert-dialog-description-content-size, var(--spectrum-alert-dialog-description-content-size));
line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height));
color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color));
margin: 0;
margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description));
margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons));
margin-block-end: var(--mod-alert-dialog-description-to-button-group, var(--spectrum-alert-dialog-description-to-button-group));

overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.spectrum-AlertDialog-buttongroup {
display: flex;
justify-content: end;
}

Comment thread
marissahuysentruyt marked this conversation as resolved.
@media (forced-colors: active) {
.spectrum-AlertDialog {
border: solid;
Expand Down
Loading
Loading