@spectrum-css/stepper - npm Package Compare versions

Comparing version 4.0.58 to 5.0.0-beta.0

metadata/mods.md

 | Modifiable Custom Properties                           |
 | ------------------------------------------------------ |
+| `--mod-infield-button-background-color`                |
+| `--mod-infield-button-border-color`                    |
+| `--mod-infield-button-border-color-quiet-disabled`     |
+| `--mod-infield-button-width-stacked`                   |
 | `--mod-stepper-animation-duration`                     |
-| `--mod-stepper-background-color`                       |
 | `--mod-stepper-border-color`                           |
-| `--mod-stepper-border-color-disabled`                  |
 | `--mod-stepper-border-color-focus`                     |
 | `--mod-stepper-border-color-focus-hover`               |
+| `--mod-stepper-border-color-focus-hover-invalid`       |
+| `--mod-stepper-border-color-focus-invalid`             |
 | `--mod-stepper-border-color-hover`                     |
-| `--mod-stepper-border-color-invalid-default`           |
-| `--mod-stepper-border-color-invalid-focus`             |
-| `--mod-stepper-border-color-invalid-focus-hover`       |
-| `--mod-stepper-border-color-invalid-hover`             |
-| `--mod-stepper-border-color-invalid-keyboard-focus`    |
+| `--mod-stepper-border-color-hover-invalid`             |
+| `--mod-stepper-border-color-invalid`                   |
 | `--mod-stepper-border-color-keyboard-focus`            |
-| `--mod-stepper-border-color-quiet-disabled`            |
+| `--mod-stepper-border-color-keyboard-focus-invalid`    |
 | `--mod-stepper-border-radius`                          |
 | `--mod-stepper-border-width`                           |
-| `--mod-stepper-button-background-color-default`        |
 | `--mod-stepper-button-background-color-focus`          |
-| `--mod-stepper-button-background-color-hover`          |
 | `--mod-stepper-button-background-color-keyboard-focus` |
-| `--mod-stepper-button-gap`                             |
-| `--mod-stepper-button-offset`                          |
 | `--mod-stepper-button-padding`                         |
 | `--mod-stepper-button-width`                           |
-| `--mod-stepper-buttons-height`                         |
+| `--mod-stepper-button-width-quiet`                     |
+| `--mod-stepper-buttons-background-color`               |
+| `--mod-stepper-buttons-border-style`                   |
+| `--mod-stepper-buttons-border-width`                   |
 | `--mod-stepper-focus-indicator-color`                  |
 | `--mod-stepper-focus-indicator-gap`                    |
 | `--mod-stepper-focus-indicator-width`                  |
-| `--mod-stepper-icon-nudge-start`                       |
-| `--mod-stepper-quiet-button-width`                     |
-| `--mod-stepper-quiet-width`                            |
+| `--mod-stepper-height`                                 |
+| `--mod-stepper-min-width-multiplier`                   |
 | `--mod-stepper-width`                                  |
+| `--mod-textfield-focus-indicator-color`                |

package.json

 {
   "name": "@spectrum-css/stepper",
-  "version": "4.0.58",
+  "version": "5.0.0-beta.0",
   "description": "The Spectrum CSS stepper component",
@@ -24,3 +24,3 @@ "license": "Apache-2.0",
     "@spectrum-css/textfield": ">=4",
-    "@spectrum-css/tokens": ">=10"
+    "@spectrum-css/tokens": ">=11"
   },
@@ -31,2 +31,3 @@ "devDependencies": {
     "@spectrum-css/icon": "^4.0.2",
+    "@spectrum-css/infieldbutton": "^3.0.12",
     "@spectrum-css/textfield": "^6.0.22",
@@ -39,3 +40,3 @@ "@spectrum-css/tokens": "^11.3.6",
   },
-  "gitHead": "0ced6d811614297c2aefe55f30cb2409fee11d7e"
+  "gitHead": "9db0144e816f742d58a4baa24959c5a5a694765b"
 }

stories/stepper.stories.js

@@ -10,2 +10,12 @@ // Import the component markup template
 	argTypes: {
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m", "l", "xl"],
+			control: "select"
+		},
 		isQuiet: {
@@ -21,7 +31,7 @@ name: "Quiet",
 		hideStepper: {
-			name: "Hide Stepper",
+			name: "Hide stepper",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
-				category: "State",
+				category: "Component",
 			},
@@ -49,3 +59,3 @@ control: "boolean",
 		isFocused: {
-			name: "Show Focus",
+			name: "Focused",
 			type: { name: "boolean" },
@@ -59,3 +69,3 @@ table: {
 		isKeyboardFocused: {
-			name: "Show keyboard focus",
+			name: "Keyboard focused",
 			type: { name: "boolean" },
@@ -71,2 +81,3 @@ table: {
 		rootClass: "spectrum-Stepper",
+		size: "m",
 		isQuiet: false,
@@ -77,2 +88,3 @@ isFocused: false,
 		isDisabled: false,
+		hideStepper: false
 	},
@@ -79,0 +91,0 @@ parameters: {

stories/template.js

@@ -7,9 +7,9 @@ import { html } from "lit";
 import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-Stepper",
+	size = "m",
 	isQuiet = false,
@@ -37,2 +37,17 @@ isFocused = false,
 
+	let iconSize = "75";
+	switch (size) {
+		case "s":
+			iconSize = "50";
+			break;
+		case "l":
+			iconSize = "100";
+			break;
+		case "xl":
+			iconSize = "200";
+			break;
+		default:
+			iconSize = "75";
+	}
+
 	return html`
@@ -42,2 +57,3 @@ <div
 				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				[`${rootClass}--quiet`]: isQuiet,
@@ -56,3 +72,4 @@ "is-focused": isFocused,
 				...globals,
-				placeholder: "1",
+				size,
+				type: "number",
 				min: "-2",
@@ -69,15 +86,19 @@ max: "2",
 				: html`<span class="${rootClass}-buttons">
-						${ActionButton({
+						${InfieldButton({
 							...globals,
-							customClasses: [`${rootClass}-stepUp`],
-							iconName: "ChevronUp75",
+							size,
+							customClasses: [`${rootClass}-button`],
+							iconName: `ChevronUp${iconSize}`,
 							isDisabled,
 							isQuiet,
+							position: "top"
 						})}
-						${ActionButton({
+						${InfieldButton({
 							...globals,
-							customClasses: [`${rootClass}-stepDown`],
-							iconName: "ChevronDown75",
+							size,
+							customClasses: [`${rootClass}-button`],
+							iconName: `ChevronDown${iconSize}`,
 							isDisabled,
 							isQuiet,
+							position: "bottom"
 						})}
@@ -84,0 +105,0 @@ </span>`}

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

149404

decreased by-20.64%

Dev dependency count

7

increased by16.67%

Number of package files

18

decreased by-5.26%

Lines of code

1331

decreased by-39.61%

Number of low quality alerts

1

increased byInfinity%

No dependency changes