@spectrum-css/pagination - npm Package Compare versions

Comparing version 9.0.0-s2-foundations.12 to 9.0.0-s2-foundations.13

metadata/metadata.json

+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum-Pagination",
+    ".spectrum-Pagination--explicit",
+    ".spectrum-Pagination--listing",
+    ".spectrum-Pagination-counter",
+    ".spectrum-Pagination-nextButton",
+    ".spectrum-Pagination-nextButton .spectrum-Icon",
+    ".spectrum-Pagination-prevButton",
+    ".spectrum-Pagination-prevButton .spectrum-Icon",
+    ".spectrum-Pagination-textfield",
+    ".spectrum-Pagination:dir(rtl)",
+    "[dir=\"rtl\"] .spectrum-Pagination"
+  ],
+  "modifiers": [
+    "--mod-pagination-counter-color",
+    "--mod-pagination-counter-font-size",
+    "--mod-pagination-counter-line-height",
+    "--mod-pagination-counter-margin-inline-start",
+    "--mod-pagination-page-button-inline-spacing",
+    "--mod-pagination-textfield-width"
+  ],
+  "component": [
+    "--spectrum-pagination-counter-color",
+    "--spectrum-pagination-counter-font-size",
+    "--spectrum-pagination-counter-line-height",
+    "--spectrum-pagination-counter-margin-inline-start",
+    "--spectrum-pagination-item-inline-spacing",
+    "--spectrum-pagination-page-button-inline-spacing",
+    "--spectrum-pagination-textfield-width"
+  ],
+  "global": [
+    "--spectrum-font-size-100",
+    "--spectrum-line-height-100",
+    "--spectrum-logical-rotation",
+    "--spectrum-neutral-subdued-content-color-default"
+  ],
+  "system-theme": [],
+  "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"],
+  "high-contrast": []
+}

metadata/pagination-explicit.yml

+id: pagination-explicit
+name: Pagination - explicit
+sections:
+  - name: Migration Guide
+    description: |
+      ### New Textfield markup
+      Pagination(Explicit) now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. You must add `.spectrum-Pagination-textfield` modifier to the outer element `div.spectrum-Textfield`.
+examples:
+  - id: pagination-explicit
+    name: Standard
+    markup: |
+      <nav class="spectrum-Pagination spectrum-Pagination--explicit">
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
+          <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
+            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
+          </svg>
+        </a>
+        <div class="spectrum-Textfield spectrum-Pagination-textfield">
+          <input type="text" name="field" value="2" class="spectrum-Textfield-input">
+        </div>
+        <span class="spectrum-Pagination-counter">of 89 pages</span>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
+          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
+            <use xlink:href="#spectrum-css-icon-Chevron100"></use>
+          </svg>
+        </a>
+      </nav>

metadata/pagination-listing.yml

+name: Pagination - page
+status: Contribution
+examples:
+  - id: pagination-listing
+    name: Standard
+    markup: |
+      <nav class="spectrum-Pagination spectrum-Pagination--listing">
+        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Pagination-prevButton"><span class="spectrum-Button-label">Prev</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">1</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected"><span class="spectrum-ActionButton-label">2</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">3</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">4</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">5</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">6</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">...</span></a>
+        <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">24</span></a>
+        <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Pagination-nextButton"><span class="spectrum-Button-label">Next</span></a>
+      </nav>

stories/pagination.stories.js

+import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { size } from "@spectrum-css/preview/types";
+import pkgJson from "../package.json";
+import { PaginationGroup } from "./pagination.test.js";
+import { Template } from "./template";
+
+/**
+ * The pagination component displays numbered buttons or an input field to allow for navigation. 
+ */
+export default {
+	title: "Pagination",
+	component: "Pagination",
+	argTypes: {
+		size: size(["s", "m", "l", "xl"]),
+		variant: {
+			name: "Variant",
+			type: { name: "string" },
+			table: {
+				category: "Component",
+				defaultValue: {
+					summary: "listing",
+				},
+			},
+			options: [
+				"listing",
+				"explicit",
+			],
+			control: "select",
+		},
+		items: {
+			name: "Items",
+			description: "In the \"listing\" variant, each item represents a page button and its label.",
+			table: {
+				category: "Content",
+			},
+			control: "object",
+		},
+	},
+	args: {
+		rootClass: "spectrum-Pagination",
+		size: "m",
+		variant: "listing",
+		items: [
+			{
+				id: 1,
+				label: "1",
+				isSelected: true,
+			},
+			{
+				id: 2,
+				label: "2",
+			},
+			{
+				id: 3,
+				label: "...",
+			},
+			{
+				id: 10,
+				label: "10",
+			},
+		],
+	},
+	parameters: {
+		actions: {
+			handles: [
+				...(ActionButton.parameters?.actions?.handles ?? [])
+			],
+		},
+		packageJson: pkgJson,
+	},
+};
+
+/**
+ * The default listing/page variant uses buttons for each page number. 
+ */
+export const Default = PaginationGroup.bind({});
+Default.storyName = "Default (listing)";
+Default.args = {};
+
+// ********* VRT ONLY ********* //
+export const WithForcedColors = PaginationGroup.bind({});
+WithForcedColors.tags = ["!autodocs", "!dev"];
+WithForcedColors.parameters = {
+	chromatic: {
+		forcedColors: "active",
+		modes: disableDefaultModes
+	},
+};
+
+// ********* DOCS ONLY ********* //
+/**
+ * Pagination's explicit variant uses the text field component to represent the current page number,
+ * and action buttons for the previous and next navigation. It also displays text with the total
+ * number of pages.
+ */
+export const Explicit = Template.bind({});
+Explicit.tags = ["!dev"];
+Explicit.args = {
+	variant: "explicit",
+};
+Explicit.parameters = {
+	chromatic: { disableSnapshot: true },
+};

