NcButton: Add alignment property to change icon and text ordering

[susnux]

☑️ Resolves

We sometimes need to change the alignment of icon and text of the button, currently this is dirty-hacked by using :deep selectors. Examples are the column headers on tables (file list, logreader, file picker).

🖼️ Screenshots

🏁 Checklist

• 📘 Component documentation has been extended, updated or is not applicable

[ShGKme]

(More examples)

Suggested change

	<div>
	<div style="display: flex; gap: 12px;">
	<NcButton aria-label="Previous" type="tertiary">
	<template #icon>
	<IconLeft :size="20" />
	</template>
	Previous page
	</NcButton>
	<NcButton alignment="end-reverse" aria-label="Previous" type="primary">
	<template #icon>
	<IconRight :size="20" />
	</template>
	Next page
	</NcButton>
	</div>
	</div>
	<div style="display: flex; flex-direction: column; gap: 12px;">
	<NcButton aria-label="central (default)" type="secondary" wide>
	<template #icon>
	<IconLeft :size="20" />
	</template>
	central (default)
	</NcButton>
	<div style="display: flex; gap: 12px;">
	<div style="display: flex; flex-direction: column; gap: 12px; flex: 1">
	<NcButton alignment="start" aria-label="start" type="secondary" wide>
	<template #icon>
	<IconLeft :size="20" />
	</template>
	start
	</NcButton>
	<NcButton alignment="start-reverse" aria-label="start-reverse" type="secondary" wide>
	<template #icon>
	<IconRight :size="20" />
	</template>
	start-reverse
	</NcButton>
	</div>
	<div style="display: flex; flex-direction: column; gap: 12px; flex: 1">
	<NcButton alignment="end" aria-label="end" type="secondary" wide>
	<template #icon>
	<IconLeft :size="20" />
	</template>
	end
	</NcButton>
	<NcButton alignment="end-reverse" aria-label="end-reverse" type="secondary" wide>
	<template #icon>
	<IconRight :size="20" />
	</template>
	end-reverse
	</NcButton>
	</div>
	</div>
	</div>

[jancborchardt]

I think the "start-reverse" and "end" layouts should not exist though, they look off and should not be used or recommended.

[susnux]

@jancborchardt start-reverse and end are the values for which this was feature is introduced (table headers sort icon should be on the opposite site of the alignment)

[susnux]

But as discussed with Jan, we should not promote those stypes for anything but table headers.

[ShGKme]

@jancborchardt start-reverse and end are the values for which this was feature is introduced (table headers sort icon should be on the opposite site of the alignment)

Do you have end, not end-reversed button in file picker table?

[ShGKme]

IMO, center-reversed also may make sense for aka pagination buttons or next-step buttons with right arrow.

We don't have such buttons right now. But it seems to me that the main reason for this is that developers do not use icons here because they are not supported and because it is not an option.

[marcoambrosini]

are there other applications for trailing icons in buttons? I'm not really sure we should implement this just for pagination. Those should be link anyway and we could have a very simple wrapper of the button that just does pagination for that.
What is the problem in tables?

[susnux]

@marcoambrosini the sorting icon should normally be on the opposite side of the text alignment, or at least on the end instead of the inline start.
So we discuessed different approaches like adding a "trailing-icon" slot (not good, as we never want a button with two icons). Or introducing a wrapper component which hacks the alignment using deep selectors (this is seems not to be a good solution as it depends on private classes of the button, instead we would have to introduce something like customClasses property to allow to inject our own classes which then can be safely be using with deep selectors).

But allowing to align the button content using a property seemed to be the best and cleanest solution, instead of introducing a wrapper component.

There are even more examples on where this could be used, as at least the "start" alignment is quite common (have left aligned content but full width of clickable area).