@spectrum-css/textfield - npm Package Compare versions

Comparing version 7.2.0 to 7.2.1

CHANGELOG.md

 # Change Log
 
+## 7.2.1
+
+### 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/helptext@5.1.2
+
 ## 7.2.0
@@ -4,0 +13,0 @@

package.json

 {
 	"name": "@spectrum-css/textfield",
-	"version": "7.2.0",
+	"version": "7.2.1",
 	"description": "The Spectrum CSS textfield 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": {
@@ -30,6 +40,2 @@ "@spectrum-css/helptext": ">=5",
 	},
-	"devDependencies": {
-		"@spectrum-css/helptext": "workspace:^",
-		"@spectrum-css/tokens": "workspace:^"
-	},
 	"peerDependenciesMeta": {
@@ -40,2 +46,6 @@ "@spectrum-css/helptext": {
 	},
+	"devDependencies": {
+		"@spectrum-css/helptext": "workspace:^",
+		"@spectrum-css/tokens": "workspace:^"
+	},
 	"keywords": [
@@ -42,0 +52,0 @@ "spectrum",

stories/template.js

 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
-import { useArgs } from "@storybook/preview-api";
 import { html } from "lit";
@@ -13,2 +13,43 @@ import { classMap } from "lit/directives/class-map.js";
 
+/**
+ * @typedef API
+ * @property {string} [rootClass="spectrum-Textfield"]
+ * @property {string} [size="m"]
+ * @property {string[]} [customClasses=[]]
+ * @property {string[]} [customInputClasses=[]]
+ * @property {string[]} [customIconClasses=[]]
+ * @property {string[]} [customProgressCircleClasses=[]]
+ * @property {Record<string, string>} [customStyles={}]
+ * @property {boolean} [isInvalid=false]
+ * @property {boolean} [isValid=false]
+ * @property {boolean} [multiline=false]
+ * @property {boolean} [grows=false]
+ * @property {boolean} [isQuiet=false]
+ * @property {boolean} [isFocused=false]
+ * @property {boolean} [isDisabled=false]
+ * @property {boolean} [isRequired=false]
+ * @property {boolean} [isReadOnly=false]
+ * @property {boolean} [isKeyboardFocused=false]
+ * @property {boolean} [isLoading=false]
+ * @property {boolean} [displayLabel=false]
+ * @property {"top"|"side"} [labelPosition="top"]
+ * @property {string} [labelText]
+ * @property {string} [iconName]
+ * @property {string} [iconSet]
+ * @property {string} [pattern]
+ * @property {string|undefined} [placeholder]
+ * @property {string|undefined} [name]
+ * @property {string|undefined} [id]
+ * @property {HTMLInputElement[value]|HTMLTextAreaElement[value]} [value]
+ * @property {HTMLInputElement[type]} [type="text"]
+ * @property {boolean} [autocomplete=true]
+ * @property {Function} [onclick]
+ */
+
+/**
+ *
+ * @param {API} args
+ * @param {import('@storybook/types').StoryContext<import('@storybook/web-components').WebComponentsRenderer, API>} context
+ * @returns {import('lit').TemplateResult}
+ */
 export const Template = ({
@@ -40,4 +81,4 @@ rootClass = "spectrum-Textfield",
 	name,
-	id,
-	value,
+	id = getRandomId("textfield"),
+	value = "",
 	type = "text",
@@ -47,6 +88,6 @@ autocomplete = true,
 	customStyles = {},
-	...globals
-}, context) => {
-	const [, updateArgs] = useArgs();
+} = {}, context = {}) => {
+	const { updateArgs } = context;
 
+	// Override icon name and set if the field is invalid or valid
 	if (isInvalid) {
@@ -79,15 +120,15 @@ iconName = "Alert";
 			})}
-			style=${ifDefined(styleMap(customStyles))}
+			style=${styleMap(customStyles)}
 			@click=${onclick}
-			@focusin=${(e) => {
-				const focusClass = e.target?.classList?.contains("focus-ring")
-					? { isKeyboardFocused: true }
-					: { isFocused: true };
-				updateArgs(focusClass);
+			@focusin=${function() {
+				updateArgs({
+					isFocused: true,
+					isKeyboardFocused: true
+				});
 			}}
-			@focusout=${(e) => {
-				const focusClass = e.target?.classList?.contains("focus-ring")
-					? { isKeyboardFocused: false }
-					: { isFocused: false };
-				updateArgs(focusClass);
+			@focusout=${function() {
+				updateArgs({
+					isFocused: false,
+					isKeyboardFocused: false
+				});
 			}}
@@ -97,3 +138,2 @@ id=${ifDefined(id)}
 		${when(displayLabel, () => FieldLabel({
-			...globals,
 			size,
@@ -103,3 +143,2 @@ label: labelText,
 		${when(iconName, () => Icon({
-			...globals,
 			size,
@@ -120,7 +159,7 @@ iconName,
 				id=${ifDefined(id ? `${id}-input` : undefined)}
-				.value=${ifDefined(value)}
-				autocomplete=${autocomplete ? undefined : "off"}
+				.value=${value}
+				autocomplete=${ifDefined(autocomplete ? undefined : "off")}
 				?required=${isRequired}
 				?disabled=${isDisabled}
-				?readonly=${ifDefined(isReadOnly)}
+				?readonly=${isReadOnly}
 				pattern=${ifDefined(pattern)}
@@ -137,7 +176,7 @@ class=${classMap({
 				id=${ifDefined(id ? `${id}-input` : undefined)}
-				.value=${ifDefined(value)}
-				autocomplete=${autocomplete ? undefined : "off"}
+				.value=${value}
+				autocomplete=${ifDefined(autocomplete ? undefined : "off")}
 				?required=${isRequired}
 				?disabled=${isDisabled}
-				?readonly=${ifDefined(isReadOnly)}
+				?readonly=${isReadOnly}
 				pattern=${ifDefined(pattern)}
@@ -144,0 +183,0 @@ class=${classMap({

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

Improved metrics

Total package byte prevSize

241406

increased by24.72%

Number of package files

16

increased by33.33%

Lines of code

2467

increased by13.01%

No dependency changes