update styles bottomsheet & popupmenu

Author: Wesley

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.
@@ -17,7 +17,7 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet = {
         borderRadius: border.radius,
         elevation: 20,
         shadowColor: "#000",
-        shadowOpacity: 0.1,
+        shadowOpacity: 0.05,
         shadowRadius: 6,
         shadowOffset: {
             width: 0,
@@ -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,6 +1,5 @@
-import { background, border, contrast } from "../variables";
-import { isIphoneWithNotch } from "../helpers/_functions/device";
-import { BottomSheetType }    from "../../types/widgets";
+import { background, border, brand, contrast, font } from "../variables";
+import { BottomSheetType }                           from "../../types/widgets";
 
 //
 // DISCLAIMER:
@@ -23,7 +22,7 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet: BottomSheetType =
         borderRadius: border.radius,
         elevation: 20,
         shadowColor: "#000",
-        shadowOpacity: 0.1,
+        shadowOpacity: 0.05,
         shadowRadius: 6,
         shadowOffset: {
             width: 0,
@@ -39,49 +38,35 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet: BottomSheetType =
     modal: {
         // All ViewStyle properties are allowed
         margin: 0,
-        justifyContent: "flex-end"
+        justifyContent: "flex-end",
     },
-    basicModal: {
-        backdrop: {
-            // All ViewStyle properties are allowed
-            paddingBottom: isIphoneWithNotch ? 24 : 0,
-            flex: 1,
-            flexDirection: "row",
-        },
+    modalItems: {
         container: {
-            // All ViewStyle properties are allowed
-            flex: 1,
-            alignSelf: "flex-end",
-            backgroundColor: "#e5e5e5"
-        },
-        item: {
-            // All ViewStyle properties + rippleColor: string
+            // rippleColor & All TextStyle properties are allowed
             height: 50,
-            alignItems: "center",
-            justifyContent: "center",
+            marginTop: 0,
             rippleColor: contrast.lower,
+            backgroundColor: background.primary,
         },
-    },
-    modalItems: {
         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: {
-        itemStyle: {
-            rippleColor: contrast.lower,
-        },
         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", // '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
             },
         },
-        container: {
-            // 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";
 
@@ -45,13 +45,11 @@ export interface BadgeType {
 export interface BottomSheetType {
     container?: ViewStyle,
     containerWhenExpandedFullscreen?: ViewStyle,
-    basicModal?: {
-        backdrop?: ViewStyle;
-        container?: ViewStyle;
-        item?: ViewStyle & { rippleColor?: string };
-    },
     modal?: ViewStyle,
     modalItems?: {
+        container?: ViewStyle & {
+            rippleColor?: string;
+        }
         defaultStyle?: TextStyle;
         primaryStyle?: TextStyle;
         dangerStyle?: TextStyle;
@@ -156,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;