Skip to content

Commit

Permalink
[#638] Update progress indicators documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Oct 9, 2023
1 parent 06b97e1 commit 7cc3442
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 87 deletions.
94 changes: 20 additions & 74 deletions docs/components/ProgressIndicators.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,11 @@ description: Progress indicators express an unspecified wait time or display the

- [Design System Manager - Progress indicators](https://system.design.orange.com/0c1af118d/p/92aec5-progress-indicators------/b/33faf7)
- [Material Design - Progress indicators](https://material.io/components/progress-indicators/)
- Technical documentation soon available

## Accessibility

Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/android/development/)

Progress indicators inherit accessibility support from the `LinearProgressIndicator` class in the framework.
Please consider setting the content descriptor for use with screen readers.

That can be done in XML via the `android:contentDescription` attribute or programmatically like so:

```kotlin
progressIndicator.contentDescription = contentDescription
```

## Variants

### Progress bar
Expand All @@ -55,7 +45,7 @@ Linear progress indicators support both determinate and indeterminate operations

![Progress bar dark](images/progress_linear_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose implementation

You can use the composable `OdsLinearProgressIndicator` like this:

Expand All @@ -77,43 +67,22 @@ For an **indeterminate** linear progress indicator, no need to provide a progres

```kotlin
OdsLinearProgressIndicator(
label = "Downloading ...", // Optional
label = "Downloading ...",
icon = OdsLinearProgressIndicator(
painterResource(id = R.drawable.ic_arrow_down),
""
) // Optional
)
)
```

> **XML implementation**
To create a linear progress indicator you will need to
add `com.google.android.material.progressindicator.LinearProgressIndicator` in your layout

API and source code:

* `LinearProgressIndicator`: [Class description](https://developer.android.com/reference/com/google/android/material/progressindicator/LinearProgressIndicator), [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/progressindicator/LinearProgressIndicator.java)

The following example shows a **determinate** linear progress indicator.

In the layout:

```xml

<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent" android:layout_height="wrap_content" />
```

The following example shows an **indeterminate** linear progress indicator.

In the layout:

```xml

<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent" android:layout_height="wrap_content"
android:indeterminate="true" />
```
Parameter | Default value | Description
-- | -- | --
`modifier: Modifier` | `Modifier` | `Modifier` applied to the progress indicator
`progress: Float?` | `null` | Progress indicator value where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. If set to `null`, the progress indicator is indeterminate.
`label: String?` | `null` | Label displayed above the linear progress
`icon: OdsLinearProgressIndicatorIcon?` | `null` | Icon displayed above the progress indicator
`showCurrentValue: Boolean` | `false` | Controls the progress indicator current value visibility
{:.table}

### Activity indicator

Expand All @@ -131,7 +100,7 @@ processes.

![Activity indicator light](images/progress_circular_light.png) ![Activity indicator dark](images/progress_circular_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose implementation

You can use the `OdsCircularProgressIndicator` composable like this:

Expand All @@ -140,47 +109,24 @@ You can use the `OdsCircularProgressIndicator` composable like this:
```kotlin
OdsCircularProgressIndicator(
progress = 0.9f,
label = "Downloading ..." // Optional
label = "Downloading ..."
)
```

- For an **indeterminate** circular progress indicator, no need to provide a progress value:

```kotlin
OdsCircularProgressIndicator(
label = "Downloading ..." // Optional
label = "Downloading ..."
)
```

> **XML implementation**
To create a circular progress indicator you will need to
add `com.google.android.material.progressindicator.CircularProgressIndicator` in your layout

API and source code:

* `CircularProgressIndicator`: [Class description](https://developer.android.com/reference/com/google/android/material/progressindicator/CircularProgressIndicator), [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/progressindicator/CircularProgressIndicator.java)

The following example shows a **determinate** circular progress indicator.

In the layout:

```xml

<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content" android:layout_height="wrap_content" />
```

The following example shows an **indeterminate** circular progress indicator.

In the layout:

```xml

<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:indeterminate="true" />
```
Parameter | Default value | Description
-- | -- | --
`modifier: Modifier` | `Modifier` | `Modifier` applied to the progress indicator
`progress: Float?` | `null` | Progress indicator value where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. If set to `null`, the progress indicator is indeterminate.
`label: String?` | `null` | Label displayed below the circular progress
{:.table}

## Component specific tokens

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,10 @@ import com.orange.ods.extension.orElse
*
* @see androidx.compose.material.CircularProgressIndicator
*
* @param modifier The modifier applied to this progress indicator
* @param progress The progress of this progress indicator, where 0.0 represents no progress and 1.0
* represents full progress. Values outside of this range are coerced into the range. If set to `null`,
* the progress indicator is indeterminate.
* @param label The label displayed below the circular progress
* @param modifier [Modifier] applied to the progress indicator
* @param progress Progress indicator value where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced
* into the range. If set to `null`, the progress indicator is indeterminate.
* @param label Label displayed below the circular progress
*/
@Composable
@OdsComposable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,12 @@ import com.orange.ods.extension.orElse
*
* @see androidx.compose.material.LinearProgressIndicator
*
* @param modifier The modifier applied to this progress indicator
* @param progress The value of this progress indicator, where 0.0 represents no progress and 1.0
* represents full progress. Values outside of this range are coerced into the range. If set to `null`,
* the progress indicator is indeterminate.
* @param label The label displayed above the linear progress
* @param icon The icon displayed above the linear progress
* @param showCurrentValue Indicates whether the current value is displayed
* @param modifier [Modifier] applied to the progress indicator
* @param progress Progress indicator value where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced
* into the range. If set to `null`, the progress indicator is indeterminate.
* @param label Label displayed above the linear progress
* @param icon Icon displayed above the progress indicator
* @param showCurrentValue Controls the progress indicator current value visibility
*/
@OptIn(ExperimentalComposeUiApi::class)
@Composable
Expand All @@ -80,7 +79,7 @@ fun OdsLinearProgressIndicator(
) {
icon?.Content()
Spacer(Modifier.width(ButtonDefaults.IconSpacing))

if (label != null) {
Text(
text = label,
Expand Down

0 comments on commit 7cc3442

Please sign in to comment.