feat: create components - circular progress indicator and linear progress indicator by paulinea · Pull Request #1322 · Orange-OpenSource/ouds-android

paulinea · 2026-05-22T13:24:43Z

No description provided.

github-actions · 2026-05-22T13:32:41Z

🟢 Netlify deploy for commit `2b192f4` succeeded

Deploy preview: https://6a282c41b31e4527a86cf2b9--ouds-android.netlify.app
Deploy log: https://app.netlify.com/projects/ouds-android/deploys/6a282c41b31e4527a86cf2b9

florentmaitre · 2026-06-05T15:08:35Z

+import com.orange.ouds.theme.OudsThemeContract
+
+/**
+ * A Circular Progress Indicator shows the progress of a task using a circle. Useful when you need more visual focus or when space is limited.


We should add a TODO to remind us that we need to add the design guidelines URL when available.

Same comment for OudsLinearProgressIndicator.

florentmaitre · 2026-06-05T16:27:18Z

+        val progressIndicatorModifier = modifier.size(size)
+        val color = if (brandColor) OudsTheme.colorScheme.action.loading else OudsTheme.colorScheme.action.enabled
+        val strokeWidth = size * 0.125f // 25% of the radius
+        val strokeCap = if (OudsTheme.borders.radius.default.value > 0) StrokeCap.Round else StrokeCap.Square


The visual aspect of the circular indicator when progress is 0.75f looks better to me when using StrokeCap.Butt instead of StrokeCap.Square. Moreover, the gap size also looks closer to the one in Figma when using StrokeCap.Butt.

With StrokeCap.Square:

With StrokeCap.Butt:

By the way we also used StrokeCap.Butt in OudsTag.

florentmaitre · 2026-06-05T16:56:40Z

+import com.orange.ouds.tokens.raw.OudsColorRawTokens
+import com.orange.ouds.tokens.raw.OudsDimensionRawTokens
+
+internal data class OrangeCompactProgressIndicatorTokens(


A few questions about the tokens:

Should we wait for the official version 2.6.0 of the tokens before merging this PR?

There are some "mono" tokens listed in Figma, should we support a mono version of these components?

Also, I found one of these mono tokens here and I don't know why:

I think this is an error. The mono tokens are for the integration in components that can be mono like the buttons. For the moment, I didn't replace the progress in all components.

florentmaitre · 2026-06-08T15:43:17Z

+        Column(
+            modifier = modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(spacePaddingBlock.value)


In the "User zoom and responsiveness" section of the Figma overview, it is written that:

Spacing between the text and the indicator must scale proportionally

So I assume we should apply the scale factor to spacePaddingBlock.

However in the Figma examples the spacing still remains the same whatever the zoom is, so I am not 100% sure about this.

I will ask to Anton.

We keep this implementation without the scale factor applied, Anton will fix the Figma overview.

florentmaitre · 2026-06-08T15:52:39Z

+        val size = sizeCircularIndicator.value * scale
+
+        val progressIndicatorModifier = modifier.size(size)
+        val color = if (brandColor) OudsTheme.colorScheme.action.loading else OudsTheme.colorScheme.action.enabled


According to Figma, non-branded color is ouds/color/content/default:

Same comment for OudsCircularProgressIndicator.

Strange but ok 😅

florentmaitre · 2026-06-09T06:50:31Z

+    var track by mutableStateOf(track)
+
+    val progress: Float
+        get() = (progressText.toFloatOrNull() ?: 0f).coerceIn(0f, 1f)


The call to coerceIn should not be necessary because it is already done by the Material component.

florentmaitre · 2026-06-09T07:15:31Z

+        ProgressIndicatorDemoBottomSheetContent(state = state)
+        CustomizationTextInput(
+            applyTopPadding = true,
+            label = stringResource(R.string.app_components_progressIndicator_helperText_tech),


app_components_common_helperText_tech can be reused here.

florentmaitre · 2026-06-09T07:23:50Z

+private fun CircularProgressIndicatorDemoContent(state: ProgressIndicatorDemoState) {
+    Box(
+        modifier = Modifier.fillMaxWidth(),
+        contentAlignment = Alignment.Center


If I am not wrong, the Box is not necessary because there is already a Box with centered content in DemoScreen.

Same comment for LinearProgressIndicatorDemoScreen.

florentmaitre · 2026-06-09T07:25:26Z

+
+private fun Code.Builder.circularProgressIndicatorDemoCodeSnippet(state: ProgressIndicatorDemoState) {
+    with(state) {
+        functionCall("OudsCircularProgressIndicator") {


Both code snippets can probably be factorized into a single method.

florentmaitre · 2026-06-09T07:28:08Z

+    <string name="app_components_progressIndicator_brandColor_tech" translatable="false">Brand color</string>
+    <string name="app_components_progressIndicator_track_tech" translatable="false">Track</string>
+    <string name="app_components_progressIndicator_helperText_tech" translatable="false">Helper text</string>
+    <string name="app_components_progressIndicator_helperTextValue_tech" translatable="false">Helper text value</string>


This key is unused and can be removed.

Keep an OudsInternalCircularProgressIndicator for the moment

…anguage)

# Conflicts: # core/src/main/java/com/orange/ouds/core/utilities/OudsPreviewableComponent.kt

… component

…lper text

paulinea requested a review from florentmaitre as a code owner May 22, 2026 13:24

paulinea linked an issue May 22, 2026 that may be closed by this pull request

In library, add circular progress indicator and linear progress indicator components #1313

Open

3 tasks

paulinea deployed to netlify May 22, 2026 13:30 — with GitHub Actions View deployment

paulinea deployed to netlify May 22, 2026 14:59 — with GitHub Actions View deployment

florentmaitre changed the title ~~feat: create components - circular progress indicator and linear progress indicator (#1313)~~ feat: create components - circular progress indicator and linear progress indicator May 28, 2026

florentmaitre reviewed Jun 9, 2026

View reviewed changes

paulinea force-pushed the 1313-in-library-add-circular-progress-indicator-and-linear-progress-indicator-components branch from 231e818 to f1e444c Compare June 9, 2026 14:53

paulinea added 22 commits June 9, 2026 16:59

Add progress indicator tokens

6eaa95c

Create OudsCircularProgressIndicator component

af1c399

Keep an OudsInternalCircularProgressIndicator for the moment

Add OudsCircularProgressIndicator to the demo app

f269678

Create OudsLinearProgressIndicator component

fdf18fe

Update components KDoc

e0242bf

Add stop indicator to determinate linear progress indicators

aa98906

Add OudsLinearProgressIndicator to demo app

53f1416

Add padding to OudsLinearProgressIndicator previews

3461067

Update OudsCircularProgressIndicator for zoom management

b0f6790

Fix a bug by forcing text input to be in LTR even if in Arabic (RTL l…

af326f1

…anguage)

Add progress indicator components snapshots

b5ceae7

# Conflicts: # core/src/main/java/com/orange/ouds/core/utilities/OudsPreviewableComponent.kt

Use a token to determine stroke cap

fdc882d

Update translation strings

659f78a

Apply stroke cap to circular progress indicator

297c65f

Review: Add TODO to remember to add design guideline links

8df8d95

Review: Update strokeCap to StrokeCap.Butt

ec17105

Review: Update non-branded color token

078e530

Review: Test if helper text is null or blank before display it in the…

4fc0d77

… component

Review: Implement isPreviewAvailable for linear progress with long he…

21a24a6

…lper text

Review: Remove useless this

61ee988

Review: Remove coerceIn call

01ab0f7

Review: Use an existing common string for helper text

78b653c

paulinea added 4 commits June 9, 2026 17:00

Review: Remove useless boxes

ff15091

Review: Remove useless string

804553d

Review: Factorize code snippet

ee6dbd5

Update snapshots

2b192f4

paulinea force-pushed the 1313-in-library-add-circular-progress-indicator-and-linear-progress-indicator-components branch from 31bf268 to 2b192f4 Compare June 9, 2026 15:00

paulinea deployed to netlify June 9, 2026 15:05 — with GitHub Actions View deployment

Conversation

paulinea commented May 22, 2026

Uh oh!

github-actions Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Netlify deploy for commit 2b192f4 succeeded

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulinea Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented May 22, 2026 •

edited

Loading

🟢 Netlify deploy for commit `2b192f4` succeeded

paulinea Jun 9, 2026 •

edited

Loading