@jobber/components-native 0.52.0 → 0.53.0

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

@@ -71,9 +71,13 @@ export declare const styles: {
         backgroundColor: string;
         borderColor: string;
     };
+    cancelSecondary: {
+        borderColor: string;
+    };
     primary: {};
     secondary: {
         backgroundColor: string;
+        borderColor: string;
     };
     tertiary: {
         backgroundColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "5554661baa9482140012e2e67c609484974fd12d"
+  "gitHead": "5e1ab691f54f32589367e99fc60cd05b749f5df6"
 }

package/src/ActionLabel/ActionLabel.test.tsx

@@ -5,7 +5,7 @@ import { ActionLabel } from "./ActionLabel";
 import { tokens } from "../utils/design";
 
 const defaultStyles = {
-  fontFamily: "inter-extrabold",
+  fontFamily: "inter-semibold",
   color: tokens["color-interactive"],
   textAlign: "center",
   fontSize: tokens["typography--fontSize-base"],

package/src/ActionLabel/ActionLabel.tsx

@@ -64,6 +64,7 @@ function getColor(variation: ActionLabelVariation, disabled: boolean) {
   if (disabled) {
     return "disabled";
   }
+
   if (variation) {
     return variation;
   }
@@ -76,7 +77,7 @@ function getFontWeight(type: ActionLabelType) {
     return "bold";
   }
 
-  return "extraBold";
+  return "semiBold";
 }
 
 function getLetterSpacing(type: ActionLabelType) {

package/src/Button/Button.style.ts

@@ -2,9 +2,9 @@ import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 
 const iconTranslateY = tokens["space-large"] / 2;
-const buttonRadius = tokens["radius-large"];
-export const baseButtonHeight = tokens["space-base"] * 3.5;
-export const smallButtonHeight = tokens["space-base"] * 2.25;
+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: {
@@ -91,7 +91,11 @@ export const styles = StyleSheet.create({
   /* Cancel is special because, by default, it's styled as a secondary button */
   cancel: {
     backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-interactive--subtle"],
+    borderColor: tokens["color-border"],
+  },
+
+  cancelSecondary: {
+    borderColor: "transparent",
   },
 
   /* Types */
@@ -100,11 +104,12 @@ export const styles = StyleSheet.create({
 
   secondary: {
     backgroundColor: tokens["color-surface"],
+    borderColor: tokens["color-border"],
   },
 
   tertiary: {
     backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-surface"],
+    borderColor: "transparent",
   },
 
   /* Disabled */

package/src/Button/Button.test.tsx

@@ -74,7 +74,7 @@ describe("Button", () => {
       "cancel",
       {
         bgColor: tokens["color-white"],
-        borderColor: tokens["color-interactive--subtle"],
+        borderColor: tokens["color-border"],
       },
     ],
     ["destructive", { bgColor: tokens["color-destructive"] }],
@@ -96,10 +96,13 @@ describe("Button", () => {
       "secondary",
       {
         bgColor: tokens["color-white"],
-        borderColor: tokens["color-interactive"],
+        borderColor: tokens["color-border"],
       },
     ],
-    ["tertiary", { bgColor: tokens["color-white"] }],
+    [
+      "tertiary",
+      { bgColor: tokens["color-surface"], borderColor: "transparent" },
+    ],
   ])("renders a %s Button", (type, { bgColor, borderColor }) => {
     const { buttonStyle } = renderButton(
       <Button label={type} type={type} onPress={jest.fn()} />,

package/src/Button/Button.tsx

@@ -110,12 +110,13 @@ export function Button({
 }: ButtonProps): JSX.Element {
   const buttonStyle = [
     styles.button,
+    styles[size],
     styles[variation],
     styles[type],
-    styles[size],
+    type === "secondary" && variation === "cancel" && styles.cancelSecondary,
     disabled && styles.disabled,
-    fullHeight && styles.fullHeight,
     fullWidth && styles.reducedPaddingForFullWidth,
+    fullHeight && styles.fullHeight,
   ];
 
   // attempts to use Pressable caused problems.  When a ScrollView contained