UI-Button: Add Background, text and icon color option

[arturv2000]

Description

Add properties to allow the user to set the color to be used for:

• Button Background Color
• Text Color
• Icon Color

If empty string in any of these properties, the default theme color will be used.

The text color allows the use of Helper Class, for example having the field defined as red text-decoration-underline text-h3 font-weight-black results in:

Alternatively, for the text part we could allow html injection like it was done to ui-text.

Most if not all of these are possible to be done via class using CSS, this is a more "direct"/"user friendly" way of doing it.

Related Issue(s)

Close #375

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[joepavitt]

Alternatively, for the text part we could allow html injection like it was done to ui-text.

Definitely something I'd like to do

[arturv2000]

Just noticed an error in textColor since I then added the possibility to use the Helper Class it no longer supports using color codes #555555 or rgb(127,127,127).

Definitely something I'd like to do

Ok, I can remove the property textColor and add <span v-html="label" /> for the text.

One other thing, in the vue component there is this:

:style="{ 'min-width': icon ?? 'auto' }"

That is no longer valid, since icon is no longer defined. What would be the correct fix?

:style="{ 'min-width': 'auto' }"

[joepavitt]

Changes I've made as part of the review;

• Ensure the <template> elements only render if an icon is defined, and if append/prepend icon is present, this was causing icon-only buttons to render off-center.
• Rearrange the Button config so that the styling content renders at the bottom and under a "Custom Styling" sub-section
• Made the placeholders a little lighter to read, the detail is in the docs.
• Change the icon ?? check to iconOnly ??