@jobber/components-native 0.84.4-match-mobi-accfa8a.9 → 0.84.4-match-mobi-3bb95e9.11

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

@@ -8,7 +8,11 @@ interface StatusLabelProps {
     /**
      * Text to display
      */
-    readonly text: string;
+    readonly text?: string;
+    /**
+     * Optional children for the status label's label
+     */
+    readonly children?: React.ReactNode;
     /**
      * Alignment of text and StatusIndicator
      */
@@ -18,5 +22,5 @@ interface StatusLabelProps {
      */
     readonly status?: StatusType;
 }
-export declare function StatusLabel({ text, alignment, status, }: StatusLabelProps): React.JSX.Element;
+export declare function StatusLabel({ text, children, alignment, status, }: StatusLabelProps): React.JSX.Element;
 export {};

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

@@ -15,7 +15,6 @@ export declare const useStyles: () => {
     };
     statusLabelText: {
         flexShrink: number;
-        marginBottom: number;
     };
     labelTextStartAligned: {
         flexDirection: "row-reverse";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.4-match-mobi-accfa8a.9+accfa8aef",
+  "version": "0.84.4-match-mobi-3bb95e9.11+3bb95e964",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "accfa8aefd00ea92526e90f81830b9a8691bdac7"
+  "gitHead": "3bb95e964be95042005c0b686e2d749294f3a3d5"
 }

package/src/StatusLabel/StatusLabel.style.ts

@@ -13,12 +13,11 @@ export const useStyles = buildThemedStyles(tokens => {
       gap: tokens["space-smaller"],
       backgroundColor: tokens["color-success--surface"],
       borderRadius: tokens["radius-large"],
-      paddingVertical: tokens["space-smaller"],
+      paddingVertical: tokens["space-smallest"] + tokens["space-minuscule"],
       paddingHorizontal: tokens["space-small"],
     },
     statusLabelText: {
       flexShrink: 1,
-      marginBottom: -1,
     },
     labelTextStartAligned: {
       flexDirection: "row-reverse",

package/src/StatusLabel/StatusLabel.tsx

@@ -21,7 +21,12 @@ interface StatusLabelProps {
   /**
    * Text to display
    */
-  readonly text: string;
+  readonly text?: string;
+
+  /**
+   * Optional children for the status label's label
+   */
+  readonly children?: React.ReactNode;
 
   /**
    * Alignment of text and StatusIndicator
@@ -36,6 +41,7 @@ interface StatusLabelProps {
 
 export function StatusLabel({
   text,
+  children,
   alignment = "end",
   status = "success",
 }: StatusLabelProps) {
@@ -49,16 +55,19 @@ export function StatusLabel({
         alignment === "start" && styles.labelTextStartAligned,
       ]}
     >
-      <View style={styles.statusLabelText}>
-        <Typography
-          align={alignment}
-          size="smaller"
-          fontWeight="medium"
-          color={`${status}OnSurface`}
-        >
-          {text}
-        </Typography>
-      </View>
+      {children && <View>{children}</View>}
+      {text && (
+        <View style={styles.statusLabelText}>
+          <Typography
+            align={alignment}
+            size="smaller"
+            fontWeight="medium"
+            color={`${status}OnSurface`}
+          >
+            {text}
+          </Typography>
+        </View>
+      )}
       <StatusIndicator status={status} />
     </View>
   );

package/src/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -29,7 +29,6 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -99,7 +98,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -112,7 +111,6 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -182,7 +180,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(7, 63%, 95%)",
@@ -195,7 +193,6 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -265,7 +262,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(195, 12%, 94%)",
@@ -278,7 +275,6 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -348,7 +344,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(207, 87%, 94%)",
@@ -361,7 +357,6 @@ exports[`StatusLabel status when status prop set to "informative" should match s
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -431,7 +426,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(52, 64%, 89%)",
@@ -444,7 +439,6 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >
@@ -514,7 +508,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
         "gap": 4,
         "justifyContent": "flex-end",
         "paddingHorizontal": 8,
-        "paddingVertical": 4,
+        "paddingVertical": 3,
       },
       {
         "backgroundColor": "hsl(109, 28%, 92%)",
@@ -527,7 +521,6 @@ exports[`StatusLabel status when status prop set to default ("success") should m
     style={
       {
         "flexShrink": 1,
-        "marginBottom": -1,
       }
     }
   >