From 9db6e3f10d021fcbd765dcba972c51fb368b5326 Mon Sep 17 00:00:00 2001
From: Ahmed Elsayed <ahmed.elsayed@mendix.com>
Date: Thu, 26 Sep 2024 09:12:16 +0200
Subject: [PATCH] fix(progress-circle-naitve): support device font size
 accessibility

---
 .../pluggableWidgets/progress-circle-native/CHANGELOG.md    | 6 +++++-
 .../pluggableWidgets/progress-circle-native/package.json    | 2 +-
 .../progress-circle-native/src/ProgressCircle.tsx           | 6 +++---
 .../src/__tests__/ProgressCircle.spec.tsx                   | 3 ++-
 .../pluggableWidgets/progress-circle-native/src/package.xml | 2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md b/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
index 684ae959c..9cdd5b7eb 100644
--- a/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
@@ -6,11 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Support device font size for responsive progress circle sizing.
+
 ## [3.1.1] - 2023-3-28
 
 ### Changed
 
--   Bumped react-native-progress dependency
+-   Bumped react-native-progress dependency.
 
 ## [3.1.0] - 2022-01-24
 
diff --git a/packages/pluggableWidgets/progress-circle-native/package.json b/packages/pluggableWidgets/progress-circle-native/package.json
index f00540fa4..aef301af0 100644
--- a/packages/pluggableWidgets/progress-circle-native/package.json
+++ b/packages/pluggableWidgets/progress-circle-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "progress-circle-native",
   "widgetName": "ProgressCircle",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
index b1a6b5892..671752923 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
+++ b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
@@ -1,6 +1,6 @@
 import { available, flattenStyles, unavailable } from "@mendix/piw-native-utils-internal";
 import { Component, createElement } from "react";
-import { Text, View } from "react-native";
+import { Text, View, PixelRatio } from "react-native";
 import { Circle } from "react-native-progress";
 
 import { ProgressCircleProps } from "../typings/ProgressCircleProps";
@@ -15,7 +15,6 @@ export class ProgressCircle extends Component<Props> {
         const validationMessages = this.validate();
         const progress = validationMessages.length === 0 ? this.calculateProgress() : 0;
         const showsText = this.props.circleText !== "none";
-
         return (
             <View style={this.styles.container}>
                 <Circle
@@ -23,7 +22,8 @@ export class ProgressCircle extends Component<Props> {
                     progress={progress}
                     textStyle={this.styles.text}
                     color={this.styles.fill.backgroundColor}
-                    size={Number(this.styles.circle.size)}
+                    // Update the progress size based on the device's font scale
+                    size={Number(this.styles.circle.size) * PixelRatio.getFontScale()}
                     borderWidth={this.styles.circle.borderWidth}
                     borderColor={this.styles.circle.borderColor}
                     thickness={this.styles.fill.width}
diff --git a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
index c6518f982..adc2064b7 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
+++ b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
@@ -1,7 +1,7 @@
 import { dynamicValue } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 import { createElement } from "react";
-import { Text } from "react-native";
+import { Text, PixelRatio } from "react-native";
 import { Circle } from "react-native-progress";
 import { render } from "@testing-library/react-native";
 
@@ -9,6 +9,7 @@ import { ProgressCircle, Props } from "../ProgressCircle";
 
 describe("ProgressCircle", () => {
     it("renders", () => {
+        jest.spyOn(PixelRatio, "getFontScale").mockReturnValue(1);
         const component = render(<ProgressCircle {...createProps(50, 0, 100)} />);
         expect(component.toJSON()).toMatchSnapshot();
         expect(component.UNSAFE_getByType(Circle).props.progress).toBe(0.5);
diff --git a/packages/pluggableWidgets/progress-circle-native/src/package.xml b/packages/pluggableWidgets/progress-circle-native/src/package.xml
index 606a48686..b0ced172e 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/package.xml
+++ b/packages/pluggableWidgets/progress-circle-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="ProgressCircle" version="3.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ProgressCircle" version="3.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ProgressCircle.xml" />
         </widgetFiles>