italia / italia/design-angular-kit

Margini applicati al componente <it-chip>

Open
#542 0 comments 0 reactions 0 assignees View on GitHub
bug
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

Image

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.