@spectrum-css/stepper - npm Package Compare versions

Comparing version 7.0.0-s2-foundations.14 to 7.0.0-s2-foundations.15

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.15
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+  Typography increases specificity for the t-shirt sizing.
+
+  Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+- Updated dependencies [[`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0)]:
+  - @spectrum-css/actionbutton@7.0.0-s2-foundations.19
+
 ## 7.0.0-s2-foundations.14
@@ -221,2 +234,20 @@
 
+## 6.2.0
+
+### Minor Changes
+
+- [#3103](https://github.com/adobe/spectrum-css/pull/3103) [`cf61a13`](https://github.com/adobe/spectrum-css/commit/cf61a130162d181f82163ecbba3f9cc197f27773) Thanks [@cdransf](https://github.com/cdransf)! - This corrects the border color for the stepper component infield buttons by setting the border color property to Highlight when the parent stepper component is invalid.
+
+### Patch Changes
+
+- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
+
+  Sort keys in the package.json assets.
+
+- Updated dependencies [[`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2)]:
+  - @spectrum-css/infieldbutton@5.1.3
+  - @spectrum-css/actionbutton@6.1.3
+  - @spectrum-css/textfield@7.2.3
+  - @spectrum-css/icon@7.1.4
+
 ## 6.1.4
@@ -223,0 +254,0 @@

metadata/metadata.json

@@ -5,70 +5,31 @@ {
     ".spectrum-Stepper",
-    ".spectrum-Stepper .spectrum-Stepper-input",
-    ".spectrum-Stepper-buttons",
-    ".spectrum-Stepper.hide-stepper .spectrum-Stepper-input",
+    ".spectrum-Stepper .spectrum-Stepper-buttons",
     ".spectrum-Stepper.is-disabled",
-    ".spectrum-Stepper.is-disabled.is-invalid",
-    ".spectrum-Stepper.is-focused",
-    ".spectrum-Stepper.is-focused:hover",
-    ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-input",
-    ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-input",
+    ".spectrum-Stepper.is-focused:not(.is-disabled)",
+    ".spectrum-Stepper.is-focused:not(.is-disabled):hover",
     ".spectrum-Stepper.is-invalid",
-    ".spectrum-Stepper.is-invalid.is-focused",
-    ".spectrum-Stepper.is-invalid.is-focused:hover",
-    ".spectrum-Stepper.is-invalid.is-keyboardFocused",
-    ".spectrum-Stepper.is-invalid:focus",
-    ".spectrum-Stepper.is-invalid:focus-visible",
-    ".spectrum-Stepper.is-invalid:focus:hover",
-    ".spectrum-Stepper.is-invalid:hover",
-    ".spectrum-Stepper.is-keyboardFocused",
     ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)",
-    ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-input",
     ".spectrum-Stepper.spectrum-Stepper--quiet",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-button",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-buttons",
-    ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-input",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-disabled",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-disabled.is-invalid",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused",
     ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
     ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):after",
-    ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:after",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:focus",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:focus:hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
-    ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover .spectrum-Stepper-buttons",
+    ".spectrum-Stepper.spectrum-Stepper--quiet:focus-visible:not(.is-disabled)",
+    ".spectrum-Stepper.spectrum-Stepper--quiet:focus-visible:not(.is-disabled):after",
     ".spectrum-Stepper.spectrum-Stepper--sizeL",
+    ".spectrum-Stepper.spectrum-Stepper--sizeM",
     ".spectrum-Stepper.spectrum-Stepper--sizeS",
     ".spectrum-Stepper.spectrum-Stepper--sizeXL",
+    ".spectrum-Stepper:after",
     ".spectrum-Stepper:before",
-    ".spectrum-Stepper:focus",
-    ".spectrum-Stepper:focus-visible",
     ".spectrum-Stepper:focus-visible:not(.is-disabled)",
-    ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:focus:hover",
-    ".spectrum-Stepper:focus:hover .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus:hover .spectrum-Stepper-input",
-    ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input",
+    ".spectrum-Stepper:focus:not(.is-disabled)",
+    ".spectrum-Stepper:focus:not(.is-disabled):hover",
     ".spectrum-Stepper:hover:not(.is-disabled)",
