@purpurds/text-field 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/text-field",
-  "version": "5.7.0",
+  "version": "5.8.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/button": "5.7.0",
-    "@purpurds/field-error-text": "5.7.0",
-    "@purpurds/icon": "5.7.0",
-    "@purpurds/field-helper-text": "5.7.0",
-    "@purpurds/tokens": "5.7.0",
-    "@purpurds/label": "5.7.0",
-    "@purpurds/spinner": "5.7.0"
+    "@purpurds/button": "5.8.0",
+    "@purpurds/field-helper-text": "5.8.0",
+    "@purpurds/label": "5.8.0",
+    "@purpurds/field-error-text": "5.8.0",
+    "@purpurds/spinner": "5.8.0",
+    "@purpurds/icon": "5.8.0",
+    "@purpurds/tokens": "5.8.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/text-field.module.scss

@@ -51,6 +51,10 @@
       background: var(--purpur-color-background-interactive-read-only);
     }
 
+    &--has-clear-button {
+      padding-right: var(--purpur-spacing-25);
+    }
+
     &--end-adornment {
       padding-right: var(--purpur-spacing-150);
 
@@ -59,10 +63,6 @@
       }
     }
 
-    &--has-clear-button {
-      padding-right: var(--purpur-spacing-25);
-    }
-
     &--start-adornment {
       padding-left: var(--purpur-spacing-150);
 
@@ -87,7 +87,7 @@
     background: transparent;
 
     &:hover {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-sm);
         border-color: var(--purpur-color-border-interactive-subtle-hover);
       }
@@ -95,7 +95,7 @@
 
     &:active:not(:disabled):not(:read-only),
     &:focus:not(:disabled):not(:read-only) {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
         outline-offset: calc(var(--purpur-spacing-10) * 2);
         border-width: var(--purpur-border-width-xs);
@@ -106,7 +106,7 @@
     &:disabled {
       color: var(--purpur-color-text-weak);
 
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-xs);
         border-color: var(--purpur-color-border-medium);
       }
@@ -115,12 +115,12 @@
     &:read-only:not(:disabled) {
       color: var(--purpur-color-text-default);
 
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-width: var(--purpur-border-width-xs);
       }
 
       &:not(#{$inputRoot}--valid):not(#{$inputRoot}--error) {
-        ~ #{$root}__frame {
+        ~#{$root}__frame {
           border-color: var(--purpur-color-border-medium);
         }
       }
@@ -133,13 +133,13 @@
     }
 
     &#{$inputRoot}--valid {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-color: var(--purpur-color-border-status-success);
       }
     }
 
     &#{$inputRoot}--error:not(:hover) {
-      ~ #{$root}__frame {
+      ~#{$root}__frame {
         border-color: var(--purpur-color-border-status-error);
       }
     }
@@ -154,4 +154,4 @@
   &__valid-icon {
     color: var(--purpur-color-text-status-success-medium);
   }
-}
+}

package/src/text-field.tsx

@@ -149,7 +149,7 @@ const TextFieldComponent = (
     internalRef.current?.focus();
   };
 
-  const endAdornments: ReactNode[] = [
+  const localEndAdornments: ReactNode[] = [
     loading && (
       <Spinner
         key="spinner"
@@ -158,13 +158,6 @@ const TextFieldComponent = (
         data-testid={getTestId("spinner")}
       />
     ),
-    isValid && (
-      <IconCheckCircleFilled
-        key="valid-icon"
-        data-testid={getTestId("valid-icon")}
-        className={cx(`${rootClassName}__valid-icon`)}
-      />
-    ),
     hasClearButton && (
       <Button
         key="clear-button"
@@ -178,14 +171,21 @@ const TextFieldComponent = (
         <IconClose size="xs" />
       </Button>
     ),
-    endAdornment,
+    isValid && (
+      <IconCheckCircleFilled
+        key="valid-icon"
+        data-testid={getTestId("valid-icon")}
+        className={cx(`${rootClassName}__valid-icon`)}
+      />
+    ),
   ].filter((adornment) => !!adornment);
 
   const inputContainerClassnames = cx([
     `${rootClassName}__input-container`,
     {
       [`${rootClassName}__input-container--start-adornment`]: startAdornments.length,
-      [`${rootClassName}__input-container--end-adornment`]: endAdornments.length,
+      [`${rootClassName}__input-container--end-adornment`]:
+        localEndAdornments.length || endAdornment,
       [`${rootClassName}__input-container--disabled`]: inputProps.disabled,
       [`${rootClassName}__input-container--has-clear-button`]: hasClearButton,
       [`${rootClassName}__input-container--readonly`]: inputProps.readOnly && !inputProps.disabled,
@@ -230,12 +230,13 @@ const TextFieldComponent = (
             ])}
           />
           <div className={cx(`${rootClassName}__frame`)} />
-          {!!endAdornments.length && (
+          {(!!localEndAdornments.length || endAdornment) && (
             <div
               data-testid={getTestId("end-adornments")}
               className={cx(`${rootClassName}__adornment-container`)}
             >
-              {endAdornments}
+              {localEndAdornments}
+              {endAdornment}
             </div>
           )}
         </div>