freshworks · shibulijack-fd · Mar 3, 2020 · Feb 24, 2020 · Feb 24, 2020 · Feb 25, 2020
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs
@@ -13,6 +13,7 @@
         variant="text"
         size="mini"
         icon="nucleus-cross"
+        iconOnly=true
         onClick=(action banner.close)}}
       </div>
     {{/nucleus-inline-banner}}

diff --git a/packages/banner/addon/templates/components/nucleus-banner/item.hbs b/packages/banner/addon/templates/components/nucleus-banner/item.hbs
@@ -24,5 +24,6 @@
     customClass=(concat "nucleus-banner-item__close")
     icon="nucleus-cross"
     iconSize="mini"
+    iconOnly=true
     onClick=(action "onClose" item)}}
 {{/if}}
diff --git a/...nner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png b/...nner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png
diff --git a/..._normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png b/..._normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png
diff --git a/packages/button/addon/components/nucleus-button.js b/packages/button/addon/components/nucleus-button.js
@@ -80,7 +80,7 @@ class NucleusButton extends Component {
   @computed('iconSize', 'size')
   get _iconSize() {
     let iconSize = this.get('iconSize');
-    let defaultSize = this.get('size') ? this.get('size') : 'medium';
+    let defaultSize = this.get('size') ? this.get('size') : 'small';
     return iconSize ? iconSize : defaultSize;
   }
 

diff --git a/packages/button/addon/styles/components/_nucleus-button.scss b/packages/button/addon/styles/components/_nucleus-button.scss
@@ -24,8 +24,12 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
 
 .nucleus-button {
   font-size: $font-size-14;
+  vertical-align: middle;
   line-height: 1.2;
   padding: 6px 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid transparent;
   border-radius: 4px;
   outline: 0;
@@ -38,9 +42,10 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
   min-width: 80px;
 
   &__icon {
+    display: inherit;
+
     &.nucleus--active {
-      position: relative;
-      top: .125em;
+      margin-right: 4px;
     }
   }
 

diff --git a/packages/button/addon/templates/components/nucleus-button.hbs b/packages/button/addon/templates/components/nucleus-button.hbs
@@ -1,6 +1,6 @@
 {{#if icon}}
   <span class="nucleus-button__icon {{unless iconOnly "nucleus--active"}}">
-    {{nucleus-icon name=icon size=_iconSize}}
+    {{nucleus-icon name=icon size=_iconSize variant=_iconVariant}}
   </span>
 {{/if}}
 {{#if (and _isLoading _isShowLoading)}}

diff --git a/...-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png b/...-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png
diff --git a/packages/button/tests/integration/components/nucleus-button-test.js b/packages/button/tests/integration/components/nucleus-button-test.js
@@ -61,7 +61,7 @@ module('Integration | Component | nucleus-button', function(hooks) {
   });
 
   test('it with icon property shows icon', async function(assert) {
-    await render(hbs`{{nucleus-button icon="nucleus-cross"}}`);
+    await render(hbs`{{nucleus-button icon="nucleus-cross" iconOnly=true}}`);
 
     assert.dom('button svg').hasClass('nucleus-icon', 'svg icon is rendered');
   });

diff --git a/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs b/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
@@ -17,6 +17,7 @@
         variant="text"
         size="mini"
         icon="nucleus-cross"
+        iconOnly=true
         onClick=(action "onCloseTip")}}
     </div>
   {{/if}}

diff --git a/...ine-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png b/...ine-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png
diff --git a/packages/modal/addon/templates/components/nucleus-modal/header.hbs b/packages/modal/addon/templates/components/nucleus-modal/header.hbs
@@ -15,6 +15,7 @@
       customClass=(concat "nucleus-modal__close " position)
       icon="nucleus-cross"
       iconSize="mini"
+      iconOnly=true
       onClick=(action onClose)}}
   {{/if}}
 {{/if}}
diff --git a/...l__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png b/...l__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png
diff --git a/...t__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png b/...t__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png
diff --git a/...__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png b/...__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png
diff --git a/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs b/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs
@@ -25,6 +25,7 @@
             size="mini"
             customClass=(concat "flash-message-close")
             icon="nucleus-cross"
+            iconOnly=true
             onClick=(action close)}}
         </div>
       {{/flash-message}}

diff --git a/...st-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png b/...st-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png