feat(NcButton): Introduce text and text-classes properties

[susnux]

☑️ Resolves

Alternative for #4367

• text is the visible text of the button, the default slot for passing the text is now deprecated
• text-classes are additional classes injected to the text wrapper for custom styling
• Added example when this should be used (for table headers)

So basically this moves from misused slot to text property with allowing to inject custom classes that can be used later for custom styling.
(Please note that I had to use the deprecated v-deep selector as vue-styleguidist does not support the recommended :deep selector).

🖼️ Screenshots

voko.mp4

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[skjnldsv]

Conflicts

[susnux]

@skjnldsv resolved

---

BTW I would prefer this one over #4367

[raimund-schluessler]

Can we directly remove the slot in master which will be 8.x and introduce the deprecation for stable7?

[susnux]

This will be huge in terms of breaking projects, not sure if we want to do this already for version 8 or wait for the next

[raimund-schluessler]

We have huge breaking changes in master already (e.g. the renaming from title to name) and the entire removal of some components. So, from my side, I wouldn't mind another breaking change.
The migration effort needs to be done anyway, the question is just, when does it suite you 😉

[ShGKme]

IMO, we should either allow using slot for button content. It would also solve custom text formatting problem by allowing to pass formatted text as a markup.

<NcButton>
  <span class="foo">My text</span> <span class="down">🔻</span>
</NcButton>

Or remove the content slot at all and make this breaking change with text.

During beta we can add check to mounted that console.warn if slot is passed to help with the migration.

[susnux]

After seeing all of your validator fixes @ShGKme I think we should go with this one and only allow text content through props.

[susnux]

Pushed a commit that warns when the default slot is used as suggested by @ShGKme
Also added a test to remind us to remove that behavior when releasing (as soon as the version is set to stable it will fail if the default slot still works 😉 )

[ShGKme]

After seeing all of your validator fixes @ShGKme I think we should go with this one and only allow text content through props.

For the record, the only place where <button> had invalid non-phrasal content was User Menu avatar-button-trigger, and plain html <button> was used there. There was no HTML validation issue with NcButton content.

---

In general case, I'd definitely prefer to have a full-functional slot content (that allows actual content, not render-text function). But as no app actually needed any true custom content, we can use text. It would make component more performant and simple.

Alternatively, we may add a new slot, but explicitly mark it as a custom content slot, not the default text content.

[ShGKme]

Suggested change

	buttonText() {
	return this.style.indexOf('text') !== -1 ? 'Example text' : ''
	}
	buttonText() {
	return this.style.includes('text') ? 'Example text' : ''
	}

[ShGKme]

A huge painful breaking change but fine by me.

Let's wait for other opinions.