feat(alertbanner): spectrum 2 spacing and mod name cleanup

Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties.
adobe · Apr 10, 2024 · 366139c · 366139c
1 parent 6a97001
commit 366139c
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 70 deletions.
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
@@ -11,37 +11,38 @@ 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-inline-size: var(--spectrum-alert-banner-width);
   --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
+
+  /* @todo replace with font-size specific line-height token when one is available. results in a line-height of 18px with font-size-100. */
+  --spectrum-alert-banner-line-height: 1.28571428; /* stylelint-disable number-max-precision */
   --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
 
   /* 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-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);
+  --spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing);
+
+  --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-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 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;
-
-  /* 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));
+  /* 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;
 }
 
@@ -56,9 +57,10 @@ governing permissions and limitations under the License.
 .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));
   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));
+  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-background, var(--spectrum-alert-banner-background));
   border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
@@ -71,16 +73,26 @@ governing permissions and limitations under the License.
 .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;
+
+  /* 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));
 }
 
 .spectrum-AlertBanner-content {
   display: flex;
+  flex-grow: 1;
 }
 
 .spectrum-AlertBanner-end {
@@ -89,17 +101,18 @@ governing permissions and limitations under the License.
 }
 
 .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: max(0px, 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) {

diff --git a/components/alertbanner/metadata/alertbanner.yml b/components/alertbanner/metadata/alertbanner.yml
@@ -9,9 +9,16 @@ sections:
     description: |
       ### Version 2.0.0
       #### Spectrum 2 release
-      Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. A few other notable changes and additions:
-        - The mod custom property `--mod-alert-banner-netural-background` was misspelled and has been renamed to `--mod-alert-banner-neutral-background`. The
-          mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods.
+      Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
+      The following mod custom properties have been changed:
+        - `--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.
 examples:
   - id: alertbanner
     name: Neutral

diff --git a/components/alertbanner/metadata/mods.md b/components/alertbanner/metadata/mods.md
@@ -1,22 +1,25 @@
-| Modifiable custom properties                   |
-| ---------------------------------------------- |
-| `--mod-alert-banner-background`                |
-| `--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-neutral-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-size`                  |
+| `--mod-alert-banner-icon-size`                  |
+| `--mod-alert-banner-icon-to-text`               |
+| `--mod-alert-banner-informative-background`     |
+| `--mod-alert-banner-inline-size`                |
+| `--mod-alert-banner-inline-start-to-content`    |
+| `--mod-alert-banner-line-height`                |
+| `--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`                |
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
@@ -1,5 +1,7 @@
 import { html } from "lit";
-import { when } from "lit/directives/when.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { Template } from "./template";
 
 export default {
@@ -72,19 +74,65 @@ export default {
 const AlertBannerGroup = (args) => {
 	return html`
 		<div style="display: flex; flex-direction: column; gap: 1rem">
-			${Template(args)}
-			${when(window.isChromatic(), () => html`
-				${Template({
-					...args,
-					variant: "info",
-					text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software."
-				})}
-				${Template({
-					...args,
-					variant: "negative",
-					text: "Connection interupted. Check your network to continue."
-				})}
-			`)}
+			${!window.isChromatic() ? Template(args) : html`
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["All variants with button, including wrapping"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${Template(args)}
+						${Template({
+							...args,
+							variant: "info",
+							text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
+						})}
+						${Template({
+							...args,
+							variant: "negative",
+							text: "Connection interupted. Check your network to continue.",
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["All variants without button"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${Template({
+							...args,
+							actionButtonText: "",
+						})}
+						${Template({
+							...args,
+							variant: "info",
+							text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
+							actionButtonText: "",
+						})}
+						${Template({
+							...args,
+							variant: "negative",
+							text: "Connection interupted. Check your network to continue.",
+							actionButtonText: "",
+						})}
+					</div>
+				</div>
+			`}
 		</div>
 	`;
 };