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

package/src/Button/Button.style.ts

@@ -1,121 +1,120 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-const iconTranslateY = tokens["space-large"] / 2;
-const buttonRadius = tokens["radius-base"];
-export const baseButtonHeight = tokens["space-base"] * 3;
-export const smallButtonHeight = tokens["space-base"] * 2.5;
-
-export const styles = StyleSheet.create({
-  fullHeight: {
-    flexGrow: 1,
-    flexShrink: 0,
-  },
-
-  fullWidth: {
-    alignSelf: "stretch",
-  },
-
-  touchable: {
-    borderRadius: buttonRadius,
-  },
-
-  button: {
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "stretch",
-    flexDirection: "row",
-    overflow: "hidden",
-    margin: 0,
-    borderRadius: buttonRadius,
-    borderWidth: tokens["border-base"],
-    paddingVertical: tokens["space-small"],
-  },
-
-  base: {
-    minHeight: baseButtonHeight,
-    paddingHorizontal: tokens["space-base"],
-  },
-
-  small: {
-    minHeight: smallButtonHeight,
-    paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
-  },
-
-  reducedPaddingForFullWidth: {
-    paddingHorizontal: tokens["space-smaller"],
-  },
-
-  iconPaddingOffset: {
-    paddingRight: tokens["space-smaller"],
-  },
-
-  content: {
-    paddingLeft: tokens["space-large"],
-    height: "100%",
-  },
-
-  contentWithLabel: {
-    paddingLeft: tokens["space-large"] + tokens["space-small"],
-  },
-
-  iconStyle: {
-    position: "absolute",
-    top: "50%",
-    left: 0,
-    transform: [{ translateY: -iconTranslateY }],
-  },
-
-  labelStyle: {
-    flexGrow: 1,
-    justifyContent: "center",
-  },
-
-  /* Variations */
-
-  work: {
-    backgroundColor: tokens["color-interactive"],
-    borderColor: tokens["color-interactive"],
-  },
-
-  learning: {
-    backgroundColor: tokens["color-interactive--subtle"],
-    borderColor: tokens["color-interactive--subtle"],
-  },
-
-  destructive: {
-    backgroundColor: tokens["color-destructive"],
-    borderColor: tokens["color-destructive"],
-  },
-
-  /* Cancel is special because, by default, it's styled as a secondary button */
-  cancel: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-border"],
-  },
-
-  cancelSecondary: {
-    borderColor: "transparent",
-  },
-
-  /* Types */
-
-  primary: {},
-
-  secondary: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-border"],
-  },
-
-  tertiary: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: "transparent",
-  },
-
-  /* Disabled */
-
-  disabled: {
-    borderColor: tokens["color-disabled--secondary"],
-    backgroundColor: tokens["color-disabled--secondary"],
-  },
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+const iconTranslateY = staticTokens["space-large"] / 2;
+const buttonRadius = staticTokens["radius-base"];
+export const baseButtonHeight = staticTokens["space-base"] * 3;
+export const smallButtonHeight = staticTokens["space-base"] * 2.5;
+
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    fullHeight: {
+      flexGrow: 1,
+      flexShrink: 0,
+    },
+
+    fullWidth: {
+      alignSelf: "stretch",
+    },
+
+    touchable: {
+      borderRadius: buttonRadius,
+    },
+
+    button: {
+      justifyContent: "center",
+      alignItems: "center",
+      alignSelf: "stretch",
+      flexDirection: "row",
+      overflow: "hidden",
+      margin: 0,
+      borderRadius: buttonRadius,
+      borderWidth: tokens["border-base"],
+      paddingVertical: tokens["space-small"],
+    },
+
+    base: {
+      minHeight: baseButtonHeight,
+      paddingHorizontal: tokens["space-base"],
+    },
+
+    small: {
+      minHeight: smallButtonHeight,
+      paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+    },
+
+    reducedPaddingForFullWidth: {
+      paddingHorizontal: tokens["space-smaller"],
+    },
+
+    iconPaddingOffset: {
+      paddingRight: tokens["space-smaller"],
+    },
+
+    content: {
+      paddingLeft: tokens["space-large"],
+      height: "100%",
+    },
+
+    contentWithLabel: {
+      paddingLeft: tokens["space-large"] + tokens["space-small"],
+    },
+
+    iconStyle: {
+      position: "absolute",
+      top: "50%",
+      left: 0,
+      transform: [{ translateY: -iconTranslateY }],
+    },
+
+    labelStyle: {
+      flexGrow: 1,
+      justifyContent: "center",
+    },
+
+    /* Variations */
+    work: {
+      backgroundColor: tokens["color-interactive"],
+      borderColor: tokens["color-interactive"],
+    },
+
+    learning: {
+      backgroundColor: tokens["color-interactive--subtle"],
+      borderColor: tokens["color-interactive--subtle"],
+    },
+
+    destructive: {
+      backgroundColor: tokens["color-destructive"],
+      borderColor: tokens["color-destructive"],
+    },
+
+    /* Cancel is special because, by default, it's styled as a secondary button */
+    cancel: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: tokens["color-border"],
+    },
+
+    cancelSecondary: {
+      borderColor: "transparent",
+    },
+
+    /* Types */
+    primary: {},
+
+    secondary: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: tokens["color-border"],
+    },
+
+    tertiary: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: "transparent",
+    },
+
+    /* Disabled */
+    disabled: {
+      borderColor: tokens["color-disabled--secondary"],
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+  };
 });

