Merge pull request #72 from mendix/tabcontainer-badge

Feat: Including styles for tabcontainer badge

Author: wegiswes

styles/native/js/core/widgets/badge.js

@@ -14,6 +14,7 @@ To customize any core styling, copy the part you want to customize to styles/nat
 export const com_mendix_widget_native_badge_Badge = {
     container: {
         // All ViewStyle properties are allowed
+        borderRadius: badge.borderRadius,
         backgroundColor: badge.default.backgroundColor,
         paddingVertical: badge.paddingVertical,
         paddingHorizontal: badge.paddingHorizontal,

styles/native/js/core/widgets/tabcontainer.js

@@ -1,4 +1,4 @@
-import { font, spacing, tabContainer } from "../variables";
+import { badge, font, spacing, tabContainer } from "../variables";
 /*
 
 DISCLAIMER:
@@ -48,4 +48,20 @@ export const TabContainer = {
         fontWeight: tabContainer.activeLabel.fontWeight,
         textTransform: tabContainer.activeLabel.textTransform,
     },
+    badgeContainer: {
+        // All ViewStyle properties are allowed
+        borderRadius: badge.borderRadius,
+        backgroundColor: badge.default.backgroundColor,
+        paddingVertical: badge.paddingVertical,
+        paddingHorizontal: badge.paddingHorizontal,
+        marginLeft: 8
+    },
+    badgeCaption: {
+        // All TextStyle properties are allowed
+        fontSize: font.size,
+        color: badge.default.color,
+        fontFamily: font.family,
+        fontWeight: badge.fontWeight,
+        marginTop: -1,
+    }
 };

styles/native/ts/core/widgets/badge.ts

@@ -15,6 +15,7 @@ To customize any core styling, copy the part you want to customize to styles/nat
 export const com_mendix_widget_native_badge_Badge: BadgeType = {
     container: {
         // All ViewStyle properties are allowed
+        borderRadius: badge.borderRadius,
         backgroundColor: badge.default.backgroundColor,
         paddingVertical: badge.paddingVertical,
         paddingHorizontal: badge.paddingHorizontal,

styles/native/ts/core/widgets/tabcontainer.ts

@@ -1,5 +1,5 @@
-import { font, spacing, tabContainer } from "../variables";
-import { TabContainerType }            from "../../types/widgets";
+import { badge, font, spacing, tabContainer } from "../variables";
+import { TabContainerType }                   from "../../types/widgets";
 /*
 
 DISCLAIMER:
@@ -49,4 +49,20 @@ export const TabContainer: TabContainerType = {
         fontWeight: tabContainer.activeLabel.fontWeight,
         textTransform: tabContainer.activeLabel.textTransform,
     },
+    badgeContainer: {
+        // All ViewStyle properties are allowed
+        borderRadius: badge.borderRadius,
+        backgroundColor: badge.default.backgroundColor,
+        paddingVertical: badge.paddingVertical,
+        paddingHorizontal: badge.paddingHorizontal,
+        marginLeft: 8
+    },
+    badgeCaption: {
+        // All TextStyle properties are allowed
+        fontSize: font.size,
+        color: badge.default.color,
+        fontFamily: font.family,
+        fontWeight: badge.fontWeight,
+        marginTop: -1,
+    }
 };

styles/native/ts/types/widgets.d.ts

@@ -411,7 +411,9 @@ export interface TabContainerType {
     indicator?: ViewStyle,
     tab?: ViewStyle,
     label?: TextStyle,
-    activeLabel?: TextStyle
+    activeLabel?: TextStyle,
+    badgeContainer?: ViewStyle,
+    badgeCaption?: TextStyle
 }
 
 // Text Box

styles/web/css/main.css

@@ -84,3 +84,14 @@
         }
     }
 }
+
+.mx-tabcontainer-badge {
+    margin-left: 8px;
+    border-radius: $font-size-small;
+    background-color: $label-primary-bg;
+    color: $label-primary-color;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    line-height: 1;
+    padding: 3px 7px;
+}