angular / angular/components

bug(mat-list): Bad symmetry on text when line-break in code

Ouverte
#26,657 0 commentaires 5 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

area: material/list P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

v14

Description

The text in both matListItemTitle and matListItemLine creates a whitespace at the start and end of the text when the code is broken over multiple lines. This breaks the symmetry of the list items as seen in this example on the docs page
image

Reproduction

Stackblitz of the issue already showing in the docs page:
https://stackblitz.com/run?file=src%2Fapp%2Flist-variants-example.ts

Works:
<span>Text</span>

Creates extra spacing:

<span>
  Text
</span>
Expected Behavior

Expect the result not to have white spaces when rendered, or to ignore the white spaces. As it worked in v14.

Actual Behavior

Gets an extra white space when the code has line break inside tag. Breaks symmetry

Environment
  • Angular: latest v15
  • CDK/Material: latest v15
  • Browser(s): All
  • Operating System (e.g. Windows, macOS, Ubuntu): All

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction StackBlitz, en particulier src/app/list-variants-example.ts, et comparez le balisage rendu de matListItemTitle et matListItemLine avec du contenu span en ligne et multiligne. Suivez l’implémentation pertinente des listes Angular Material à partir de la reproduction et vérifiez que le balisage multiligne est rendu sans espaces blancs en début ou en fin et préserve la symétrie des éléments de liste.

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

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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