Skip to content

Commit ba95d30

Browse files
UrazAkgultanUrazAkgultan
authored
[MOO-1296]: Fix Icon Alignment in Floating Action Buttons (#123)
2 parents 3a245fe + 56d2e08 commit ba95d30

14 files changed

+146
-22
lines changed

‎packages/pluggableWidgets/accordion-native/e2e/images/expected/android/30/pixel/Accordion should render custom icons correctly 1.png

0 Bytes
Loading

‎packages/pluggableWidgets/feedback-native/e2e/images/expected/ios/16.0/iPhone/Feedback widget should be able to submit a feedback item 2.png

17.3 KB
Loading

‎packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Fixed
10+
11+
- We have fixed an issue where icons within Floating Action Buttons were not properly centered.
12+
913
## [4.0.1] - 2023-10-24
1014

1115
### Fixed
1216

13-
- We have fixed an error related to useNativeDriver.
17+
- We have fixed an error related to useNativeDriver.
1418

1519
## [4.0.0] - 2023-3-28
1620

‎packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct appearance after toggling secondary buttons 1.png

-1.02 KB
Loading

‎packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/android/30/pixel/Floating action button renders correct initial appearance 1.png

16.9 KB
Loading

‎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

20.5 KB
Loading

‎packages/pluggableWidgets/floating-action-button-native/e2e/images/expected/ios/16.0/iPhone/Floating action button renders correct initial appearance 1.png

6.57 KB
Loading

‎packages/pluggableWidgets/floating-action-button-native/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "floating-action-button-native",
33
"widgetName": "FloatingActionButton",
4-
"version": "4.0.1",
4+
"version": "4.0.2",
55
"license": "Apache-2.0",
66
"repository": {
77
"type": "git",

‎packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,13 @@ export class FloatingActionButton extends Component<FloatingActionButtonProps<Fl
6262
const isActive = this.state.active && this.props.secondaryButtons.length > 0;
6363
const source = isActive ? activeIconSource : iconSource;
6464
const style = isActive ? { transform: [{ rotate: "-180deg" }] } : {};
65+
const buttonContainerStyle = [this.styles.button, this.styles.buttonContainer];
6566

6667
return (
67-
<View testID={"FloatingAction$IconView"} style={[style, this.styles.buttonIconContainer]}>
68-
<Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
68+
<View testID={"FloatingAction$IconView"} style={buttonContainerStyle}>
69+
<View style={[style, this.styles.buttonIconContainer]}>
70+
<Icon icon={source} size={this.styles.buttonIcon.size} color={this.styles.buttonIcon.color} />
71+
</View>
6972
</View>
7073
);
7174
}

‎packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FloatingActionButton } from "../FloatingActionButton";
66
import { actionValue, dynamicValue } from "@mendix/piw-utils-internal";
77
import { NativeIcon } from "mendix";
88
import { Icon } from "mendix/components/native/Icon";
9+
import { ReactTestInstance } from "react-test-renderer";
910

