search

nrkno / core-components

Accessible and lightweight Javascript components
https://static.nrk.no/core-components/latest/
MIT License
117 stars 10 forks source link

core-toggle: sets button innerHTML to textContent for popup's #278

Closed tolu closed 4 years ago

tolu commented 5 years ago

Description

CoreToggle sets this.button.innerHTML = label when popup != false in connectedCallback.

Some minor local testing suggests this can be remedied by 

    // connectedCallback:
    this.value = this.button;

Example

Minimal example

<button>
    Some title
    ${someSvgString} <!-- this will diappear -->
</button>
<core-toggle hidden popup="">...</core-toggle>

Working Example: https://codesandbox.io/embed/coretoggle-bug-tygc8

Details

The issue is related to connectedCallback where this.value is set to this.button.textContent.

https://github.com/nrkno/core-components/blob/52271a339f5e0b3960d923719995703cb72db825/packages/core-toggle/core-toggle.js#L10

https://github.com/nrkno/core-components/blob/52271a339f5e0b3960d923719995703cb72db825/packages/core-toggle/core-toggle.js#L64-L74

tolu commented 5 years ago

A quick fix / solution for consumers:

htor commented 4 years ago

fikset i @nrk/core-toggle@3.0.8. nå kan du putte din button-tekst inni en <span> så vil all markup inni button preserveres med popup option i bruk. https://static.nrk.no/core-components/latest/index.html?core-toggle/readme.md#popup-and-button-html