[MOO-1296]: Fix Icon Alignment in Floating Action Buttons (#123)

mendix · Apr 5, 2024 · ba95d30 · ba95d30
2 parents 3a245fe + 56d2e08
commit ba95d30
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 22 deletions.
diff --git a/.../expected/android/30/pixel/Accordion should render custom icons correctly 1.png b/.../expected/android/30/pixel/Accordion should render custom icons correctly 1.png
diff --git a/.../ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png b/.../ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png
diff --git a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
@@ -6,11 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have fixed an issue where icons within Floating Action Buttons were not properly centered.
+
 ## [4.0.1] - 2023-10-24
 
 ### Fixed
 
-- We have fixed an error related to useNativeDriver.
+-   We have fixed an error related to useNativeDriver.
 
 ## [4.0.0] - 2023-3-28
 

diff --git a/...action button renders correct appearance after toggling secondary buttons 1.png b/...action button renders correct appearance after toggling secondary buttons 1.png
diff --git a/...ndroid/30/pixel/Floating action button renders correct initial appearance 1.png b/...ndroid/30/pixel/Floating action button renders correct initial appearance 1.png
diff --git a/...action button renders correct appearance after toggling secondary buttons 1.png b/...action button renders correct appearance after toggling secondary buttons 1.png
diff --git a/...ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png b/...ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png
diff --git a/packages/pluggableWidgets/floating-action-button-native/package.json b/packages/pluggableWidgets/floating-action-button-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "floating-action-button-native",
   "widgetName": "FloatingActionButton",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

diff --git a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
@@ -62,10 +62,13 @@ export class FloatingActionButton extends Component<FloatingActionButtonProps<Fl
         const isActive = this.state.active && this.props.secondaryButtons.length > 0;
         const source = isActive ? activeIconSource : iconSource;
         const style = isActive ? { transform: [{ rotate: "-180deg" }] } : {};
+        const buttonContainerStyle = [this.styles.button, this.styles.buttonContainer];
 
         return (
-            <View testID={"FloatingAction$IconView"} style={[style, this.styles.buttonIconContainer]}>
-                <Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
+            <View testID={"FloatingAction$IconView"} style={buttonContainerStyle}>
+                <View style={[style, this.styles.buttonIconContainer]}>
+                    <Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
+                </View>
             </View>
         );
     }

diff --git a/...luggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx b/...luggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
@@ -6,6 +6,7 @@ import { FloatingActionButton } from "../FloatingActionButton";
 import { actionValue, dynamicValue } from "@mendix/piw-utils-internal";
 import { NativeIcon } from "mendix";
 import { Icon } from "mendix/components/native/Icon";
