Merge develop in to release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.6.3",
+    "version": "2.6.4",
     "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": {
@@ -23,4 +23,4 @@
         "react-native-device-info": "^5.5.3"
     },
     "dependencies": {}
-}
+}

styles/native/js/app/custom-variables.js

@@ -23,10 +23,14 @@ export const brand = {
     dangerLight: `rgba(${anyColorToRgbString("#ed1c24")}, 0.14)`,
 };
 //
+// Safely check if Appearance API is available in this version of React Native
+const Appearance = require("react-native").Appearance;
 // Dark Mode - Inherits OS theme if possible
 export const darkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode
     ? NativeModules.RNDarkMode.initialMode === "dark"
-    : false;
+    : Appearance
+        ? Appearance.getColorScheme() === "dark"
+        : false;
 //
 // Background Colors
 const backgroundColor = darkMode ? "#000" : "#FFF";
@@ -151,6 +155,7 @@ export const input = {
     labelColor: font.color,
     labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
+    borderColorFocused: "",
     backgroundColor: background.primary,
     backgroundColorDisabled: contrast.lowest,
     selectionColor: contrast.lower,
@@ -255,13 +260,13 @@ export const tabContainer = {
         backgroundColor: badge.default.backgroundColor,
         paddingVertical: badge.paddingVertical,
         paddingHorizontal: badge.paddingHorizontal,
-        marginLeft: 8
+        marginLeft: 8,
     },
     badgeCaption: {
         fontSize: font.size,
         color: badge.default.color,
         fontWeight: badge.fontWeight,
-    }
+    },
 };
 //
 // ListView Styles

styles/native/js/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.6.3"
+    "version": "2.6.4"
 }

styles/native/js/core/variables.js

