@spectrum-css/pagination - npm Package Compare versions

Comparing version 9.0.0-s2-foundations.0 to 9.0.0-s2-foundations.1

CHANGELOG.md

 # Change Log
 
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+  - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+  - @spectrum-css/textfield@8.0.0-s2-foundations.1
+  - @spectrum-css/button@14.0.0-s2-foundations.1
+  - @spectrum-css/icon@8.0.0-s2-foundations.1
+  - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
 ## 9.0.0-s2-foundations.0
@@ -4,0 +19,0 @@

package.json

 {
 	"name": "@spectrum-css/pagination",
-	"version": "9.0.0-s2-foundations.0",
+	"version": "9.0.0-s2-foundations.1",
 	"description": "The Spectrum CSS Pagination component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/template.js

@@ -0,9 +1,10 @@
+import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as Button } from "@spectrum-css/button/stories/template.js";
+import { Default as SplitButton } from "@spectrum-css/preview/deprecated/splitbutton/splitbutton.stories.js";
+import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
 
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
-
 import "../index.css";
@@ -18,3 +19,3 @@
 	...globals
-}) => {
+}, context) => {
 	if (variant === "explicit") {
@@ -35,3 +36,3 @@ return html`
 					customClasses: [`${rootClass}-prevButton`],
-				})}
+				}, context)}
 				${Textfield({
@@ -41,3 +42,3 @@ size,
 					customClasses: [`${rootClass}-textfield`],
-				})}
+				}, context)}
 				<span class="${rootClass}-counter">of 89 pages</span>
@@ -50,7 +51,17 @@ ${ActionButton({
 					customClasses: [`${rootClass}-nextButton`],
-				})}
+				}, context)}
 			</nav>
 		`;
 	}
-
+	else if (variant == "button") {
+		return SplitButton({
+			position: "left",
+			variant: "accent",
+			label: "Next",
+			iconName: "ChevronLeft100",
+			labelIconName: "ChevronRight100",
+			customFirstButtonClasses: ["spectrum-Pagination-prevButton"],
+			customLastButtonClasses: ["spectrum-Pagination-nextButton"]
+		}, context);
+	}
 	return html`
@@ -71,12 +82,19 @@ <nav
 				customClasses: [`${rootClass}-prevButton`],
-			})}
+			}, context)}
 			${repeat(
 				items,
 				(item) => item.id,
-				(item) => typeof item === "object" ? ActionButton({
-						...globals,
-						...item,
-						size,
-						isQuiet: true,
-					}) : item,
+				(item) => {
+					if (typeof item === "object") {
+						return ActionButton({
+							...globals,
+							...item,
+							size,
+							isQuiet: true,
+						}, context);
+					}
+					else {
+						return item;
+					}
+				}
 			)}
@@ -90,5 +108,30 @@ ${Button({
 				customClasses: [`${rootClass}-nextButton`],
-			})}
+			}, context)}
 		</nav>
 	`;
 };
+
+export const PaginationGroup = (args, context) => {
+	return html`
+		<div style=${styleMap({
+			"display": window.isChromatic() ? "none" : undefined,
+		})}>
+			${Template(args, context)}
+		</div>
+		<div style=${styleMap({
+			"display": window.isChromatic() ? "flex" : "none",
+			"flex-direction": "column",
+			"gap": "32px",
+		})}>
+			${Template(args, context)}
+			${Template({
+				...args,
+				variant: "explicit",
+			}, context)}
+			${Template({
+				...args,
+				variant: "button",
+			}, context)}
+		</div>
+	`;
+};

No alert changes

Improved metrics

Total package byte prevSize

52048

increased by3.74%

Lines of code

271

increased by19.38%

No dependency changes