+import { ReactTestInstance } from "react-test-renderer";
 
 describe("FloatingActionButton", () => {
     let defaultProps: FloatingActionButtonProps<FloatingActionButtonStyle>;
@@ -116,7 +117,7 @@ describe("FloatingActionButton", () => {
         );
         const transformStyle = [{ transform: [{ rotate: "-180deg" }] }];
 
-        const iconView = getByTestId("FloatingAction$IconView");
+        const iconView = getByTestId("FloatingAction$IconView").children[0] as ReactTestInstance;
         const iconComponent = iconView.findByType(Icon);
         expect(iconComponent.props.icon).toEqual(icon.value);
         expect(iconView.props.style).not.toEqual(expect.arrayContaining(transformStyle));

diff --git a/...ating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap b/...ating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap
@@ -174,19 +174,46 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
           <View
             style={
               [
-                {},
+                {
+                  "backgroundColor": "#e74c3c",
+                  "elevation": 5,
+                  "rippleColor": "rgba(0, 0, 0, 0.4)",
+                  "shadowColor": "#000",
+                  "shadowOffset": {
+                    "height": 5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.3,
+                  "shadowRadius": 3,
+                  "size": 54,
+                },
                 {
                   "alignItems": "center",
-                  "flexShrink": 1,
+                  "borderRadius": 27,
+                  "height": 54,
                   "justifyContent": "center",
+                  "width": 54,
                 },
               ]
             }
             testID="FloatingAction$IconView"
           >
             <View
-              testId="icon"
-            />
+              style={
+                [
+                  {},
+                  {
+                    "alignItems": "center",
+                    "flexShrink": 1,
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                testId="icon"
+              />
+            </View>
           </View>
         </View>
       </View>
@@ -369,19 +396,46 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
           <View
             style={
               [
-                {},
+                {
+                  "backgroundColor": "#e74c3c",
+                  "elevation": 5,
+                  "rippleColor": "rgba(0, 0, 0, 0.4)",
+                  "shadowColor": "#000",
+                  "shadowOffset": {
+                    "height": 5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.3,
+                  "shadowRadius": 3,
+                  "size": 54,
+                },
                 {
                   "alignItems": "center",
-                  "flexShrink": 1,
+                  "borderRadius": 27,
+                  "height": 54,
                   "justifyContent": "center",
+                  "width": 54,
                 },
               ]
             }
             testID="FloatingAction$IconView"
           >
             <View
-              testId="icon"
-            />
+              style={
+                [
+                  {},
+                  {
+                    "alignItems": "center",
+                    "flexShrink": 1,
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                testId="icon"
+              />
+            </View>
           </View>
         </View>
       </View>
@@ -564,19 +618,46 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
           <View
             style={
               [
-                {},
+                {
+                  "backgroundColor": "#e74c3c",
+                  "elevation": 5,
+                  "rippleColor": "rgba(0, 0, 0, 0.4)",
+                  "shadowColor": "#000",
+                  "shadowOffset": {
+                    "height": 5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.3,
+                  "shadowRadius": 3,
+                  "size": 54,
+                },
                 {
                   "alignItems": "center",
-                  "flexShrink": 1,
+                  "borderRadius": 27,
+                  "height": 54,
                   "justifyContent": "center",
+                  "width": 54,
                 },
               ]
             }
             testID="FloatingAction$IconView"
           >
             <View
-              testId="icon"
-            />
+              style={
+                [
+                  {},
+                  {
+                    "alignItems": "center",
+                    "flexShrink": 1,
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                testId="icon"
+              />
+            </View>
           </View>
         </View>
       </View>
@@ -759,19 +840,46 @@ exports[`FloatingActionButton vertical position renders position top correctly 1
           <View
             style={
               [
-                {},
+                {
+                  "backgroundColor": "#e74c3c",
+                  "elevation": 5,
+                  "rippleColor": "rgba(0, 0, 0, 0.4)",
+                  "shadowColor": "#000",
+                  "shadowOffset": {
+                    "height": 5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.3,
+                  "shadowRadius": 3,
+                  "size": 54,
+                },
                 {
                   "alignItems": "center",
-                  "flexShrink": 1,
+                  "borderRadius": 27,
+                  "height": 54,
                   "justifyContent": "center",
+                  "width": 54,
                 },
               ]
             }
             testID="FloatingAction$IconView"
           >
             <View
-              testId="icon"
-            />
+              style={
+                [
+                  {},
+                  {
+                    "alignItems": "center",
+                    "flexShrink": 1,
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                testId="icon"
+              />
+            </View>
           </View>
         </View>
       </View>

diff --git a/packages/pluggableWidgets/floating-action-button-native/src/package.xml b/packages/pluggableWidgets/floating-action-button-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FloatingActionButton" version="4.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FloatingActionButton" version="4.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FloatingActionButton.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/floating-action-button-native/src/ui/styles.tsx b/packages/pluggableWidgets/floating-action-button-native/src/ui/styles.tsx
@@ -4,6 +4,7 @@ import { TextStyle, ViewStyle } from "react-native";
 export interface FloatingActionButtonStyle extends Style {
     container: ViewStyle;
     button: PrimaryButtonStyle;
+    buttonContainer: PrimaryButtonStyle;
     buttonIconContainer: ViewStyle;
     buttonIcon: IconStyle;
     secondaryButton: ButtonStyle;
@@ -42,6 +43,13 @@ export const defaultFloatingActionButtonStyle: FloatingActionButtonStyle = {
         shadowRadius: 3,
         elevation: 5
     },
+    buttonContainer: {
+        width: 54,
+        height: 54,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 27
+    },
     buttonIconContainer: {
         justifyContent: "center",
         alignItems: "center",

diff --git a/...ative/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png b/...ative/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png