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

package/dist/types/src/Form/hooks/useInternalForm.d.ts

@@ -2,7 +2,7 @@ import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } fro
 import type { MutableRefObject, RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { InternalFormProps } from "../types";
-type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<InternalFormProps<T, SubmitResponseType>, "mode" | "reValidateMode" | "initialValues" | "formRef" | "localCacheKey" | "localCacheExclude" | "localCacheId" | "removeLocalCacheOnBackOffline"> & {
+type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<InternalFormProps<T, SubmitResponseType>, "mode" | "reValidateMode" | "initialValues" | "formRef" | "localCacheKey" | "localCacheExclude" | "localCacheId" | "UNSAFE_allowDiscardLocalCacheWhenOffline"> & {
     scrollViewRef?: RefObject<KeyboardAwareScrollView>;
     readonly saveButtonHeight: number;
     readonly messageBannerHeight: number;
@@ -15,5 +15,5 @@ interface UseInternalForm<T extends FieldValues> {
     readonly removeListenerRef: MutableRefObject<() => void>;
     readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
-export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, removeLocalCacheOnBackOffline, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
+export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, UNSAFE_allowDiscardLocalCacheWhenOffline, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
 export {};

package/dist/types/src/Form/types.d.ts

@@ -136,7 +136,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * the dirty form even when offline. By default, cache is only removed on back when online.
      * Defaults to false.
      */
-    removeLocalCacheOnBackOffline?: boolean;
+    UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
     /**
      * Secondary Action for ButtonGroup
      */

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.d.ts

@@ -26,7 +26,14 @@ export interface InputFieldWrapperProps {
      * Text that goes below the input to help the user understand the input
      */
     readonly assistiveText?: string;
-    readonly hasMiniLabel?: boolean;
+    /**
+     * Controls how the placeholder text is displayed.
+     * - normal: the placeholder text will be displayed in the normal placeholder position
+     * - mini: the placeholder text will float above the input value
+     * - hidden: the placeholder text will not be displayed
+     * @default "normal"
+     */
+    readonly placeholderMode?: "normal" | "mini" | "hidden";
     readonly hasValue?: boolean;
     /**
      * Symbol to display before the text input
@@ -78,4 +85,4 @@ export interface InputFieldWrapperProps {
 }
 export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;

package/dist/types/src/InputFieldWrapper/components/Prefix/Prefix.d.ts

@@ -3,18 +3,17 @@ import type { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: boolean;
     readonly inputInvalid: boolean;
     readonly label: string;
     readonly styleOverride?: StyleProp<TextStyle>;
 }
 export declare const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export declare const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
-export declare function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
+export declare function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
 export interface PrefixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
     readonly inputInvalid?: boolean;
     readonly icon: IconNames;
     readonly styleOverride?: StyleProp<ViewStyle>;

package/dist/types/src/InputFieldWrapper/components/Suffix/Suffix.d.ts

@@ -3,7 +3,7 @@ import type { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: boolean;
     readonly inputInvalid?: boolean;
     readonly label: string;
     readonly hasLeftMargin?: boolean;
@@ -11,11 +11,10 @@ export interface SuffixLabelProps {
 }
 export declare const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export declare const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
-export declare function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
+export declare function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
 export interface SuffixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
     readonly inputInvalid?: boolean;
     readonly icon: IconNames;
     readonly hasLeftMargin?: boolean;

package/dist/types/src/InputPressable/InputPressable.d.ts

@@ -39,6 +39,14 @@ export interface InputPressableProps {
      * Indicates the current selection is invalid
      */
     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
@@ -79,5 +87,5 @@ export interface InputPressableProps {
 }
 export type InputPressableRef = NativeText;
 export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
-export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
 export {};

package/dist/types/src/InputText/InputText.d.ts

@@ -31,6 +31,14 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
      * Text that helps the user understand the input
      */
     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
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.89.5-JOB-139254-4e3c64d.7+4e3c64d19",
+  "version": "0.90.1-JOB-140976-20bb6ae.11+20bb6ae6a",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "4e3c64d1982cb68580827ad583b4812b3a240e7c"
+  "gitHead": "20bb6ae6a51997e8306d4f4ddf12295b33ca16be"
 }

package/src/Form/Form.test.tsx

@@ -104,6 +104,7 @@ interface FormTestProps {
   readonly onBeforeSubmit?: jest.Mock;
   readonly renderFooter?: React.ReactNode;
   readonly saveButtonOffset?: number;
+  readonly UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
 }
 
 function FormTest(props: FormTestProps) {
@@ -125,6 +126,7 @@ function MockForm({
   localCacheId,
   renderFooter,
   saveButtonOffset,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
 
@@ -154,6 +156,9 @@ function MockForm({
         onBeforeSubmit={onBeforeSubmit}
         renderFooter={renderFooter}
         saveButtonOffset={saveButtonOffset}
+        UNSAFE_allowDiscardLocalCacheWhenOffline={
+          UNSAFE_allowDiscardLocalCacheWhenOffline
+        }
       >
         <InputText
           name={testInputTextName}
@@ -561,4 +566,142 @@ describe("Form", () => {
       expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
     });
   });
+
+  describe("Leaving the form", () => {
+    let mockUseConfirmBeforeBack: jest.Mock;
+    let mockRemoveLocalCache: jest.Mock;
+    const atlantisContextSpy = jest.spyOn(
+      atlantisContext,
+      "useAtlantisContext",
+    );
+
+    beforeEach(() => {
+      mockUseConfirmBeforeBack = jest
+        .fn()
+        .mockReturnValue({ current: jest.fn() });
+      mockRemoveLocalCache = jest.fn();
+
+      jest
+        .spyOn(
+          require("../Form/context/AtlantisFormContext"),
+          "useAtlantisFormContext",
+        )
+        .mockReturnValue({
+          useConfirmBeforeBack: mockUseConfirmBeforeBack,
+          useInternalFormLocalCache: () => ({
+            setLocalCache: jest.fn(),
+            removeLocalCache: mockRemoveLocalCache,
+          }),
+          edgeToEdgeEnabled: false,
+        });
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is false", () => {
+      it("should NOT pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBeUndefined();
+        expect(callArgs.showLostProgressMessage).toBe(false);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is true", () => {
+      it("should pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("without localCacheKey", () => {
+      it("should always show lost progress message when no cache key is provided", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+  });
 });

package/src/Form/Form.tsx

@@ -66,7 +66,7 @@ function InternalForm<T extends FieldValues, S>({
   saveButtonOffset,
   showStickySaveButton = false,
   renderFooter,
-  removeLocalCacheOnBackOffline,
+  UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -88,7 +88,7 @@ function InternalForm<T extends FieldValues, S>({
     scrollViewRef,
     saveButtonHeight,
     messageBannerHeight,
-    removeLocalCacheOnBackOffline,
+    UNSAFE_allowDiscardLocalCacheWhenOffline,
   });
   const { windowHeight, headerHeight } = useScreenInformation();
   const [keyboardHeight, setKeyboardHeight] = useState(0);

package/src/Form/hooks/useInternalForm.ts

@@ -20,7 +20,7 @@ type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<
   | "localCacheKey"
   | "localCacheExclude"
   | "localCacheId"
-  | "removeLocalCacheOnBackOffline"
+  | "UNSAFE_allowDiscardLocalCacheWhenOffline"
 > & {
   scrollViewRef?: RefObject<KeyboardAwareScrollView>;
   readonly saveButtonHeight: number;
@@ -46,7 +46,7 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
   scrollViewRef,
   saveButtonHeight,
   messageBannerHeight,
-  removeLocalCacheOnBackOffline = false,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T> {
   const { useConfirmBeforeBack, useInternalFormLocalCache } =
     useAtlantisFormContext();
@@ -84,7 +84,7 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
     };
   }
 
-  const shouldRemoveCacheOnBack = removeLocalCacheOnBackOffline
+  const shouldRemoveCacheOnBack = UNSAFE_allowDiscardLocalCacheWhenOffline
     ? true
     : isOnline;
 

package/src/Form/types.ts

@@ -176,7 +176,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * the dirty form even when offline. By default, cache is only removed on back when online.
    * Defaults to false.
    */
-  removeLocalCacheOnBackOffline?: boolean;
+  UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
 
   /**
    * Secondary Action for ButtonGroup

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render, renderHook } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react-native";
 import type { ViewStyle } from "react-native";
 import { Text } from "react-native";
 import type { InputFieldWrapperProps } from ".";
@@ -311,4 +316,46 @@ describe("InputFieldWrapper", () => {
       expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
     });
   });
+
+  describe("placeholderMode", () => {
+    it("renders the placeholder in its normal position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "normal",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.defaultSize,
+      );
+    });
+
+    it("renders the placeholder in its mini label position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "mini",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.smallSize,
+      );
+    });
+
+    it("does not render the placeholder", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "hidden",
+      });
+      expect(
+        screen.queryByText("placeholder", {
+          includeHiddenElements: true,
+        }),
+      ).toBeNull();
+    });
+  });
 });

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -43,7 +43,14 @@ export interface InputFieldWrapperProps {
    */
   readonly assistiveText?: string;
 
-  readonly hasMiniLabel?: boolean;
+  /**
+   * Controls how the placeholder text is displayed.
+   * - normal: the placeholder text will be displayed in the normal placeholder position
+   * - mini: the placeholder text will float above the input value
+   * - hidden: the placeholder text will not be displayed
+   * @default "normal"
+   */
+  readonly placeholderMode?: "normal" | "mini" | "hidden";
 
   readonly hasValue?: boolean;
 
@@ -119,7 +126,7 @@ export function InputFieldWrapper({
   assistiveText,
   prefix,
   suffix,
-  hasMiniLabel = false,
+  placeholderMode = "normal",
   hasValue = false,
   error,
   focused = false,
@@ -143,6 +150,9 @@ export function InputFieldWrapper({
   const showLoadingGlimmer = loading && loadingType === "glimmer";
   const styles = useStyles();
 
+  const placeholderVisible = placeholderMode !== "hidden";
+  const miniLabelActive = placeholderMode === "mini";
+
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
       <View
@@ -160,35 +170,36 @@ export function InputFieldWrapper({
             <PrefixIcon
               disabled={disabled}
               focused={focused}
-              hasMiniLabel={hasMiniLabel}
               inputInvalid={inputInvalid}
               icon={prefix.icon}
             />
           )}
           <View style={[styles.inputContainer]}>
-            <View
-              style={[
-                !!placeholder && styles.label,
-                hasMiniLabel && styles.miniLabel,
-                disabled && styles.disabled,
-                hasMiniLabel &&
-                  showClearAction &&
-                  styles.miniLabelShowClearAction,
-              ]}
-              pointerEvents="none"
-            >
-              <Placeholder
-                placeholder={placeholder}
-                labelVariation={getLabelVariation(error, invalid, disabled)}
-                hasMiniLabel={hasMiniLabel}
-                styleOverride={styleOverride?.placeholderText}
-              />
-            </View>
+            {placeholderVisible && (
+              <View
+                style={[
+                  !!placeholder && styles.label,
+                  miniLabelActive && styles.miniLabel,
+                  disabled && styles.disabled,
+                  miniLabelActive &&
+                    showClearAction &&
+                    styles.miniLabelShowClearAction,
+                ]}
+                pointerEvents="none"
+              >
+                <Placeholder
+                  placeholder={placeholder}
+                  labelVariation={getLabelVariation(error, invalid, disabled)}
+                  miniLabelActive={miniLabelActive}
+                  styleOverride={styleOverride?.placeholderText}
+                />
+              </View>
+            )}
             {prefix?.label && hasValue && (
               <PrefixLabel
                 disabled={disabled}
                 focused={focused}
-                hasMiniLabel={hasMiniLabel}
+                miniLabelActive={miniLabelActive}
                 inputInvalid={inputInvalid}
                 label={prefix.label}
                 styleOverride={styleOverride?.prefixLabel}
@@ -225,7 +236,7 @@ export function InputFieldWrapper({
                   <SuffixLabel
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
+                    miniLabelActive={miniLabelActive}
                     inputInvalid={inputInvalid}
                     label={suffix.label}
                     hasLeftMargin={!showClearAction}
@@ -245,7 +256,6 @@ export function InputFieldWrapper({
                   <SuffixIcon
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
                     hasLeftMargin={!!(!showClearAction || suffix?.label)}
                     inputInvalid={inputInvalid}
                     icon={suffix.icon}
@@ -332,12 +342,12 @@ function Placeholder({
   placeholder,
   styleOverride,
   labelVariation,
-  hasMiniLabel,
+  miniLabelActive,
 }: {
   readonly placeholder?: string;
   readonly styleOverride: StyleProp<TextStyle>;
   readonly labelVariation: TextVariation;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
 }) {
   const typographyStyles = useTypographyStyles();
 
@@ -348,7 +358,7 @@ function Placeholder({
           hideFromScreenReader={true}
           maxLines="single"
           variation={labelVariation}
-          level={hasMiniLabel ? "textSupporting" : "text"}
+          level={miniLabelActive ? "textSupporting" : "text"}
         >
           {placeholder}
         </Text>
@@ -361,7 +371,7 @@ function Placeholder({
           style={[
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
               ? typographyStyles.smallSize
               : typographyStyles.defaultSize,
             styleOverride,

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

@@ -30,7 +30,7 @@ beforeAll(() => {
 function setupLabel({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
+  miniLabelActive = false,
   inputInvalid = false,
   label = mockLabel,
   styleOverride,
@@ -39,7 +39,7 @@ function setupLabel({
     <PrefixLabel
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
+      miniLabelActive={miniLabelActive}
       inputInvalid={inputInvalid}
       label={label}
       styleOverride={styleOverride}
@@ -50,7 +50,6 @@ function setupLabel({
 function setupIcon({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
   inputInvalid = false,
   icon = "invoice",
 }: Partial<PrefixIconProps>) {
@@ -58,7 +57,6 @@ function setupIcon({
     <PrefixIcon
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
       inputInvalid={inputInvalid}
       icon={icon}
     />,
@@ -150,7 +148,7 @@ describe("Prefix", () => {
 
   it("updates the position of the label when a value is entered", () => {
     const tree = setupLabel({
-      hasMiniLabel: true,
+      miniLabelActive: true,
     });
     const prefixLabel = tree.getByTestId(prefixLabelTestId);
     const labelWrapper = prefixLabel.children[0] as ReactTestInstance;

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -11,7 +11,7 @@ import { useStyles } from "../../InputFieldWrapper.style";
 export interface PrefixLabelProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
   readonly inputInvalid: boolean;
   readonly label: string;
   readonly styleOverride?: StyleProp<TextStyle>;
@@ -23,7 +23,7 @@ export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
 export function PrefixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   styleOverride,
@@ -41,7 +41,10 @@ export function PrefixLabel({
       testID={prefixLabelTestId}
     >
       <View
-        style={[styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+        style={[
+          styles.prefixLabel,
+          miniLabelActive && styles.fieldAffixMiniLabel,
+        ]}
       >
         {!styleOverride ? (
           <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
@@ -67,7 +70,6 @@ export function PrefixLabel({
 export interface PrefixIconProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
   readonly inputInvalid?: boolean;
   readonly icon: IconNames;
   readonly styleOverride?: StyleProp<ViewStyle>;