[MOO:1611] support device font size accessibility for progress circle widget

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
 

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",

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,15 +15,15 @@ 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
                     testID={this.props.name}
                     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}

packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx

@@ -1,14 +1,15 @@
 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";
 
 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);

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>