style(atlas-ui): fix load more button style

mendix · Oct 26, 2022 · 10ba623 · 10ba623
1 parent 8799a90
commit 10ba623
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 12 deletions.
diff --git a/packages/theming/atlas/src/theme/native/custom-variables.ts b/packages/theming/atlas/src/theme/native/custom-variables.ts
@@ -783,13 +783,28 @@ export const gallery: VariablesGallery = {
         alignSelf: "stretch"
     },
     loadMoreButtonPressableContainer: {
+        // Ripplecolor and all ViewStyle properties are allowed
+        borderWidth: 1,
+        borderStyle: "solid",
+        rippleColor: button.container.rippleColor,
+        borderColor: button.primary.borderColor,
+        backgroundColor: button.primary.backgroundColor,
         alignItems: "center",
-        backgroundColor: brand.primary,
-        borderRadius: 4
+        justifyContent: "center",
+        borderRadius: button.container.borderRadius,
+
+        minWidth: button.container.minWidth,
+        minHeight: button.container.minHeight,
+        paddingVertical: button.container.paddingVertical,
+        paddingHorizontal: button.container.paddingHorizontal
     },
     loadMoreButtonCaption: {
-        padding: 8,
-        color: "#FFFFFF"
+        // All TextStyle properties are allowed
+        color: button.primary.color,
+        fontSize: button.caption.fontSize,
+        fontFamily: font.family,
+        fontWeight: button.caption.fontWeight,
+        lineHeight: font.lineHeight
     }
 };
 

diff --git a/packages/theming/atlas/src/themesource/atlas_core/native/core/helpers/gallery.ts b/packages/theming/atlas/src/themesource/atlas_core/native/core/helpers/gallery.ts
@@ -168,25 +168,41 @@ export const galleryGridJustifyContentSpaceEvenly: VariablesGallery = {
 
 export const loadMoreButtonBackgroundSecondary: VariablesGallery = {
     loadMoreButtonPressableContainer: {
+        borderColor: button.secondary.borderColor,
         backgroundColor: button.secondary.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.secondary.color
     }
 };
 
 export const loadMoreButtonBackgroundSuccess: VariablesGallery = {
     loadMoreButtonPressableContainer: {
+        borderColor: button.success.borderColor,
         backgroundColor: button.success.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.success.color
     }
 };
 
 export const loadMoreButtonBackgroundWarning: VariablesGallery = {
     loadMoreButtonPressableContainer: {
+        borderColor: button.warning.borderColor,
         backgroundColor: button.warning.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.warning.color
     }
 };
 
 export const loadMoreButtonBackgroundDanger: VariablesGallery = {
     loadMoreButtonPressableContainer: {
+        borderColor: button.danger.borderColor,
         backgroundColor: button.danger.backgroundColor
+    },
+    loadMoreButtonCaption: {
+        color: button.danger.color
     }
 };
 

diff --git a/packages/theming/atlas/src/themesource/atlas_core/native/core/widgets/gallery.ts b/packages/theming/atlas/src/themesource/atlas_core/native/core/widgets/gallery.ts
@@ -1,5 +1,5 @@
 import { GalleryType } from "../../types/widgets";
-import { brand, border, spacing } from "../../variables";
+import { font, button } from "../../variables";
 /*
 
 DISCLAIMER:
@@ -36,14 +36,27 @@ export const com_mendix_widget_native_gallery_Gallery: GalleryType = {
         alignSelf: "stretch"
     },
     loadMoreButtonPressableContainer: {
-        // All ViewStyle properties are allowed
+        // Ripplecolor and all ViewStyle properties are allowed
+        borderWidth: 1,
+        borderStyle: "solid",
+        rippleColor: button.container.rippleColor,
+        borderColor: button.primary.borderColor,
+        backgroundColor: button.primary.backgroundColor,
         alignItems: "center",
-        backgroundColor: brand.primary,
-        borderRadius: border.radiusSmall
+        justifyContent: "center",
+        borderRadius: button.container.borderRadius,
+
+        minWidth: button.container.minWidth,
+        minHeight: button.container.minHeight,
+        paddingVertical: button.container.paddingVertical,
+        paddingHorizontal: button.container.paddingHorizontal
     },
     loadMoreButtonCaption: {
         // All TextStyle properties are allowed
-        padding: spacing.small,
-        color: "#FFFFFF"
+        color: button.primary.color,
+        fontSize: button.caption.fontSize,
+        fontFamily: font.family,
+        fontWeight: button.caption.fontWeight,
+        lineHeight: font.lineHeight
     }
 };
diff --git a/packages/theming/atlas/src/themesource/atlas_core/native/types/variables.d.ts b/packages/theming/atlas/src/themesource/atlas_core/native/types/variables.d.ts
@@ -18,6 +18,15 @@ interface InputStyleProps {
 
 interface InputStyle extends TextStyle, InputStyleProps {}
 
+interface TouchableStyleProps {
+    rippleColor?: ColorValue;
+    borderless?: boolean;
+    radius?: number;
+    foreground?: boolean;
+}
+
+interface TouchableStyle extends ViewStyle, TouchableStyleProps {}
+
 export interface VariablesBrand {
     primary: string;
     success: string;
@@ -683,7 +692,7 @@ export interface VariablesGallery {
     list?: ViewStyle;
     listItem?: ViewStyle;
     loadMoreButtonContainer?: ViewStyle;
-    loadMoreButtonPressableContainer?: ViewStyle;
+    loadMoreButtonPressableContainer?: TouchableStyle;
     loadMoreButtonCaption?: TextStyle;
 }
 

diff --git a/packages/theming/atlas/src/themesource/atlas_core/native/types/widgets.d.ts b/packages/theming/atlas/src/themesource/atlas_core/native/types/widgets.d.ts
@@ -13,6 +13,15 @@ interface InputType extends TextStyle {
     underlineColorAndroid?: string;
 }
 
+interface TouchableStyleProps {
+    rippleColor?: ColorValue;
+    borderless?: boolean;
+    radius?: number;
+    foreground?: boolean;
+}
+
+interface TouchableStyle extends ViewStyle, TouchableStyleProps {}
+
 // Accordion
 export interface AccordionType {
     container?: ViewStyle;
@@ -856,7 +865,7 @@ export interface GalleryType {
     list?: ViewStyle;
     listItem?: ViewStyle;
     loadMoreButtonContainer?: ViewStyle;
-    loadMoreButtonPressableContainer?: ViewStyle;
+    loadMoreButtonPressableContainer?: TouchableStyle;
     loadMoreButtonCaption?: TextStyle;
 }