@jobber/components-native 0.51.5 → 0.51.6-JOB-88274.7

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

@@ -25,6 +25,7 @@ export declare const commonInputStyles: {
         width: string;
         borderColor: string;
         borderStyle: "solid";
-        borderBottomWidth: number;
+        borderWidth: number;
+        paddingLeft: number;
     };
 };

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

@@ -8,7 +8,8 @@ export declare const styles: {
         width: string;
         borderColor: string;
         borderStyle: "solid";
-        borderBottomWidth: number;
+        borderWidth: number;
+        paddingLeft: number;
     };
     inputContainer: {
         flexDirection: "row";
@@ -64,10 +65,12 @@ export declare const styles: {
     };
     suffixIcon: {
         justifyContent: "center";
+        paddingRight: number;
     };
     suffixLabel: {
         justifyContent: "center";
         paddingTop: number;
+        paddingRight: number;
     };
     suffixIconMargin: {
         marginLeft: number;

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

@@ -16,6 +16,10 @@ export interface InputPressableProps {
      * Disables input selection
      */
     readonly disabled?: boolean;
+    /**
+     * Indicates if the input is focused
+     */
+    readonly focused?: boolean;
     /**
      * Indicates if there is an validation error
      */
@@ -67,4 +71,4 @@ 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, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;

package/dist/types/src/InputSearch/InputSearch.style.d.ts

@@ -1,6 +1,5 @@
 export declare const styles: {
     container: {
         width: string;
-        paddingHorizontal: number;
     };
 };

package/dist/types/src/Select/Select.style.d.ts

@@ -8,11 +8,14 @@ export declare const styles: {
         width: string;
         borderColor: string;
         borderStyle: "solid";
-        borderBottomWidth: number;
+        borderWidth: number;
+        paddingLeft: number;
     } | {
         flexDirection: "column";
         justifyContent: "flex-end";
         minHeight: number;
+        marginVertical: number;
+        borderWidth: number;
     };
     input: {
         width: string;
@@ -30,6 +33,7 @@ export declare const styles: {
         paddingBottom: number;
         minHeight: number;
         minWidth: string;
+        paddingRight: number;
     };
     value: {
         flexGrow: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.51.5",
+  "version": "0.51.6-JOB-88274.7+b7b85ba2",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "3caaa43e03388b7d034d0606dc803218394929c2"
+  "gitHead": "b7b85ba202558ffdcb7ecad60cdd1104575e81d3"
 }

package/src/InputDate/InputDate.tsx

@@ -174,6 +174,7 @@ function InternalInputDate({
   return (
     <>
       <InputPressable
+        focused={showPicker}
         clearable={canClearDate}
         disabled={disabled}
         invalid={invalid}

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -30,8 +30,9 @@ export const commonInputStyles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     width: "100%",
-    borderColor: tokens["color-grey"],
+    borderColor: tokens["color-border"],
     borderStyle: "solid",
-    borderBottomWidth: tokens["border-base"],
+    borderWidth: tokens["border-base"],
+    paddingLeft: tokens["space-base"],
   },
 });

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -74,11 +74,13 @@ export const styles = StyleSheet.create({
 
   suffixIcon: {
     justifyContent: "center",
+    paddingRight: tokens["space-small"],
   },
 
   suffixLabel: {
     justifyContent: "center",
     paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-small"],
   },
   suffixIconMargin: {
     marginLeft: tokens["space-small"] + tokens["space-smaller"],

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -192,9 +192,7 @@ describe("InputFieldWrapper", () => {
         includeHiddenElements: true,
       });
 
-      expect(placeholder.props.style).toContainEqual(
-        typographyStyles.interactive,
-      );
+      expect(placeholder.props.style).toContainEqual(typographyStyles.subdued);
       expect(placeholder.props.style).toContainEqual(
         typographyStyles.defaultSize,
       );

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -146,12 +146,7 @@ export function InputFieldWrapper({
           >
             <Placeholder
               placeholder={placeholder}
-              labelVariation={getLabelVariation(
-                error,
-                invalid,
-                focused,
-                disabled,
-              )}
+              labelVariation={getLabelVariation(error, invalid, disabled)}
               hasMiniLabel={hasMiniLabel}
               styleOverride={styleOverride?.placeholderText}
             />
@@ -218,15 +213,12 @@ export function InputFieldWrapper({
 function getLabelVariation(
   error?: FieldError,
   invalid?: boolean | string,
-  focused?: boolean,
   disabled?: boolean,
 ): TextVariation {
   if (invalid || error) {
     return "error";
   } else if (disabled) {
     return "disabled";
-  } else if (focused) {
-    return "interactive";
   }
 
   return "subdued";

package/src/InputPressable/InputPressable.tsx

@@ -22,6 +22,11 @@ export interface InputPressableProps {
    */
   readonly disabled?: boolean;
 
+  /**
+   * Indicates if the input is focused
+   */
+  readonly focused?: boolean;
+
   /**
    * Indicates if there is an validation error
    */
@@ -95,6 +100,7 @@ export function InputPressableInternal(
     suffix,
     clearable = "never",
     onClear,
+    focused,
   }: InputPressableProps,
   ref: Ref<InputPressableRef>,
 ): JSX.Element {
@@ -119,7 +125,7 @@ export function InputPressableInternal(
       suffix={suffix}
       hasValue={hasValue}
       hasMiniLabel={hasMiniLabel}
-      focused={false}
+      focused={focused}
       error={error}
       invalid={invalid}
       placeholder={placeholder}

package/src/InputSearch/InputSearch.style.ts

@@ -1,9 +1,7 @@
 import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
 
 export const styles = StyleSheet.create({
   container: {
     width: "100%",
-    paddingHorizontal: tokens["space-base"],
   },
 });

package/src/InputTime/InputTime.tsx

@@ -159,6 +159,7 @@ function InternalInputTime({
         clearable={canClearTime}
         disabled={disabled}
         invalid={invalid}
+        focused={showPicker}
         placeholder={placeholder ?? t("time")}
         prefix={showIcon ? { icon: "timer" } : undefined}
         value={formattedTime}

package/src/Select/Select.style.ts

@@ -9,6 +9,8 @@ export const styles = StyleSheet.create({
       flexDirection: "column",
       justifyContent: "flex-end",
       minHeight: tokens["space-largest"] + tokens["border-base"],
+      marginVertical: 0,
+      borderWidth: 0,
     },
   ]),
 
@@ -20,6 +22,7 @@ export const styles = StyleSheet.create({
       paddingBottom: tokens["space-smaller"],
       minHeight: 0,
       minWidth: "100%",
+      paddingRight: tokens["space-small"],
     },
   ]),
 

package/src/Select/Select.tsx

@@ -131,7 +131,7 @@ export function Select({
       invalid={invalid || !!error}
       hasValue={hasValue}
       styleOverride={{
-        container: { borderBottomWidth: undefined },
+        container: { paddingLeft: undefined },
       }}
     >
       <View