@@ -151,6 +151,7 @@ let input = {
     labelColor: font.color,
     labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
+    borderColorFocused: brand.primary,
     backgroundColor: background.primary,
     backgroundColorDisabled: background.secondary,
     selectionColor: contrast.lower,

styles/native/js/core/widgets/dropdown.js

@@ -32,27 +32,37 @@ export const DropDown = {
     value: {
         // All TextStyle properties & placeholderTextColor are allowed
         color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
         fontSize: input.fontSize,
         fontFamily: input.fontFamily,
-        borderWidth: input.borderWidth,
-        borderRadius: input.borderRadius,
-        paddingHorizontal: input.paddingHorizontal,
-        paddingVertical: input.paddingVertical,
         placeholderTextColor: input.placeholderTextColor,
     },
-    valueDisabled: {
-        // All TextStyle properties are allowed
-        ...TextBox.inputDisabled
-    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
     },
     /*  New dropdown styles start */
+    valueFocused: {
+    // All TextStyle properties are allowed
+    },
+    valueDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.inputDisabled
+    },
     valueContainer: {
-    // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
+        // All ViewStyle properties & rippleColor are allowed
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: input.borderWidth,
+        borderRadius: input.borderRadius,
+        borderColor: input.borderColor,
+        paddingHorizontal: input.paddingHorizontal,
+        paddingVertical: input.paddingVertical,
+        backgroundColor: input.backgroundColor,
+    },
+    valueContainerFocused: {
+        // All ViewStyle properties are allowed
+        ...TextBox.inputFocused
     },
     valueContainerDisabled: {
     // All ViewStyle properties are allowed
@@ -74,6 +84,10 @@ export const DropDown = {
         backgroundColor: input.backgroundColor,
         underlayColor: input.inputContainerUnderlayColor,
     },
+    iconStyle: {
+        // All TextStyle properties are allowed
+        color: input.color
+    },
     item: {
         // All TextStlye properties are allowed
         color: input.color,
@@ -110,12 +124,15 @@ export const DropDownVertical = {
     label: TextBoxVertical.label,
     labelDisabled: TextBoxVertical.labelDisabled,
     value: DropDown.value,
+    valueFocused: DropDown.valueFocused,
+    validationMessage: TextBoxVertical.validationMessage,
     valueContainer: DropDown.valueContainer,
+    valueContainerFocused: DropDown.valueContainerFocused,
     valueContainerDisabled: DropDown.valueContainerDisabled,
-    validationMessage: TextBoxVertical.validationMessage,
     menuWrapper: DropDown.menuWrapper,
     itemContainer: DropDown.itemContainer,
     item: DropDown.item,
+    iconStyle: DropDown.iconStyle,
     useUniformDesign: DropDown.useUniformDesign,
     pickerIOS: DropDown.pickerIOS,
     pickerItemIOS: DropDown.pickerItemIOS,

styles/native/js/core/widgets/floatingactionbutton.js

@@ -60,6 +60,7 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton
         // All TextStyle properties are allowed
         color: font.color,
         fontSize: font.size,
+        lineHeight: font.size,
         fontFamily: font.family,
     },
     secondaryButtonCaptionContainer: {

styles/native/js/core/widgets/navigation.js

@@ -7,9 +7,9 @@ Customizing core files will make updating Atlas much more difficult in the futur
 To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
 
 ==========================================================================
-    TopBar / BottomBar / ProgressOverlay
+    BottomBar / ProgressOverlay
 
-    Default Class For Mendix TopBar, BottomBar and ProgressOverlay
+    Default Class For Mendix BottomBar and ProgressOverlay
 ========================================================================== */
 export const navigationStyle = {
     bottomBar: {

styles/native/js/core/widgets/referenceselector.js

@@ -1,5 +1,5 @@
 import { border, contrast, font, input } from "../variables";
-import { DropDown } from "./dropdown";
+import { DropDownVertical } from "./dropdown";
 import { TextBox, TextBoxVertical } from "./textbox";
 /*
 
@@ -33,28 +33,38 @@ export const ReferenceSelector = {
     value: {
         // All TextStyle properties & placeholderTextColor are allowed
         color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
         fontSize: input.fontSize,
         fontFamily: input.fontFamily,
-        borderWidth: input.borderWidth,
-        borderRadius: input.borderRadius,
         overflow: "hidden",
-        paddingHorizontal: input.paddingHorizontal,
-        paddingVertical: input.paddingVertical,
         placeholderTextColor: input.placeholderTextColor,
     },
-    valueDisabled: {
-        // All TextStyle properties are allowed
-        ...TextBox.inputDisabled
-    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
     },
     /*  New dropdown styles start */
+    valueFocused: {
+    // All TextStyle properties are allowed
+    },
+    valueDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.inputDisabled,
+    },
     valueContainer: {
-    // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
+        // All ViewStyle properties & rippleColor are allowed
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: input.borderWidth,
+        borderRadius: input.borderRadius,
+        borderColor: input.borderColor,
+        paddingHorizontal: input.paddingHorizontal,
+        paddingVertical: input.paddingVertical,
+        backgroundColor: input.backgroundColor,
+    },
+    valueContainerFocused: {
+        // All ViewStyle properties are allowed
+        ...TextBox.inputFocused,
     },
     valueContainerDisabled: {
     // All ViewStyle properties are allowed
@@ -66,7 +76,7 @@ export const ReferenceSelector = {
         shadowOpacity: 0.2,
         shadowRadius: 10,
         elevation: 16,
-        backgroundColor: input.backgroundColor
+        backgroundColor: input.backgroundColor,
     },
     itemContainer: {
         // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
@@ -76,6 +86,10 @@ export const ReferenceSelector = {
         backgroundColor: input.backgroundColor,
         underlayColor: input.inputContainerUnderlayColor,
     },
+    iconStyle: {
+        // All TextStyle properties are allowed
+        color: input.color,
+    },
     item: {
         // All TextStyle properties are allowed
         color: input.color,
@@ -111,16 +125,19 @@ export const ReferenceSelectorVertical = {
     containerDisabled: TextBoxVertical.containerDisabled,
     label: TextBoxVertical.label,
     labelDisabled: TextBoxVertical.labelDisabled,
-    value: DropDown.value,
-    valueContainer: DropDown.valueContainer,
-    valueContainerDisabled: DropDown.valueContainerDisabled,
+    value: DropDownVertical.value,
+    valueFocused: DropDownVertical.valueFocused,
     validationMessage: TextBoxVertical.validationMessage,
-    menuWrapper: DropDown.menuWrapper,
-    itemContainer: DropDown.itemContainer,
-    item: DropDown.item,
-    useUniformDesign: DropDown.useUniformDesign,
-    pickerIOS: DropDown.pickerIOS,
-    pickerItemIOS: DropDown.pickerItemIOS,
-    pickerBackdropIOS: DropDown.pickerBackdropIOS,
-    pickerTopIOS: DropDown.pickerTopIOS,
+    valueContainer: DropDownVertical.valueContainer,
+    valueContainerFocused: DropDownVertical.valueContainerFocused,
+    valueContainerDisabled: DropDownVertical.valueContainerDisabled,
+    menuWrapper: DropDownVertical.menuWrapper,
+    itemContainer: DropDownVertical.itemContainer,
+    item: DropDownVertical.item,
+    iconStyle: DropDownVertical.iconStyle,
+    useUniformDesign: DropDownVertical.useUniformDesign,
+    pickerIOS: DropDownVertical.pickerIOS,
+    pickerItemIOS: DropDownVertical.pickerItemIOS,
+    pickerBackdropIOS: DropDownVertical.pickerBackdropIOS,
+    pickerTopIOS: DropDownVertical.pickerTopIOS,
 };

styles/native/js/core/widgets/textarea.js

@@ -46,6 +46,10 @@ export const TextArea = {
         // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
         ...TextBox.inputError,
     },
+    inputFocused: {
+        // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
+        ...TextBox.inputFocused,
+    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
@@ -64,5 +68,6 @@ export const TextAreaVertical = {
     input: TextBoxVertical.input,
     inputDisabled: TextBoxVertical.inputDisabled,
     inputError: TextBoxVertical.inputError,
+    inputFocused: TextBoxVertical.inputFocused,
     validationMessage: TextBoxVertical.validationMessage,
 };

styles/native/js/core/widgets/textbox.js

@@ -57,6 +57,10 @@ export const TextBox = {
         placeholderTextColor: input.errorColor,
         underlineColorAndroid: input.underlineColorAndroid,
     },
+    inputFocused: {
+        // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
+        borderColor: input.borderColorFocused
+    },
     validationMessage: {
         // All TextStyle properties are allowed
         color: input.errorColor,
@@ -89,6 +93,7 @@ export const TextBoxVertical = {
         paddingHorizontal: input.paddingHorizontal,
         paddingVertical: input.paddingVertical,
     },
+    inputFocused: TextBox.inputFocused,
     inputDisabled: TextBox.inputDisabled,
     inputError: TextBox.inputError,
     validationMessage: TextBox.validationMessage,

styles/native/ts/app/custom-variables.ts

@@ -175,6 +175,7 @@ export const input: VariablesInput = {
     labelColor: font.color,
     labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
+    borderColorFocused: "",
     backgroundColor: background.primary,
     backgroundColorDisabled: contrast.lowest,
     selectionColor: contrast.lower,
@@ -283,13 +284,13 @@ export const tabContainer: VariablesTabContainer = {
         backgroundColor: badge.default.backgroundColor,
         paddingVertical: badge.paddingVertical,
         paddingHorizontal: badge.paddingHorizontal,
-        marginLeft: 8
+        marginLeft: 8,
     },
     badgeCaption: {
         fontSize: font.size,
         color: badge.default.color,
         fontWeight: badge.fontWeight,
-    }
+    },
 };
 //
 // ListView Styles

styles/native/ts/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.6.3"
+    "version": "2.6.4"
 }

styles/native/ts/core/variables.ts

@@ -167,6 +167,7 @@ let input: VariablesInput = {
     labelColor: font.color,
     labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
+    borderColorFocused: brand.primary,
     backgroundColor: background.primary,
     backgroundColorDisabled: background.secondary,
     selectionColor: contrast.lower,

styles/native/ts/core/widgets/dropdown.ts

@@ -63,6 +63,7 @@ export const DropDown: DropDownType = {
     },
     valueContainerFocused: {
         // All ViewStyle properties are allowed
+        ...TextBox.inputFocused
     },
     valueContainerDisabled: {
         // All ViewStyle properties are allowed

styles/native/ts/core/widgets/floatingactionbutton.ts

@@ -61,6 +61,7 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton:
         // All TextStyle properties are allowed
         color: font.color,
         fontSize: font.size,
+        lineHeight: font.size,
         fontFamily: font.family,
     },
     secondaryButtonCaptionContainer: {

styles/native/ts/core/widgets/navigation.ts

@@ -8,9 +8,9 @@ Customizing core files will make updating Atlas much more difficult in the futur
 To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
 
 ==========================================================================
-    TopBar / BottomBar / ProgressOverlay
+    BottomBar / ProgressOverlay
 
-    Default Class For Mendix TopBar, BottomBar and ProgressOverlay
+    Default Class For Mendix BottomBar and ProgressOverlay
 ========================================================================== */
 export const navigationStyle: NavigationType = {
     bottomBar: {