Skip to content

fix(sp-alert-dialog): Make the divider color transparent for S2 theme #5747

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 3 commits into from
Sep 24, 2025
+22 −1
Merged

fix(sp-alert-dialog): Make the divider color transparent for S2 theme #5747

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8bbbdb0
feat(sp-alert-dialog): make the divider color transparent only for s2…
iuliauta Sep 22, 2025
72eb2ee
feat(sp-alert-dialog): generate changeset
iuliauta Sep 22, 2025
c9cf284
chore: update golden hash
marissahuysentruyt Sep 24, 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/eight-parts-begin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@spectrum-web-components/alert-dialog': patch
---

Make the divider color transparent only for spectrum 2 theme
7 changes: 7 additions & 0 deletions packages/alert-dialog/src/alert-dialog-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

/* Override divider background color when used inside alert-dialog */
.divider {
--spectrum-divider-background-color: var(--system-alert-dialog-divider-background-color);
--spectrum-divider-background-color-static-white: var(--spectrum-alert-dialog-divider-background-color-static-white);
--spectrum-divider-background-color-static-black: var(--spectrum-alert-dialog-divider-background-color-static-black);
}
Comment on lines +14 to +18
Copy link
Contributor

Choose a reason for hiding this comment

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

I am curious! Why?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In the JIRA ticket it is mentioned to remove the divider from the alert dialog only for S2 theme, to not update the DOM, but by using background color: The changes in alert dialog highlighted show a removed separator line. This may be accomplished in theme by changing the divider's color, but should not alter the DOM or APIs.

That's why I added these 3 tokens in the overrides file (i found them when I inspected the alert dialog component from the storybook) and used 3 new bridge tokens (because I don't want to make all the dividers from all SWC components transparent in S2, only the ones from the alert dialog).
If there is other solution better than this, please let me know, this is the only one I taught of and I am very open to suggestions, I want to do it the right way!

3 changes: 3 additions & 0 deletions tools/styles/tokens-v2/system-theme-bridge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,9 @@
--system-divider-background-color: var(--spectrum-gray-200);
--system-divider-background-color-static-white: var(--spectrum-transparent-white-200);
--system-divider-background-color-static-black: var(--spectrum-transparent-black-200);
--system-alert-dialog-divider-background-color: transparent;
--system-alert-dialog-divider-background-color-static-white: transparent;
--system-alert-dialog-divider-background-color-static-black: transparent;
--system-drop-zone-border-color: var(--spectrum-gray-200);
--system-field-group-margin: var(--spectrum-spacing-300);
--system-field-group-readonly-delimiter: ",";
Expand Down
3 changes: 3 additions & 0 deletions tools/styles/tokens/express/system-theme-bridge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,9 @@
--system-divider-background-color: var(--spectrum-gray-300);
--system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
--system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
--system-alert-dialog-divider-background-color: var(--spectrum-gray-300);
--system-alert-dialog-divider-background-color-static-white: var(--spectrum-transparent-white-300);
--system-alert-dialog-divider-background-color-static-black: var(--spectrum-transparent-black-300);
--system-drop-zone-border-color: var(--spectrum-gray-300);
--system-field-group-margin: var(--spectrum-spacing-300);
--system-field-group-readonly-delimiter: ",";
Expand Down
3 changes: 3 additions & 0 deletions tools/styles/tokens/spectrum/system-theme-bridge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,9 @@
--system-divider-background-color: var(--spectrum-gray-300);
--system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
--system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
--system-alert-dialog-divider-background-color: var(--spectrum-gray-300);
--system-alert-dialog-divider-background-color-static-white: var(--spectrum-transparent-white-300);
--system-alert-dialog-divider-background-color-static-black: var(--spectrum-transparent-black-300);
--system-drop-zone-border-color: var(--spectrum-gray-300);
--system-field-group-margin: var(--spectrum-spacing-300);
--system-field-group-readonly-delimiter: ",";
Expand Down
Loading