diff --git a/packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png b/packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png index dc93e78ca..a0a868c2b 100644 Binary files a/packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png and b/packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png differ diff --git a/packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png b/packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png index e410a1859..8a53cc77e 100644 Binary files a/packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png and b/packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png differ diff --git a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md index 9b8002d76..ad7982156 100644 --- 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/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png index 8ae58e6fb..bfc076f1a 100644 Binary files a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png and b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png differ diff --git a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct initial appearance 1.png b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct initial appearance 1.png index df572b00c..b10e6b2e1 100644 Binary files a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct initial appearance 1.png and b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct initial appearance 1.png differ diff --git a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct appearance after toggling secondary buttons 1.png b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct appearance after toggling secondary buttons 1.png index 2b6fbf01a..675af3321 100644 Binary files a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct appearance after toggling secondary buttons 1.png and b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct appearance after toggling secondary buttons 1.png differ diff --git a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png index c0c8a2125..f8c944204 100644 Binary files a/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png and b/packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png differ diff --git a/packages/pluggableWidgets/floating-action-button-native/package.json b/packages/pluggableWidgets/floating-action-button-native/package.json index 53ced7cbf..301ca84fe 100644 --- 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 index 89fd4032a..962929237 100644 --- 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 0; const source = isActive ? activeIconSource : iconSource; const style = isActive ? { transform: [{ rotate: "-180deg" }] } : {}; + const buttonContainerStyle = [this.styles.button, this.styles.buttonContainer]; return ( - - + + + + ); } diff --git a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx index c690271ec..fefded11c 100644 --- a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx +++ b/packages/pluggableWidgets/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; @@ -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/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap index fc8dbf848..0ca4039fa 100644 --- a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap +++ b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap @@ -174,19 +174,46 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] = + style={ + [ + {}, + { + "alignItems": "center", + "flexShrink": 1, + "justifyContent": "center", + }, + ] + } + > + + @@ -369,19 +396,46 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1` + style={ + [ + {}, + { + "alignItems": "center", + "flexShrink": 1, + "justifyContent": "center", + }, + ] + } + > + + @@ -564,19 +618,46 @@ exports[`FloatingActionButton vertical position renders position bottom correctl + style={ + [ + {}, + { + "alignItems": "center", + "flexShrink": 1, + "justifyContent": "center", + }, + ] + } + > + + @@ -759,19 +840,46 @@ exports[`FloatingActionButton vertical position renders position top correctly 1 + style={ + [ + {}, + { + "alignItems": "center", + "flexShrink": 1, + "justifyContent": "center", + }, + ] + } + > + + diff --git a/packages/pluggableWidgets/floating-action-button-native/src/package.xml b/packages/pluggableWidgets/floating-action-button-native/src/package.xml index 3b25edbbd..276321c36 100644 --- a/packages/pluggableWidgets/floating-action-button-native/src/package.xml +++ b/packages/pluggableWidgets/floating-action-button-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/floating-action-button-native/src/ui/styles.tsx b/packages/pluggableWidgets/floating-action-button-native/src/ui/styles.tsx index 81455bdb9..a6802b783 100644 --- 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/packages/pluggableWidgets/image-native/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png b/packages/pluggableWidgets/image-native/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png index 15cb1687f..fb16ce1ef 100644 Binary files a/packages/pluggableWidgets/image-native/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png and b/packages/pluggableWidgets/image-native/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png differ