italia / italia/design-angular-kit
Margini applicati al componente <it-chip>
- Dominant language
- TypeScript
- Stars
- 86
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Description
### Esiste già una discussione sul tema che ti interessa, o su un tema simile?
- [x] Ho verificato e non esiste
### Versione della libreria
v21.0.0
### Cosa
A tutte le `` sono applicati dei margini
La regola CSS interessata è la seguente
```scss
// _chips.scss
.chip {
...
margin-top: $v-gap * 0.5;
margin-bottom: $v-gap;
&:not(:last-child) {
margin-right: $v-gap;
}
}
```
### Perché
I margini applicati rendono più impegnativo seguire le specifiche di design
### Contesto
_No response_
### Altro
Possibili soluzioni:
1. Applicare i margini **solo** in determinate situazioni (es. chip all'interno di una card) e lasciarli a 0 **di default**. IMHO dovrebbe essere il wrapper a decidere le spaziature da applicare
2. Fornire delle variabili SASS **specifiche** per la gestione dei margini
In merito alla seconda opzione, intendo qualcosa del genere (i nomi sono esemplificativi)
```scss
// _chips.scss
.chip {
...
margin-top: $chip-mt;
margin-bottom: $chip-mb;
&:not(:last-child) {
margin-right: $chip-mr;
}
}
```
Gli sviluppatori possono poi fare questo
```scss
// styles.scss
$chip-mt: 0;
$chip-mb: 0;
$chip-mr: 0;
@import "bootstrap-italia/src/scss/bootstrap-italia";
```
Nel frattempo, ecco un possibile workaround
```scss
// styles.scss
@import "bootstrap-italia/src/scss/bootstrap-italia";
.chip {
&,
&:not(:last-child) {
margin: 0;
}
}
// Per chi preferisse un approccio più aggressivo, può utilizzare questo al posto della regola sopra
.chip {
margin: 0 !important;
}
```
Contributor guide
Assessment
This issue has not been assessed yet.