Support icon classes

[vanillajonathan]

Is your feature request related to a problem? Please describe.

The add, remove, move-up and move-down buttons are rather ugly with just a textual + and - sign.

Describe the solution you'd like

I would like to be able configure the Vanilla renderer to use icon classes so I can use the icons from Bootstap Icons or Font Awesome.

Describe alternatives you've considered

Fork the Vanilla renderer.

Framework

Vue 3

RendererSet

Vanilla

Additional context

No response

[sdirix]

Thanks for the suggestion. Definitely makes sense. We should use an iconClass if it's customized. When there is none, we should fallback to the textual approach.

[davewwww]

Hi,

it seems this affects the ArrayListRenderer and ArrayListElement. The buttons already have a class in both components, so you can already access them. You just can't access the text content yet.

      <button
        :disabled="!deleteEnabled"
        :class="styles.arrayList.itemDelete"
        type="button"
        @click="deleteClicked"
      >
        🗙
      </button>

What do you think about controlling the text via translations, like in the OneOfRenderer. So it can be changed and cleared from outside.

        <button
          ref="confirm"
          :onclick="onConfirm"
          :class="styles.dialog.buttonPrimary"
        >
          {{ control.translations.clearDialogAccept }}
        </button>

[vanillajonathan]

Control the dialog via translations would be nice, but there should be a way to insert a DOM element too, not just a text string.

I need:

<button
  :disabled="!deleteEnabled"
  :class="styles.arrayList.itemDelete"
  type="button"
  @click="deleteClicked"
>
  <i class="bi bi-x-lg"></i> <!-- this one -->
</button>