From c5db22184f3eda7fff880ecec14e3e5d3e96df1c Mon Sep 17 00:00:00 2001 From: Ivana Rodriguez Date: Thu, 17 Oct 2019 15:21:02 -0500 Subject: [PATCH 1/6] Align items in the center and maintain their height --- elements/pfe-icon-panel/src/pfe-icon-panel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/pfe-icon-panel/src/pfe-icon-panel.scss b/elements/pfe-icon-panel/src/pfe-icon-panel.scss index 81f0a938c3..5437f67414 100644 --- a/elements/pfe-icon-panel/src/pfe-icon-panel.scss +++ b/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: center; flex-direction: column; @media (min-width: $pfe-global--grid-breakpoint--sm) { From 7045214f8f6b1f6a58c48fd16f3c4c99d5eeb05a Mon Sep 17 00:00:00 2001 From: Ivana Rodriguez Date: Thu, 17 Oct 2019 15:34:20 -0500 Subject: [PATCH 2/6] Switch to flex-start from center --- elements/pfe-icon-panel/src/pfe-icon-panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-icon-panel/src/pfe-icon-panel.scss b/elements/pfe-icon-panel/src/pfe-icon-panel.scss index 5437f67414..7e62ec04f1 100644 --- a/elements/pfe-icon-panel/src/pfe-icon-panel.scss +++ b/elements/pfe-icon-panel/src/pfe-icon-panel.scss @@ -16,7 +16,7 @@ $pfe-icon-panel__icon-padding: .05em; :host { display: flex; align-content: flex-start; - align-items: center; + align-items: flex-start; flex-direction: column; @media (min-width: $pfe-global--grid-breakpoint--sm) { From 85a7882ad302e1bb7c316e456c4fea610e6569af Mon Sep 17 00:00:00 2001 From: Ivana Rodriguez Date: Thu, 17 Oct 2019 15:55:48 -0500 Subject: [PATCH 3/6] Update changelog --- CHANGELOG-prerelease.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG-prerelease.md b/CHANGELOG-prerelease.md index 88e2fe04d0..a5db64fd7f 100644 --- a/CHANGELOG-prerelease.md +++ b/CHANGELOG-prerelease.md @@ -8,7 +8,8 @@ Tag: [v1.0.0-prerelease.26](https://github.com/patternfly/patternfly-elements/re - [274e35c](https://github.com/patternfly/patternfly-elements/commit/274e35cd4e8a08721888d8fad195b6fe37a525b7) Navigation component - [6b5db77](https://github.com/patternfly/patternfly-elements/commit/6b5db77c20358499f78b66811b73ea6be309318b) Update documentation - [d4600dd](https://github.com/patternfly/patternfly-elements/commit/d4600dd1c6e2abfcf8918d06b4eaacb8fb62d208) Add automatic Sass globbing to pfe-sass -- [](https://github.com/patternfly/patternfly-elements/commit/) pfe-cta: fix functions & IE11 accessibility +- [27a97e1](https://github.com/patternfly/patternfly-elements/commit/27a97e135986de37ede55504a1630bf974de0e0c) pfe-cta: fix functions & IE11 accessibility +- [](https://github.com/patternfly/patternfly-elements/commit/) pfe-icon-panel: maintain icon height in flex display ## Prerelease 25 ( 2019-09-10 ) From 4f5cf226551dad82ed3540c75955f421d9a29996 Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Tue, 22 Oct 2019 13:26:57 -0400 Subject: [PATCH 4/6] fixing boolean logic in storybook utils --- .storybook/utils.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/.storybook/utils.js b/.storybook/utils.js index 2bde7e6be5..f99fddcb30 100644 --- a/.storybook/utils.js +++ b/.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 From e6fcd28a32829f8dd16f8ad098b6a539aa96780d Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Tue, 22 Oct 2019 13:27:18 -0400 Subject: [PATCH 5/6] adding circled as a storybook option --- elements/pfe-icon/src/pfe-icon.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/elements/pfe-icon/src/pfe-icon.json b/elements/pfe-icon/src/pfe-icon.json index f42ce1c4ea..3cf6fb2fd0 100644 --- a/elements/pfe-icon/src/pfe-icon.json +++ b/elements/pfe-icon/src/pfe-icon.json @@ -49,6 +49,11 @@ ], "default": "default", "prefixed": false + }, + "circled": { + "title": "Circled", + "type": "boolean", + "prefixed": false } } } From 85f2096ed5ba0ee4fbb55f1546383cb2288bf20a Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Tue, 22 Oct 2019 13:27:54 -0400 Subject: [PATCH 6/6] making the pfe-icon show up square (ex. 64x64) --- elements/pfe-icon-panel/src/pfe-icon-panel.scss | 1 - elements/pfe-icon/src/pfe-icon.scss | 9 +++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/elements/pfe-icon-panel/src/pfe-icon-panel.scss b/elements/pfe-icon-panel/src/pfe-icon-panel.scss index 7e62ec04f1..e87ba54ffb 100644 --- a/elements/pfe-icon-panel/src/pfe-icon-panel.scss +++ b/elements/pfe-icon-panel/src/pfe-icon-panel.scss @@ -30,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); diff --git a/elements/pfe-icon/src/pfe-icon.scss b/elements/pfe-icon/src/pfe-icon.scss index 1a9868ed5c..a2088e2ab4 100644 --- a/elements/pfe-icon/src/pfe-icon.scss +++ b/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; }