@spectrum-css/alertdialog - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

CHANGELOG.md

 # Change Log
 
+## 2.1.2
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
+- Updated dependencies [[`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277)]:
+  - @spectrum-css/buttongroup@7.1.2
+  - @spectrum-css/underlay@4.1.2
+  - @spectrum-css/divider@3.1.2
+  - @spectrum-css/modal@5.1.2
+  - @spectrum-css/icon@7.1.3
+
 ## 2.1.1
@@ -40,3 +53,5 @@
 <a name="2.0.0"></a>
-#2.0.0
+
+## 2.0.0
+
 🗓
@@ -60,3 +75,5 @@ 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.2.4...@spectrum-css/alertdialog@2.0.0)
 <a name="1.2.4"></a>
-##1.2.4
+
+## 1.2.4
+
 🗓
@@ -68,3 +85,5 @@ 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.2.3...@spectrum-css/alertdialog@1.2.4)
 <a name="1.2.3"></a>
-##1.2.3
+
+## 1.2.3
+
 🗓
@@ -76,3 +95,5 @@ 2024-02-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.2.2...@spectrum-css/alertdialog@1.2.3)
 <a name="1.2.2"></a>
-##1.2.2
+
+## 1.2.2
+
 🗓
@@ -84,3 +105,5 @@ 2024-02-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.2.1...@spectrum-css/alertdialog@1.2.2)
 <a name="1.2.1"></a>
-##1.2.1
+
+## 1.2.1
+
 🗓
@@ -92,3 +115,5 @@ 2024-02-06
 <a name="1.2.0"></a>
-#1.2.0
+
+## 1.2.0
+
 🗓
@@ -102,3 +127,5 @@ 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.1.0...@spectrum-css/alertdialog@1.2.0)
 <a name="1.1.0"></a>
-#1.1.0
+
+## 1.1.0
+
 🗓
@@ -112,3 +139,5 @@ 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.16...@spectrum-css/alertdialog@1.1.0)
 <a name="1.0.16"></a>
-##1.0.16
+
+## 1.0.16
+
 🗓
@@ -120,3 +149,5 @@ 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.15...@spectrum-css/alertdialog@1.0.16)
 <a name="1.0.15"></a>
-##1.0.15
+
+## 1.0.15
+
 🗓
@@ -128,3 +159,5 @@ 2023-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.14...@spectrum-css/alertdialog@1.0.15)
 <a name="1.0.14"></a>
-##1.0.14
+
+## 1.0.14
+
 🗓
@@ -136,3 +169,5 @@ 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.12...@spectrum-css/alertdialog@1.0.14)
 <a name="1.0.13"></a>
-##1.0.13
+
+## 1.0.13
+
 🗓
@@ -144,3 +179,5 @@ 2023-11-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.12...@spectrum-css/alertdialog@1.0.13)
 <a name="1.0.12"></a>
-##1.0.12
+
+## 1.0.12
+
 🗓
@@ -152,3 +189,5 @@ 2023-11-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.11...@spectrum-css/alertdialog@1.0.12)
 <a name="1.0.11"></a>
-##1.0.11
+
+## 1.0.11
+
 🗓
@@ -160,3 +199,5 @@ 2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.10...@spectrum-css/alertdialog@1.0.11)
 <a name="1.0.10"></a>
-##1.0.10
+
+## 1.0.10
+
 🗓
@@ -168,3 +209,5 @@ 2023-09-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.9...@spectrum-css/alertdialog@1.0.10)
 <a name="1.0.9"></a>
-##1.0.9
+
+## 1.0.9
+
 🗓
@@ -176,3 +219,5 @@ 2023-09-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.8...@spectrum-css/alertdialog@1.0.9)
 <a name="1.0.8"></a>
-##1.0.8
+
+## 1.0.8
+
 🗓
@@ -184,3 +229,5 @@ 2023-09-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.7...@spectrum-css/alertdialog@1.0.8)
 <a name="1.0.7"></a>
-##1.0.7
+
+## 1.0.7
+
 🗓
@@ -192,3 +239,5 @@ 2023-09-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.6...@spectrum-css/alertdialog@1.0.7)
 <a name="1.0.6"></a>
-##1.0.6
+
+## 1.0.6
+
 🗓
@@ -200,3 +249,5 @@ 2023-09-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.5...@spectrum-css/alertdialog@1.0.6)
 <a name="1.0.5"></a>
-##1.0.5
+
+## 1.0.5
+
 🗓
@@ -208,3 +259,5 @@ 2023-09-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.4...@spectrum-css/alertdialog@1.0.5)
 <a name="1.0.4"></a>
-##1.0.4
+
+## 1.0.4
+
 🗓
@@ -216,3 +269,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.3...@spectrum-css/alertdialog@1.0.4)
 <a name="1.0.3"></a>
-##1.0.3
+
+## 1.0.3
+
 🗓
@@ -224,3 +279,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.2...@spectrum-css/alertdialog@1.0.3)
 <a name="1.0.2"></a>
-##1.0.2
+
+## 1.0.2
+
 🗓
@@ -232,3 +289,5 @@ 2023-08-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.1...@spectrum-css/alertdialog@1.0.2)
 <a name="1.0.1"></a>
-##1.0.1
+
+## 1.0.1
+
 🗓
@@ -240,3 +299,5 @@ 2023-08-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/alertdialog@1.0.0...@spectrum-css/alertdialog@1.0.1)
 <a name="1.0.0"></a>
-#1.0.0
+
+## 1.0.0
+
 🗓
@@ -243,0 +304,0 @@ 2023-08-22

package.json

 {
 	"name": "@spectrum-css/alertdialog",
-	"version": "2.1.1",
+	"version": "2.1.2",
 	"description": "The Spectrum CSS alertdialog component",
@@ -16,3 +16,12 @@ "license": "Apache-2.0",
 	},
-	"main": "dist/index.css",
+	"exports": {
+		".": "./dist/index.css",
+		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./metadata/metadata.json",
+		"./metadata/*": "./metadata/*",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
 	"files": [
@@ -22,5 +31,6 @@ "dist/*",
 		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
+		"stories/*",
+		"metadata/*"
 	],
+	"main": "dist/index.css",
 	"peerDependencies": {
@@ -34,2 +44,10 @@ "@spectrum-css/buttongroup": ">=7",
 	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/buttongroup": {
+			"optional": true
+		},
+		"@spectrum-css/icon": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
@@ -43,10 +61,2 @@ "@spectrum-css/buttongroup": "workspace:^",
 	},
-	"peerDependenciesMeta": {
-		"@spectrum-css/buttongroup": {
-			"optional": true
-		},
-		"@spectrum-css/icon": {
-			"optional": true
-		}
-	},
 	"keywords": [
@@ -53,0 +63,0 @@ "spectrum",

stories/template.js

@@ -1,21 +0,18 @@
-import { useArgs } from "@storybook/preview-api";
+import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
+import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
-import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
-
 import "../index.css";
 
-export const Template = ({
+export const Dialog = ({
 	rootClass = "spectrum-AlertDialog",
-	isOpen = true,
-	heading = true,
-	content = true,
+	heading,
+	content,
 	customClasses = [],
@@ -25,75 +22,53 @@ buttons,
 	icon = false,
-	id,
-	...globals
-}) => {
-	const [, updateArgs] = useArgs();
+	id = getRandomId("alertdialog"),
+	customStyles = {},
+} = {}, context = {}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--${variant}`]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			role="dialog"
+			tabindex="-1"
+			aria-modal="true"
+			aria-labelledby="dialog_label"
+			style=${styleMap(customStyles)}
+		>
+			<div class="${rootClass}-grid">
+				<div class="spectrum-AlertDialog-header">
+					<h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
+					${when(icon, () => Icon({
+						size: "m",
+						iconName: "Alert",
+						customClasses: [`${rootClass}-icon`],
+					}, context))}
+				</div>
+				${Divider({
+					horizontal: true,
+					customClasses: [`${rootClass}-divider`],
+					}, context)}
+				<section class="${rootClass}-content">${content}</section>
+				${ButtonGroup({ items: buttons }, context)}
+			</div>
+		</div>
+	`;
+};
 
-	const Dialog = html`
-    <div
-      class=${classMap({
-        [rootClass]: true,
-        [`${rootClass}--${variant}`]: true,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-      id=${ifDefined(id)}
-      role="dialog"
-      tabindex="-1"
-      aria-modal="true"
-      aria-labelledby="dialog_label"
-    >
-      <div class="${rootClass}-grid">
-      <div class="spectrum-AlertDialog-header">
-        <h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
-        ${when(icon, () => Icon({
-          size: "m",
-          iconName: "Alert",
-          customClasses: [`${rootClass}-icon`],
-          ...globals,
-        })) }
-      </div>
-      ${Divider({
-            horizontal: true,
-            customClasses: [`${rootClass}-divider`],
-            ...globals,
-          })}
-      <section class="${rootClass}-content">${content}</section>
-      ${ButtonGroup({
-          items: buttons,
-          onclick: () => {
-            updateArgs({ isOpen: !isOpen });
-          },
-        })
-      }
-      </div>
-    </div>
-  `;
-
-	return  html`
-    ${Underlay({
-      ...globals,
-      isOpen,
-    })}
-    ${Button({
-      ...globals,
-      size: "m",
-      variant: "secondary",
-      label: "Click to open Alert Dialog",
-      treatment: "outline",
-      customClasses: [],
-      customStyles: {
-        position: "absolute",
-        insetInlineStart: "50%",
-        insetBlockStart: "50%",
-        transform: "translate(-50%, -50%)",
-      },
-      onclick: () => {
-        updateArgs({ isOpen: !isOpen });
-      },
-    })}
-    ${Modal({
-      ...globals,
-      isOpen,
-      content: Dialog,
-    })}
-      `;
+export const Template = ({
+	isOpen = true,
+	customModalStyles = {},
+	skipWrapper = false,
+	...args
+} = {}, context = {}) => {
+	return Modal({
+		isOpen,
+		content: [
+			Dialog(args, context)
+		],
+		customStyles: customModalStyles,
+		skipWrapper,
+	}, context);
 };

No alert changes

Improved metrics

Total package byte prevSize

58602

increased by80.39%

Number of package files

12

increased by33.33%

Lines of code

709

increased by60.05%

No dependency changes