@sats-group/ui-lib 75.10.0 → 76.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.10.0",
+  "version": "76.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/text-input/text-input.scss

@@ -7,53 +7,72 @@
 .text-input {
   $block: &;
   $line-height: 1;
-  $icon-width: 24px;
-  $icon-spacing: spacing.$xs;
   $vertical-padding-xs: spacing.$xs;
   $vertical-padding-s: spacing.$s;
 
   &--variant-small {
-    #{$block}__input {
+    #{$block}__input-wrapper {
       padding: $vertical-padding-xs spacing.$s;
-    }
-
-    #{$block}__icon {
-      bottom: $vertical-padding-xs;
+      gap: spacing.$s;
     }
   }
 
   &--variant-large {
-    #{$block}__input {
+    #{$block}__input-wrapper {
       padding: $vertical-padding-s spacing.$m;
-    }
-
-    #{$block}__icon {
-      bottom: $vertical-padding-s;
+      gap: spacing.$m;
     }
   }
 
   &__wrapper {
     position: relative;
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
+    gap: spacing.$xxs;
   }
 
-  &__input {
-    @include font-sizes.normal(input);
+  &__length-counter {
+    color: light.$on-background-primary-alternate;
+  }
+
+  &__label-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__input-wrapper {
     border: 1px solid light.$ge-divider-default;
     border-radius: corner-radius.$s;
-    line-height: $line-height;
+    display: flex;
+    align-items: center;
     background-color: light.$surface-primary-default;
     color: light.$on-surface-primary-default;
     width: 100%;
     box-sizing: border-box;
 
-    #{$block}--icon & {
-      padding-left: $icon-spacing * 2 + $icon-width;
+    &:focus-within {
+      border-color: light.$ge-border-focused;
+      outline: none;
     }
 
+    @media (hover: hover) {
+      &:hover {
+        background-color: light.$surface-primary-hover;
+        cursor: text;
+      }
+    }
+  }
+
+  &__input {
+    @include font-sizes.normal(input);
+    line-height: $line-height;
+    width: inherit;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+
     &:focus {
-      border-color: light.$ge-border-focused;
+      border-color: none;
       outline: none;
     }
 
@@ -88,96 +107,35 @@
     }
   }
 
-  &__icon {
-    color: light.$on-surface-primary-disabled;
-    left: $icon-spacing;
-    height: $icon-width;
-    pointer-events: none;
-    position: absolute;
-    width: $icon-width;
-
-    svg {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  &--moving-label {
-    #{$block}__input {
-      padding: spacing.$s spacing.$m;
-    }
-
-    #{$block}__label {
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      margin: 0;
-      padding: 0 6px;
-      transform: translate(10px, spacing.$s);
-      transition: transform 0.1s cubic-bezier(0.22, 0.57, 0.25, 1);
-      transform-origin: left center;
-      max-width: calc(100% - 25px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: $line-height;
-
-      @media (prefers-reduced-motion) {
-        transition: transform 0s;
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        z-index: -1;
-        left: 0;
-        bottom: 0;
-        height: 50%;
-        width: 100%;
-        background-color: light.$surface-primary-default;
-      }
-    }
-
-    &.text-input--moving-label {
-      &.text-input--theme-dark {
-        #{$block}__label {
-          color: light.$on-fixed-surface-primary-default;
-        }
-
-        #{$block}__label {
-          &::before {
-            content: '';
-            background-color: light.$fixed-surface-primary-default;
-          }
-        }
-      }
-    }
+  &__help,
+  &__error {
+    display: flex;
+    gap: spacing.$xs;
 
-    & #{$block}__input:focus,
-    & #{$block}__input:not(:placeholder-shown) {
-      ~ #{$block}__label {
-        transform: translate(10px, -50%) scale(0.8);
-      }
+    > * {
+      align-self: flex-start;
     }
   }
 
   &__help {
-    display: flex;
-    align-items: center;
-    gap: spacing.$xs;
-    margin-top: spacing.$xxs;
-    color: light.$on-background-primary-disabled;
+    color: light.$on-surface-primary-alternate;
   }
 
   &__error {
-    display: flex;
-    align-items: center;
-    gap: spacing.$xs;
-    margin-top: spacing.$xxs;
     color: light.$on-surface-error;
   }
 