-    ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons",
-    ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input",
-    ".spectrum-Stepper:hover:not(.is-invalid)"
+    ".spectrum-Stepper:not(.spectrum-Stepper--quiet) .spectrum-Stepper-button:first-child",
+    ".spectrum-Stepper:not(.spectrum-Stepper--quiet) .spectrum-Stepper-button:last-child"
   ],
   "modifiers": [
-    "--mod-stepper-animation-duration",
+    "--mod-stepper-background-color",
     "--mod-stepper-border-color",
     "--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",
@@ -79,16 +40,6 @@ "--mod-stepper-border-color-hover-invalid",
     "--mod-stepper-border-color-keyboard-focus-invalid",
-    "--mod-stepper-border-color-quiet",
     "--mod-stepper-border-radius",
     "--mod-stepper-border-width",
-    "--mod-stepper-button-border-width",
     "--mod-stepper-button-width",
     "--mod-stepper-button-width-quiet",
-    "--mod-stepper-buttons-background-color",
-    "--mod-stepper-buttons-border-color",
-    "--mod-stepper-buttons-border-color-focus",
-    "--mod-stepper-buttons-border-color-focus-hover",
-    "--mod-stepper-buttons-border-color-hover",
-    "--mod-stepper-buttons-border-color-keyboard-focus",
-    "--mod-stepper-buttons-border-style",
-    "--mod-stepper-buttons-border-width",
     "--mod-stepper-focus-indicator-color",
@@ -103,3 +54,7 @@ "--mod-stepper-focus-indicator-gap",
     "--spectrum-stepper-animation-duration",
+    "--spectrum-stepper-background-color",
+    "--spectrum-stepper-background-color-disabled",
+    "--spectrum-stepper-background-color-quiet",
     "--spectrum-stepper-border-color",
+    "--spectrum-stepper-border-color-disabled",
     "--spectrum-stepper-border-color-focus",
@@ -110,26 +65,12 @@ "--spectrum-stepper-border-color-focus-hover",
     "--spectrum-stepper-border-color-hover",
+    "--spectrum-stepper-border-color-hover-invalid",
     "--spectrum-stepper-border-color-invalid",
     "--spectrum-stepper-border-color-keyboard-focus",
     "--spectrum-stepper-border-color-keyboard-focus-invalid",
+    "--spectrum-stepper-border-color-quiet-disabled",
     "--spectrum-stepper-border-radius",
+    "--spectrum-stepper-border-radius-quiet",
     "--spectrum-stepper-border-width",
-    "--spectrum-stepper-button-background-color-focus",
-    "--spectrum-stepper-button-background-color-keyboard-focus",
-    "--spectrum-stepper-button-border-radius-reset",
-    "--spectrum-stepper-button-border-width",
-    "--spectrum-stepper-button-offset",
-    "--spectrum-stepper-button-padding",
+    "--spectrum-stepper-border-width-disabled",
     "--spectrum-stepper-button-width",
-    "--spectrum-stepper-buttons-background-color",
-    "--spectrum-stepper-buttons-background-color-disabled",
-    "--spectrum-stepper-buttons-border-color",
-    "--spectrum-stepper-buttons-border-color-disabled",
-    "--spectrum-stepper-buttons-border-color-focus",
-    "--spectrum-stepper-buttons-border-color-focus-hover",
-    "--spectrum-stepper-buttons-border-color-hover",
-    "--spectrum-stepper-buttons-border-color-keyboard-focus",
-    "--spectrum-stepper-buttons-border-color-quiet-disabled",
-    "--spectrum-stepper-buttons-border-style",
-    "--spectrum-stepper-buttons-border-width",
-    "--spectrum-stepper-buttons-border-width-disabled",
     "--spectrum-stepper-focus-indicator-color",
@@ -150,3 +91,2 @@ "--spectrum-stepper-focus-indicator-gap",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
@@ -156,5 +96,2 @@ "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
     "--spectrum-gray-500",
@@ -164,3 +101,2 @@ "--spectrum-gray-600",
     "--spectrum-gray-900",
-    "--spectrum-in-field-button-edge-to-fill",
     "--spectrum-in-field-button-width-stacked-extra-large",
@@ -181,11 +117,22 @@ "--spectrum-in-field-button-width-stacked-large",
     "--mod-infield-button-border-color",
+    "--mod-infield-button-border-color-hover",
+    "--mod-infield-button-border-color-quiet",
+    "--mod-infield-button-border-color-quiet-disabled",
     "--mod-infield-button-border-width",
     "--mod-infield-button-fill-justify-content",
+    "--mod-infield-button-fill-padding",
     "--mod-infield-button-stacked-bottom-border-block-end-width",
-    "--mod-infield-button-stacked-bottom-border-radius-end-end",
-    "--mod-infield-button-stacked-bottom-border-radius-end-start",
+    "--mod-infield-button-stacked-fill-padding-inner",
     "--mod-infield-button-width-stacked",
     "--mod-textfield-border-color",
-    "--mod-textfield-border-width",
-    "--mod-textfield-button-border-color",
+    "--mod-textfield-border-color-disabled",
+    "--mod-textfield-border-color-focus",
+    "--mod-textfield-border-color-focus-hover",
+    "--mod-textfield-border-color-hover",
+    "--mod-textfield-border-color-invalid-default",
+    "--mod-textfield-border-color-invalid-focus",
+    "--mod-textfield-border-color-invalid-focus-hover",
+    "--mod-textfield-border-color-invalid-hover",
+    "--mod-textfield-border-color-invalid-keyboard-focus",
+    "--mod-textfield-border-color-keyboard-focus",
     "--mod-textfield-focus-indicator-color",
@@ -195,2 +142,4 @@ "--mod-textfield-icon-spacing-inline-start-invalid"
   "high-contrast": [
+    "--highcontrast-infield-button-border-color",
+    "--highcontrast-stepper-background-color",
     "--highcontrast-stepper-border-color",
@@ -201,10 +150,5 @@ "--highcontrast-stepper-border-color-focus",
     "--highcontrast-stepper-border-color-keyboard-focus",
-    "--highcontrast-stepper-button-background-color-default",
-    "--highcontrast-stepper-button-background-color-focus",
-    "--highcontrast-stepper-button-background-color-hover",
-    "--highcontrast-stepper-button-background-color-keyboard-focus",
-    "--highcontrast-stepper-buttons-background-color",
-    "--highcontrast-stepper-buttons-border-width",
+    "--highcontrast-stepper-border-width",
     "--highcontrast-stepper-focus-indicator-color"
   ]
 }

