fix(popover): removed references to pf-m-icon class (#5412)

patternfly · Mar 6, 2023 · 18f334e · 18f334e
1 parent 3831426
commit 18f334e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 34 deletions.
diff --git a/src/patternfly/components/LogViewer/examples/LogViewer.md b/src/patternfly/components/LogViewer/examples/LogViewer.md
@@ -87,7 +87,7 @@ import './LogViewer.css';
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-bottom-header"'}}
+      {{#> popover-title popover-title--id="popover-bottom-header"}}
         {{#> popover-title-text}}
           Clear this log?
         {{/popover-title-text}}

diff --git a/src/patternfly/components/Popover/examples/Popover.md b/src/patternfly/components/Popover/examples/Popover.md
@@ -17,7 +17,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-top-header"'}}
+      {{#> popover-title popover-title--id="popover-top-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -43,7 +43,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-right-header"'}}
+      {{#> popover-title popover-title--id="popover-right-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -69,7 +69,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-bottom-header"'}}
+      {{#> popover-title popover-title--id="popover-bottom-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -95,7 +95,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-left-header"'}}
+      {{#> popover-title popover-title--id="popover-left-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -121,7 +121,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-left-start-header"'}}
+      {{#> popover-title popover-title--id="popover-left-start-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -147,7 +147,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-left-end-header"'}}
+      {{#> popover-title popover-title--id="popover-left-end-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -173,7 +173,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-bottom-start-header"'}}
+      {{#> popover-title popover-title--id="popover-bottom-start-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -199,7 +199,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-bottom-end-header"'}}
+      {{#> popover-title popover-title--id="popover-bottom-end-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -252,7 +252,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--attribute='id="popover-width-auto-header"'}}
+      {{#> popover-title popover-title--id="popover-width-auto-header"}}
         {{#> popover-title-text}}
           Popover header
         {{/popover-title-text}}
@@ -278,7 +278,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-icon-title-header"' popover-title-icon--type="bullhorn"}}
+      {{#> popover-title popover-title--id='popover-icon-title-header' popover-title-icon--type="bullhorn"}}
         {{#> popover-title-text}}
           Popover with icon title
         {{/popover-title-text}}
@@ -303,7 +303,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-default-alert-header"'}}
+      {{#> popover-title popover-title--id="popover-default-alert-header"}}
         {{#> popover-title-text}}
           Default popover title
         {{/popover-title-text}}
@@ -329,7 +329,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-info-alert-header"'}}
+      {{#> popover-title popover-title--id="popover-info-alert-header"}}
         {{#> popover-title-text}}
           Info popover title
         {{/popover-title-text}}
@@ -355,7 +355,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-success-alert-header"'}}
+      {{#> popover-title popover-title--id="popover-success-alert-header"}}
         {{#> popover-title-text}}
           Success popover title
         {{/popover-title-text}}
@@ -381,7 +381,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-warning-alert-header"'}}
+      {{#> popover-title popover-title--id="popover-warning-alert-header"}}
         {{#> popover-title-text}}
           Warning popover title
         {{/popover-title-text}}
@@ -407,7 +407,7 @@ import './Popover.css'
       {{/button}}
     {{/popover-close}}
     {{#> popover-header}}
-      {{#> popover-title popover-title--IsIcon="true" popover-title--attribute='id="popover-danger-alert-header"'}}
+      {{#> popover-title popover-title--id="popover-danger-alert-header"}}
         {{#> popover-title-text}}
           Danger popover title
         {{/popover-title-text}}
@@ -458,7 +458,6 @@ A popover is used to provide contextual information for another component on cli
 | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
 | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
 | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
-| `.pf-m-icon` | `.pf-c-popover__title` | Modifies the title layout to accommodate an icon. |
 | `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
 | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |

diff --git a/src/patternfly/components/Popover/popover-title-icon.hbs b/src/patternfly/components/Popover/popover-title-icon.hbs
@@ -2,17 +2,5 @@
   {{#if popover-title-icon--attribute}}
     {{{popover-title-icon--attribute}}}
   {{/if}}>
-  {{#if popover--IsDefaultAlert}}
-    <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
-  {{else if popover--IsInfoAlert}}
-    <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
-  {{else if popover--IsSuccessAlert}}
-    <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
-  {{else if popover--IsWarningAlert}}
-    <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
-  {{else if popover--IsDangerAlert}}
-    <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
-  {{else}}
     <i class="fas fa-fw fa-{{popover-title-icon--type}}" aria-hidden="true"></i>
-  {{/if}}
 </span>
diff --git a/src/patternfly/components/Popover/popover-title.hbs b/src/patternfly/components/Popover/popover-title.hbs
@@ -1,9 +1,22 @@
-<div class="pf-c-popover__title{{#if popover-title--IsIcon}} pf-m-icon{{/if}}{{#if popover-title--modifier}} {{popover-title--modifier}}{{/if}}"
+<div class="pf-c-popover__title{{#if popover-title--modifier}} {{popover-title--modifier}}{{/if}}"
+  {{#if popover-title--id}}
+    id="{{popover-title--id}}"
+  {{/if}}
   {{#if popover-title--attribute}}
     {{{popover-title--attribute}}}
   {{/if}}>
-  {{#if popover-title--IsIcon}}
-    {{> popover-title-icon}}
-  {{/if}}
+  {{#> wrapper popover-title-icon--type=(ternary popover-title-icon--type popover-title-icon--type
+        (ternary popover--IsDefaultAlert "bell"
+        (ternary popover--IsInfoAlert "info-circle"
+        (ternary popover--IsSuccessAlert "check-circle"
+        (ternary popover--IsWarningAlert "exclamation-triangle"
+        (ternary popover--IsDangerAlert "exclamation-circle"
+        false
+      ))))))
+  }}
+    {{#if popover-title-icon--type}}
+      {{> popover-title-icon}}
+    {{/if}}
+  {{/wrapper}}
   {{> @partial-block}}
 </div>
diff --git a/src/patternfly/components/Popover/popover.scss b/src/patternfly/components/Popover/popover.scss
@@ -60,6 +60,7 @@
   // Title icon
   --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+  --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
 
   // Footer
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -219,6 +220,7 @@
 
 .pf-c-popover__title-icon {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 

diff --git a/src/patternfly/demos/Card/templates/card-demo--popover.hbs b/src/patternfly/demos/Card/templates/card-demo--popover.hbs
@@ -7,7 +7,7 @@
         {{/button}}
       {{/popover-close}}
       {{#> popover-header}}
-        {{#> popover-title popover-title--attribute=(concat 'id="' popover--id '-popover-right-header"')}}
+        {{#> popover-title popover-title--id=(concat popover--id "-popover-right-header")}}
           {{#> popover-title-text}}
             Control Panel Status
           {{/popover-title-text}}