Skip to content

Commit 405a255

Browse files
authored
[MOO:1611] support device font size accessibility for progress circle widget (#188)
2 parents d1976d9 + 9db6e3f commit 405a255

File tree

5 files changed

+12
-7
lines changed

5 files changed

+12
-7
lines changed

packages/pluggableWidgets/progress-circle-native/CHANGELOG.md

Lines changed: 5 additions & 1 deletion
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+
### Added
10+
11+
- Support device font size for responsive progress circle sizing.
12+
913
## [3.1.1] - 2023-3-28
1014

1115
### Changed
1216

13-
- Bumped react-native-progress dependency
17+
- Bumped react-native-progress dependency.
1418

1519
## [3.1.0] - 2022-01-24
1620

packages/pluggableWidgets/progress-circle-native/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "progress-circle-native",
33
"widgetName": "ProgressCircle",
4-
"version": "3.1.1",
4+
"version": "3.1.2",
55
"license": "Apache-2.0",
66
"repository": {
77
"type": "git",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { available, flattenStyles, unavailable } from "@mendix/piw-native-utils-internal";
22
import { Component, createElement } from "react";
3-
import { Text, View } from "react-native";
3+
import { Text, View, PixelRatio } from "react-native";
44
import { Circle } from "react-native-progress";
55

66
import { ProgressCircleProps } from "../typings/ProgressCircleProps";
@@ -15,15 +15,15 @@ export class ProgressCircle extends Component<Props> {
1515
const validationMessages = this.validate();
1616
const progress = validationMessages.length === 0 ? this.calculateProgress() : 0;
1717
const showsText = this.props.circleText !== "none";
18-
1918
return (
2019
<View style={this.styles.container}>
2120
<Circle
2221
testID={this.props.name}
2322
progress={progress}
2423
textStyle={this.styles.text}
2524
color={this.styles.fill.backgroundColor}
26-
size={Number(this.styles.circle.size)}
25+
// Update the progress size based on the device's font scale
26+
size={Number(this.styles.circle.size) * PixelRatio.getFontScale()}
2727
borderWidth={this.styles.circle.borderWidth}
2828
borderColor={this.styles.circle.borderColor}
2929
thickness={this.styles.fill.width}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { dynamicValue } from "@mendix/piw-utils-internal";
22
import { Big } from "big.js";
33
import { createElement } from "react";
4-
import { Text } from "react-native";
4+
import { Text, PixelRatio } from "react-native";
55
import { Circle } from "react-native-progress";
66
import { render } from "@testing-library/react-native";
77

88
import { ProgressCircle, Props } from "../ProgressCircle";
99

1010
describe("ProgressCircle", () => {
1111
it("renders", () => {
12+
jest.spyOn(PixelRatio, "getFontScale").mockReturnValue(1);
1213
const component = render(<ProgressCircle {...createProps(50, 0, 100)} />);
1314
expect(component.toJSON()).toMatchSnapshot();
1415
expect(component.UNSAFE_getByType(Circle).props.progress).toBe(0.5);

packages/pluggableWidgets/progress-circle-native/src/package.xml

Lines changed: 1 addition & 1 deletion
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="ProgressCircle" version="3.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="ProgressCircle" version="3.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="ProgressCircle.xml" />
66
</widgetFiles>

0 commit comments

Comments
 (0)