@jobber/components-native 0.115.1 → 0.115.2

package/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/src/Chip/Chip.test.tsx

@@ -1,6 +1,11 @@
 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 type { ChipProps } from "./Chip";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
+import type { EffectiveTheme } from "../AtlantisThemeContext";
 import { tokens } from "../utils/design";
 
 it("renders an active Chip", () => {
@@ -131,3 +136,110 @@ describe("accent", () => {
     });
   });
 });
+
+describe("selection color transitions", () => {
+  function example(theme: EffectiveTheme, props: Partial<ChipProps> = {}) {
+    return (
+      <AtlantisThemeContextProvider theme={theme}>
+        <Chip label="Object" icon="request" isActive {...props} />
+      </AtlantisThemeContextProvider>
+    );
+  }
+
+  function expectColors(
+    view: ReturnType<typeof render>,
+    background: string,
+    text: string,
+    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"] as const)(
+    "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"] as const) {
+        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" } as const;
+    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"] as const)(
+    "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"],
+    );
+  });
+});

package/src/Chip/Chip.tsx

@@ -2,9 +2,11 @@ import React, { useMemo } from "react";
 import type { AccessibilityRole } from "react-native";
 import { Pressable, View } from "react-native";
 import type { IconNames } from "@jobber/design";
+import { allColors } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
+import type { TypographyProps } from "../Typography";
 import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
@@ -71,34 +73,58 @@ export function Chip({
   accent,
 }: ChipProps) {
   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 chip = [
-      styles.container,
-      {
-        backgroundColor:
-          inactiveBackgroundColor === "surface"
-            ? tokens["color-surface"]
-            : tokens["color-interactive--background"],
-      },
-      isActive && { backgroundColor: accentColor },
-      getBorderStyle(inactiveBackgroundColor, tokens),
-    ];
-    const dismiss =
-      (isActive || inactiveBackgroundColor === "surface") &&
-      styles.activeDismissIcon;
-
-    return {
-      chipStyle: chip,
-      iconCustomColor: iconColor,
-      dismissColor: dismiss,
-    };
-  }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
+  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: TypographyProps<"base">["UNSAFE_style"];
+
+      if (isActive && accent) {
+        const selected = getSelectedAccentColors(accent, {
+          tokens,
+          effectiveTheme,
+        });
+
+        backgroundColor = selected.background;
+        iconColor = selected.foreground;
+        selectedLabelStyle = {
+          textStyle: { color: selected.foreground },
+        };
+      }
+
+      const chip = [
+        styles.container,
+        {
+          backgroundColor:
+            inactiveBackgroundColor === "surface"
+              ? tokens["color-surface"]
+              : tokens["color-interactive--background"],
+        },
+        isActive && { backgroundColor },
+        getBorderStyle(inactiveBackgroundColor, tokens),
+      ];
+      const dismiss =
+        (isActive || inactiveBackgroundColor === "surface") &&
+        styles.activeDismissIcon;
+
+      return {
+        chipStyle: chip,
+        iconCustomColor: iconColor,
+        labelStyle: selectedLabelStyle,
+        dismissColor: dismiss,
+      };
+    }, [
+      accent,
+      isActive,
+      inactiveBackgroundColor,
+      styles,
+      tokens,
+      effectiveTheme,
+    ]);
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
@@ -133,7 +159,8 @@ export function Chip({
             fontWeight="medium"
             maxFontScaleSize={tokens["typography--fontSize-large"]}
             maxLines="single"
-            reverseTheme={isActive}
+            reverseTheme={isActive && !accent}
+            UNSAFE_style={labelStyle}
           >
             {label}
           </Typography>
@@ -148,6 +175,30 @@ export function Chip({
   );
 }
 
+// Object labels and leading icons share the selected foreground.
+function getSelectedAccentColors(
+  accent: AccentType,
+  {
+    tokens,
+    effectiveTheme,
+  }: Pick<AtlantisThemeContextValue, "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: "surface" | "background",
   tokens: AtlantisThemeContextValue["tokens"],