@purpurds/text-field 5.23.0 → 5.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "5.23.0",
+  "version": "5.24.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/text-field.cjs.js",
   "types": "./dist/text-field.d.ts",
@@ -15,13 +15,13 @@
   "source": "src/text-field.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/field-error-text": "5.23.0",
-    "@purpurds/icon": "5.23.0",
-    "@purpurds/field-helper-text": "5.23.0",
-    "@purpurds/button": "5.23.0",
-    "@purpurds/label": "5.23.0",
-    "@purpurds/spinner": "5.23.0",
-    "@purpurds/tokens": "5.23.0"
+    "@purpurds/button": "5.24.0",
+    "@purpurds/icon": "5.24.0",
+    "@purpurds/label": "5.24.0",
+    "@purpurds/field-helper-text": "5.24.0",
+    "@purpurds/tokens": "5.24.0",
+    "@purpurds/field-error-text": "5.24.0",
+    "@purpurds/spinner": "5.24.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/text-field.stories.tsx

@@ -51,6 +51,7 @@ const meta = {
     },
     startAdornment: { table: { disable: true } },
     endAdornment: { table: { disable: true } },
+    beforeField: { table: { disable: true } },
     afterField: { table: { disable: true } },
   },
 

package/src/text-field.tsx

@@ -24,6 +24,12 @@ type TextFieldBaseProps = {
   ["data-testid"]?: string;
   className?: string;
 
+  /**
+   * Use to display e.g. a button before the text field.
+   *
+   * _NOTE: Should ideally only be used by other purpur components!_
+   */
+  beforeField?: ReactNode;
   /**
    * Use to display e.g. a button after the text field.
    *
@@ -107,6 +113,7 @@ const TextFieldComponent = (
     ["data-testid"]: dataTestId,
     className,
     clearButtonAllyLabel,
+    beforeField,
     afterField,
     endAdornment,
     errorText,
@@ -208,6 +215,7 @@ const TextFieldComponent = (
         </Label>
       )}
       <div className={cx(`${rootClassName}__field-row`)}>
+        {!!beforeField && beforeField}
         <div className={inputContainerClassnames}>
           {!!startAdornments.length && (
             <div