feat(alertbanner): migrate to spectrum 2

.changeset/tame-bobcats-beam.md

@@ -0,0 +1,19 @@
+---
+"@spectrum-css/alertbanner": major
+---
+
+#### Spectrum 2 migration
+
+Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
+
+The following changes have been made to the mod custom properties:
+
+- `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size`
+- `--mod-alert-banner-neutral-background` was previously misspelled. The mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods.
+- `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text`
+- `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon`
+- `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text`
+- `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content`
+- `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button`
+- The spacing on either side of the close button is now controlled by two separate mods; `--mod-alert-banner-close-button-to-inline-end` and `--mod-alert-banner-close-button-to-content`. The previous `--mod-alert-banner-close-button-spacing` has been removed.
+- A new mod `--mod-alert-banner-inline-end-to-content` was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button.

components/alertbanner/index.css

@@ -1,5 +1,5 @@
 /*!
-Copyright 2023 Adobe. All rights reserved.
+Copyright 2024 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
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -11,96 +11,109 @@ governing permissions and limitations under the License.
 
 .spectrum-AlertBanner {
 	--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
-	--spectrum-alert-banner-size: var(--spectrum-alert-banner-width);
+	--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
+	--spectrum-alert-banner-inline-size: auto;
+
 	--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
-	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
+	--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
 
 	/* spacing */
 	--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
-	--spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
+	--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
+	--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
 	--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
-	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */
-	--spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
-	--spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
-	--spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
-	--spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
+	--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+	--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+
+	/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
+	padding-block of its parent AlertBanner-body element. */
+	--spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
+	--spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
 
 	/* colors */
-	--spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
-	--spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
+	--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
 	--spectrum-alert-banner-font-color: var(--spectrum-white);
 
-	/* settings for nested Divider */
-	--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
-	--mod-divider-vertical-height: auto;
-	--mod-divider-vertical-align: stretch;
+	/* settings for nested Close button */
+	--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
+	--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
+	--mod-closebutton-align-self: flex-start;
 
-	/* settings for nested Button */
-	--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
-	--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
-	--mod-button-margin-left: auto;
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
+	}
+}
 
-	/* settings for nested CloseButton */
-	--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
-	--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
-	--mod-closebutton-align-self: flex-start;
+.spectrum-AlertBanner--info {
+	--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
+}
+
+.spectrum-AlertBanner--negative {
+	--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
 }
 
 .spectrum-AlertBanner {
 	display: none;
 	justify-content: space-between;
-	inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
+	inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
+	max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
 	min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
 	font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
+	font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
+	line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
 	color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
-	background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
+	background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
 	border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
 
 	&.is-open {
 		display: flex;
 	}
 }
 
-.spectrum-AlertBanner--info {
-	background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
-}
-
-.spectrum-AlertBanner--negative {
-	background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
-}
-
 .spectrum-AlertBanner-body {
 	inline-size: 100%;
 	display: flex;
-
-	/* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */
-	gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
 	flex-wrap: wrap;
 	align-items: center;
-	margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
-}
+	justify-content: flex-end;
 
-.spectrum-AlertBanner-content {
-	display: flex;
+	/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
+	column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
+
+	/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
+	account the existing margins on the text. */
+	row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));
+
+	padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
+	margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
+	margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
+
+	/* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
+	.spectrum-AlertBanner:has(.spectrum-CloseButton) & {
+		margin-inline-end: 0;
+	}
 }
 
-.spectrum-AlertBanner-end {
+.spectrum-AlertBanner-content {
 	display: flex;
-	align-items: center;
+	flex-grow: 1;
 }
 
 .spectrum-AlertBanner-icon {
-	inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
-	block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
-	margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
+	--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
+	margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
 	margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
 	flex-shrink: 0;
 }
 
 .spectrum-AlertBanner-text {
-	margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
-	margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
-	margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
+	margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
+	margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
 }
 
 @media (forced-colors: active) {

components/alertbanner/metadata/mods.md

@@ -1,21 +1,28 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-alert-banner-bottom-text`               |
-| `--mod-alert-banner-close-button-spacing`      |
-| `--mod-alert-banner-edge-to-button`            |
-| `--mod-alert-banner-edge-to-divider`           |
-| `--mod-alert-banner-font-color`                |
-| `--mod-alert-banner-font-size`                 |
-| `--mod-alert-banner-icon-size`                 |
-| `--mod-alert-banner-icon-to-text`              |
-| `--mod-alert-banner-informative-background`    |
-| `--mod-alert-banner-min-height`                |
-| `--mod-alert-banner-negative-background`       |
-| `--mod-alert-banner-netural-background`        |
-| `--mod-alert-banner-size`                      |
-| `--mod-alert-banner-start-edge`                |
-| `--mod-alert-banner-text-to-button-horizontal` |
-| `--mod-alert-banner-text-to-button-vertical`   |
-| `--mod-alert-banner-text-to-divider`           |
-| `--mod-alert-banner-top-icon`                  |
-| `--mod-alert-banner-top-text`                  |
+| Modifiable custom properties                    |
+| ----------------------------------------------- |
+| `--mod-alert-banner-background`                 |
+| `--mod-alert-banner-block-edge-to-button`       |
+| `--mod-alert-banner-bottom-to-text`             |
+| `--mod-alert-banner-close-button-to-content`    |
+| `--mod-alert-banner-close-button-to-inline-end` |
+| `--mod-alert-banner-font-color`                 |
+| `--mod-alert-banner-font-family`                |
+| `--mod-alert-banner-font-size`                  |
+| `--mod-alert-banner-icon-size`                  |
+| `--mod-alert-banner-icon-to-text`               |
+| `--mod-alert-banner-informative-background`     |
+| `--mod-alert-banner-inline-end-to-content`      |
+| `--mod-alert-banner-inline-size`                |
+| `--mod-alert-banner-inline-start-to-content`    |
+| `--mod-alert-banner-line-height`                |
+| `--mod-alert-banner-max-inline-size`            |
+| `--mod-alert-banner-min-height`                 |
+| `--mod-alert-banner-negative-background`        |
+| `--mod-alert-banner-neutral-background`         |
+| `--mod-alert-banner-text-margin-block-end`      |
+| `--mod-alert-banner-text-margin-block-start`    |
+| `--mod-alert-banner-text-to-button-horizontal`  |
+| `--mod-alert-banner-text-to-button-vertical`    |
+| `--mod-alert-banner-top-to-close-button`        |
+| `--mod-alert-banner-top-to-icon`                |
+| `--mod-alert-banner-top-to-text`                |