metadata/mods.md

 | Modifiable custom properties                        |
 | --------------------------------------------------- |
-| `--mod-stepper-animation-duration`                  |
+| `--mod-stepper-background-color`                    |
 | `--mod-stepper-border-color`                        |
 | `--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`                  |
@@ -14,16 +12,6 @@ | `--mod-stepper-border-color-hover-invalid`          |
 | `--mod-stepper-border-color-keyboard-focus-invalid` |
-| `--mod-stepper-border-color-quiet`                  |
 | `--mod-stepper-border-radius`                       |
 | `--mod-stepper-border-width`                        |
-| `--mod-stepper-button-border-width`                 |
 | `--mod-stepper-button-width`                        |
 | `--mod-stepper-button-width-quiet`                  |
-| `--mod-stepper-buttons-background-color`            |
-| `--mod-stepper-buttons-border-color`                |
-| `--mod-stepper-buttons-border-color-focus`          |
-| `--mod-stepper-buttons-border-color-focus-hover`    |
-| `--mod-stepper-buttons-border-color-hover`          |
-| `--mod-stepper-buttons-border-color-keyboard-focus` |
-| `--mod-stepper-buttons-border-style`                |
-| `--mod-stepper-buttons-border-width`                |
 | `--mod-stepper-focus-indicator-color`               |
