Merge branch 'develop' into release

styles/native/app/custom-variables.js

@@ -81,13 +81,20 @@ export const spacing = {
 
 // Button Styles
 export const button = {
-    fontSize: font.size,
+    fontSize: font.sizeSmall,
+    fontSizeIcon: font.sizeSmall,
     borderRadius: border.radius,
+    paddingVertical: Platform.select({ android: spacing.smaller, ios: spacing.smaller }),
+    paddingHorizontal: Platform.select({ android: spacing.small, ios: spacing.regular }),
 
     header: {
         color: brand.primary,
         borderColor: "transparent",
         backgroundColor: "transparent",
+        fontSize: font.size,
+        fontSizeIcon: font.size,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
     },
     primary: {
         color: "#FFF",
@@ -118,14 +125,15 @@ export const button = {
 
 //Input Styles
 export const input = {
+    // Colors
     color: font.color,
     errorColor: brand.danger,
-    labelColor: contrast.low,
+    labelColor: font.color,
     borderColor: contrast.lower,
     backgroundColor: background.primary,
     disabledBackgroundColor: contrast.lowest,
     selectionColor: contrast.lower,
-    placeholderTextColor: contrast.low,
+    placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
 
     // Sizes
@@ -139,3 +147,17 @@ export const input = {
     paddingHorizontal: spacing.small,
     paddingVertical: spacing.small,
 };
+
+// Navigation Styles
+export const navigation = {
+    topBar: {
+        backgroundColor: background.primary,
+        backButtonColor: contrast.highest,
+        titleColor: contrast.highest,
+    },
+    bottomBar: {
+        color: contrast.high,
+        selectedColor: brand.primary,
+        backgroundColor: background.primary,
+    },
+};

styles/native/core/base/flex.js

@@ -52,6 +52,13 @@ export const childrenCenter = {
         ...alignChildrenCenter,
     },
 };
+export const justifyContentStart = {
+    container: {
+        // justifyContent aligns children in the main direction.
+        // For example, if children are flowing vertically, justifyContent controls how they align vertically.
+        justifyContent: "flex-start",
+    },
+};
 export const justifyContentCenter = {
     container: {
         // justifyContent aligns children in the main direction.
@@ -87,6 +94,13 @@ export const justifyContentSpaceEvenly = {
         justifyContent: "space-evenly",
     },
 };
+export const alignChildrenStart = {
+    container: {
+        // alignItems aligns children in the cross direction.
+        // For example, if children are flowing vertically, alignItems controls how they align horizontally.
+        alignItems: "flex-start",
+    },
+};
 export const alignChildrenCenter = {
     container: {
         // alignItems aligns children in the cross direction.
@@ -115,6 +129,13 @@ export const alignChildrenBaseline = {
         alignContent: "baseline",
     },
 };
+export const alignContentStart = {
+    container: {
+        // alignContent aligns rows of children in the cross direction.
+        // For example, if children are flowing vertically, alignContent controls how they align horizontally.
+        alignContent: "flex-start",
+    },
+};
 export const alignContentCenter = {
     container: {
         // alignContent aligns rows of children in the cross direction.

styles/native/core/helpers/buttons.js

@@ -117,11 +117,11 @@ export const btnAsText = {
     icon: {
         color: brand.primary,
         fontWeight: font.weightSemiBold,
-        fontSize: font.sizeSmall,
+        fontSize: button.fontSizeIcon,
     },
     caption: {
         color: brand.primary,
         fontWeight: font.weightSemiBold,
-        fontSize: font.sizeSmall,
+        fontSize: button.fontSize,
     },
 };

styles/native/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.1.1"
+    "version": "2.1.2"
 }

styles/native/core/variables.js

@@ -79,13 +79,20 @@ spacing = merge(spacing, custom.spacing || {});
 
 // Button Styles
 let button = {
-    fontSize: font.size,
+    fontSize: font.sizeSmall,
+    fontSizeIcon: font.sizeSmall,
     borderRadius: border.radius,
+    paddingVertical: Platform.select({ android: spacing.smaller, ios: spacing.smaller }),
+    paddingHorizontal: Platform.select({ android: spacing.small, ios: spacing.regular }),
 
     header: {
         color: brand.primary,
         borderColor: "transparent",
         backgroundColor: "transparent",
+        fontSize: font.size,
+        fontSizeIcon: font.size,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
     },
     primary: {
         color: "#FFF",
@@ -120,12 +127,12 @@ let input = {
     // Colors
     color: font.color,
     errorColor: brand.danger,
-    labelColor: contrast.low,
+    labelColor: font.color,
     borderColor: contrast.lower,
     backgroundColor: background.primary,
     disabledBackgroundColor: contrast.lowest,
     selectionColor: contrast.lower,
-    placeholderTextColor: contrast.low,
+    placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
 
     // Sizes
@@ -141,4 +148,19 @@ let input = {
 };
 input = merge(input, custom.input || {});
 
-export { brand, background, border, contrast, font, spacing, button, input };
+// Navigation Styles
+let navigation = {
+    topBar: {
+        backgroundColor: background.primary,
+        backButtonColor: contrast.highest,
+        titleColor: contrast.highest
+    },
+    bottomBar: {
+        color: contrast.high,
+        selectedColor: brand.primary,
+        backgroundColor: background.primary,
+    }
+};
+navigation = merge(navigation, custom.navigation || {});
+
+export { brand, background, border, contrast, font, spacing, button, input, navigation };

styles/native/core/widgets/buttons.js

@@ -1,5 +1,4 @@
-import { Platform }                        from "react-native";
-import { button, contrast, font, spacing } from "../variables";
+import { button, contrast } from "../variables";
 
 //
 // DISCLAIMER:
@@ -25,26 +24,18 @@ export const ActionButton = {
         alignItems: "center",
         justifyContent: "center",
         borderRadius: button.borderRadius,
-        ...Platform.select({
-            ios: {
-                paddingVertical: spacing.smaller,
-                paddingHorizontal: spacing.regular,
-            },
-            android: {
-                paddingVertical: spacing.smaller,
-                paddingHorizontal: spacing.small,
-            },
-        }),
+        paddingVertical: button.paddingVertical,
+        paddingHorizontal: button.paddingHorizontal,
     },
     icon: {
         // Size, Color and all ViewStyle properties are allowed
         color: button.primary.color,
-        size: font.sizeSmall,
+        size: button.fontSizeIcon,
     },
     caption: {
         // All TextStyle properties are allowed
         color: button.primary.color,
-        fontSize: font.sizeSmall,
+        fontSize: button.fontSize,
     },
 };
 
@@ -53,14 +44,15 @@ export const ActionButtonHeader = {
     container: {
         borderColor: button.header.borderColor,
         backgroundColor: button.header.backgroundColor,
-        paddingVertical: 0,
-        paddingHorizontal: 0,
+        paddingVertical: button.header.paddingVertical,
+        paddingHorizontal: button.header.paddingHorizontal,
     },
     icon: {
-        size: font.size,
         color: button.header.color,
+        size: button.header.fontSizeIcon,
     },
     caption: {
         color: button.header.color,
+        size: button.header.fontSize,
     },
 };

styles/native/core/widgets/checkbox.js

@@ -32,8 +32,8 @@ export const CheckBox = {
         marginRight: Platform.select({ android: -3 }),
         thumbColorOn: background.primary,
         trackColorOn: brand.success,
-        thumbColorOff: background.lowest,
-        trackColorOff: contrast.lowest,
+        thumbColorOff: contrast.regular,
+        trackColorOff: contrast.lower,
     },
     inputDisabled: {
         opacity: Platform.select({ android: 0.5 }),
@@ -59,8 +59,19 @@ export const CheckBoxVertical = {
         ...TextBoxVertical.label,
     },
     input: {
+        ...CheckBox.input,
         alignSelf: "flex-start",
     },
-    inputError: TextBoxVertical.inputError,
-    validationMessage: TextBoxVertical.validationMessage,
+    inputDisabled: CheckBox.inputDisabled,
+    inputError: {
+        ...TextBoxVertical.inputError,
+        thumbColorOn: background.primary,
+        trackColorOn: brand.danger,
+        thumbColorOff: background.lowest,
+        trackColorOff: contrast.lowest,
+    },
+    validationMessage: {
+        ...TextBoxVertical.validationMessage,
+        alignSelf: "stretch",
+    },
 };

styles/native/core/widgets/dropdown.js

@@ -34,6 +34,7 @@ export const DropDown = {
     },
     pickerTopIOS: {
         // All ViewStyle properties are allowed
+        backgroundColor: input.backgroundColor,
     },
     value: {
         // All TextStyle properties are allowed

styles/native/core/widgets/feedback.js

@@ -50,7 +50,6 @@ export const com_mendix_widget_native_feedback_Feedback = (Feedback = {
         height: 100,
         fontSize: input.fontSize,
         fontFamily: input.fontFamily,
-        borderWidth: input.width,
         borderRadius: input.borderRadius,
         borderTopWidth: input.borderWidth,
         borderBottomWidth: input.borderWidth,

styles/native/core/widgets/navigation.js

@@ -1,5 +1,5 @@
-import { Platform }                          from "react-native";
-import { background, brand, contrast, font } from "../variables";
+import { Platform }                                      from "react-native";
+import { background, brand, contrast, font, navigation } from "../variables";
 
 //
 // DISCLAIMER:
@@ -16,16 +16,16 @@ import { background, brand, contrast, font } from "../variables";
 
 export const navigationStyle = {
     topBar: {
-        backgroundColor: background.primary,
-        backButtonColor: contrast.highest,
-        titleColor: contrast.highest,
+        backgroundColor: navigation.topBar.backgroundColor,
+        backButtonColor: navigation.topBar.backButtonColor,
+        titleColor: navigation.topBar.titleColor,
         titleFontSize: font.sizeH4,
         fontWeight: Platform.select({ ios: font.weightBold, android: font.weightNormal }),
     },
     bottomBar: {
         fontSize: font.sizeSmall,
-        backgroundColor: background.primary,
-        color: contrast.high,
-        selectedColor: brand.primary,
+        backgroundColor: navigation.bottomBar.backgroundColor,
+        color: navigation.bottomBar.color,
+        selectedColor: navigation.bottomBar.selectedColor,
     },
-};
+};

styles/native/core/widgets/referenceselector.js

@@ -34,6 +34,7 @@ export const ReferenceSelector = {
     },
     pickerTopIOS: {
         // All ViewStyle properties are allowed
+        backgroundColor: input.backgroundColor,
     },
     value: {
         // All TextStyle properties are allowed

styles/web/sass/core/base/_base.scss

@@ -4,13 +4,11 @@
 // Customizing core files will make updating Atlas much more difficult in the future.
 // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
 //
-
 /* ==========================================================================
    Base
 
    Default settings
 ========================================================================== */
-
 html {
     height: 100%;
 }
@@ -26,9 +24,9 @@ body {
 }
 
 a {
-    -webkit-transition: 0.25s;
     -moz-transition: 0.25s;
     -o-transition: 0.25s;
+    -webkit-transition: 0.25s;
     transition: 0.25s;
     color: $link-color;
     -webkit-backface-visibility: hidden;

styles/web/sass/core/helpers/_datagrids.scss

@@ -147,6 +147,7 @@
             width: 80%;
             padding-left: 0;
 
+            .btn,
             .form-control {
                 height: 35px;
                 font-size: 12px;