@jobber/components-native 0.115.1 → 0.115.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.115.1",
+    "version": "0.115.2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "df5ca5cd691c56be40fad67fae7ea644724656cc"
+    "gitHead": "b608e2db83fa37ba3ceaa2d8cd521a806853701c"
 }

package/dist/src/Chip/Chip.js

@@ -1,16 +1,31 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
+import { allColors } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor = "background", accessibilityLabel, accessibilityRole = "radio", accent, }) {
     const styles = useStyles();
-    const { tokens } = useAtlantisTheme();
-    const defaultAccentColor = tokens["color-surface--reverse"];
-    const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
-        const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
-        const iconColor = isActive ? tokens["color-surface"] : accentColor;
+    const { tokens, effectiveTheme } = useAtlantisTheme();
+    const { chipStyle, iconCustomColor, labelStyle, dismissColor } = useMemo(() => {
+        const accentColor = accent
+            ? tokens[`color-${accent}`]
+            : tokens["color-surface--reverse"];
+        let backgroundColor = accentColor;
+        let iconColor = isActive ? tokens["color-surface"] : accentColor;
+        let selectedLabelStyle;
+        if (isActive && accent) {
+            const selected = getSelectedAccentColors(accent, {
+                tokens,
+                effectiveTheme,
+            });
+            backgroundColor = selected.background;
+            iconColor = selected.foreground;
+            selectedLabelStyle = {
+                textStyle: { color: selected.foreground },
+            };
+        }
         const chip = [
             styles.container,
             {
@@ -18,7 +33,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
                     ? tokens["color-surface"]
                     : tokens["color-interactive--background"],
             },
-            isActive && { backgroundColor: accentColor },
+            isActive && { backgroundColor },
             getBorderStyle(inactiveBackgroundColor, tokens),
         ];
         const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
@@ -26,9 +41,17 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         return {
             chipStyle: chip,
             iconCustomColor: iconColor,
+            labelStyle: selectedLabelStyle,
             dismissColor: dismiss,
         };
-    }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
+    }, [
+        accent,
+        isActive,
+        inactiveBackgroundColor,
+        styles,
+        tokens,
+        effectiveTheme,
+    ]);
     const accessibilityState = useMemo(() => {
         const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
         if (checkableRoles.includes(accessibilityRole)) {
@@ -40,10 +63,24 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         icon && (React.createElement(View, { style: styles.iconLeft },
             React.createElement(Icon, { name: icon, size: "base", customColor: iconCustomColor }))),
         label && (React.createElement(View, { style: styles.chipText },
-            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
+            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive && !accent, UNSAFE_style: labelStyle }, label))),
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
             React.createElement(Icon, { name: "cross", size: "small" })))));
 }
+// Object labels and leading icons share the selected foreground.
+function getSelectedAccentColors(accent, { tokens, effectiveTheme, }) {
+    const colors = {
+        background: allColors[`color-${accent}`],
+        foreground: allColors["color-text--reverse"],
+    };
+    if (accent === "client") {
+        colors.background = tokens["color-client"];
+        if (effectiveTheme === "dark") {
+            colors.foreground = allColors["color-text"];
+        }
+    }
+    return colors;
+}
 function getBorderStyle(inactiveBackgroundColor, tokens) {
     let borderColor = "transparent";
     if (inactiveBackgroundColor === "surface") {

package/dist/src/Chip/Chip.test.js

@@ -1,6 +1,9 @@
 import React from "react";
+import { allColors, darkTokens } from "@jobber/design";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
 import { Chip } from "./Chip";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
 import { tokens } from "../utils/design";
 it("renders an active Chip", () => {
     const { getByText, getByLabelText } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), accessibilityLabel: "Foo chip", isActive: true }));
@@ -67,3 +70,53 @@ describe("accent", () => {
         });
     });
 });
+describe("selection color transitions", () => {
+    function example(theme, props = {}) {
+        return (React.createElement(AtlantisThemeContextProvider, { theme: theme },
+            React.createElement(Chip, Object.assign({ label: "Object", icon: "request", isActive: true }, props))));
+    }
+    function expectColors(view, background, text, icon = text) {
+        expect(view.getByTestId("chipTest")).toHaveStyle({
+            backgroundColor: background,
+        });
+        expect(view.getByText("Object")).toHaveStyle({ color: text });
+        const paths = view.UNSAFE_root.findAllByType(Path);
+        expect(paths.length).toBeGreaterThan(0);
+        for (const path of paths) {
+            expect(path.props.fill).toBe(icon);
+        }
+    }
+    it.each(["request", "quote", "job", "invoice"])("keeps the selected %s fill and white content when the theme changes", accent => {
+        expect.hasAssertions();
+        const props = { accent, icon: accent };
+        const view = render(example("light", props));
+        for (const theme of ["light", "dark", "light"]) {
+            view.rerender(example(theme, props));
+            expectColors(view, allColors[`color-${accent}`], allColors["color-text--reverse"]);
+        }
+    });
+    it("changes the selected client fill and foreground together with the theme", () => {
+        expect.hasAssertions();
+        const props = { accent: "client", icon: "clients" };
+        const view = render(example("light", props));
+        expectColors(view, allColors["color-client"], allColors["color-text--reverse"]);
+        view.rerender(example("dark", props));
+        expectColors(view, darkTokens["color-client"], allColors["color-text"]);
+        view.rerender(example("light", props));
+        expectColors(view, allColors["color-client"], allColors["color-text--reverse"]);
+    });
+    it.each(["request", "client"])("restores the theme's normal colors when %s is deselected", accent => {
+        const view = render(example("dark", { accent }));
+        view.rerender(example("dark", { accent, isActive: false }));
+        expectColors(view, darkTokens["color-interactive--background"], darkTokens["color-text"], darkTokens[`color-${accent}`]);
+        expect(view.getByTestId("chipTest").props.accessibilityState.checked).toBe(false);
+    });
+    it("preserves default selected colors when an accent is removed and the theme changes", () => {
+        expect.hasAssertions();
+        const view = render(example("dark", { accent: "request" }));
+        view.rerender(example("dark"));
+        expectColors(view, darkTokens["color-surface--reverse"], darkTokens["color-text--reverse"], darkTokens["color-surface"]);
+        view.rerender(example("light"));
+        expectColors(view, allColors["color-surface--reverse"], allColors["color-text--reverse"], allColors["color-surface"]);
+    });
+});