Merge branch 'develop' into release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.1.6",
+    "version": "2.2.0",
     "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.",
     "main": "",
     "scripts": {

scripts/bump-major.js

@@ -6,7 +6,7 @@ const { writeVersionFiles } = require("./lib/writeFile.js");
     const files = readVersionFiles(paths);
     const versionNumbers = files.pkg.version.split(".");
     const majorNumber = Number(versionNumbers[1]) + 1;
-    const majorVersion = majorNumber + "." + versionNumbers[1] + "." + versionNumbers[2];
+    const majorVersion = majorNumber + "." + 0 + "." + 0;
     files.pkg.version = files.manifest.js.version = files.manifest.sass.version = majorVersion;
     writeVersionFiles(files, paths);
 })();

scripts/bump-minor.js

@@ -6,7 +6,7 @@ const { writeVersionFiles } = require("./lib/writeFile.js");
     const files = readVersionFiles(paths);
     const versionNumbers = files.pkg.version.split(".");
     const minorNumber = Number(versionNumbers[1]) + 1;
-    const minorVersion = versionNumbers[0] + "." + minorNumber + "." + versionNumbers[2];
+    const minorVersion = versionNumbers[0] + "." + minorNumber + "." + 0;
     files.pkg.version = files.manifest.js.version = files.manifest.sass.version = minorVersion;
     writeVersionFiles(files, paths);
 })();

styles/native/app/custom-variables.js

@@ -1,4 +1,4 @@
-import { Platform }                                    from "react-native";
+import { NativeModules, Platform }                     from "react-native";
 import adjustFont                                      from "../core/helpers/_functions/adjustfont";
 import { setColorBasedOnBackground, setContrastScale } from "../core/helpers/_functions/convertcolors";
 
@@ -19,8 +19,10 @@ export const brand = {
     danger: "#ed1c24",
 };
 
-// Dark Mode
-const darkMode = false;
+// Dark Mode - Inherits OS theme if possible
+export const darkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode
+                 ? NativeModules.RNDarkMode.initialMode === "dark"
+                 : false;
 
 // Background Colors
 const backgroundColor = darkMode ? "#000" : "#FFF";

styles/native/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.1.6"
+    "version": "2.2.0"
 }

styles/native/core/variables.js

@@ -150,16 +150,29 @@ input = merge(input, custom.input || {});
 
 // Navigation Styles
 let navigation = {
+    statusBar: {
+        backgroundColor: background.primary,
+        barStyle: custom.darkMode ?  "light-content" : "dark-content",
+    },
     topBar: {
         backgroundColor: background.primary,
         backButtonColor: contrast.highest,
         titleColor: contrast.highest,
+        titleFontSize: font.sizeH4,
     },
     bottomBar: {
         color: contrast.high,
-        selectedColor: brand.primary,
+        selectedTextColor: contrast.high,
+        selectedIconColor: brand.primary,
         backgroundColor: background.primary,
+        fontSize: font.sizeSmall
     },
+    progressOverlay: {
+        color:  '#FFF',
+        activityIndicatorColor: '#FFF',
+        backgroundColor: `rgba(0, 0, 0, 0.5)`,
+        fontSize: font.size,
+    }
 };
 navigation = merge(navigation, custom.navigation || {});
 

styles/native/core/widgets/dropdown.js

