angular / angular/components

feat(progress-bar): Missing `--mdc-linear-progress-active-indicator-shape` property for progress-bar

Ouverte
#28,554 5 commentaires 19 réactions 0 personnes assignées Voir sur GitHub
area: material/progress-bar feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Feature Description

Currently if I want to change the shape of the progress bar to be round like, I only have the `--mdc-linear-progress-track-shape` to set the track shape, but not the same option for the shape of the active-indicator, which will still be square.
Also, only setting the `--mdc-linear-progress-track-shape`, will result in the active indicator overflowing, leaving me with an inconsistent progress-bar (see 1st picture)

Hence that leaves me with the better option of just setting the `border-radius` of the `mat-progress-bar` element itself, because this doesn't cause the active-indicator to overflow. In this case the `--mdc-linear-progress-track-shape` becomes redundant.

1. Screenshot with `--mdc-linear-progress-track-shape: 4px;`, causing the active-indicator to overflow:

image

2. Screenshot with `--mdc-linear-progress-track-shape: 4px;` and `border-radius: 4px`, rendering the `--mdc-linear-progress-track-shape` redundant:

image

3. Screenshot with only `border-radius: 4px;` leaving me with an almost round progress bar, except that the active-indicator is not actually round.

image

So there need to be an option to set the `--mdc-linear-progress-active-indicator-shape` like for other components, so that the active-indicator can be made round, as shown in the [Token and Specs section in the Material 3 specification](https://m3.material.io/components/progress-indicators/specs)

### Use Case

This would enable a very relevant an normal use case that is also shown in the [Token and Specs section in the Material 3 specification](https://m3.material.io/components/progress-indicators/specs).

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le composant progress-bar et suivez la manière dont --mdc-linear-progress-track-shape est appliqué au track et à l’active indicator. Comparez le style avec la section Token and Specs de progress-indicator de Material 3, puis vérifiez que la nouvelle active-indicator shape option arrondit l’indicateur sans débordement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.