@spectrum-css/pagination - npm Package Compare versions

Comparing version 6.0.50 to 7.0.0

CHANGELOG.md

@@ -6,2 +6,48 @@ # Change Log
 
+<a name="7.0.0"></a>
+#7.0.0
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/pagination@6.0.50...@spectrum-css/pagination@7.0.0)
+
+\*feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
+
+    	###
+    	🛑 BREAKING CHANGES
+
+    		*
+    		Replaces DNA tokens with Spectrum tokens.
+
+Update build to use Spectrum tokens.
+Remove skin.css and incorporate its CSS into index.css.
+
+refactor(pagination): styles migration to core tokens
+
+Migration of stylesheet to use Spectrum tokens.
+
+refactor(pagination): remove unused pagebutton class
+
+Remove CSS for .spectrum-Pagination-pageButton which is not used
+anywhere in the repo. This removes the need for additions to the custom
+tokens.
+
+fix(pagination): correct direction of arrows for right-to-left
+
+When viewing in RTL, the arrows were both facing in the same direction.
+This was because they were both setting the same rotation, and one of
+the arrows icons already uses a 180 degree rotation.
+
+fix: counter text sizing and t-shirt sizing docs
+
+Disable t-shirt size in Storybook until it is fully supported. To be
+supported it will need font sizes for the counter text and probably
+changes to the inline margins.
+
+For the counter text, removes spectrum-Body--secondary which doesn't
+seem to exist anymore, and applies the appropriate font size (14px
+at medium) and line-height tokens.
+
+docs(pagination): add button style pagination to storybook
+
+Add the "Button style" version of Pagination from the docs to Storybook.
+
 <a name="6.0.50"></a>
@@ -8,0 +54,0 @@ ##6.0.50

gulpfile.js

@@ -1,1 +0,1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require('@spectrum-css/component-builder-simple');

package.json

 {
   "name": "@spectrum-css/pagination",
-  "version": "6.0.50",
-  "description": "The Spectrum CSS pagination component",
+  "version": "7.0.0",
+  "description": "The Spectrum CSS Pagination component",
   "license": "Apache-2.0",
@@ -26,12 +26,12 @@ "author": "Adobe",
     "@spectrum-css/textfield": ">=5",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=11"
   },
   "devDependencies": {
-    "@spectrum-css/actionbutton": "^5.0.11",
-    "@spectrum-css/button": "^11.0.12",
-    "@spectrum-css/component-builder": "^4.0.14",
+    "@spectrum-css/actionbutton": "^5.0.12",
+    "@spectrum-css/button": "^11.0.13",
+    "@spectrum-css/component-builder-simple": "^2.0.17",
     "@spectrum-css/icon": "^4.0.3",
-    "@spectrum-css/splitbutton": "^6.0.12",
-    "@spectrum-css/textfield": "^6.0.24",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/splitbutton": "^6.0.13",
+    "@spectrum-css/textfield": "^6.0.25",
+    "@spectrum-css/tokens": "^12.0.0",
     "gulp": "^4.0.0"
@@ -42,3 +42,3 @@ },
   },
-  "gitHead": "b3e5bc8ac403668770788c54eecb65382f2911ea"
+  "gitHead": "db5d42ecb6d0ba5fca5b7511f4cc9d8e58e637ae"
 }

stories/pagination.stories.js

@@ -16,2 +16,3 @@ // Import the component markup template
 			table: {
+				disable: true,
 				type: { summary: "string" },
@@ -71,1 +72,7 @@ category: "Component",
 };
+
+export const Button = Template.bind({});
+Button.storyName = "Button style";
+Button.args = {
+	variant: "button",
+};

stories/template.js

@@ -5,8 +5,8 @@ import { html } from "lit";
 
+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 ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as SplitButton } from "@spectrum-css/splitbutton/stories/template.js";
 import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 
 import "../index.css";
-import "../skin.css";
 
@@ -38,8 +38,7 @@ // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
 				${Textfield({
+					size,
 					value: "1",
 					customClasses: [`${rootClass}-textfield`],
 				})}
-				<span class="spectrum-Body--secondary ${rootClass}-counter"
-					>of 89 pages</span
-				>
+				<span class="${rootClass}-counter">of 89 pages</span>
 				${ActionButton({
@@ -53,2 +52,12 @@ size,
 		`;
+	} else if (variant == "button") {
+		return SplitButton({
+			position: "left",
+			variant: "accent",
+			label: "Next",
+			iconName: "ChevronLeft100",
+			labelIconName: "ChevronRight100",
+			customFirstButtonClasses: ["spectrum-Pagination-prevButton"],
+			customLastButtonClasses: ["spectrum-Pagination-nextButton"]
+		});
 	}
@@ -79,2 +88,3 @@ return html`
 							...item,
+							size,
 							isQuiet: true,
@@ -81,0 +91,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

70005

increased by14.99%

Number of package files

20

increased by42.86%

Lines of code

379

increased by37.32%

No dependency changes