+  &__help-icon,
+  &__error-icon,
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__help-icon,
+  &__error-icon {
+    height: 16px; // Matches icon height. Otherwise, the auto height acts weirdly, by making the wrapper too tall.
+  }
+
   &__asterisk {
     color: light.$on-surface-featured;
     margin-left: spacing.$xs;
@@ -189,6 +147,28 @@
     #{$block}__help {
       color: light.$on-background-primary-disabled;
     }
+
+    #{$block}__input-wrapper {
+      background-color: light.$surface-primary-disabled;
+      border-color: light.$surface-primary-disabled;
+      cursor: auto;
+    }
+  }
+
+  &--error {
+    #{$block}__icon {
+      color: light.$on-surface-error;
+    }
+
+    #{$block}__input-wrapper {
+      outline: 2px solid light.$ge-signal-error;
+      outline-offset: -2px;
+
+      &:focus {
+        outline: 2px solid light.$ge-signal-error;
+        outline-offset: -2px;
+      }
+    }
   }
 
   &--theme-dark {
@@ -200,19 +180,25 @@
       color: light.$on-fixed-background-primary-default;
     }
 
+    #{$block}__length-counter,
     #{$block}__help {
-      color: light.$on-fixed-background-primary-disabled;
+      color: light.$on-background-primary-alternate;
     }
 
     #{$block}__input {
+      background-color: transparent;
+    }
+
+    #{$block}__input-wrapper {
       background-color: light.$fixed-surface-secondary-default;
       border-color: light.$ge-border-default;
       color: light.$on-fixed-surface-primary-alternate;
 
-      &:focus {
-        background-color: light.$fixed-surface-primary-default;
+      &:focus-within {
+        background: light.$fixed-surface-primary-default;
         color: light.$on-fixed-surface-primary-default;
         outline: none;
+        border-color: light.$ge-border-focused;
 
         ~ #{$block}__icon {
           color: light.$on-fixed-surface-primary-default;
@@ -227,33 +213,39 @@
       &[disabled]::placeholder {
         color: light.$on-fixed-surface-primary-disabled;
       }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: light.$fixed-surface-primary-hover;
+          cursor: text;
+        }
+      }
+    }
+
+    #{$block}__input {
+      background-color: transparent;
+      color: light.$on-fixed-surface-primary-default;
     }
 
     &#{$block}--disabled {
       #{$block}__label,
       #{$block}__icon,
       #{$block}__help {
-        color: light.$on-fixed-background-primary-disabled;
+        color: light.$on-fixed-surface-primary-disabled;
       }
 
       &#{$block}--error #{$block}__icon {
         color: light.$on-fixed-surface-error;
       }
-    }
-  }
 
-  &--error {
-    #{$block}__icon {
-      color: light.$on-surface-error;
-    }
-
-    #{$block}__input {
-      outline: 2px solid light.$ge-signal-error;
-      outline-offset: -2px;
+      #{$block}__input-wrapper {
+        background-color: light.$fixed-surface-primary-selected;
+        border-color: light.$on-fixed-surface-primary-disabled;
+        cursor: auto;
+      }
 
-      &:focus {
-        outline: 2px solid light.$ge-signal-error;
-        outline-offset: -2px;
+      #{$block}__input {
+        background-color: transparent;
       }
     }
   }

package/react/text-input/text-input.tsx

@@ -16,28 +16,40 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
       defaultValue,
       disabled,
       hasError,
-      hasMovingLabel,
       helpText,
-      hiddenLabel,
-      icon,
       label,
+      leadingIcon,
+      maxLength,
       name,
       onChange = () => {},
       placeholder,
       required,
       theme,
+      trailingIcon,
       type = 'text',
       variant = variants.large,
       ...restProps
     },
     ref,
   ) => {
+    const [count, setCount] = React.useState(0);
     const [isError, setIsError] = React.useState(hasError);
     const [validationOnChange, onInvalid, error] = useInputValidation(
       customErrorMessages,
       customErrorMessages ? customErrorMessages.defaultError : undefined,
       isError,
     );
+    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;
+
+    React.useEffect(() => {
+      if (defaultValue) {
+        if (typeof defaultValue === 'string') {
+          setCount(defaultValue.length);
+        } else if (typeof defaultValue === 'number') {
+          setCount(defaultValue);
+        }
+      }
+    }, [restProps]);
 
     useEffect(() => {
       setIsError(hasError);
@@ -50,38 +62,13 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
           'text-input--theme-light': theme === themes.light,
           'text-input--disabled': disabled,
           'text-input--error': error || isError,
-          'text-input--moving-label': icon ? false : hasMovingLabel,
-          'text-input--icon': icon,
+          'text-input--icon': leadingIcon || trailingIcon,
           'text-input--variant-small': variant === variants.small,
           'text-input--variant-large': variant === variants.large,
         })}
       >
         <div className="text-input__wrapper">
