refactor: 💡 Remove disabled property on rose link button
This commit is contained in:
5 files changed
+15
-24
No files matched your search
@@ -9,6 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
An achor element component styled to mimic `Rose::Button` component.
|
||||
Styles supported: primary, secondary, warning, and ghost.
|
||||
Disabling link button is not supported as it is an action on form components only.
|
||||
|
||||
```html
|
||||
<Rose::LinkButton @style="primary" @iconRight="chevron-right">
|
||||
@@ -20,7 +21,6 @@ Styles supported: primary, secondary, warning, and ghost.
|
||||
<Story name="Advanced">{{
|
||||
template: hbs`
|
||||
<Rose::LinkButton
|
||||
@disabled={{disabled}}
|
||||
@style={{style}}
|
||||
@iconLeft={{iconLeft}}
|
||||
@iconRight={{iconRight}}
|
||||
@@ -30,7 +30,6 @@ Styles supported: primary, secondary, warning, and ghost.
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Content'),
|
||||
disabled: boolean('disabled', false),
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
role={{if @route "button" "link"}}
|
||||
@route={{@route}}
|
||||
@model={{@model}}
|
||||
@disabled={{@disabled}}
|
||||
class="rose-link-button {{if @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
|
||||
>
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from 'rose/components/rose/link-button';
|
||||
export { default } from 'rose/components/rose/link-button';
|
||||
@@ -3,11 +3,7 @@
|
||||
<Rose::LinkButton @style="warning">Warning</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="ghost">Ghost</Rose::LinkButton>
|
||||
<br />
|
||||
<Rose::LinkButton @style="primary" @disabled={{true}}>Primary</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="secondary" @disabled={{true}}>Secondary</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="warning" @disabled={{true}}>Warning</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="ghost" @disabled={{true}}>Ghost</Rose::LinkButton>
|
||||
<br />
|
||||
|
||||
<Rose::LinkButton @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
|
||||
<Rose::LinkButton @style="primary" @iconOnly="help-circle-outline" />
|
||||
@@ -3,33 +3,30 @@ import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, find } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | rose/link-button', function(hooks) {
|
||||
module('Integration | Component | rose/link-button', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton />`);
|
||||
assert.ok(find('a'));
|
||||
assert.notOk(find('.disabled'));
|
||||
assert.notOk(find('.rose-button'));
|
||||
assert.ok(find('.rose-link-button'));
|
||||
});
|
||||
|
||||
test('it renders with attributes', async function(assert) {
|
||||
test('it renders with attributes', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton id="link-button"/>`);
|
||||
assert.ok(find('#link-button'));
|
||||
});
|
||||
|
||||
test('it renders with content', async function(assert) {
|
||||
test('it renders with content', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton>Link button content</Rose::LinkButton>`);
|
||||
assert.ok(find('.rose-link-button').textContent.trim(), 'Link button content');
|
||||
assert.ok(
|
||||
find('.rose-link-button').textContent.trim(),
|
||||
'Link button content'
|
||||
);
|
||||
});
|
||||
|
||||
test('it renders disabled when @disabled={{true}}', async function(assert) {
|
||||
await render(hbs`<Rose::LinkButton @disabled={{true}}/>`);
|
||||
assert.ok(find('.disabled'));
|
||||
});
|
||||
|
||||
test('it renders with rose button styles', async function(assert) {
|
||||
test('it renders with rose button styles', async function (assert) {
|
||||
this.set('style', 'primary');
|
||||
await render(hbs`<Rose::LinkButton @style={{this.style}}/>`);
|
||||
assert.ok(find(`.rose-button-primary`));
|
||||
@@ -38,19 +35,19 @@ module('Integration | Component | rose/link-button', function(hooks) {
|
||||
assert.ok(find(`.rose-button-sample`));
|
||||
});
|
||||
|
||||
test('it supports left icon with @iconLeft', async function(assert) {
|
||||
test('it supports left icon with @iconLeft', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton @iconLeft="chevron-left" />`);
|
||||
assert.ok(find('.rose-icon'));
|
||||
assert.ok(find('.has-icon-left'));
|
||||
});
|
||||
|
||||
test('it supports left icon with @iconRight', async function(assert) {
|
||||
test('it supports left icon with @iconRight', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton @iconRight="chevron-right" />`);
|
||||
assert.ok(find('.rose-icon'));
|
||||
assert.ok(find('.has-icon-right'));
|
||||
});
|
||||
|
||||
test('it supports only icon with @iconOnly', async function(assert) {
|
||||
test('it supports only icon with @iconOnly', async function (assert) {
|
||||
await render(hbs`<Rose::LinkButton @iconOnly="help-circle-outline" />`);
|
||||
assert.ok(find('.rose-icon'));
|
||||
assert.ok(find('.has-icon-only'));
|
||||
|
||||
Reference in new issue
Block a user