Componente Button, con alcune combinazioni il testo ha lo stesso colore dello sfondo

[arturu]

Comportamento attuale

Utilizzando il componente button con alcune combinazioni, la label del bottone ha lo stesso colore dello sfondo (o quasi).

• Outline + white = la label ha lo stesso colore di sfondo
• Outline + light = la label ha un colore poco visibile

In maniera analoga si verifica con outline disabled, e disabled dark

con la versione dark,

e disabled dark

Comportamento atteso

Penso che non sia il comportamento atteso dai dev

Possibili soluzioni

Forse intervenire sugli scss. Attualmente in fase di sviluppo, per le combinazioni citate ho inserito una classe text-white, text-dark o text-secondary in base alle esigenze

https://github.com/italia/design-drupal-theme/blob/0c351fdbde17120d39afbad7592a9b3965eecf07/components/components-2/button/button-demo.html.twig#L68

https://github.com/italia/design-drupal-theme/blob/0c351fdbde17120d39afbad7592a9b3965eecf07/components/components-2/button/button-demo.html.twig#L104

https://github.com/italia/design-drupal-theme/blob/0c351fdbde17120d39afbad7592a9b3965eecf07/components/components-2/button/button-demo.html.twig#L132

https://github.com/italia/design-drupal-theme/blob/0c351fdbde17120d39afbad7592a9b3965eecf07/components/components-2/button/button-demo.html.twig#L162

Contesto

[astagi]

Comportamento attuale

Utilizzando il componente button con alcune combinazioni, la label del bottone ha lo stesso colore dello sfondo (o quasi).

• Outline + white = la label ha lo stesso colore di sfondo
• Outline + light = la label ha un colore poco visibile

@arturu queste due classi avrebbero senso su uno sfondo più scuro, non bianco. Non so se ho capito bene il problema, quale comportamento attendevi?

[arturu]

Forse sono in una casistica non prevista, o non ancora implementata. Ho questa situazione: switch tra dark mode e white mode.

<div class="container">
  <button type="button" class="btn btn-*">Button</button>
  <button type="button" class="btn btn-outline-*">Button outline</button>
  <button type="button" class="btn btn-* disabled">Button disabled</button>
  <button type="button" class="btn btn-outline-* disabled">Button outline disabled</button>
</div>

se al div container aggiungo la classe bg-dark (anche tramite js) tutti i bottoni si adattano cromaticamente e restano visibili eccetto btn-outline-dark e btn-outline-black.

Stessa cosa succede con btn-outline-white e btn-outline-light quando tolgo la classe bg-dark dal container.

Per risolvere questo problema ho usato un workaround in twig che aggiunge o toglie 'text-white' e text-secondary, ma sarebbe bello se lo facesse in automatico bootstrap-italia.

Se in caso non è prevista possiamo pure chiudere la issue :) :+1:

[astagi]

Riporto questa problematica anche al team, ti aggiorno @arturu

[astagi]

@arturu ti aggiorno che questa parte è prevista, lasciamo aperta la issue e vediamo di risolvere :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.