Merge pull request #53 from mendix/develop

Merge develop into release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.5.3",
+    "version": "2.5.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": {

styles/native/app/custom-variables.js

@@ -5,7 +5,6 @@ import {
     setColorBasedOnBackground,
     setContrastScale,
 }                                  from "../core/helpers/_functions/convertcolors";
-import { shadeBlendConvert }       from "../core/helpers/_functions/shadeblendconvert.js";
 
 /*
 ==> You can find a copy of the core variables below. (From styles/native/core/variables.js)
@@ -188,7 +187,7 @@ export const navigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: shadeBlendConvert(-0.6, background.primary), // Only for iOS
+        shadowColor: "#000", // Only for iOS
         fontSize: font.size,
     },
 };
@@ -206,10 +205,12 @@ export const tabcontainer = {
     label: {
         color: contrast.highest,
         fontWeight: font.weightBold,
+        textTransform: "uppercase",
     },
     activeLabel: {
         color: brand.primary,
         fontWeight: font.weightBold,
+        textTransform: "uppercase",
     },
 };
 

styles/native/core/helpers/buttons.js

@@ -93,41 +93,46 @@ export const btnSecondaryInversed = {
 };
 
 // Button Icon Only
-export const btnIconPrimary = {
+export const btnIcon = {
     container: {
         borderWidth: 0,
         backgroundColor: "transparent",
         paddingVertical: 0,
         paddingHorizontal: 0,
     },
     icon: {
-        color: button.primary.backgroundColor,
+        color: font.color,
     },
     caption: {
         fontSize: 0,
     },
 };
-export const btnIconSecondary = merge(btnIconPrimary, {
+export const btnIconPrimary = merge(btnIcon, {
+    icon: {
+        color: button.primary.backgroundColor,
+    },
+});
+export const btnIconSecondary = merge(btnIcon, {
     icon: {
         color: contrast.low,
     },
 });
-export const btnIconSuccess = merge(btnIconPrimary, {
+export const btnIconSuccess = merge(btnIcon, {
     icon: {
         color: button.success.backgroundColor,
     },
 });
-export const btnIconWarning = merge(btnIconPrimary, {
+export const btnIconWarning = merge(btnIcon, {
     icon: {
         color: button.warning.backgroundColor,
     },
 });
-export const btnIconDanger = merge(btnIconPrimary, {
+export const btnIconDanger = merge(btnIcon, {
     icon: {
         color: button.danger.backgroundColor,
     },
 });
-export const btnIconWhite = merge(btnIconPrimary, {
+export const btnIconWhite = merge(btnIcon, {
     icon: {
         color: "#FFF",
     },

styles/native/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.5.3"
+    "version": "2.5.4"
 }

styles/native/core/variables.js

@@ -4,7 +4,6 @@ import adjustFont, { height, width }                   from "./helpers/_function
 import { setColorBasedOnBackground, setContrastScale } from "./helpers/_functions/convertcolors";
 import { anyColorToRgbString }                         from "./helpers/_functions/convertcolors.js";
 import merge                                           from "./helpers/_functions/mergeobjects";
-import { shadeBlendConvert }                           from "./helpers/_functions/shadeblendconvert.js";
 
 //== Global variables
 //## Variables to be used during styling
@@ -189,7 +188,7 @@ let navigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: shadeBlendConvert(-0.6, background.primary), // Only for iOS
+        shadowColor: "#000", // Only for iOS
         fontSize: font.size,
     },
 };
@@ -208,10 +207,12 @@ let tabcontainer = {
     label: {
         color: contrast.highest,
         fontWeight: font.weightBold,
+        textTransform: "uppercase",
     },
     activeLabel: {
         color: brand.primary,
         fontWeight: font.weightBold,
+        textTransform: "uppercase",
     },
 };
 tabcontainer = merge(tabcontainer, custom.tabcontainer || {});

styles/native/core/widgets/backgroundimage.js

@@ -0,0 +1,23 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// 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/native/app/ so the core styling is overwritten.
+//
+
+/* ==========================================================================
+    Background Image
+
+    Default Class For Mendix Background Image Widget
+========================================================================== */
+
+
+export const com_mendix_widget_native_backgroundimage_BackgroundImage = {
+    container: {
+        // All ViewStyle properties are allowed
+    },
+    image: {
+        // svgColor and all ImageStyle properties are allowed
+    },
+};
+

styles/native/core/widgets/bottomsheet.js

@@ -0,0 +1,37 @@
+import { background, border } from "../variables";
+
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// 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/native/app/ so the core styling is overwritten.
+//
+
+/* ==========================================================================
+    Bottom Sheet
+
+    Default Class For Mendix Bottom Sheet Widget
+========================================================================== */
+
+
+export const com_mendix_widget_native_bottomsheet_BottomSheet = {
+    container: {
+        // All ViewStyle properties are allowed
+        backgroundColor: background.primary,
+        borderRadius: border.radius,
+        elevation: 20,
+        shadowColor: "#000",
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        shadowOffset: {
+            width: 0,
+            height: -4,
+        },
+    },
+    containerWhenExpandedFullscreen: {
+        height: "100%",
+        alignSelf: "stretch",
+        backgroundColor: background.primary,
+    },
+};
+

styles/native/core/widgets/carousel.js

@@ -1,5 +1,4 @@
-import { shadeBlendConvert }                          from "../helpers/_functions/shadeblendconvert.js";
-import { background, brand, contrast, font, spacing } from "../variables.js";
+import { brand, contrast, font, spacing } from "../variables.js";
 
 //
 // DISCLAIMER:
@@ -70,8 +69,8 @@ const carouselCardLayout = {
         padding: 8,
         paddingBottom: spacing.regular,
         elevation: 1.5,
-        shadowColor: shadeBlendConvert(-0.5, background.primary),
-        shadowOpacity: 0.6,
+        shadowColor: "#000",
+        shadowOpacity: 0.5,
         shadowRadius: 6,
         shadowOffset: {
             width: 0,

styles/native/core/widgets/checkbox.js

@@ -43,7 +43,7 @@ export const CheckBox = {
         ...TextBox.inputError,
         thumbColorOn: background.primary,
         trackColorOn: brand.danger,
-        thumbColorOff: background.lowest,
+        thumbColorOff: contrast.lower,
         trackColorOff: contrast.lowest,
     },
     validationMessage: {
@@ -67,11 +67,11 @@ export const CheckBoxVertical = {
         ...TextBoxVertical.inputError,
         thumbColorOn: background.primary,
         trackColorOn: brand.danger,
-        thumbColorOff: background.lowest,
+        thumbColorOff: contrast.lower,
         trackColorOff: contrast.lowest,
     },
     validationMessage: {
         ...TextBoxVertical.validationMessage,
         alignSelf: "stretch",
     },
-};
+};

styles/native/core/widgets/feedback.js

@@ -1,5 +1,4 @@
 import { Platform }                                                 from "react-native";
-import { shadeBlendConvert }                                        from "../helpers/_functions/shadeblendconvert.js";
 import { background, border, brand, button, contrast, font, input } from "../variables";
 
 //
@@ -23,8 +22,8 @@ export const com_mendix_widget_native_feedback_Feedback = {
         borderTopLeftRadius: button.borderRadius,
         borderBottomLeftRadius: button.borderRadius,
         elevation: 1.5,
-        shadowColor: shadeBlendConvert(-0.2, background.primary),
-        shadowOpacity: 0.7,
+        shadowColor: "#000",
+        shadowOpacity: 0.2,
         shadowRadius: 10,
         shadowOffset: {
             width: 0,
@@ -74,7 +73,7 @@ export const com_mendix_widget_native_feedback_Feedback = {
         marginRight: Platform.select({ ios: 0, android: -5 }),
         thumbColorOn: background.primary,
         trackColorOn: brand.success,
-        thumbColorOff: background.lowest,
+        thumbColorOff: contrast.lower,
         trackColorOff: contrast.lowest,
     },
     button: {

styles/native/core/widgets/floatingactionbutton.js

@@ -1,4 +1,3 @@
-import { shadeBlendConvert }                 from "../helpers/_functions/shadeblendconvert.js";
 import { background, brand, contrast, font } from "../variables";
 
 //
@@ -22,14 +21,14 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton
         size: 50,
         rippleColor: contrast.lowest,
         backgroundColor: brand.primary,
-        shadowColor: shadeBlendConvert(-0.3, background.primary),
-        shadowOpacity: 0.9,
+        elevation: 2,
+        shadowColor: "#000",
+        shadowOpacity: 0.3,
         shadowRadius: 4,
         shadowOffset: {
             width: 0,
             height: 2,
         },
-        elevation: 2,
     },
     buttonIcon: {
         size: font.sizeLarge,
@@ -38,14 +37,14 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton
     secondaryButton: {
         size: 30,
         backgroundColor: background.secondary,
-        shadowColor: shadeBlendConvert(-0.2, background.primary),
-        shadowOpacity: 0.9,
+        elevation: 2,
+        shadowColor: "#000",
+        shadowOpacity: 0.3,
         shadowRadius: 4,
         shadowOffset: {
             width: 0,
             height: 2,
         },
-        elevation: 2,
     },
     secondaryButtonIcon: {
         size: font.sizeSmall,
@@ -54,13 +53,12 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton
     secondaryButtonCaption: {},
     secondaryButtonCaptionContainer: {
         marginHorizontal: 5,
-        shadowColor: shadeBlendConvert(-0.2, background.primary),
-        shadowOpacity: 0.9,
+        elevation: 2,
+        shadowOpacity: 0.3,
         shadowRadius: 4,
         shadowOffset: {
             width: 0,
             height: 2,
         },
-        elevation: 2,
     },
 };

styles/native/core/widgets/introscreen.js

@@ -1,6 +1,5 @@
-import { isIphoneWithNotch }                 from "../helpers/_functions/device.js";
-import { shadeBlendConvert }                 from "../helpers/_functions/shadeblendconvert.js";
-import { background, button, font, spacing } from "../variables.js";
+import { isIphoneWithNotch }                           from "../helpers/_functions/device.js";
+import { background, button, contrast, font, spacing } from "../variables.js";
 
 
 //
@@ -17,7 +16,7 @@ import { background, button, font, spacing } from "../variables.js";
 ========================================================================== */
 
 // Button styles when the chose to show the indicator above the buttons
-export const introScreenButtonPaginationAbove = {
+const introScreenButtonPaginationAbove = {
     container: {
         // Ripplecolor and all ViewStyle properties are allowed
         flexDirection: "row",
@@ -43,7 +42,7 @@ export const introScreenButtonPaginationAbove = {
     },
 };
 // Button styles when the chose to show the indicator between the buttons
-export const introScreenButtonPaginationBetween = {
+const introScreenButtonPaginationBetween = {
     container: {
         // Ripplecolor and all ViewStyle properties are allowed
         flexDirection: "row",
@@ -97,7 +96,7 @@ export const com_mendix_widget_native_introscreen_IntroScreen = {
     },
     dotStyle: {
         // All ViewStyle properties are allowed
-        backgroundColor: shadeBlendConvert(0.5, background.brandPrimary),
+        backgroundColor: contrast.lower,
         transform: [{ scale: 0.5 }],
     },
     activeDotStyle: {

styles/native/core/widgets/navigation.js

@@ -56,7 +56,7 @@ export const navigationStyle = {
             borderRadius: border.radius,
             elevation: 1.5,
             shadowColor: navigation.progressOverlay.shadowColor,
-            shadowOpacity: 0.7,
+            shadowOpacity: 0.1,
             shadowRadius: 10,
             shadowOffset: {
                 width: 0,

styles/native/core/widgets/slider.js

@@ -1,5 +1,4 @@
 import { Platform }                                         from "react-native";
-import { shadeBlendConvert }                                from "../helpers/_functions/shadeblendconvert.js";
 import { background, border, brand, contrast, font, input } from "../variables";
 
 //
@@ -44,7 +43,7 @@ export const com_mendix_widget_native_slider_Slider = {
             ios: {
                 width: 30,
                 height: 30,
-                shadowColor: shadeBlendConvert(-0.3, background.primary),
+                shadowColor: "#000",
                 shadowOpacity: 0.2,
                 borderColor: contrast.lowest,
                 shadowOffset: { width: 0, height: 1 },
@@ -75,7 +74,7 @@ export const com_mendix_widget_native_slider_Slider = {
             ios: {
                 borderColor: contrast.lowest,
                 backgroundColor: background.secondary,
-                shadowColor: shadeBlendConvert(-0.3, background.primary),
+                shadowColor: "#000",
                 shadowOpacity: 0.2,
                 shadowOffset: { width: 0, height: 1 },
             },