@@ -42,9 +42,10 @@ export const DropDown = {
         borderColor: input.borderColor,
         backgroundColor: input.backgroundColor,
 
+        fontSize: input.fontSize,
         fontFamily: input.fontFamily,
         borderWidth: input.borderWidth,
-        borderRadius: input.radius,
+        borderRadius: input.borderRadius,
 
         paddingHorizontal: input.paddingHorizontal,
         paddingVertical: input.paddingVertical,
@@ -65,17 +66,6 @@ export const DropDownVertical = {
     pickerItemIOS: DropDown.pickerItemIOS,
     pickerBackdropIOS: DropDown.pickerBackdropIOS,
     pickerTopIOS: DropDown.pickerTopIOS,
-    value: {
-        color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
-
-        fontFamily: input.fontFamily,
-        borderRadius: input.radius,
-        borderWidth: input.borderWidth,
-
-        paddingVertical: input.paddingVertical,
-        paddingHorizontal: input.paddingHorizontal,
-    },
+    value: DropDown.value,
     validationMessage: TextBoxVertical.validationMessage,
 };

styles/native/core/widgets/images.js

@@ -1,3 +1,5 @@
+import { contrast } from "../variables.js";
+
 //
 // DISCLAIMER:
 // Do not change this file because it is core styling.
@@ -13,20 +15,22 @@
 
 export const Image = {
     container: {
-        // All ViewStyle properties are allowed
+        // RippleColor & All ViewStyle properties are allowed
+        rippleColor: contrast.lowest,
     },
     image: {
         // All ImageStyle properties are allowed
         resizeMode: "cover",
     },
 };
 
-export const NativeDynamicImage = {
+export const ImageViewer = {
     container: {
-        // All ViewStyle properties are allowed
+        // RippleColor & All ViewStyle properties are allowed
+        rippleColor: contrast.lowest,
     },
     image: {
         // All ImageStyle properties are allowed
         resizeMode: "cover",
     },
-};
+};

styles/native/core/widgets/maps.js

@@ -19,9 +19,16 @@ export const com_mendix_widget_native_maps_Maps = (Maps = {
         alignSelf: "stretch",
         aspectRatio: 4 / 3,
     },
+    loadingOverlay: {
+        // All ViewStyle properties are allowed
+    },
+    loadingIndicator: {
+        // Only color is allowed
+        color: brand.primary,
+    },
     marker: {
-        //Only color & opacity are allowed
+        // Only color & opacity are allowed
         color: brand.primary,
         opacity: 1,
     },
-});
+});

styles/native/core/widgets/navigation.js

@@ -15,34 +15,82 @@ import { font, navigation, spacing } from "../variables";
 ========================================================================== */
 
 export const navigationStyle = {
+    statusBar: {
+        // Android only
+        backgroundColor: navigation.statusBar.backgroundColor,
+        barStyle: navigation.statusBar.barStyle,
+    },
     topBar: {
-        backgroundColor: navigation.topBar.backgroundColor,
-        backButtonColor: navigation.topBar.backButtonColor,
-        titleColor: navigation.topBar.titleColor,
-        titleFontSize: font.sizeH4,
-        fontFamily: font.family,
-        fontWeight: Platform.select({ ios: font.weightBold, android: font.weightNormal }),
+        container: {
+            // All ViewStyle properties are allowed
+            backgroundColor: navigation.topBar.backgroundColor,
+        },
+        title: {
+            // All TextStyle properties are allowed
+            color: navigation.topBar.titleColor,
+            fontSize: navigation.topBar.titleFontSize,
+            fontFamily: font.family,
+            fontWeight: Platform.select({ ios: font.weightBold, android: font.weightNormal }),
+        },
+        backButtonText: {
+            // All TextStyle properties are allowed
+            color: navigation.topBar.backButtonColor,
+            fontFamily: font.family,
+        },
+        backButtonIcon: {
+            // All ImageStyle properties are allowed
+            tintColor: navigation.topBar.backButtonColor,
+        },
+        // backButtonIconSource: {},
     },
     bottomBar: {
-        fontSize: font.sizeSmall,
-        fontFamily: font.family,
-        backgroundColor: navigation.bottomBar.backgroundColor,
-        color: navigation.bottomBar.color,
-        selectedColor: navigation.bottomBar.selectedColor,
+        container: {
+            // All ViewStyle properties are allowed
+            backgroundColor: navigation.bottomBar.backgroundColor,
+        },
+        label: {
+            // All TextStyle properties are allowed
+            color: navigation.bottomBar.color,
+            fontFamily: font.family,
+            fontSize: navigation.bottomBar.fontSize,
+
+        },
+        selectedLabel: {
+            // All TextStyle properties are allowed
+            color: navigation.bottomBar.selectedTextColor,
+            fontFamily: font.family,
+            fontSize: navigation.bottomBar.fontSize,
+        },
+        icon: {
+            // All TextStyle properties are allowed
+            color: navigation.bottomBar.color,
+            fontSize: navigation.bottomBar.fontSize,
+        },
+        selectedIcon: {
+            // All TextStyle properties are allowed
+            color: navigation.bottomBar.selectedIconColor,
+            fontSize: navigation.bottomBar.fontSize,
+        },
     },
     progressOverlay: {
         background: {
-            backgroundColor: `rgba(0, 0, 0, 0.5)`,
+            // All ViewStyle properties are allowed
+            backgroundColor: navigation.progressOverlay.backgroundColor,
+        },
+        container: {
+            // All ViewStyle properties are allowed
+
         },
-        container: {},
         activityIndicator: {
-            color: "#FFF",
+            // Color, Size & All ViewStyle properties are allowed
+            color: navigation.progressOverlay.activityIndicatorColor,
         },
         text: {
-            color: "#FFF",
+            // All TextStyle properties are allowed
+            color: navigation.progressOverlay.color,
             marginTop: spacing.small,
-            fontSize: font.size,
             fontFamily: font.family,
+            fontSize: navigation.progressOverlay.fontSize,
         },
     },
 };

