Merge pull request #66 from mendix/fix/popup-bottomsheet-styles

Fix/popup bottomsheet styles

Author: mmehmetAliIzci

styles/native/js/core/widgets/bottomsheet.js

@@ -1,4 +1,4 @@
-import { background, border } from "../variables";
+import { background, border, brand, contrast, font } from "../variables";
 //
 // DISCLAIMER:
 // Do not change this file because it is core styling.
@@ -31,28 +31,37 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet = {
         backgroundColor: background.primary,
     },
     modal: {
-    // All ViewStyle properties are allowed
+        // All ViewStyle properties are allowed
+        margin: 0,
+        justifyContent: "flex-end",
     },
     modalItems: {
+        container: {
+            // rippleColor & All TextStyle properties are allowed
+            height: 50,
+            marginTop: 0,
+            rippleColor: contrast.lower,
+            backgroundColor: background.primary,
+        },
         defaultStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "black",
+            color: font.color,
         },
         primaryStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#0595DB",
+            color: brand.primary,
         },
         dangerStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#ed1c24",
+            color: brand.danger,
         },
         customStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#76CA02",
+            color: font.color,
         },
     },
 };

styles/native/js/core/widgets/popupmenu.js

@@ -16,17 +16,28 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = {
         // All ViewStyle properties are allowed
         borderRadius: 10,
         shadowColor: "#000",
-        overflow: "hidden",
         shadowOpacity: 0.2,
         shadowRadius: 10,
         elevation: 16,
         backgroundColor: background.primary,
     },
-    itemRippleColor: contrast.lower,
+    custom: {
+        container: {
+        // All ViewStyle properties are allowed
+        },
+        itemStyle: {
+            rippleColor: contrast.lower,
+        },
+    },
     basic: {
         dividerColor: font.color,
+        container: {
+            // All ViewStyle properties are allowed
+            height: 40,
+        },
         itemStyle: {
             ellipsizeMode: "tail",
+            rippleColor: contrast.lower,
             defaultStyle: {
                 // All TextStyle properties are allowed
                 color: font.color,
@@ -43,9 +54,5 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = {
             // All TextStyle properties are allowed
             },
         },
-        containerStyle: {
-            // All ViewStyle properties are allowed
-            height: 40,
-        },
     },
 };

styles/native/ts/core/widgets/bottomsheet.ts

@@ -1,5 +1,5 @@
-import { background, border } from "../variables";
-import { BottomSheetType }    from "../../types/widgets";
+import { background, border, brand, contrast, font } from "../variables";
+import { BottomSheetType }                           from "../../types/widgets";
 
 //
 // DISCLAIMER:
@@ -37,27 +37,36 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet: BottomSheetType =
     },
     modal: {
         // All ViewStyle properties are allowed
+        margin: 0,
+        justifyContent: "flex-end",
     },
     modalItems: {
+        container: {
+            // rippleColor & All TextStyle properties are allowed
+            height: 50,
+            marginTop: 0,
+            rippleColor: contrast.lower,
+            backgroundColor: background.primary,
+        },
         defaultStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "black",
+            color: font.color,
         },
         primaryStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#0595DB",
+            color: brand.primary,
         },
         dangerStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#ed1c24",
+            color: brand.danger,
         },
         customStyle: {
             // All TextStyle properties are allowed
             fontSize: 16,
-            color: "#76CA02",
+            color: font.color,
         },
     },
 };

styles/native/ts/core/widgets/popupmenu.ts

@@ -23,15 +23,19 @@ export const com_mendix_widget_native_popupmenu_PopupMenu: PopupMenuType = {
         backgroundColor: background.primary,
     },
     custom: {
+        container: {
+            // All ViewStyle properties are allowed
+        },
         itemStyle: {
             rippleColor: contrast.lower,
         },
-        containerStyle: {
-            // All ViewStyle properties are allowed
-        },
     },
     basic: {
         dividerColor: font.color,
+        container: {
+            // All ViewStyle properties are allowed
+            height: 40,
+        },
         itemStyle: {
             ellipsizeMode: "tail", // 'head' | 'middle' | 'tail' | 'clip';
             rippleColor: contrast.lower,
@@ -51,9 +55,5 @@ export const com_mendix_widget_native_popupmenu_PopupMenu: PopupMenuType = {
                 // All TextStyle properties are allowed
             },
         },
-        containerStyle: {
-            // All ViewStyle properties are allowed
-            height: 40,
-        },
     },
 };

styles/native/ts/types/widgets.d.ts

@@ -1,4 +1,4 @@
-import { ImageStyle, TextStyle, ViewStyle, TextProps } from "react-native";
+import { ImageStyle, TextProps, TextStyle, ViewStyle } from "react-native";
 
 declare type ActivityIndicatorSizeType = "small" | "large";
 
@@ -47,6 +47,9 @@ export interface BottomSheetType {
     containerWhenExpandedFullscreen?: ViewStyle,
     modal?: ViewStyle,
     modalItems?: {
+        container?: ViewStyle & {
+            rippleColor?: string;
+        }
         defaultStyle?: TextStyle;
         primaryStyle?: TextStyle;
         dangerStyle?: TextStyle;
@@ -151,14 +154,14 @@ export interface DropDownType {
     container?: ViewStyle,
     label?: InputLabelType,
     value?: {
-        placeholderTextColor?: string
-    } & TextStyle,
+                placeholderTextColor?: string
+            } & TextStyle,
     valueDisabled?: TextStyle,
     validationMessage?: TextStyle,
     /*  New dropdown styles start */
     valueContainer?: {
-        rippleColor?: string
-    } & ViewStyle;
+                         rippleColor?: string
+                     } & ViewStyle;
     menuWrapper?: ViewStyle
     item?: TextStyle;
     itemContainer?: ViewStyle;
@@ -334,28 +337,28 @@ export interface PopupMenuType {
     basic: BasicItemStyle;
     custom: CustomItemStyle
     buttonContainer?: ViewStyle;
-    itemRippleColor: string;
 }
 
 interface CustomItemStyle extends ViewStyle {
-    containerStyle?: ViewStyle;
+    container?: ViewStyle;
     itemStyle: { rippleColor?: string };
 }
 
 interface BasicItemStyle {
     itemStyle?: ItemStyle;
-    containerStyle?: ViewStyle;
+    container?: ViewStyle;
     dividerColor?: string;
 }
+
 interface ItemStyle {
+    rippleColor?: string;
     ellipsizeMode?: TextProps["ellipsizeMode"];
     defaultStyle?: TextStyle;
     primaryStyle?: TextStyle;
     dangerStyle?: TextStyle;
     customStyle?: TextStyle;
 }
 
-
 // QR Code
 export interface QRCodeType {
     container?: ViewStyle,