@jobber/components-native 0.75.5 → 0.76.0

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

@@ -1,3 +1,4 @@
+import { StyleProp, ViewStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
@@ -58,6 +59,18 @@ 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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_style?: ButtonUnsafeStyle;
+}
+export interface ButtonUnsafeStyle {
+    container?: StyleProp<ViewStyle>;
+    contentContainer?: StyleProp<ViewStyle>;
+    iconContainer?: StyleProp<ViewStyle>;
+    actionLabelContainer?: StyleProp<ViewStyle>;
 }
 interface LabelButton extends CommonButtonProps {
     /**
@@ -70,5 +83,5 @@ interface IconButton extends CommonButtonProps {
     readonly accessibilityLabel: string;
 }
 export type ButtonProps = XOR<LabelButton, IconButton>;
-export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, testID, }: ButtonProps): JSX.Element;
+export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, testID, UNSAFE_style, }: ButtonProps): JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
-interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
+import { TypographyUnsafeStyle } from "../Typography/Typography";
+export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
     /**
      * Visual hierarchy of the text
      */
@@ -59,8 +60,13 @@ interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "
      * 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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+     */
+    readonly UNSAFE_style?: TypographyUnsafeStyle;
 }
 export type TextLevel = "text" | "textSupporting";
 export declare const TEXT_MAX_SCALED_FONT_SIZES: Record<TextLevel, number>;
-export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, underline, selectable, }: TextProps): JSX.Element;
-export {};
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, }: TextProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextProps } from "react-native";
+import { StyleProp, TextProps, TextStyle } from "react-native";
 export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "selectable"> {
     /**
      * Text capitalization
@@ -85,9 +85,13 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
      * Have text styled with strike through
      */
     readonly strikeThrough?: boolean;
+    readonly UNSAFE_style?: TypographyUnsafeStyle;
+}
+export interface TypographyUnsafeStyle {
+    textStyle?: StyleProp<TextStyle>;
 }
 export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
-declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, selectable, }: TypographyProps<T>): JSX.Element;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, }: TypographyProps<T>): JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.75.5",
+  "version": "0.76.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "baec68accebefa70b2f1234d757473e67a713ced"
+  "gitHead": "3dbb361d102c6ae833d1dce373125b7bf68508c0"
 }

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,5 +1,5 @@
 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";
@@ -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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   */
+  readonly UNSAFE_style?: ButtonUnsafeStyle;
+}
+
+export interface ButtonUnsafeStyle {
+  container?: StyleProp<ViewStyle>;
+  contentContainer?: StyleProp<ViewStyle>;
+  iconContainer?: StyleProp<ViewStyle>;
+  actionLabelContainer?: StyleProp<ViewStyle>;
 }
 
 interface LabelButton extends CommonButtonProps {
@@ -107,6 +121,7 @@ export function Button({
   accessibilityHint,
   icon,
   testID,
+  UNSAFE_style,
 }: ButtonProps): JSX.Element {
   const buttonStyle = [
     styles.button,
@@ -141,11 +156,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),
+            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 +177,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}

package/src/Text/Text.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
+import { tokens } from "@jobber/design";
 import { Text } from ".";
 
 it("renders text with no additional props", () => {
@@ -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 [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   */
+  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/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",

package/src/Typography/Typography.tsx

@@ -118,6 +118,8 @@ export interface TypographyProps<T extends FontFamily>
    * Have text styled with strike through
    */
   readonly strikeThrough?: boolean;
+
+  readonly UNSAFE_style?: TypographyUnsafeStyle;
 }
 
 const maxNumberOfLines = {
@@ -129,6 +131,10 @@ const maxNumberOfLines = {
   unlimited: undefined,
 };
 
+export interface TypographyUnsafeStyle {
+  textStyle?: StyleProp<TextStyle>;
+}
+
 export const Typography = React.memo(InternalTypography);
 
 // eslint-disable-next-line max-statements
@@ -152,6 +158,7 @@ function InternalTypography<T extends FontFamily = "base">({
   accessibilityRole = "text",
   strikeThrough = false,
   underline,
+  UNSAFE_style,
   selectable = true,
 }: TypographyProps<T>): JSX.Element {
   const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
@@ -176,6 +183,10 @@ function InternalTypography<T extends FontFamily = "base">({
     style.push(underlineTextStyle, styles.underline);
   }
 
+  if (UNSAFE_style?.textStyle) {
+    style.push(UNSAFE_style.textStyle);
+  }
+
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
   const text = getTransformedText(children, transform);