fly-tag

Migrating fly-tag


Source component

Elements (typically span or div) with class fly-tag.

Target component

PlumaTag

Mapping

Closable/deletable tags

Tags with a close button inside are supported in PlumaTag by passing an @onDelete callback.

Examples

Source:

<span class="fly-tag">Tag name</span>

Target:

<PlumaTag>Tag name</PlumaTag>

Source:

<span class="fly-tag">
  {{tag.name}}

  <button
    data-test-remove-tag={{tag.id}}
    aria-hidden="true"
    class="fly-close ml-0.5"
    disabled={{@readOnly}}
    type="button"
    {{on "click" (perform this.removeTagTask tag)}}
  >
    <FlyIcon @icon="close" @size="sm" class="block" />
    <span class="sr-only">Remove tag</span>
  </button>
</span>

Target:

<PlumaTag @onDelete={{fn this.removeTagTask.perform tag}} @isDisabled={{@readOnly}}>
  {{tag.name}}
</PlumaTag>