chore(alert dialog): cleanup for stories, templates and styles

Author: cdransf

.changeset/lemon-flowers-poke.md

@@ -12,7 +12,7 @@ The dialog divider has been removed.
 
 Primary button style has been updated to filled.
 
-Multiple variants are now supported:
+The following variants remain supported:
 
 - Confirmation
 - Information
@@ -24,7 +24,6 @@ Dialog buttons may be displayed either horizontally or vertically.
 
 ##### Removed custom properties
 
-`--spectrum-alert-dialog-body-font-size`
 `--spectrum-alert-dialog-description-to-buttons`
 `--spectrum-alert-dialog-divider-to-description`
 `--spectrum-alert-dialog-padding`
@@ -36,9 +35,10 @@ Dialog buttons may be displayed either horizontally or vertically.
 
 `--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-minimum-title-to-icon`
+`--spectrum-alert-dialog-heading-size`
 `--spectrum-alert-dialog-title-to-description`
 
 ##### Removed mods
@@ -57,5 +57,6 @@ Dialog buttons may be displayed either horizontally or vertically.
 `--mod-alert-dialog-description-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`

components/alertdialog/dist/metadata.json

@@ -23,13 +23,13 @@
     "--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-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",
@@ -44,10 +44,12 @@
     "--spectrum-alert-dialog-body-font-weight",
     "--spectrum-alert-dialog-body-line-height",
     "--spectrum-alert-dialog-corner-radius",
+    "--spectrum-alert-dialog-description-font-size",
     "--spectrum-alert-dialog-description-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",

components/alertdialog/index.css

@@ -28,6 +28,8 @@
 	--spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
 	--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-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);
@@ -89,7 +91,7 @@
 	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;
@@ -99,8 +101,6 @@
 	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));
-
-	/* @TODO: update to `--spectrum-alert-dialog-body-font-size` when available	 */
 	font-size: var(--mod-alert-dialog-description-size, var(--spectrum-alert-dialog-description-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));

components/alertdialog/stories/alertdialog.stories.js

@@ -42,9 +42,9 @@ export default {
 			options: ["confirmation", "information", "destructive", "warning", "error"],
 			control: "select",
 		},