package/src/Button/Button.test.tsx

@@ -44,7 +44,7 @@ function renderButton(element: ReactElement) {
   expect(instance.getByText(element.props.label)).toBeDefined();
 
   const buttonStyleEl = button.children[0] as ReactTestInstance;
-  const buttonStyle = buttonStyleEl.props.style.reduce(
+  const buttonStyle = buttonStyleEl.props.style.flat().reduce(
     (mergedStyles: CSSProperties, additionalStyles: CSSProperties) => ({
       ...mergedStyles,
       ...additionalStyles,
@@ -298,4 +298,91 @@ describe("Button", () => {
       expect(handlePress).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("UNSAFE_style", () => {
+    it("should apply the container style override", () => {
+      const containerStyle = {
+        backgroundColor: "red",
+        borderColor: tokens["color-base-red--500"],
+      };
+
+      const { buttonStyle } = renderButton(
+        <Button
+          label="Override"
+          onPress={jest.fn()}
+          UNSAFE_style={{ container: containerStyle }}
+        />,
+      );
+
+      expect(buttonStyle).toMatchObject(containerStyle);
+    });
+
+    it("should apply the contentContainer style override to labels", () => {
+      const contentContainerStyle = { padding: 10 };
+
+      const { getByTestId } = renderButton(
+        <Button
+          label="Override"
+          onPress={jest.fn()}
+          UNSAFE_style={{ contentContainer: contentContainerStyle }}
+        />,
+      );
+
+      const contentContainer = getByTestId("contentContainer");
+      expect(contentContainer.props.style).toContainEqual(
+        contentContainerStyle,
+      );
+    });
+
+    it("should apply the contentContainer style override to icons", () => {
+      const contentContainerStyle = { padding: 10 };
+
+      const { getByTestId } = renderButton(
+        <Button
+          label="Cog"
+          icon="cog"
+          onPress={jest.fn()}
+          UNSAFE_style={{ contentContainer: contentContainerStyle }}
+        />,
+      );
+
+      const contentContainer = getByTestId("contentContainer");
+      expect(contentContainer.props.style).toContainEqual(
+        contentContainerStyle,
+      );
+    });
+
+    it("should apply the iconContainer style override", () => {
+      const iconContainerStyle = { margin: 5 };
+
+      const { getByTestId } = renderButton(
+        <Button
+          label="Cog"
+          icon="cog"
+          onPress={jest.fn()}
+          UNSAFE_style={{ iconContainer: iconContainerStyle }}
+        />,
+      );
+
+      const iconContainer = getByTestId("iconContainer");
+      expect(iconContainer.props.style).toContainEqual(iconContainerStyle);
+    });
+
+    it("should apply the actionLabelContainer style override", () => {
+      const actionLabelContainerStyle = { margin: 5 };
+
+      const { getByTestId } = renderButton(
+        <Button
+          label="Override"
+          onPress={jest.fn()}
+          UNSAFE_style={{ actionLabelContainer: actionLabelContainerStyle }}
+        />,
+      );
+
+      const actionLabelContainer = getByTestId("actionLabelContainer");
+      expect(actionLabelContainer.props.style).toContainEqual(
+        actionLabelContainerStyle,
+      );
+    });
+  });
 });

package/src/Button/Button.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { TouchableHighlight, View } from "react-native";
+import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
-import { styles } from "./Button.style";
+import { useStyles } from "./Button.style";
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
 import { ActionLabel, ActionLabelVariation } from "../ActionLabel";
 import { Icon } from "../Icon";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 interface CommonButtonProps {
   /**
@@ -77,6 +77,20 @@ interface CommonButtonProps {
    * Used to locate this view in end-to-end tests.
    */
   readonly testID?: string;
+
+  /**
+   * **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?: ButtonUnsafeStyle;
+}
+
+export interface ButtonUnsafeStyle {
+  container?: StyleProp<ViewStyle>;
+  contentContainer?: StyleProp<ViewStyle>;
+  iconContainer?: StyleProp<ViewStyle>;
+  actionLabelContainer?: StyleProp<ViewStyle>;
 }
 
 interface LabelButton extends CommonButtonProps {
@@ -107,7 +121,11 @@ export function Button({
   accessibilityHint,
   icon,
   testID,
+  UNSAFE_style,
 }: ButtonProps): JSX.Element {
+  const { tokens } = useAtlantisTheme();
+  const styles = useStyles();
+
   const buttonStyle = [
     styles.button,
     styles[size],
@@ -141,11 +159,20 @@ export function Button({
         fullHeight && styles.fullHeight,
       ]}
     >
-      <View style={buttonStyle}>
+      <View style={[buttonStyle, UNSAFE_style?.container]}>
         {loading && <InternalButtonLoading variation={variation} type={type} />}
-        <View style={getContentStyles(label, icon)}>
+        <View
+          style={[
+            getContentStyles(label, icon, styles),
+            UNSAFE_style?.contentContainer,
+          ]}
+          testID="contentContainer"
+        >
           {icon && (
-            <View style={styles.iconStyle}>
+            <View
+              style={[styles.iconStyle, UNSAFE_style?.iconContainer]}
+              testID="iconContainer"
+            >
               <Icon
                 name={icon}
                 color={getIconColorVariation(variation, type, disabled)}
@@ -153,7 +180,10 @@ export function Button({
             </View>
           )}
           {label && (
-            <View style={styles.labelStyle}>
+            <View
+              style={[styles.labelStyle, UNSAFE_style?.actionLabelContainer]}
+              testID="actionLabelContainer"
+            >
               <ActionLabel
                 variation={getActionLabelVariation(variation, type)}
                 disabled={disabled}
@@ -217,6 +247,7 @@ function getIconColorVariation(
 function getContentStyles(
   label: string | undefined,
   icon: IconNames | undefined,
+  styles: ReturnType<typeof useStyles>,
 ) {
   if (label && !icon) {
     return undefined;

package/src/ButtonGroup/ButtonGroup.style.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  buttonGroup: {
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: tokens["space-small"],
-  },
-  button: {
-    flexBasis: tokens["space-largest"],
-    flexGrow: 1,
-  },
-  moreButton: {
-    flexBasis: tokens["space-largest"],
-    flexGrow: 0,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    buttonGroup: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: tokens["space-small"],
+    },
+    button: {
+      flexBasis: tokens["space-largest"],
+      flexGrow: 1,
+    },
+    moreButton: {
+      flexBasis: tokens["space-largest"],
+      flexGrow: 0,
+    },
+  };
 });

package/src/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { View } from "react-native";
 import { PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
-import { styles } from "./ButtonGroup.style";
+import { useStyles } from "./ButtonGroup.style";
 import { SecondaryActionSheet } from "./components/SecondaryActionSheet";
 import { getActions, usePreventTapWhenOffline } from "./utils";
 import { ButtonGroupActionElement } from "./types";
@@ -50,6 +50,7 @@ export function ButtonGroup({
   const { handlePress } = usePreventTapWhenOffline();
   const secondaryActionsRef = useRef<BottomSheetRef>();
   const { primaryActions, secondaryActions } = getActions(children);
+  const styles = useStyles();
 
   return (
     <View style={styles.buttonGroup}>

package/src/Card/Card.style.ts

@@ -1,46 +1,47 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    backgroundColor: tokens["color-surface"],
-  },
-
-  lowElevation: {
-    ...tokens["shadow-low"],
-  },
-
-  baseElevation: {
-    ...tokens["shadow-base"],
-  },
-
-  highElevation: {
-    ...tokens["shadow-high"],
-  },
-
-  headerTitle: {
-    flexGrow: 1,
-    flex: 1,
-  },
-
-  footer: {
-    height: tokens["space-largest"],
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
-
-  actionItem: {
-    height: tokens["typography--lineHeight-base"],
-    justifyContent: "center",
-  },
-
-  actionLabel: {
-    paddingTop: tokens["space-smallest"],
-  },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+      backgroundColor: tokens["color-surface"],
+    },
+
+    lowElevation: {
+      ...tokens["shadow-low"],
+    },
+
+    baseElevation: {
+      ...tokens["shadow-base"],
+    },
+
+    highElevation: {
+      ...tokens["shadow-high"],
+    },
+
+    headerTitle: {
+      flexGrow: 1,
+      flex: 1,
+    },
+
+    footer: {
+      height: tokens["space-largest"],
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
+
+    actionItem: {
+      height: tokens["typography--lineHeight-base"],
+      justifyContent: "center",
+    },
+
+    actionLabel: {
+      paddingTop: tokens["space-smallest"],
+    },
+  };
 });

package/src/Card/Card.tsx

@@ -7,7 +7,7 @@ import {
 } from "react-native";
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
-import { styles } from "./Card.style";
+import { useStyles } from "./Card.style";
 import { InternalCardHeader } from "./components/InternalCardHeader";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { ActionLabel } from "../ActionLabel";
@@ -61,7 +61,10 @@ interface ButtonAction {
 
 export type CardAction = XOR<IconAction, ButtonAction>;
 
-function getElevationStyle(elevation: elevationProp) {
+function getElevationStyle(
+  elevation: elevationProp,
+  styles: ReturnType<typeof useStyles>,
+) {
   if (elevation === "none") {
     return undefined;
   }
@@ -78,11 +81,13 @@ export function Card({
   error,
   elevation = "none",
 }: CardProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <ErrorMessageWrapper message={error} wrapFor="card">
       <View
         onLayout={handleLayoutChange}
-        style={[styles.container, getElevationStyle(elevation)]}
+        style={[styles.container, getElevationStyle(elevation, styles)]}
         testID={testID}
       >
         {header && (

package/src/Card/components/InternalCardHeader.style.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  header: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    paddingTop: tokens["space-small"] + tokens["space-smaller"],
-    paddingHorizontal: tokens["space-base"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    header: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      paddingTop: tokens["space-small"] + tokens["space-smaller"],
+      paddingHorizontal: tokens["space-base"],
+    },
 
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
 
-  noChildren: {
-    paddingBottom: tokens["space-small"] + tokens["space-smaller"],
-  },
+    noChildren: {
+      paddingBottom: tokens["space-small"] + tokens["space-smaller"],
+    },
+  };
 });

package/src/Card/components/InternalCardHeader.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./InternalCardHeader.style";
+import { useStyles } from "./InternalCardHeader.style";
 
 interface InternalCardHeaderProps {
   readonly children: ReactNode[] | ReactNode;
@@ -15,6 +15,8 @@ export function InternalCardHeader({
   testID,
   collapsable,
 }: InternalCardHeaderProps): JSX.Element {
+  const styles = useStyles();
+
   const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
 
   if (onPress) {