@jobber/components-native 0.89.5-JOB-139254-4e3c64d.7 → 0.90.1-JOB-140976-20bb6ae.11

package/src/InputFieldWrapper/components/Suffix/Suffix.test.tsx

@@ -10,7 +10,7 @@ const mockLabel = "$";
 function setupLabel({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
+  miniLabelActive = false,
   inputInvalid = false,
   label = mockLabel,
   styleOverride,
@@ -19,7 +19,7 @@ function setupLabel({
     <SuffixLabel
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
+      miniLabelActive={miniLabelActive}
       inputInvalid={inputInvalid}
       label={label}
       styleOverride={styleOverride}
@@ -30,7 +30,6 @@ function setupLabel({
 function setupIcon({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
   inputInvalid = false,
   icon = "invoice",
 }: Partial<SuffixIconProps>) {
@@ -38,7 +37,6 @@ function setupIcon({
     <SuffixIcon
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
       inputInvalid={inputInvalid}
       icon={icon}
     />,

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -11,7 +11,7 @@ import { useStyles } from "../../InputFieldWrapper.style";
 export interface SuffixLabelProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
   readonly inputInvalid?: boolean;
   readonly label: string;
   readonly hasLeftMargin?: boolean;
@@ -24,7 +24,7 @@ export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export function SuffixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   hasLeftMargin = true,
@@ -44,7 +44,10 @@ export function SuffixLabel({
       ]}
     >
       <View
-        style={[styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+        style={[
+          styles.suffixLabel,
+          miniLabelActive && styles.fieldAffixMiniLabel,
+        ]}
       >
         {!styleOverride ? (
           <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
@@ -70,7 +73,6 @@ export function SuffixLabel({
 export interface SuffixIconProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
   readonly inputInvalid?: boolean;
   readonly icon: IconNames;
   readonly hasLeftMargin?: boolean;

package/src/InputPressable/InputPressable.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { InputPressable } from ".";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 
@@ -120,6 +120,80 @@ describe("InputPressable", () => {
       expect(getByText(value, { includeHiddenElements: true })).toBeDefined();
     });
   });
+
+  describe("showMiniLabel", () => {
+    it("defaults to true", () => {
+      const props = { placeholder: "placeholder", value: "value" };
+      render(<InputPressable {...props} />);
+      expect(
+        screen.getByText("placeholder", { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining({
+          placeholderMode: "mini",
+        }),
+      );
+    });
+
+    describe("when true", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: true, placeholder: "placeholder" };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("renders the placeholder as a mini label when the input has a value", () => {
+        const props = {
+          showMiniLabel: true,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "mini",
+          }),
+        );
+      });
+    });
+
+    describe("when false", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: false, placeholder: "placeholder" };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("does not render the placeholder when the input has a value", () => {
+        const props = {
+          showMiniLabel: false,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.queryByText("placeholder", { includeHiddenElements: true }),
+        ).toBeNull();
+      });
+    });
+  });
 });
 
 describe("accessibilityLabel", () => {

package/src/InputPressable/InputPressable.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from "react";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
@@ -7,6 +7,7 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import type { XOR } from "ts-xor";
 import { useStyles } from "./InputPressable.style";
+import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 
 interface BasicSuffix {
@@ -51,6 +52,15 @@ export interface InputPressableProps {
    */
   readonly invalid?: boolean | string;
 
+  /**
+   * Controls the visibility of the mini label that appears inside the input
+   * when a value is entered. By default, the placeholder text moves up to
+   * become a mini label. Set to false to disable this behavior.
+   *
+   * @default true
+   */
+  readonly showMiniLabel?: boolean;
+
   /**
    * Callback that is called when the text input is focused
    * @param event
@@ -105,6 +115,7 @@ export function InputPressableInternal(
     disabled,
     invalid,
     error,
+    showMiniLabel = true,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -117,11 +128,9 @@ export function InputPressableInternal(
   ref: Ref<InputPressableRef>,
 ): JSX.Element {
   const hasValue = !!value;
-  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
 
-  useEffect(() => {
-    setHasMiniLabel(Boolean(value));
-  }, [value]);
+  const placeholderMode = getPlaceholderMode(showMiniLabel, value);
+  const miniLabelActive = placeholderMode === "mini";
 
   const showClear = useShowClear({
     clearable,
@@ -139,7 +148,7 @@ export function InputPressableInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       focused={focused}
       error={error}
       invalid={invalid}
@@ -160,7 +169,7 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            !hasMiniLabel && commonInputStyles.inputEmpty,
+            !miniLabelActive && commonInputStyles.inputEmpty,
             disabled && commonInputStyles.inputDisabled,
             (Boolean(invalid) || error) && styles.inputInvalid,
           ]}
@@ -176,3 +185,20 @@ export function InputPressableInternal(
     </InputFieldWrapper>
   );
 }
+
+function getPlaceholderMode(
+  isMiniLabelAllowed: boolean,
+  internalValue: string | undefined,
+): InputFieldWrapperProps["placeholderMode"] {
+  const hasValue = Boolean(internalValue);
+
+  if (hasValue) {
+    if (isMiniLabelAllowed) {
+      return "mini";
+    } else {
+      return "hidden";
+    }
+  } else {
+    return "normal";
+  }
+}

package/src/InputText/InputText.test.tsx

@@ -4,6 +4,7 @@ import {
   fireEvent,
   render,
   renderHook,
+  screen,
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
@@ -548,6 +549,80 @@ describe("InputText", () => {
       expect(styleOverride.inputText.color).toEqual(flattenedStyle.color);
     });
   });
+
+  describe("showMiniLabel", () => {
+    it("defaults to true", () => {
+      const props = { placeholder: "placeholder", value: "value" };
+      renderInputText(props);
+      expect(
+        screen.getByText("placeholder", { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining({
+          placeholderMode: "mini",
+        }),
+      );
+    });
+
+    describe("when true", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: true, placeholder: "placeholder" };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("renders the placeholder as a mini label when the input has a value", () => {
+        const props = {
+          showMiniLabel: true,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "mini",
+          }),
+        );
+      });
+    });
+
+    describe("when false", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: false, placeholder: "placeholder" };
+        renderInputText(props);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("does not render the placeholder when the input has a value", () => {
+        const props = {
+          showMiniLabel: false,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        renderInputText(props);
+        expect(
+          screen.queryByText("placeholder", { includeHiddenElements: true }),
+        ).toBeNull();
+      });
+    });
+  });
 });
 
 describe("Transform", () => {

package/src/InputText/InputText.tsx

@@ -65,6 +65,15 @@ export interface InputTextProps
    */
   readonly assistiveText?: string;
 
+  /**
+   * Controls the visibility of the mini label that appears inside the input
+   * when a value is entered. By default, the placeholder text moves up to
+   * become a mini label. Set to false to disable this behavior.
+   *
+   * @default true
+   */
+  readonly showMiniLabel?: boolean;
+
   /**
    * Determines what keyboard is shown
    */
@@ -245,6 +254,7 @@ function InputTextInternal(
     name,
     placeholder,
     assistiveText,
+    showMiniLabel = true,
     keyboard,
     value: controlledValue,
     defaultValue,
@@ -292,7 +302,8 @@ function InputTextInternal(
 
   const hasValue = internalValue !== "" && internalValue !== undefined;
   const [focused, setFocused] = useState(false);
-  const { hasMiniLabel } = useMiniLabel(internalValue);
+  const placeholderMode = getPlaceholderMode(showMiniLabel, internalValue);
+  const miniLabelActive = placeholderMode === "mini";
 
   const textInputRef = useTextInputRef({ ref, onClear: handleClear });
 
@@ -367,7 +378,7 @@ function InputTextInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       assistiveText={assistiveText}
       focused={focused}
       error={error}
@@ -391,11 +402,11 @@ function InputTextInternal(
         style={[
           commonInputStyles.input,
           styles.inputPaddingTop,
-          !hasMiniLabel && commonInputStyles.inputEmpty,
+          !miniLabelActive && commonInputStyles.inputEmpty,
           disabled && commonInputStyles.inputDisabled,
           multiline && styles.multiLineInput,
           multiline && Platform.OS === "ios" && styles.multilineInputiOS,
-          multiline && hasMiniLabel && styles.multiLineInputWithMini,
+          multiline && miniLabelActive && styles.multiLineInputWithMini,
           styleOverride?.inputText,
           loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
@@ -510,13 +521,19 @@ function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
   return textInputRef;
 }
 
-function useMiniLabel(internalValue: string): {
-  hasMiniLabel: boolean;
-} {
-  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
-  useEffect(() => {
-    setHasMiniLabel(Boolean(internalValue));
-  }, [internalValue]);
+function getPlaceholderMode(
+  isMiniLabelAllowed: boolean,
+  internalValue: string,
+): InputFieldWrapperProps["placeholderMode"] {
+  const hasValue = Boolean(internalValue);
 
-  return { hasMiniLabel };
+  if (hasValue) {
+    if (isMiniLabelAllowed) {
+      return "mini";
+    } else {
+      return "hidden";
+    }
+  } else {
+    return "normal";
+  }
 }