feat: added @suffixIcon arg to oss::button

[OwenCoogan]

What does this PR do?

Related to: #

What are the observable changes?

Good PR checklist

• Title makes sense
• Is against the correct branch
• Only addresses one issue
• Properly assigned
• Added/updated tests
• Added/updated documentation
• Migrated touched components to Glimmer Components
• Properly labeled

[linear]

DRA-4477 [publishr-admin-web] Rework the `ContextualAction` component to match the new design

[edouardmisset]

Good job.

I'm still unsure about the different gaps between the prefix and suffix but the design team will have the final word.

Also take this review with a grain of salt as I don't have a whole lot of context on OSS::Buttons

Couple of small questions.

[edouardmisset]

question: Is it 12px or 6px ? I'm confused.

Suggested change

	test('it applies margin-left-px-6 to suffix icon when label is present', async function (assert) {
	await render(hbs`<OSS::Button @label="Test" @suffixIcon="fas fa-chevron-down" />`);
	assert.dom('.upf-btn i.fa-chevron-down').hasClass('margin-left-px-12');
	test('it applies margin-left-px-12 to suffix icon when label is present', async function (assert) {
	await render(hbs`<OSS::Button @label="Test" @suffixIcon="fas fa-chevron-down" />`);
	assert.dom('.upf-btn i.fa-chevron-down').hasClass('margin-left-px-12');

[edouardmisset]

question: Should it be suffix only? Or is it intended to be prefix and suffix icons?

Suggested change

	export const WithSuffixIcon = Template.bind({});
	WithSuffixIcon.args = {
	...defaultArgs,
	...{
	suffixIcon: 'fas fa-chevron-down'
	}
	export const WithPrefixAndSuffixIcon = Template.bind({});
	WithSuffixIcon.args = {
	...defaultArgs,
	...{
	suffixIcon: 'fas fa-chevron-down'
	}

[aprentout]

Imo suffix is sufficient here, the goal is just to have an example of usage available in storybook

[aprentout]

Imo suffix is sufficient here, the goal is just to have an example of usage available in storybook