fix: Maintain circled pfe-icon height in flex display (#578)

* Align items in the center and maintain their height
* Switch to flex-start from center
* Update changelog
* fixing boolean logic in storybook utils
* adding circled as a storybook option
* making the pfe-icon show up square (ex. 64x64)

Author: eyevana

.storybook/utils.js

@@ -32,6 +32,11 @@ const listProperties = (obj) =>
       let v = set[1];
       let print = set[2];
 
+      // exit if the value is a boolean and is false
+      if (typeof v === "boolean" && !v) {
+        return;
+      }
+
       // If no print value is provided, default to true
       if (typeof print === "undefined") {
         print = true;
@@ -44,11 +49,8 @@ const listProperties = (obj) =>
         (v !== null && v !== "null")
       ) {
         string += p;
-        // If the value is a boolean and is false, or the value is not a string true
-        if (
-          (typeof v === "string" && v !== "true") ||
-          (typeof v === "boolean" && !v)
-        ) {
+        // If the value is a string and the value is not equal to the string "true"
+        if (typeof v === "string" && v !== "true") {
           string += "=";
           if (typeof v === "string") {
             // If it's a string, use quotation marks around it

CHANGELOG-prerelease.md

@@ -11,11 +11,12 @@ Tag: [v1.0.0-prerelease.26](https://github.com/patternfly/patternfly-elements/re
 - [27a97e1](https://github.com/patternfly/patternfly-elements/commit/27a97e135986de37ede55504a1630bf974de0e0c) pfe-cta: fix functions & IE11 accessibility
 - [9a39ae3](https://github.com/patternfly/patternfly-elements/commit/9a39ae3b7d0b8d129a3aea3b58e71dab5013c721) fix: Adding object-fit to resolve image distortion in cards, #417
 - [980203b](https://github.com/patternfly/patternfly-elements/commit/980203b2768d1d9d8813f386bb0f0bf37d3732ab) feat: Upgrade to latest version of storybook (#366)
-- [ab5bc0e](https://github.com/patternfly/patternfly-elements/commit/ab5bc0e66b1e0f2f4ba180ff80d24b84d0db3260) feat: added sm md and xl sizes for pfe-progress-indicator (#575) 
+- [ab5bc0e](https://github.com/patternfly/patternfly-elements/commit/ab5bc0e66b1e0f2f4ba180ff80d24b84d0db3260) feat: added sm md and xl sizes for pfe-progress-indicator (#575)
 - [fc51ba](https://github.com/patternfly/patternfly-elements/commit/fc51baf1cb4313ca117cc505ba9c0e99dd44d0e9) feat: Add pfe-number schema (#576)
 - [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-card: storybook issue with incorrect attribute (#573)
 - []() Upgrade to latest version of storybook (#366)
 - [](https://github.com/patternfly/patternfly-elements/commit/) pfe-datetime: adding a json schema
+- [](https://github.com/patternfly/patternfly-elements/commit/) pfe-icon-panel: maintain icon height in flex display
 
 ## Prerelease 25 ( 2019-09-10 )
 

elements/pfe-icon-panel/src/pfe-icon-panel.scss

@@ -16,6 +16,7 @@ $pfe-icon-panel__icon-padding:        .05em;
 :host {
   display: flex;
   align-content: flex-start;
+  align-items: flex-start;
   flex-direction: column;
 
   @media (min-width: $pfe-global--grid-breakpoint--sm) {
@@ -29,7 +30,6 @@ $pfe-icon-panel__icon-padding:        .05em;
 
   margin-right: var(--pfe-icon--spacing);
   font-size: var(--pfe-icon--size);
-  line-height: var(--pfe-icon--size);
   padding: $pfe-icon-panel__icon-padding;
   min-width: var(--pfe-icon--size);
   max-width: var(--pfe-icon--size);

elements/pfe-icon/src/pfe-icon.json

@@ -49,6 +49,11 @@
           ],
           "default": "default",
           "prefixed": false
+        },
+        "circled": {
+          "title": "Circled",
+          "type": "boolean",
+          "prefixed": false
         }
       }
     }

elements/pfe-icon/src/pfe-icon.scss

@@ -30,6 +30,7 @@ $pfe-icon--border-style:  #{pfe-var(ui--border-style)};
 
   position: relative;
   display: inline-block;
+  line-height: 0;
 
   @at-root #{&}([data-block]) {
     display: block;
@@ -59,12 +60,12 @@ $pfe-icon--border-style:  #{pfe-var(ui--border-style)};
   }
 
   @supports (-ms-accelerator:true) {
-      /* IE Edge 12+ CSS */ 
+      /* IE Edge 12+ CSS */
       @include greyscale-fallback();
   }
 
   @supports (-ms-ime-align:auto) {
-      /* IE Edge 16+ CSS */ 
+      /* IE Edge 16+ CSS */
       @include greyscale-fallback();
   }
 
@@ -139,11 +140,11 @@ $pfe-icon--border-style:  #{pfe-var(ui--border-style)};
   --pfe-icon--BackgroundColor: transparent;
   --pfe-icon--BorderColor: transparent;
   --pfe-icon--Padding: 0;
-  
+
   ::slotted(*:first-child) {
     margin-top: 0;
   }
-  
+
   ::slotted(*:last-child) {
     margin-bottom: 0;
   }