From c4ead011ccd33c0616dcf8b125a3ec9d95f9a01d Mon Sep 17 00:00:00 2001 From: Uraz Akgultan Date: Fri, 15 Mar 2024 15:56:22 +0100 Subject: [PATCH] fix(floating-action-button-native): fix center icons --- .../CHANGELOG.md | 6 +- .../package.json | 2 +- .../src/FloatingActionButton.tsx | 7 +- .../__tests__/FloatingActionButton.spec.tsx | 3 +- .../FloatingActionButton.spec.tsx.snap | 140 ++++++++++++++++-- .../src/package.xml | 2 +- .../src/ui/styles.tsx | 8 + 7 files changed, 146 insertions(+), 22 deletions(-) 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/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",