-		buttonsAreVertical: {
+		hasVerticalButtons: {
 			name: "Vertical buttons",
-			description: "Buttons can be displayed horizontally (default) or vertically.",
+			description: "In limited horizontal space, the button group may stack vertically.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -56,7 +56,7 @@ export default {
 	args: {
 		rootClass: "spectrum-AlertDialog",
 		isOpen: true,
-		buttonsAreVertical: false,
+		hasVerticalButtons: false,
 		variant: "confirmation",
 	},
 	parameters: {
@@ -86,6 +86,7 @@ export default {
 };
 
 export const Default = AlertDialogGroup.bind({});
+Default.storyName = "Default (confirmation)";
 Default.args = {
 	isOpen: true,
 	heading: "Enable smart filters?",
@@ -152,7 +153,7 @@ Error.args = {
 	variant: "error",
 	heading: "Unable to share",
 	icon: "Alert",
-	content: "An error occured while sharing your project. Please verify the email address and try again.",
+	content: "An error occurred while sharing your project. Please verify the email address and try again.",
 };
 Error.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -212,12 +213,13 @@ Scroll.parameters = {
 };
 
 /**
- * When horizontal space is limited, button groups stack vertically. They should appear in ascending order based on importance, with the most critical action at the bottom.
+ * Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom.
  */
 export const VerticalButtons = Template.bind({});
+VerticalButtons.storyName = "Vertical buttons";
 VerticalButtons.tags = ["!dev"];
 VerticalButtons.args = {
-	buttonsAreVertical: true,
+	hasVerticalButtons: true,
 	isOpen: true,
 	heading: "Vertical button group",
 	content: "This is what an alert dialog looks like with buttons arranged vertically.",

components/alertdialog/stories/alertdialog.test.js

@@ -12,24 +12,29 @@ export const AlertDialogGroup = Variants({
 		"min-block-size": "auto",
 	},
 	testData: [{}, {
+		testHeading: "Vertical button display",
 		heading: "Vertical button group",
 		content: "This is what an alert dialog looks like with buttons arranged vertically.",
-		buttonsAreVertical: true,
+		hasVerticalButtons: true,
 	}, {
+		testHeading: "Warning",
 		variant: "warning",
 		heading: "Unverified format",
 		content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",
 	}, {
+		testHeading: "Error",
 		variant: "error",
 		heading: "Unable to share",
 		content: "An error occured while sharing your project. Please verify the email address and try again.",
 	}, {
+		testHeading: "Destructive",
 		variant: "destructive",
 		heading: "Delete 3 documents?",
 		content: "Are you sure you want to delete the 3 selected documents?",
 	}, {
+		testHeading: "Informative",
 		variant: "information",
-		heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
+		heading: "Informative dialog with a wrapping title text because the text is longer than the width of the alert dialog",
 		content: "If you enjoy our app, would you mind taking a moment to rate it?",
 	}],
 });

components/alertdialog/stories/template.js

@@ -21,9 +21,9 @@ const buttonMap = {
 		treatment: "outline",
 		label: "Remind me later"
 	}, {
+		variant: "accent",
 		treatment: "fill",
-		label: "Enable",
-		variant: "accent"
+		label: "Enable"
 	}],
 	information: [{
 		variant: "secondary",
@@ -35,35 +35,35 @@ const buttonMap = {
 		label: "Remind me later"
 	}, {
 		variant: "primary",
-		treatment: "outline",
-		label: "Rate now",
+		treatment: "fill",
+		label: "Rate now"
 	}],
 	destructive: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "negative",
 		treatment: "fill",
-		label: "Delete",
-		variant: "negative"
+		label: "Delete"
 	}],
 	warning: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "primary",
 		treatment: "fill",
-		label: "Continue",
-		variant: "primary"
+		label: "Continue"
 	}],
 	error: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "primary",
 		treatment: "fill",
-		label: "Continue",
-		variant: "primary"
+		label: "Continue"
 	}],
 };
 
@@ -73,7 +73,7 @@ export const Dialog = ({
 	content,
 	customClasses = [],
 	variant,
-	buttonsAreVertical,
+	hasVerticalButtons,
 	id = getRandomId("alertdialog"),
 	customStyles = {},
 } = {}, context = {}) => {
@@ -103,7 +103,7 @@ export const Dialog = ({
 				</div>
 				<section class="${rootClass}-content">${content}</section>
 				<section class="${rootClass}-buttongroup">
-					${ButtonGroup({ items: buttonMap[variant], vertical: buttonsAreVertical }, context)}
+					${ButtonGroup({ items: buttonMap[variant], vertical: hasVerticalButtons }, context)}
 				</section>
 			</div>
 		</div>
@@ -112,7 +112,6 @@ export const Dialog = ({
 
 export const Template = ({
 	isOpen = true,
-	customModalStyles = {},
 	skipWrapper = false,
 	...args
 } = {}, context = {}) => {
@@ -121,7 +120,6 @@ export const Template = ({
 		content: [
 			Dialog(args, context)
 		],
-		customStyles: customModalStyles,
 		skipWrapper,
 	}, context);
 };

tokens/custom/large-vars.css

@@ -22,7 +22,7 @@
 	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
 
-	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400);
 
 	--spectrum-assetcard-focus-ring-border-radius: 9px;
 	--spectrum-assetcard-selectionindicator-margin: 15px;

tokens/custom/medium-vars.css

@@ -22,7 +22,7 @@
 	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
 
-	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500);
 
 	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
 	--spectrum-assetcard-focus-ring-border-radius: 8px;