button prop changes (#106)

freshworks · Feb 6, 2020 · 1b08e79 · 1b08e79
1 parent f816c32
commit 1b08e79
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 40 deletions.
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/demo-1.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/demo-1.hbs
@@ -1,13 +1,13 @@
 {{#docs-demo as |demo|}}
   {{#demo.example name="nucleus-button-loading.hbs"}}
     {{nucleus-button
-      type="primary"
+      variant="primary"
       onClick=(action "download" 1)
       label="Click"}}
   {{/demo.example}}
   {{#demo.example name="nucleus-button-loading-custom.hbs"}}
     {{nucleus-button
-      type="primary"
+      variant="primary"
       block=true
       onClick=(action "download" 1)
       pendingLabel="Downloading"

diff --git a/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md b/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md
@@ -23,7 +23,7 @@ Button with yieldable content.
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-button-block-form.hbs'}}
-    {{#nucleus-button type="primary" ariaLabel="concise label"}}
+    {{#nucleus-button variant="primary" ariaLabel="concise label"}}
       Some yield content here
     {{/nucleus-button}}
   {{/demo.example}}
@@ -37,14 +37,14 @@ Dynamic button which has different states: pending and success. Supply an `actio
 
 ## Styles
 
-#### 1. Different types:
+#### 1. Different variants:
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-button-light.hbs'}}
     {{nucleus-button label="Click here"}}
-    {{nucleus-button label="Click here" type="secondary"}}
-    {{nucleus-button label="Click here" type="danger"}}
-    {{nucleus-button label="Click here" type="link"}}
-    {{nucleus-button label="Click here" type="text"}}
+    {{nucleus-button label="Click here" variant="secondary"}}
+    {{nucleus-button label="Click here" variant="danger"}}
+    {{nucleus-button label="Click here" variant="link"}}
+    {{nucleus-button label="Click here" variant="text"}}
   {{/demo.example}}
   {{demo.snippet 'nucleus-button-light.hbs'}}
 {{/docs-demo}}
@@ -61,15 +61,15 @@ Dynamic button which has different states: pending and success. Supply an `actio
 #### 3. Icon buttons:
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-button-dense.hbs'}}
-    {{nucleus-button icon="nucleus-cross" size="small" type="text"}}
-    {{nucleus-button icon="nucleus-cross" size="mini" type="text"}}
+    {{nucleus-button icon="nucleus-cross" size="small" variant="text"}}
+    {{nucleus-button icon="nucleus-cross" size="mini" variant="text"}}
   {{/demo.example}}
   {{demo.snippet 'nucleus-button-dense.hbs'}}
 {{/docs-demo}}
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-button-icon.hbs'}}
-    {{nucleus-button icon="nucleus-cross" label="Click here" type="danger"}}
+    {{nucleus-button icon="nucleus-cross" label="Click here" variant="danger"}}
   {{/demo.example}}
   {{demo.snippet 'nucleus-button-icon.hbs'}}
 {{/docs-demo}}
@@ -86,7 +86,7 @@ Dynamic button which has different states: pending and success. Supply an `actio
 To toggle the 'disabled' property, set 'disabled' to true
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-button-disabled.hbs'}}
-    {{nucleus-button type="primary" label="Click here" disabled=true}}
+    {{nucleus-button variant="primary" label="Click here" disabled=true}}
   {{/demo.example}}
   {{demo.snippet 'nucleus-button-disabled.hbs'}}
 {{/docs-demo}}

diff --git a/packages/banner/addon/templates/components/nucleus-banner.hbs b/packages/banner/addon/templates/components/nucleus-banner.hbs
@@ -10,7 +10,7 @@
             size="small"
             ariaLabel="Show more"
             block=true
-            type="link"
+            variant="link"
             label=(concat "+ " stackedItems.length " " showMoreLabel)
             onClick=(action "toggleShowMore")}}
           {{#if _isShowMore}}

diff --git a/packages/banner/addon/templates/components/nucleus-banner/item.hbs b/packages/banner/addon/templates/components/nucleus-banner/item.hbs
@@ -19,7 +19,7 @@
 {{/if}}
 {{#if item.isDismissible}}
   {{nucleus-button
-    type="text"
+    variant="text"
     size="small"
     customClass=(concat "nucleus-banner-item__close")
     icon="nucleus-cross"

diff --git a/packages/button/README.md b/packages/button/README.md
@@ -11,7 +11,7 @@ Buttons means operation or series of operations. Buttons are interactive compone
 
 Scenario
 ------------------------------------------------------------------------------
-There are several button types used throughout the product. They are used in pages such as articles, forms, wizards and perform actions such as saving, cancelling or sending, or call users to those actions. 
+There are several button variants used throughout the product. They are used in pages such as articles, forms, wizards and perform actions such as saving, cancelling or sending, or call users to those actions. 
 
 Guidelines
 ------------------------------------------------------------------------------

diff --git a/packages/button/addon/components/nucleus-button.js b/packages/button/addon/components/nucleus-button.js
@@ -61,7 +61,7 @@ class NucleusButton extends Component {
   /**
   * Icon sizes: `mini`, `small`, `medium`, `large`
   *
-  * @field size
+  * @field iconSize
   * @type string
   * @default null
   * @public
@@ -83,15 +83,15 @@ class NucleusButton extends Component {
   }
 
   /**
-  * Button display types: `primary`, `secondary`, `danger`, `text` & `link`
+  * Button display variants: `primary`, `secondary`, `danger`, `text` & `link`
   *
-  * @field type
+  * @field variant
   * @type string
   * @default 'primary'
   * @public
   */
   @defaultProp
-  type = 'primary';
+  variant = 'primary';
 
   /**
   * Attribute bound to button type
@@ -179,14 +179,14 @@ class NucleusButton extends Component {
   }
 
   /**
-  * Value to be passed as argument for `onClick` action
+  * Function Arguments for `onClick` action
   *
-  * @field value
+  * @field args
   * @type string|number|object
   * @public
   */
   @defaultProp
-  value = null;
+  args = null;
 
   /**
   * Timeout after which the default label replaces fulfilled/rejected label.
@@ -333,8 +333,8 @@ class NucleusButton extends Component {
   */
   @computed('type')
   get _typeClass() {
-    let type = this.get('type');
-    return type ? `nucleus-button--${this.get('type')}` : 'nucleus-button--primary';
+    let type = this.get('variant');
+    return type ? `nucleus-button--${this.get('variant')}` : 'nucleus-button--primary';
   }
 
   /**
@@ -388,7 +388,7 @@ class NucleusButton extends Component {
     }
 
     if (!this.get('_isPending')) {
-      let promise = action(this.get('value'));
+      let promise = action(this.get('args'));
 
       if (promise && typeof promise.then === 'function' && !this.get('isDestroyed')) {
         set(this, '_buttonState', BUTTON_STATE.PENDING);

diff --git a/packages/button/tests/integration/components/nucleus-button-test.js b/packages/button/tests/integration/components/nucleus-button-test.js
@@ -20,7 +20,7 @@ module('Integration | Component | nucleus-button', function(hooks) {
     await render(hbs`{{nucleus-button label="Test"}}`);
 
     assert.dom('button').hasClass('nucleus-button', 'button has nucleus-button class');
-    assert.dom('button').hasClass('nucleus-button--primary', 'button has default primary type class');
+    assert.dom('button').hasClass('nucleus-button--primary', 'button has default primary variant class');
   });
 
   test('it has correct size', async function(assert) {
@@ -29,11 +29,11 @@ module('Integration | Component | nucleus-button', function(hooks) {
     assert.dom('button').hasClass('nucleus-button--mini', 'button has correct size class');
   });
 
-  test('it has correct type', async function(assert) {
-    await render(hbs`{{#nucleus-button type="secondary"}}Test{{/nucleus-button}}`);
+  test('it has correct variant', async function(assert) {
+    await render(hbs`{{#nucleus-button variant="secondary"}}Test{{/nucleus-button}}`);
 
     assert.dom('button').hasClass('nucleus-button', 'button has nucleus-button class');
-    assert.dom('button').hasClass('nucleus-button--secondary', 'button has appropriate type class');
+    assert.dom('button').hasClass('nucleus-button--secondary', 'button has appropriate variant class');
     assert.dom('button').doesNotHaveClass('nucleus-button--primary', 'button does not have primary class');
   });
 
@@ -66,13 +66,13 @@ module('Integration | Component | nucleus-button', function(hooks) {
     assert.dom('button svg').hasClass('nucleus-icon', 'svg icon is rendered');
   });
 
-  test('it sends onClick action with "value" property as a parameter', async function(assert) {
+  test('it sends onClick action with "args" property as a parameter', async function(assert) {
     let action = this.spy();
     this.actions.testAction = action;
-    await render(hbs`{{nucleus-button onClick=(action "testAction") value="foo"}}`);
+    await render(hbs`{{nucleus-button onClick=(action "testAction") args="foo"}}`);
 
     await click('button');
-    assert.ok(action.calledWith('foo'), 'onClick action has been called with button value');
+    assert.ok(action.calledWith('foo'), 'onClick action has been called with button arguments');
   });
 
   test('it changes text according to button state', async function(assert) {
@@ -215,17 +215,17 @@ module('Integration | Component | nucleus-button', function(hooks) {
   });
 
   test('buttons pass visual regression tests', async function(assert) {
-    await render(hbs`{{nucleus-button label="LabelButton"}} {{#nucleus-button}}Button{{/nucleus-button}} {{#nucleus-button size="mini"}}Mini{{/nucleus-button}} {{#nucleus-button size="small"}}Small{{/nucleus-button}} {{#nucleus-button type="secondary"}}Secondary{{/nucleus-button}} {{#nucleus-button type="danger"}}Danger{{/nucleus-button}} {{#nucleus-button type="link"}}Link{{/nucleus-button}} {{#nucleus-button type="text"}}Text{{/nucleus-button}} {{#nucleus-button block=true}}Block Button{{/nucleus-button}} {{#nucleus-button disabled=true}}Secondary{{/nucleus-button}} {{nucleus-button icon="nucleus-cross" type="secondary"}} {{nucleus-button icon="nucleus-cross" size="small" type="secondary"}} {{nucleus-button icon="nucleus-cross" size="mini" type="secondary"}}`);
+    await render(hbs`{{nucleus-button label="LabelButton"}} {{#nucleus-button}}Button{{/nucleus-button}} {{#nucleus-button size="mini"}}Mini{{/nucleus-button}} {{#nucleus-button size="small"}}Small{{/nucleus-button}} {{#nucleus-button variant="secondary"}}Secondary{{/nucleus-button}} {{#nucleus-button variant="danger"}}Danger{{/nucleus-button}} {{#nucleus-button variant="link"}}Link{{/nucleus-button}} {{#nucleus-button variant="text"}}Text{{/nucleus-button}} {{#nucleus-button block=true}}Block Button{{/nucleus-button}} {{#nucleus-button disabled=true}}Secondary{{/nucleus-button}} {{nucleus-button icon="nucleus-cross" variant="secondary"}} {{nucleus-button icon="nucleus-cross" size="small" variant="secondary"}} {{nucleus-button icon="nucleus-cross" size="mini" variant="secondary"}}`);
     await backstop(assert,{scenario: {misMatchThreshold: 0.1}});
   });
 
   test('hovered buttons pass visual regression tests', async function(assert){
-    await render(hbs`{{nucleus-button class="link-button" type="link" label="Label button"}}`)
+    await render(hbs`{{nucleus-button class="link-button" variant="link" label="Label button"}}`)
     await backstop(assert,{scenario: {hoverSelector:".link-button",misMatchThreshold: 0.1}})
   });
 
   test('clicked buttons pass visual regression tests', async function(assert){
-    await render(hbs`{{nucleus-button class="text-button" type="text" label="Label button"}}`)
+    await render(hbs`{{nucleus-button class="text-button" variant="text" label="Label button"}}`)
     await backstop(assert, {scenario: {clickSelectors: ".text-button",misMatchThreshold: 0.1}})
   });
 });
diff --git a/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs b/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
@@ -14,7 +14,7 @@
   {{#if isDismissible}}
     <div class="nucleus-inline-banner__close">
       {{nucleus-button
-        type="text"
+        variant="text"
         size="mini"
         icon="nucleus-cross"
         onClick=(action "onCloseTip")}}

diff --git a/packages/modal/addon/templates/components/nucleus-modal/footer.hbs b/packages/modal/addon/templates/components/nucleus-modal/footer.hbs
@@ -3,14 +3,14 @@
 {{else}}
   {{#if hasCloseButton}}
     {{nucleus-button
-      type="secondary"
+      variant="secondary"
       label=closeTitle
       onClick=(action onClose)}}
   {{/if}}
   {{#if hasSubmitButton}}
     {{nucleus-button
       disabled=submitDisabled
-      type=type
+      variant=type
       label=submitTitle
       onClick=(action onSubmit)}}
   {{/if}}

diff --git a/packages/modal/addon/templates/components/nucleus-modal/header.hbs b/packages/modal/addon/templates/components/nucleus-modal/header.hbs
@@ -10,7 +10,7 @@
   </div>
   {{#if closeButton}}
     {{nucleus-button
-      type=closeButtonType
+      variant=closeButtonType
       size="small"
       customClass=(concat "nucleus-modal__close " position)
       icon="nucleus-cross"

diff --git a/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs b/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs
@@ -17,7 +17,7 @@
           </div>
           <div class="nucleus-toast-message__close">
             {{nucleus-button
-              type="text"
+              variant="text"
               size="mini"
               customClass=(concat "flash-message-close")
               icon="nucleus-cross"