@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/src/StatusLabel/StatusLabel.style.ts

@@ -6,18 +6,18 @@ export const useStyles = buildThemedStyles(tokens => {
       flexDirection: "row",
       justifyContent: "flex-end",
       alignItems: "center",
+      alignSelf: "flex-start",
       flexWrap: "nowrap",
       flexGrow: 0,
       flexShrink: 1,
       gap: tokens["space-smaller"],
       backgroundColor: tokens["color-success--surface"],
       borderRadius: tokens["radius-large"],
-      paddingVertical: tokens["space-smaller"],
+      paddingVertical: tokens["space-smallest"] + tokens["space-minuscule"],
       paddingHorizontal: tokens["space-small"],
     },
     statusLabelText: {
       flexShrink: 1,
-      marginBottom: -1,
     },
     labelTextStartAligned: {
       flexDirection: "row-reverse",

package/src/StatusLabel/StatusLabel.tsx

@@ -38,7 +38,7 @@ export function StatusLabel({
   text,
   alignment = "end",
   status = "success",
-}: StatusLabelProps): JSX.Element {
+}: StatusLabelProps) {
   const styles = useStyles();
 
   return (

package/src/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -15,7 +16,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -28,7 +29,6 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -88,6 +88,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -97,7 +98,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -110,7 +111,6 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -170,6 +170,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -179,7 +180,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(7, 63%, 95%)",
@@ -192,7 +193,6 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -252,6 +252,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -261,7 +262,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(195, 12%, 94%)",
@@ -274,7 +275,6 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -334,6 +334,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -343,7 +344,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(207, 87%, 94%)",
@@ -356,7 +357,6 @@ exports[`StatusLabel status when status prop set to "informative" should match s
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -416,6 +416,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -425,7 +426,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(52, 64%, 89%)",
@@ -438,7 +439,6 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -498,6 +498,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
     [
       {
         "alignItems": "center",
+        "alignSelf": "flex-start",
         "backgroundColor": "hsl(109, 28%, 92%)",
         "borderRadius": 16,
         "flexDirection": "row",
@@ -507,7 +508,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -520,7 +521,6 @@ exports[`StatusLabel status when status prop set to default ("success") should m
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >

package/src/Switch/Switch.tsx

@@ -20,7 +20,7 @@ interface WithLabelProps extends BaseSwitchProps {
 
 export type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
 
-export function Switch(props: SwitchProps): JSX.Element {
+export function Switch(props: SwitchProps) {
   const switchProps: SwitchProps = {
     ...props,
     accessibilityLabel: props.accessibilityLabel || props.label,

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -43,7 +43,7 @@ export function BaseSwitch({
   disabled = false,
   accessibilityLabel,
   name,
-}: BaseSwitchProps): JSX.Element {
+}: BaseSwitchProps) {
   const { field } = useFormController({
     name,
     value: value ?? defaultValue,
@@ -85,6 +85,12 @@ export function BaseSwitch({
       };
     }
   }
+  // Temporary fix for iOS 26. Remove when we upgrade to RN 0.81.
+  // https://github.com/facebook/react-native/pull/53389
+  const iOSBackgroundColor =
+    Platform.OS === "ios" && Platform.Version?.startsWith("26.")
+      ? undefined
+      : tokens["color-interactive--background"];
 
   return (
     <Switch
@@ -98,7 +104,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-interactive--background"]}
+      ios_backgroundColor={iOSBackgroundColor}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{

package/src/Text/Text.test.tsx

@@ -151,6 +151,16 @@ it("renders text with underline styling", () => {
   expect(text.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested Text children with mixed styles", () => {
+  const { getByText, toJSON } = render(
+    <Text>
+      Hello <Text emphasis="strong">World</Text>!
+    </Text>,
+  );
+  expect(getByText("World")).toBeDefined();
+  expect(toJSON()).toMatchSnapshot();
+});
+
 describe("UNSAFE_style", () => {
   it("applies custom styles via UNSAFE_style prop", () => {
     const customStyle = {

package/src/Text/Text.tsx

@@ -53,9 +53,9 @@ export interface TextProps
   readonly align?: TextAlign;
 
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Reverse theme for better display on dark background
@@ -143,7 +143,7 @@ export function Text({
   underline,
   selectable,
   onTextLayout,
-}: TextProps): JSX.Element {
+}: TextProps) {
   const accessibilityRole: TextAccessibilityRole = "text";
 
   return (

package/src/Text/__snapshots__/Text.test.tsx.snap

@@ -694,3 +694,69 @@ exports[`renders with strikethrough styling 1`] = `
   Test Text
 </Text>
 `;
+
+exports[`supports nested Text children with mixed styles 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={3.125}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(198, 35%, 21%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Hello 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-semibold",
+        },
+        {
+          "color": "hsl(198, 35%, 21%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    World
+  </Text>
+  !
+</Text>
+`;

package/src/TextList/TextList.tsx

@@ -44,7 +44,7 @@ export function TextList({
   emphasis,
   level = "text",
   spacing = "none",
-}: TextListProps): JSX.Element {
+}: TextListProps) {
   const styles = useStyles();
 
   return (

package/src/ThumbnailList/ThumbnailList.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 { Host } from "react-native-portalize";
 import { ThumbnailList } from "./ThumbnailList";
 import type { File } from "../FormatFile/types";
@@ -61,15 +61,15 @@ beforeEach(() => {
 });
 
 it("renders a thumbnail component with attachments", () => {
-  const tree = setup(true);
-  expect(tree.toJSON()).toMatchSnapshot();
+  setup(true);
+  expect(screen.toJSON()).toMatchSnapshot();
 });
 
 describe("when a an array of files is provided", () => {
   it("calls the previewImages util on pressing a valid file", () => {
-    const { getByLabelText } = setup();
+    setup();
     fireEvent.press(
-      getByLabelText(files[0].fileName ? files[0].fileName : "file"),
+      screen.getByLabelText(files[0].fileName ? files[0].fileName : "file"),
     );
     expect(onOpenFile).toHaveBeenCalledTimes(1);
   });

package/src/ThumbnailList/ThumbnailList.tsx

@@ -26,7 +26,7 @@ export function ThumbnailList({
   rowCount = RowCount.TwoRows,
   handleOpenFile,
   createThumbnail,
-}: ThumbnailListProps): JSX.Element {
+}: ThumbnailListProps) {
   const imageList = filterImages(files);
   const styles = useStyles();
 

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -150,6 +150,204 @@ exports[`renders a thumbnail component with attachments 1`] = `
         "top": 0,
       }
     }
-  />,
+  >
+    <View
+      backdropComponent={[Function]}
+      backgroundStyle={
+        {
+          "borderTopLeftRadius": 24,
+          "borderTopRightRadius": 24,
+        }
+      }
+      enablePanDownToClose={true}
+      handleStyle={
+        {
+          "display": "none",
+        }
+      }
+      keyboardBlurBehavior="restore"
+      style={
+        {
+          "display": "none",
+        }
+      }
+      testID="bottom-sheet-mock"
+    >
+      <View
+        style={
+          {
+            "paddingBottom": 8,
+            "paddingTop": 8,
+          }
+        }
+        testID="bottom-sheet-view"
+      >
+        <View
+          accessibilityLabel="Preview "
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignContent": "center",
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "opacity": 1,
+              "padding": 8,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={24}
+              bbWidth={24}
+              focusable={false}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "display": "flex",
+                    "fill": "hsl(198, 35%, 21%)",
+                    "height": 24,
+                    "verticalAlign": "middle",
+                    "width": 24,
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              testID="eye"
+              vbHeight={24}
+              vbWidth={24}
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4280499528,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+              >
+                <RNSVGPath
+                  d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+                <RNSVGPath
+                  d="M21.863 12.477C20.794 14.2 16.703 20 12 20c-4.702 0-8.795-5.8-9.863-7.523a.903.903 0 0 1 0-.954C3.205 9.8 7.297 4 12 4c4.703 0 8.794 5.8 9.863 7.523a.903.903 0 0 1 0 .954ZM20 12s-3.582-6-8-6-8 6-8 6 3.582 6 8 6 8-6 8-6Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+          <View
+            style={
+              {
+                "flexShrink": 1,
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <Text
+              accessibilityRole="text"
+              adjustsFontSizeToFit={false}
+              allowFontScaling={true}
+              collapsable={false}
+              maxFontSizeMultiplier={3.125}
+              selectable={true}
+              selectionColor="hsl(86, 100%, 46%)"
+              style={
+                [
+                  {
+                    "fontFamily": "inter-semibold",
+                  },
+                  {
+                    "color": "hsl(197, 15%, 43%)",
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "fontSize": 16,
+                    "lineHeight": 20,
+                  },
+                  {
+                    "letterSpacing": 0,
+                  },
+                ]
+              }
+            >
+              Preview 
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
 ]
 `;

package/src/Toast/Toast.tsx

@@ -17,7 +17,7 @@ import { tokens as staticTokens } from "../utils/design";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 
-function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
+function DefaultToast({ text1 }: ToastConfigParams<string>) {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -56,7 +56,7 @@ export interface JobberToastProps {
   readonly bottomOffset?: number;
 }
 
-export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {
+export function JobberToast({ bottomOffset }: JobberToastProps) {
   return <Toast bottomOffset={bottomOffset} config={toastConfig} />;
 }
 

package/src/Typography/Typography.test.tsx

@@ -79,6 +79,67 @@ it("renders text with lowercase transform", () => {
   expect(typography.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested children and applies transform only to string children", () => {
+  const typography = render(
+    <Typography transform="uppercase">
+      before <Typography fontWeight="bold">Inner</Typography> after
+    </Typography>,
+  );
+  expect(typography.toJSON()).toMatchSnapshot();
+});
+
+it("allows child Typography to control its own transform", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"before "}
+      <Typography fontWeight="bold" transform="lowercase">
+        Inner
+      </Typography>
+      {" after"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("supports multi-level nesting across Typography and Text", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"level1 "}
+      <Typography>
+        and <Typography transform="lowercase">INNER</Typography>
+      </Typography>
+      {" end"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("applies transform to parent strings only", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      {"test "}
+      <Typography>inner</Typography>
+    </Typography>,
+  );
+
+  expect(getByText(/TEST/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+});
+
+it("allows child transform to override parent transform", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      before <Typography transform="lowercase">INNER</Typography> after
+    </Typography>,
+  );
+
+  expect(getByText(/BEFORE/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+  expect(getByText(/AFTER/)).toBeDefined();
+});
+
 it("renders text with white color", () => {
   const typography = render(<Typography color="white">Test Text</Typography>);
   expect(typography.toJSON()).toMatchSnapshot();