@@ -30,0 +18,0 @@ | `--mod-stepper-focus-indicator-gap`                 |

package.json

 {
 	"name": "@spectrum-css/stepper",
-	"version": "7.0.0-s2-foundations.14",
+	"version": "7.0.0-s2-foundations.15",
 	"description": "The Spectrum CSS stepper component",
@@ -18,3 +18,4 @@ "license": "Apache-2.0",
 		".": "./dist/index.css",
-		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
@@ -27,5 +28,6 @@ "./index.css": "./dist/index.css",
 	},
+	"main": "dist/index.css",
 	"files": [
 		"dist/*",
-		"CHANGELOG.md",
+		"*.md",
 		"package.json",
@@ -35,3 +37,2 @@ "stories/*",
 	],
-	"main": "dist/index.css",
 	"peerDependencies": {
@@ -38,0 +39,0 @@ "@spectrum-css/actionbutton": ">=6",

stories/stepper.stories.js

@@ -0,7 +1,7 @@
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
-import { Sizes } from "@spectrum-css/preview/decorators";
+import { isDisabled, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { StepperGroup } from "./stepper.test.js";
-import { Template, DisabledVariantsGroup, AllDefaultVariantsGroup } from "./template";
+import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template";
 
@@ -28,3 +28,3 @@ /**
 		isInvalid,
-		isFocused,
+		isHovered,
 		isKeyboardFocused,
@@ -36,3 +36,3 @@ },
 		isQuiet: false,
-		isFocused: false,
+		isHovered: false,
 		isKeyboardFocused: false,
@@ -39,0 +39,0 @@ isInvalid: false,

stories/stepper.test.js

@@ -15,8 +15,17 @@ import { Variants } from "@spectrum-css/preview/decorators";
 		{
-			testHeading: "Hide stepper",
-			hideStepper: true,
+			testHeading: "Invalid",
+			isInvalid: true,
 		},
+		{
+			testHeading: "Quiet + invalid",
+			isQuiet: true,
+			isInvalid: true,
+		},
 	],
 	stateData: [
 		{
+			testHeading: "Hide stepper",
+			hideStepper: true,
+		},
+		{
 			testHeading: "Disabled",
@@ -26,4 +35,4 @@ isDisabled: true,
 		{
-			testHeading: "Focused",
-			isFocused: true,
+			testHeading: "Hovered",
+			isHovered: true,
 		},
@@ -35,28 +44,7 @@ {
 		{
-			testHeading: "Invalid",
-			isInvalid: true,
-		},
-		{
-			testHeading: "Invalid + focused",
-			isInvalid: true,
-			isFocused: true,
-		},
-		{
-			testHeading: "Invalid + keyboard-focused",
-			isInvalid: true,
-			isKeyboardFocused: true,
-		},
-		{
-			testHeading: "Invalid + disabled + focused",
-			isInvalid: true,
+			testHeading: "Disabled + hovered",
 			isDisabled: true,
-			isFocused: true,
+			isHovered: true,
 		},
-		{
-			testHeading: "Invalid + disabled + keyboard-focused",
-			isInvalid: true,
-			isDisabled: true,
-			isKeyboardFocused: true,
-		},
 	]
 });

stories/template.js

@@ -19,3 +19,3 @@ import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js";
 	isQuiet = false,
-	isFocused = false,
+	isHovered = false,
 	isKeyboardFocused = false,
@@ -50,7 +50,7 @@ isInvalid = false,
 				[`${rootClass}--quiet`]: isQuiet,
-				"is-focused": isFocused,
+				"is-hover": isHovered,
 				"is-keyboardFocused": isKeyboardFocused,
 				"is-invalid": isInvalid,
 				"is-disabled": isDisabled,
-				"hide-stepper": hideStepper,
+				[`${rootClass}--noButtons`]: hideStepper,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -57,0 +57,0 @@ })}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

140487

decreased by-10.84%

Lines of code

1011

decreased by-22.11%

No dependency changes