Fix alignment of items inside button and action trigger button (#85)

* Fix alignment of items inside button and action trigger button

* fix icon flex

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v6.3.3
+### Fixed
+- Fix alignment of items inside action trigger button and buttons.
+
 ## v6.3.2
 ### Fixed
 - Fix styling on action trigger button right icon.

lib/common/_mixins.scss

@@ -69,6 +69,14 @@
     } @else if $option == 'flex-row' {
         display: flex;
         flex-direction: row;
+    } @else if $option == 'inline-flex' {
+        display: inline-flex;
+    } @else if $option == 'inline-flex-column' {
+        display: inline-flex;
+        flex-direction: column;
+    } @else if $option == 'inline-flex-row' {
+        display: inline-flex;
+        flex-direction: row;
     } @else if $option == 'display-none' {
         display: none;
     }

lib/components/ActionTrigger/ActionTrigger.module.scss

@@ -54,7 +54,6 @@ $line-height: 4.5*$grid-size;
         vertical-align: top;
         font-size: $font-size-default;
         margin-left: 2*$grid-size;
-        line-height: 100%;
 
         max-width: 50*$grid-size;
         overflow: hidden;

lib/components/Button/Button.module.scss

@@ -7,10 +7,12 @@ $line-height: 8*$grid-size;
 $outline-focus-border-width: 1px;
 
 :global(.btn-primary), .method-btn-primary, :global(.btn-danger), .method-btn-danger, :global(.btn), .method-btn {
-    @include md-box(inline-block, relative);
+    @include md-box(inline-flex-row, relative);
     font-family: $font-family-default;
     font-size: $font-size-default;
     line-height: $line-height;
+    justify-content: center;
+    align-items: center;
 
     height: 8*$grid-size;
     padding-left: 5*$grid-size;
@@ -133,9 +135,4 @@ $outline-focus-border-width: 1px;
             background-color: themed('color-bg-btn-danger-disabled');
         }
     }
- }
-
- .label {
-     line-height: 100%;
-     vertical-align: text-top;
  }

lib/components/Button/Button.tsx

@@ -75,9 +75,7 @@ export const Button: React.StatelessComponent<ButtonProps> = (props: ButtonProps
             attr={props.attr.container}
         >
             {icon}
-            <span className={css('label')}>
-                {props.children}
-            </span>
+            {props.children}
         </ButtonProxy>
     );
 };

lib/components/Icon/Icon.module.scss

@@ -8,7 +8,9 @@
     font-style: normal;
     font-weight: normal;
     font-family: $font-family-default;
-    display: flex;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &:before {
         @include md-box(inline-block, relative);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.3.2",
+    "version": "6.3.3",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",