Feat: Including styles for tabcontainer badge

Author: Diego Antonelli

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,18 @@ export const TabContainer = {
         fontWeight: tabContainer.activeLabel.fontWeight,
         textTransform: tabContainer.activeLabel.textTransform,
     },
+    badgeContainer: {
+        borderRadius: badge.borderRadius,
+        backgroundColor: badge.default.backgroundColor,
+        paddingVertical: badge.paddingVertical,
+        paddingHorizontal: badge.paddingHorizontal,
+        marginLeft: 8
+    },
+    badgeCaption: {
+        fontSize: font.size,
+        color: badge.default.color,
+        fontFamily: font.family,
+        fontWeight: badge.fontWeight,
+        marginTop: -1,
+    }
 };

styles/web/sass/core/widgets/_tabcontainer.scss

@@ -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;
+}