-          <input
-            {...restProps}
-            className="text-input__input"
-            defaultValue={defaultValue}
-            disabled={disabled}
-            required={required}
-            name={name}
-            onInvalid={e => onInvalid(e)}
-            onChange={e => {
-              onChange(e);
-              validationOnChange(e);
-              setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
-            }}
-            // NOTE: Using " " as placeholder for moving label theme to enable using `:placeholder-shown` to determine when to move the label
-            placeholder={
-              icon ? placeholder : hasMovingLabel ? ' ' : placeholder
-            }
-            ref={ref}
-            type={type}
-            aria-label={icon || hiddenLabel ? label : undefined}
-          />
-
-          {icon ? (
-            <div className="text-input__icon">{icon}</div>
-          ) : hiddenLabel ? null : (
+          <div className="text-input__label-wrapper">
             <Text
               className="text-input__label"
               theme={Text.themes.emphasis}
@@ -94,22 +81,69 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
                 <span className="text-input__asterisk">*</span>
               ) : null}
             </Text>
-          )}
-        </div>
-
-        {helpText ? (
-          <div className="text-input__help">
-            <SvgInfo />
-            <Text size={Text.sizes.interface}>{helpText}</Text>
+            {isMaxLengthValid ? (
+              <div className="text-input__length-counter">
+                <Text
+                  size={
+                    variant === variants.small
+                      ? Text.sizes.small
+                      : Text.sizes.basic
+                  }
+                >
+                  {count}/{maxLength}
+                </Text>
+              </div>
+            ) : null}
           </div>
-        ) : null}
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error ? (
-          <div aria-hidden="true" className="text-input__error">
-            <SvgError />
-            <Text size={Text.sizes.interface}>{error}</Text>
+
+          <div className="text-input__input-wrapper">
+            {leadingIcon ? (
+              <div className="text-input__icon">{leadingIcon}</div>
+            ) : null}
+            <input
+              className="text-input__input"
+              defaultValue={defaultValue}
+              disabled={disabled}
+              required={required}
+              name={name}
+              maxLength={isMaxLengthValid ? maxLength : undefined}
+              onInvalid={e => onInvalid(e)}
+              onChange={e => {
+                onChange(e);
+                validationOnChange(e);
+                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
+                if (isMaxLengthValid) {
+                  setCount(e.target.value.length);
+                }
+              }}
+              placeholder={placeholder}
+              ref={ref}
+              type={type}
+              aria-label={label}
+              {...restProps}
+            />
+            {trailingIcon ? (
+              <div className="text-input__icon">{trailingIcon}</div>
+            ) : null}
           </div>
-        ) : null}
+          {helpText ? (
+            <div className="text-input__help">
+              <div className="text-input__help-icon">
+                <SvgInfo />
+              </div>
+              <Text size={Text.sizes.interface}>{helpText}</Text>
+            </div>
+          ) : null}
+          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+          {error ? (
+            <div aria-hidden="true" className="text-input__error">
+              <div className="text-input__error-icon">
+                <SvgError />
+              </div>
+              <Text size={Text.sizes.interface}>{error}</Text>
+            </div>
+          ) : null}
+        </div>
       </label>
     );
   },

package/react/text-input/text-input.types.ts

@@ -14,12 +14,11 @@ export const variants = {
 export type TextInput = {
   customErrorMessages?: Messages;
   hasError?: boolean;
-  hasMovingLabel?: boolean;
   helpText?: string;
-  hiddenLabel?: boolean;
-  icon?: React.ReactNode;
   label: string;
+  leadingIcon?: React.ReactNode;
   name: string;
   theme?: ObjectValues<typeof themes>;
+  trailingIcon?: React.ReactNode;
   variant?: ObjectValues<typeof variants>;
 } & InputHtmlProps;