stories/pagination.test.js

+import { Variants } from "@spectrum-css/preview/decorators";
+import { Template } from "./template.js";
+
+export const PaginationGroup = Variants({
+	Template,
+	sizeDirection: "column",
+	testData: [
+		{
+			testHeading: "Default",
+		},
+		{
+			testHeading: "Explicit",
+			variant: "explicit",
+		},
+	]
+});

CHANGELOG.md

 # Change Log
 
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+  - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+  - @spectrum-css/textfield@8.0.0-s2-foundations.14
+  - @spectrum-css/button@14.0.0-s2-foundations.15
+  - @spectrum-css/icon@8.0.0-s2-foundations.15
+  - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
 ## 9.0.0-s2-foundations.12
@@ -200,2 +215,14 @@
 
+## 8.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/actionbutton@6.1.2
+  - @spectrum-css/textfield@7.2.1
+  - @spectrum-css/button@13.1.2
+  - @spectrum-css/icon@7.1.3
+
 ## 8.1.1
@@ -202,0 +229,0 @@

dist/index-base.css

@@ -14,3 +14,4 @@ /*!
 
-.spectrum-Pagination:dir(rtl) {
+.spectrum-Pagination:dir(rtl),
+[dir="rtl"] .spectrum-Pagination {
 	--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -32,5 +33,5 @@ }
 .spectrum-Pagination-counter {
-	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
 	font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size));
 	line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height));
+	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
 	color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color));
@@ -37,0 +38,0 @@ }

dist/index.css

@@ -14,3 +14,4 @@ /*!
 
-.spectrum-Pagination:dir(rtl) {
+.spectrum-Pagination:dir(rtl),
+[dir="rtl"] .spectrum-Pagination {
 	--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -32,5 +33,5 @@ }
 .spectrum-Pagination-counter {
-	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
 	font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size));
 	line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height));
+	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
 	color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color));
@@ -37,0 +38,0 @@ }

package.json

 {
 	"name": "@spectrum-css/pagination",
-	"version": "9.0.0-s2-foundations.12",
+	"version": "9.0.0-s2-foundations.13",
 	"description": "The Spectrum CSS Pagination 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": {
@@ -27,0 +37,0 @@ "@spectrum-css/actionbutton": ">=6",

stories/template.js

@@ -7,7 +7,7 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
 import "../themes/express.css";
-import "../themes/spectrum.css";
 
@@ -19,38 +19,36 @@ export const Template = ({
 	variant,
-	items,
+	items
 } = {}, context = {}) => {
-	if (variant === "explicit") {
-		return html`
-			<nav
-				class=${classMap({
-					[rootClass]: true,
-					[`${rootClass}--explicit`]: true,
-					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-				})}
-			>
-				${ActionButton({
-					size,
-					isQuiet: true,
-					iconSet: "ui",
-					iconName: "ChevronLeft",
-					customClasses: [`${rootClass}-prevButton`],
-				}, context)}
-				${Textfield({
-					size,
-					value: "1",
-					customClasses: [`${rootClass}-textfield`],
-				}, context)}
-				<span class="${rootClass}-counter">of 89 pages</span>
-				${ActionButton({
-					size,
-					isQuiet: true,
-					iconSet: "ui",
-					iconName: "ChevronRight",
-					customClasses: [`${rootClass}-nextButton`],
-				}, context)}
-			</nav>
-		`;
-	}
+	const explicitVariant = html`
+		<nav
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--explicit`]: true,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+		>
+			${ActionButton({
+				size,
+				isQuiet: true,
+				iconSet: "ui",
+				iconName: "ChevronLeft",
+				customClasses: [`${rootClass}-prevButton`],
+			}, context)}
+			${Textfield({
+				size,
+				value: "1",
+				customClasses: [`${rootClass}-textfield`],
+			}, context)}
+			<span class="${rootClass}-counter">of 89 pages</span>
+			${ActionButton({
+				size,
+				isQuiet: true,
+				iconSet: "ui",
+				iconName: "ChevronRight",
+				customClasses: [`${rootClass}-nextButton`],
+			}, context)}
+		</nav>
+	`;
 
-	return html`
+	const listingVariant = html`
 		<nav
@@ -95,27 +93,8 @@ class=${classMap({
 	`;
-};
 
-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>
-	`;
+	if (variant === "explicit") {
+		return explicitVariant;
+	}
+
+	return listingVariant;
 };

dist/index-theme-switcher.css

-/*!
- * 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>
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum {
-	--system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing);
-	--system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing);
-	--system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default);
-	--system-pagination-counter-font-size: var(--spectrum-font-size-100);
-	--system-pagination-counter-line-height: var(--spectrum-line-height-100);
-}
-
-.spectrum-Pagination:dir(rtl) {
-	--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-.spectrum-Pagination--explicit,
-.spectrum-Pagination--listing {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.spectrum-Pagination-textfield {
-	--mod-textfield-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width));
-	--mod-textfield-min-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width));
-}
-
-.spectrum-Pagination-counter {
-	margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start));
-	font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size));
-	line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height));
-	color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color));
-}
-
-.spectrum-Pagination-prevButton {
-	margin-inline-end: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing));
-}
-
-.spectrum-Pagination-nextButton {
-	margin-inline-start: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing));
-}
-
-.spectrum-Pagination-prevButton .spectrum-Icon {
-	transform: rotate(180deg);
-	transform: var(--spectrum-logical-rotation,) rotate(180deg);
-}
-
-.spectrum-Pagination-nextButton .spectrum-Icon {
-	transform: var(--spectrum-logical-rotation);
-}
-
-.spectrum-Pagination {
-	--spectrum-pagination-counter-margin-inline-start: var(--system-pagination-counter-margin-inline-start);
-	--spectrum-pagination-page-button-inline-spacing: var(--system-pagination-page-button-inline-spacing);
-	--spectrum-pagination-counter-color: var(--system-pagination-counter-color);
-	--spectrum-pagination-counter-font-size: var(--system-pagination-counter-font-size);
-	--spectrum-pagination-counter-line-height: var(--system-pagination-counter-line-height);
-}

dist/metadata.json

-{
-  "sourceFile": "dist/index-theme-switcher.css",
-  "selectors": [
-    ".spectrum",
-    ".spectrum-Pagination",
-    ".spectrum-Pagination--explicit",
-    ".spectrum-Pagination--listing",
-    ".spectrum-Pagination-counter",
-    ".spectrum-Pagination-nextButton",
-    ".spectrum-Pagination-nextButton .spectrum-Icon",
-    ".spectrum-Pagination-prevButton",
-    ".spectrum-Pagination-prevButton .spectrum-Icon",
-    ".spectrum-Pagination-textfield",
-    ".spectrum-Pagination:dir(rtl)"
-  ],
-  "component": [],
-  "modifiers": [
-    "--mod-pagination-counter-color",
-    "--mod-pagination-counter-font-size",
-    "--mod-pagination-counter-line-height",
-    "--mod-pagination-counter-margin-inline-start",
-    "--mod-pagination-page-button-inline-spacing",
-    "--mod-pagination-textfield-width",
-    "--mod-textfield-min-width",
-    "--mod-textfield-width"
-  ],
-  "spectrum": [
-    "--spectrum-font-size-100",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-pagination-counter-color",
-    "--spectrum-pagination-counter-font-size",
-    "--spectrum-pagination-counter-line-height",
-    "--spectrum-pagination-counter-margin-inline-start",
-    "--spectrum-pagination-item-inline-spacing",
-    "--spectrum-pagination-page-button-inline-spacing",
-    "--spectrum-pagination-textfield-width"
-  ],
-  "system": [
-    "--system-pagination-counter-color",
-    "--system-pagination-counter-font-size",
-    "--system-pagination-counter-line-height",
-    "--system-pagination-counter-margin-inline-start",
-    "--system-pagination-page-button-inline-spacing"
-  ],
-  "high-contrast": []
-}

dist/mods.md

-| Modifiable custom properties                 |
-| -------------------------------------------- |
-| --mod-pagination-counter-color               |
-| --mod-pagination-counter-font-size           |
-| --mod-pagination-counter-line-height         |
-| --mod-pagination-counter-margin-inline-start |
-| --mod-pagination-page-button-inline-spacing  |
-| --mod-pagination-textfield-width             |
-| --mod-textfield-min-width                    |
-| --mod-textfield-width                        |

No alert changes

Improved metrics

Total package byte prevSize

71592

5.08%

Number of package files

16

14.29%

Lines of code

422

7.93%

No dependency changes