@jobber/components-native 0.75.3-POC-fixing-b57471f.136 → 0.75.3-POC-fixing-ffcd368.137

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Platform } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useFormController } from "../../../hooks";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 export interface BaseSwitchProps {
   /**
@@ -51,6 +51,8 @@ export function BaseSwitch({
 
   const internalValue = value ?? field.value;
 
+  const { tokens } = useAtlantisTheme();
+
   function getThumbColor() {
     if (Platform.OS === "android") {
       if (disabled) {
@@ -58,7 +60,7 @@ export function BaseSwitch({
       } else if (internalValue) {
         return tokens["color-interactive"];
       } else {
-        return tokens["color-surface--background"];
+        return tokens["color-interactive--background"];
       }
     }
 
@@ -79,7 +81,7 @@ export function BaseSwitch({
       //iOS
       return {
         true: tokens["color-interactive"],
-        false: tokens["color-surface--background"],
+        false: tokens["color-interactive--background"],
       };
     }
   }
@@ -96,7 +98,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-surface--background"]}
+      ios_backgroundColor={tokens["color-interactive--background"]}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{

package/src/Text/Text.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Text } from ".";
+import { tokens } from "../utils/design";
 
 it("renders text with no additional props", () => {
   const text = render(<Text>Test Text</Text>);
@@ -148,3 +149,22 @@ it("renders text with underline styling", () => {
 
   expect(text.toJSON()).toMatchSnapshot();
 });
+
+describe("UNSAFE_style", () => {
+  it("applies custom styles via UNSAFE_style prop", () => {
+    const customStyle = {
+      textStyle: {
+        fontSize: 20,
+        color: tokens["color-blue--dark"],
+      },
+    };
+
+    const { getByRole } = render(
+      <Text UNSAFE_style={customStyle}>Test Text</Text>,
+    );
+    const textElement = getByRole("text");
+    expect(textElement.props.style).toContainEqual(
+      expect.objectContaining(customStyle.textStyle),
+    );
+  });
+});

package/src/Text/Text.tsx

@@ -11,8 +11,9 @@ import {
   TypographyProps,
 } from "../Typography";
 import { tokens } from "../utils/design";
+import { TypographyUnsafeStyle } from "../Typography/Typography";
 
-interface TextProps
+export interface TextProps
   extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
   /**
    * Visual hierarchy of the text
@@ -85,6 +86,13 @@ interface TextProps
    * of the TextInput
    */
   readonly hideFromScreenReader?: boolean;
+
+  /**
+   * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+   * **last resort**. Using this may result in unexpected side effects.
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: TypographyUnsafeStyle;
 }
 
 export type TextLevel = "text" | "textSupporting";
@@ -125,6 +133,7 @@ export function Text({
   italic = false,
   hideFromScreenReader = false,
   maxFontScaleSize,
+  UNSAFE_style,
   underline,
   selectable,
 }: TextProps): JSX.Element {
@@ -133,6 +142,7 @@ export function Text({
   return (
     <Typography
       color={variation}
+      UNSAFE_style={UNSAFE_style}
       fontFamily="base"
       fontStyle={italic ? "italic" : "regular"}
       fontWeight={getFontWeight({ level, emphasis })}

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

@@ -459,7 +459,7 @@ exports[`renders text with subdued variation 1`] = `
         "fontFamily": "inter-regular",
       },
       {
-        "color": "hsl(197, 15%, 45%)",
+        "color": "hsl(197, 15%, 43%)",
       },
       {
         "textAlign": "left",
@@ -577,7 +577,7 @@ exports[`renders text with underline styling 1`] = `
         "textDecorationStyle": "dashed",
       },
       {
-        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationColor": "hsl(197, 15%, 43%)",
         "textDecorationLine": "underline",
       },
     ]

package/src/TextList/TextList.style.ts

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  details: {
-    width: "100%",
-    flexDirection: "column",
-  },
-  detail: {
-    flexDirection: "row",
-    paddingLeft: tokens["space-small"],
-  },
-  detailText: {
-    paddingLeft: tokens["space-small"],
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    details: {
+      width: "100%",
+      flexDirection: "column",
+    },
+    detail: {
+      flexDirection: "row",
+      paddingLeft: tokens["space-small"],
+    },
+    detailText: {
+      paddingLeft: tokens["space-small"],
+      flex: 1,
+    },
+  };
 });

package/src/TextList/TextList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./TextList.style";
+import { useStyles } from "./TextList.style";
 import { Content, Spacing } from "../Content";
 import { Text, TextLevel } from "../Text";
 
@@ -43,6 +43,8 @@ export function TextList({
   level = "text",
   spacing = "none",
 }: TextListProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <>
       {items && (

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

@@ -16,6 +16,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
         {
           "padding": 0,
         },
+        undefined,
       ]
     }
   >
@@ -23,6 +24,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
       style={
         [
           {},
+          undefined,
         ]
       }
     >
@@ -114,6 +116,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
           {
             "padding": 0,
           },
+          undefined,
         ]
       }
     >

package/src/ThumbnailList/ThumbnailList.style.ts

@@ -1,50 +1,51 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  list: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
-    overflow: "hidden",
-    marginTop: tokens["space-smaller"],
-  },
-  maxDimensionsForThreeRows: {
-    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
-  },
-  thumbnail: {
-    width: tokens["space-extravagant"],
-    height: tokens["space-extravagant"],
-    marginRight: tokens["space-smaller"],
-    marginBottom: tokens["space-smaller"],
-    borderRadius: tokens["radius-base"],
-    borderColor: tokens["color-border"],
-    borderWidth: tokens["border-base"],
-  },
-  centerThumbnailImage: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  dimensionsThumbnailImage: {
-    width: tokens["space-extravagant"],
-    height: tokens["space-extravagant"],
-  },
-  thumbnailName: {
-    position: "absolute",
-    right: 0,
-    bottom: 0,
-    left: 0,
-    paddingHorizontal: tokens["space-smaller"],
-    paddingVertical: tokens["space-smallest"],
-    borderTopColor: tokens["color-border"],
-    borderTopWidth: tokens["space-minuscule"],
-  },
-  thumbnailIcon: {
-    top: tokens["space-smaller"],
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    list: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
+      overflow: "hidden",
+      marginTop: tokens["space-smaller"],
+    },
+    maxDimensionsForThreeRows: {
+      maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
+    },
+    thumbnail: {
+      width: tokens["space-extravagant"],
+      height: tokens["space-extravagant"],
+      marginRight: tokens["space-smaller"],
+      marginBottom: tokens["space-smaller"],
+      borderRadius: tokens["radius-base"],
+      borderColor: tokens["color-border"],
+      borderWidth: tokens["border-base"],
+    },
+    centerThumbnailImage: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    dimensionsThumbnailImage: {
+      width: tokens["space-extravagant"],
+      height: tokens["space-extravagant"],
+    },
+    thumbnailName: {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      left: 0,
+      paddingHorizontal: tokens["space-smaller"],
+      paddingVertical: tokens["space-smallest"],
+      borderTopColor: tokens["color-border"],
+      borderTopWidth: tokens["space-minuscule"],
+    },
+    thumbnailIcon: {
+      top: tokens["space-smaller"],
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  };
 });

package/src/ThumbnailList/ThumbnailList.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import isNil from "lodash/isNil";
 import { RowCount, ThumbnailListProps } from "./types";
-import { styles } from "./ThumbnailList.style";
+import { useStyles } from "./ThumbnailList.style";
 import { File, FormatFile } from "../FormatFile";
 
 function isImage(file: File) {
@@ -26,6 +26,7 @@ export function ThumbnailList({
   createThumbnail,
 }: ThumbnailListProps): JSX.Element {
   const imageList = filterImages(files);
+  const styles = useStyles();
 
   return (
     <View

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

@@ -75,6 +75,7 @@ exports[`renders a thumbnail component with attachments 1`] = `
                   "borderRadius": 8,
                   "borderWidth": 1,
                   "marginBottom": 8,
+                  "overflow": "hidden",
                 },
                 {
                   "height": 64,

package/src/ThumbnailList/types.ts

@@ -17,5 +17,5 @@ export interface ThumbnailListProps {
     index: number;
     imageList: File[];
   }) => void;
-  createThumbnail: CreateThumbnail;
+  createThumbnail?: CreateThumbnail;
 }

package/src/Toast/Toast.styles.ts

@@ -1,31 +1,32 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    paddingHorizontal: tokens["space-base"],
-    paddingBottom: tokens["space-base"],
-  },
-  toast: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    maxWidth: 540,
-    paddingVertical: tokens["space-small"],
-    backgroundColor: tokens["color-blue"],
-    borderRadius: 6,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-  },
-  toastMessage: {
-    justifyContent: "center",
-    paddingLeft: tokens["space-base"],
-    paddingVertical: tokens["space-small"],
-    flexShrink: 1,
-  },
-  toastIcon: {
-    justifyContent: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      flexDirection: "row",
+      paddingHorizontal: tokens["space-base"],
+      paddingBottom: tokens["space-base"],
+    },
+    toast: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      maxWidth: 540,
+      paddingVertical: tokens["space-small"],
+      backgroundColor: tokens["color-blue"],
+      borderRadius: 6,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 6,
+    },
+    toastMessage: {
+      justifyContent: "center",
+      paddingLeft: tokens["space-base"],
+      paddingVertical: tokens["space-small"],
+      flexShrink: 1,
+    },
+    toastIcon: {
+      justifyContent: "center",
+    },
+  };
 });

package/src/Toast/Toast.tsx

@@ -6,11 +6,12 @@ import Toast, {
 } from "react-native-toast-message";
 import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { styles } from "./Toast.styles";
-import { tokens } from "../utils/design";
+import { useStyles } from "./Toast.styles";
 import { Text } from "../Text";
 import { IconButton } from "../IconButton";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { tokens as staticTokens } from "../utils/design";
 
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
@@ -18,7 +19,9 @@ const ANNOUNCEMENT_DELAY = 100;
 function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
   const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View style={toastContainerStyles}>
@@ -113,12 +116,13 @@ export function showToast({
 }
 
 function getBottomTabsOffset(bottomTabsVisible: boolean) {
-  const navBarHeight = tokens["space-largest"] + tokens["space-small"];
-  const navBarBorderTopWidth = tokens["space-minuscule"];
+  const navBarHeight =
+    staticTokens["space-largest"] + staticTokens["space-small"];
+  const navBarBorderTopWidth = staticTokens["space-minuscule"];
 
   if (bottomTabsVisible) {
-    return navBarHeight + navBarBorderTopWidth + tokens["space-base"];
+    return navBarHeight + navBarBorderTopWidth + staticTokens["space-base"];
   }
 
-  return tokens["space-base"];
+  return staticTokens["space-base"];
 }

package/src/Typography/Typography.style.ts

@@ -1,15 +1,20 @@
 import { Platform, StyleSheet, TextStyle } from "react-native";
 import { webFonts } from "./webFonts";
-import { tokens } from "../utils/design";
-
-const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
-const jumboLineHeight = tokens["typography--lineHeight-jumbo"];
-const largestLineHeight = tokens["typography--lineHeight-largest"];
-const largerLineHeight = tokens["typography--lineHeight-larger"];
-const largeLineHeight = tokens["typography--lineHeight-large"];
-const baseLineHeight = tokens["typography--lineHeight-base"];
-const tightLineHeight = tokens["typography--lineHeight-tight"];
-const minusculeLineHeight = tokens["typography--lineHeight-minuscule"];
+import { tokens as staticTokens } from "../utils/design";
+import {
+  AtlantisThemeContextValue,
+  buildThemedStyles,
+} from "../AtlantisThemeContext";
+
+const extravagantLineHeight =
+  staticTokens["typography--lineHeight-extravagant"];
+const jumboLineHeight = staticTokens["typography--lineHeight-jumbo"];
+const largestLineHeight = staticTokens["typography--lineHeight-largest"];
+const largerLineHeight = staticTokens["typography--lineHeight-larger"];
+const largeLineHeight = staticTokens["typography--lineHeight-large"];
+const baseLineHeight = staticTokens["typography--lineHeight-base"];
+const tightLineHeight = staticTokens["typography--lineHeight-tight"];
+const minusculeLineHeight = staticTokens["typography--lineHeight-minuscule"];
 
 const deviceFonts = {
   baseRegularRegular: {
@@ -77,9 +82,11 @@ const fonts = Platform.select({
 });
 
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export const typographyTokens: { [index: string]: TextStyle } = {
+export const getTypographyStyles = (
+  tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens,
+): { [index: string]: TextStyle } => ({
   // This follows a pattern of
   // { fontFamily }{ fontStyle }{ fontWeight }
   ...fonts,
@@ -610,17 +617,13 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   strikeThrough: {
     textDecorationLine: "line-through",
   },
-};
+});
 
 /**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
-export const typographyStyles: { [index: string]: TextStyle } =
-  StyleSheet.create(typographyTokens);
+export const typographyStyles: Record<string, TextStyle> = StyleSheet.create(
+  getTypographyStyles(staticTokens),
+);
+
+export const useTypographyStyles = buildThemedStyles(getTypographyStyles);

package/src/Typography/Typography.test.tsx

@@ -225,6 +225,20 @@ it("renders text that is inaccessible", () => {
   );
 });
 
+it("applies custom UNSAFE_style to text", () => {
+  const customStyle = { color: "red", fontSize: 20 };
+  const typography = render(
+    <Typography UNSAFE_style={{ textStyle: customStyle }}>
+      Test Text
+    </Typography>,
+  );
+  const textElement = typography.getByText("Test Text");
+
+  expect(textElement.props.style).toEqual(
+    expect.arrayContaining([expect.objectContaining(customStyle)]),
+  );
+});
+
 describe("underline", () => {
   it.each(["solid", "double", "dotted", "dashed"] as const)(
     "renders text with %s underline",