Skip to content

feat: added @suffixIcon arg to oss::button #639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
OwenCoogan wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

feat: added @suffixIcon arg to oss::button #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6a5b21
feat: added @suffixIcon arg to oss::button
OwenCoogan Feb 12, 2026
8dd1a1a
fix: fixed linter issue
OwenCoogan Feb 13, 2026
ff82870
fix: removed dynamic gap for suffix icon
OwenCoogan Feb 13, 2026
00e1853
fix: added fix for margin size
OwenCoogan Feb 13, 2026
9ef4f25
fix: fixed gap based on design input
OwenCoogan Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion addon/components/o-s-s/button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,15 @@
{{else if @iconUrl}}
<img src={{@iconUrl}} alt="icon" />
{{/if}}

{{#if @label}}
<span class={{if (or @icon @iconUrl) "margin-left-px-6"}}>{{@label}}</span>
{{/if}}
{{#if @suffixIcon}}
<OSS::Icon
@style={{fa-icon-style @suffixIcon}}
@icon={{fa-icon-value @suffixIcon}}
class={{if @label "margin-left-px-18"}}
/>
{{/if}}
{{/if}}
</button>
22 changes: 21 additions & 1 deletion addon/components/o-s-s/button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,16 @@ export default {
type: 'text'
}
},
suffixIcon: {
description: 'Font Awesome class for an icon displayed after the label (e.g. fas fa-chevron-down)',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
},
control: {
type: 'text'
}
},
square: {
description: 'Displays the button as a square. Useful for icon buttons.',
table: {
Expand Down Expand Up @@ -164,6 +174,7 @@ const defaultArgs = {
countDown: undefined,
loadingOptions: undefined,
iconUrl: undefined,
suffixIcon: undefined,
disabled: undefined
};

Expand All @@ -172,7 +183,8 @@ const Template = (args) => ({
<OSS::Button
@skin={{this.skin}} @size={{this.size}} @loading={{this.loading}} @label={{this.label}} @icon={{this.icon}}
@theme={{this.theme}} @square={{this.square}} @countDown={{this.countDown}}
@iconUrl={{this.iconUrl}} @loadingOptions={{this.loadingOptions}} disabled={{this.disabled}} />
@iconUrl={{this.iconUrl}} @suffixIcon={{this.suffixIcon}}
@loadingOptions={{this.loadingOptions}} disabled={{this.disabled}} />
`,
context: args
});
Expand Down Expand Up @@ -201,3 +213,11 @@ WithIconUrl.args = {
iconUrl: '/@upfluence/oss-components/assets/heart.svg'
}
};

export const WithSuffixIcon = Template.bind({});
WithSuffixIcon.args = {
...defaultArgs,
...{
suffixIcon: 'fas fa-chevron-down'
}
Comment on lines +217 to +222
Copy link

@edouardmisset edouardmisset Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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'
}

Copy link
Contributor

@aprentout aprentout Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

};
1 change: 1 addition & 0 deletions addon/components/o-s-s/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export interface OSSButtonArgs {
loadingOptions?: LoadingOptions;
icon?: string;
iconUrl?: string;
suffixIcon?: string;
label?: string;
theme?: string;
square?: boolean;
Expand Down
18 changes: 15 additions & 3 deletions tests/integration/components/o-s-s/button-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,18 @@ module('Integration | Component | o-s-s/button', function (hooks) {
assert.dom('.upf-btn').hasText('Test');
});

test('it applies margin-left-px-18 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-18');
});

test('it does not apply margin to suffix icon when label is absent', async function (assert) {
await render(hbs`<OSS::Button @suffixIcon="fas fa-chevron-down" @icon="fas fa-check" />`);

assert.dom('.upf-btn i.fa-chevron-down').doesNotHaveClass('margin-left-px-18');
});

module('it renders with the correct skin', function () {
test('when using an unknown skin, it is set to default', async function (assert) {
await render(hbs`<OSS::Button @skin="unknown" @label="Test" />`);
Expand Down Expand Up @@ -138,7 +150,7 @@ module('Integration | Component | o-s-s/button', function (hooks) {
assert.dom('.upf-btn i.fas').exists();
assert.dom('.upf-btn i.fas').hasClass('fa-circle-notch');
assert.dom('.upf-btn i.fas').hasClass('fa-spin');
assert.dom('.upf-btn span.margin-left-px-6').doesNotExist();
assert.dom('.upf-btn span').doesNotExist();
});

test('when loading and the showLabel loading option is truthy, the label is displayed', async function (assert) {
Expand All @@ -148,8 +160,8 @@ module('Integration | Component | o-s-s/button', function (hooks) {
assert.dom('.upf-btn i.fas').exists();
assert.dom('.upf-btn i.fas').hasClass('fa-circle-notch');
assert.dom('.upf-btn i.fas').hasClass('fa-spin');
assert.dom('.upf-btn span.margin-left-px-6').exists();
assert.dom('.upf-btn span.margin-left-px-6').hasText('Test');
assert.dom('.upf-btn span').exists();
assert.dom('.upf-btn span').hasText('Test');
});
});

Expand Down
Loading