1011
describe("FloatingActionButton", () => {
1112
let defaultProps: FloatingActionButtonProps<FloatingActionButtonStyle>;
@@ -116,7 +117,7 @@ describe("FloatingActionButton", () => {
116117
);
117118
const transformStyle = [{ transform: [{ rotate: "-180deg" }] }];
118119

119-
const iconView = getByTestId("FloatingAction$IconView");
120+
const iconView = getByTestId("FloatingAction$IconView").children[0] as ReactTestInstance;
120121
const iconComponent = iconView.findByType(Icon);
121122
expect(iconComponent.props.icon).toEqual(icon.value);
122123
expect(iconView.props.style).not.toEqual(expect.arrayContaining(transformStyle));

‎packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap

+124-16
Original file line numberDiff line numberDiff line change
@@ -174,19 +174,46 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
174174
<View
175175
style={
176176
[
177-
{},
177+
{
178+
"backgroundColor": "#e74c3c",
179+
"elevation": 5,
180+
"rippleColor": "rgba(0, 0, 0, 0.4)",
181+
"shadowColor": "#000",
182+
"shadowOffset": {
183+
"height": 5,
184+
"width": 0,
185+
},
186+
"shadowOpacity": 0.3,
187+
"shadowRadius": 3,
188+
"size": 54,
189+
},
178190
{
179191
"alignItems": "center",
180-
"flexShrink": 1,
192+
"borderRadius": 27,
193+
"height": 54,
181194
"justifyContent": "center",
195+
"width": 54,
182196
},
183197
]
184198
}
185199
testID="FloatingAction$IconView"
186200
>
187201
<View
188-
testId="icon"
189-
/>
202+
style={
203+
[
204+
{},
205+
{
206+
"alignItems": "center",
207+
"flexShrink": 1,
208+
"justifyContent": "center",
209+
},
210+
]
211+
}
212+
>
213+
<View
214+
testId="icon"
215+
/>
216+
</View>
190217
</View>
191218
</View>
192219
</View>
@@ -369,19 +396,46 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
369396
<View
370397
style={
371398
[
372-
{},
399+
{
400+
"backgroundColor": "#e74c3c",
401+
"elevation": 5,
402+
"rippleColor": "rgba(0, 0, 0, 0.4)",
403+
"shadowColor": "#000",
404+
"shadowOffset": {
405+
"height": 5,
406+
"width": 0,
407+
},
408+
"shadowOpacity": 0.3,
409+
"shadowRadius": 3,
410+
"size": 54,
411+
},
373412
{
374413
"alignItems": "center",
375-
"flexShrink": 1,
414+
"borderRadius": 27,
415+
"height": 54,
376416
"justifyContent": "center",
417+
"width": 54,
377418
},
378419
]
379420
}
380421
testID="FloatingAction$IconView"
381422
>
382423
<View
383-
testId="icon"
384-
/>
424+
style={
425+
[
426+
{},
427+
{
428+
"alignItems": "center",
429+
"flexShrink": 1,
430+
"justifyContent": "center",
431+
},
432+
]
433+
}
434+
>
435+
<View
436+
testId="icon"
437+
/>
438+
</View>
385439
</View>
386440
</View>
387441
</View>
@@ -564,19 +618,46 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
564618
<View
565619
style={
566620
[
567-
{},
621+
{
622+
"backgroundColor": "#e74c3c",
623+
"elevation": 5,
624+
"rippleColor": "rgba(0, 0, 0, 0.4)",
625+
"shadowColor": "#000",
626+
"shadowOffset": {
627+
"height": 5,
628+
"width": 0,
629+
},
630+
"shadowOpacity": 0.3,
631+
"shadowRadius": 3,
632+
"size": 54,
633+
},
568634
{
569635
"alignItems": "center",
570-
"flexShrink": 1,
636+
"borderRadius": 27,
637+
"height": 54,
571638
"justifyContent": "center",
639+
"width": 54,
572640
},
573641
]
574642
}
575643
testID="FloatingAction$IconView"
576644
>
577645
<View
578-
testId="icon"
579-
/>
646+
style={
647+
[
648+
{},
649+
{
650+
"alignItems": "center",
651+
"flexShrink": 1,
652+
"justifyContent": "center",
653+
},
654+
]
655+
}
656+
>
657+
<View
658+
testId="icon"
659+
/>
660+
</View>
580661
</View>
581662
</View>
582663
</View>
@@ -759,19 +840,46 @@ exports[`FloatingActionButton vertical position renders position top correctly 1
759840
<View
760841
style={
761842
[
762-
{},
843+
{
844+
"backgroundColor": "#e74c3c",
845+
"elevation": 5,
846+
"rippleColor": "rgba(0, 0, 0, 0.4)",
847+
"shadowColor": "#000",
848+
"shadowOffset": {
849+
"height": 5,
850+
"width": 0,
851+
},
852+
"shadowOpacity": 0.3,
853+
"shadowRadius": 3,
854+
"size": 54,
855+
},
763856
{
764857
"alignItems": "center",
765-
"flexShrink": 1,
858+
"borderRadius": 27,
859+
"height": 54,
766860
"justifyContent": "center",
861+
"width": 54,
767862
},
768863
]
769864
}
770865
testID="FloatingAction$IconView"
771866
>
772867
<View
773-
testId="icon"
774-
/>
868+
style={
869+
[
870+
{},
871+
{
872+
"alignItems": "center",
873+
"flexShrink": 1,
874+
"justifyContent": "center",
875+
},
876+
]
877+
}
878+
>
879+
<View
880+
testId="icon"
881+
/>
882+
</View>
775883
</View>
776884
</View>
777885
</View>

‎packages/pluggableWidgets/floating-action-button-native/src/package.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="FloatingActionButton" version="4.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="FloatingActionButton" version="4.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="FloatingActionButton.xml" />
66
</widgetFiles>

‎packages/pluggableWidgets/floating-action-button-native/src/ui/styles.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { TextStyle, ViewStyle } from "react-native";
44
export interface FloatingActionButtonStyle extends Style {
55
container: ViewStyle;
66
button: PrimaryButtonStyle;
7+
buttonContainer: PrimaryButtonStyle;
78
buttonIconContainer: ViewStyle;
89
buttonIcon: IconStyle;
910
secondaryButton: ButtonStyle;
@@ -42,6 +43,13 @@ export const defaultFloatingActionButtonStyle: FloatingActionButtonStyle = {
4243
shadowRadius: 3,
4344
elevation: 5
4445
},
46+
buttonContainer: {
47+
width: 54,
48+
height: 54,
49+
justifyContent: "center",
50+
alignItems: "center",
51+
borderRadius: 27
52+
},
4553
buttonIconContainer: {
4654
justifyContent: "center",
4755
alignItems: "center",

‎packages/pluggableWidgets/image-native/e2e/images/expected/ios/16.0/iPhone/Image renders the dynamic image 1.png

3.98 KB
Loading

0 commit comments

Comments
 (0)