styles/native/core/widgets/progressbar.js

@@ -1,6 +1,6 @@
 import { Platform }            from "react-native";
 import { anyColorToRgbString } from "../helpers/_functions/convertcolors";
-import { brand }               from "../variables";
+import { brand, font, input }  from "../variables";
 
 //
 // DISCLAIMER:
@@ -37,4 +37,10 @@ export const com_mendix_widget_native_progressbar_ProgressBar = (ProgressBar = {
         //Only the backgroundColor property is allowed
         backgroundColor: brand.primary,
     },
-});
+    validationMessage: {
+        // All TextStyle properties are allowed
+        color: input.errorColor,
+        fontSize: font.size,
+        fontFamily: font.family,
+    }
+});

styles/native/core/widgets/progresscircle.js

@@ -1,4 +1,4 @@
-import { brand, font } from "../variables";
+import { brand, font, input } from "../variables";
 
 //
 // DISCLAIMER:
@@ -35,4 +35,10 @@ export const com_mendix_widget_native_progresscircle_ProgressCircle = (ProgressC
         fontWeight: font.weightSemiBold,
         fontFamily: font.family,
     },
+    validationMessage: {
+        // All TextStyle properties are allowed
+        color: input.errorColor,
+        fontSize: font.size,
+        fontFamily: font.family,
+    }
 });

styles/native/core/widgets/referenceselector.js

@@ -1,4 +1,5 @@
 import { input }                    from "../variables";
+import { DropDown }                 from "./dropdown.js";
 import { TextBox, TextBoxVertical } from "./textbox";
 
 //
@@ -42,9 +43,10 @@ export const ReferenceSelector = {
         borderColor: input.borderColor,
         backgroundColor: input.backgroundColor,
 
+        fontSize: input.fontSize,
         fontFamily: input.fontFamily,
         borderWidth: input.borderWidth,
-        borderRadius: input.radius,
+        borderRadius: input.borderRadius,
 
         paddingHorizontal: input.paddingHorizontal,
         paddingVertical: input.paddingVertical,
@@ -65,17 +67,6 @@ export const ReferenceSelectorVertical = {
     pickerItemIOS: ReferenceSelector.pickerItemIOS,
     pickerBackdropIOS: ReferenceSelector.pickerBackdropIOS,
     pickerTopIOS: ReferenceSelector.pickerTopIOS,
-    value: {
-        color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
-
-        fontFamily: input.fontFamily,
-        borderRadius: input.radius,
-        borderWidth: input.borderWidth,
-
-        paddingVertical: input.paddingVertical,
-        paddingHorizontal: input.paddingHorizontal,
-    },
+    value: DropDown.value,
     validationMessage: TextBoxVertical.validationMessage,
 };

styles/native/core/widgets/slider.js

@@ -1,5 +1,5 @@
-import { Platform }                            from "react-native";
-import { background, border, brand, contrast } from "../variables";
+import { Platform }                                         from "react-native";
+import { background, border, brand, contrast, font, input } from "../variables";
 
 //
 // DISCLAIMER:
@@ -57,6 +57,17 @@ export const com_mendix_widget_native_slider_Slider = (Slider = {
             },
         }),
     },
+    markerActive: {
+        // All ViewStyle properties are allowed
+        ...Platform.select({
+            android: {
+                borderWidth: 0,
+                width: 34,
+                height: 34,
+                borderRadius: 17,
+            },
+        }),
+    },
     markerDisabled: {
         // All ViewStyle properties are allowed
         ...Platform.select({
@@ -78,15 +89,10 @@ export const com_mendix_widget_native_slider_Slider = (Slider = {
             },
         }),
     },
-    markerActive: {
-        // All ViewStyle properties are allowed
-        ...Platform.select({
-            android: {
-                borderWidth: 0,
-                width: 34,
-                height: 34,
-                borderRadius: 17,
-            },
-        }),
-    },
-});
+    validationMessage: {
+        // All TextStyle properties are allowed
+        color: input.errorColor,
+        fontSize: font.size,
+        fontFamily: font.family,
+    }
+});