fix(docs): fixed placement of icons in buttons

Author: mtorromeo

apps/docs/src/components/StoryCanvas.vue

@@ -17,7 +17,9 @@
     <div style="position: relative">
       <div v-if="src" class="source-link">
         <pf-button :href="`https://github.com/mtorromeo/vue-patternfly/blob/main/apps/docs/src/${storySrc}`" variant="link" title="Full source code" target="_blank">
-          <github-icon />
+          <template #icon>
+            <github-icon />
+          </template>
         </pf-button>
       </div>
       <div class="language-vue" v-html="highlighted" />

apps/docs/src/stories/Components/ActionList.story.vue

@@ -52,10 +52,18 @@
     <story-canvas title="Action list with icons">
       <pf-action-list icon-list>
         <pf-action-list-item>
-          <pf-button variant="plain"><x-icon /></pf-button>
+          <pf-button variant="plain">
+            <template #icon>
+              <x-icon />
+            </template>
+          </pf-button>
         </pf-action-list-item>
         <pf-action-list-item>
-          <pf-button variant="plain"><check-icon /></pf-button>
+          <pf-button variant="plain">
+            <template #icon>
+              <check-icon />
+            </template>
+          </pf-button>
         </pf-action-list-item>
       </pf-action-list>
     </story-canvas>

apps/docs/src/stories/Components/Form.story.vue

@@ -86,7 +86,9 @@
             <template #header>
               <pf-form-field-group-header title="Nested field group 1" description="Nested field group 1 description.">
                 <pf-button variant="plain" aria-label="Remove">
-                  <trash-icon />
+                  <template #icon>
+                    <trash-icon />
+                  </template>
                 </pf-button>
               </pf-form-field-group-header>
             </template>
@@ -101,7 +103,9 @@
             <template #header>
               <pf-form-field-group-header title="Nested field group 2" description="Nested field group 2 description.">
                 <pf-button variant="plain" aria-label="Remove">
-                  <trash-icon />
+                  <template #icon>
+                    <trash-icon />
+                  </template>
                 </pf-button>
               </pf-form-field-group-header>
             </template>

apps/docs/src/stories/Components/Masthead.story.vue

@@ -20,7 +20,9 @@
         <pf-masthead-main>
           <pf-masthead-toggle>
             <pf-button variant="plain" aria-label="Global navigation">
-              <bars-icon />
+              <template #icon>
+                <bars-icon />
+              </template>
             </pf-button>
           </pf-masthead-toggle>
           <pf-masthead-brand>
@@ -38,7 +40,9 @@
         <pf-masthead-main>
           <pf-masthead-toggle>
             <pf-button variant="plain" aria-label="Global navigation">
-              <bars-icon />
+              <template #icon>
+                <bars-icon />
+              </template>
             </pf-button>
           </pf-masthead-toggle>
           <pf-masthead-brand>
@@ -62,7 +66,9 @@
         <pf-masthead-main>
           <pf-masthead-toggle>
             <pf-button variant="plain" aria-label="Global navigation">
-              <bars-icon />
+              <template #icon>
+                <bars-icon />
+              </template>
             </pf-button>
           </pf-masthead-toggle>
           <pf-masthead-brand>
@@ -80,7 +86,9 @@
         <pf-masthead-main>
           <pf-masthead-toggle>
             <pf-button variant="plain" aria-label="Global navigation">
-              <bars-icon />
+              <template #icon>
+                <bars-icon />
+              </template>
             </pf-button>
           </pf-masthead-toggle>
           <pf-masthead-brand>

apps/docs/src/stories/Components/OverflowMenu.story.vue

@@ -55,13 +55,25 @@
           </pf-overflow-menu-group>
           <pf-overflow-menu-group type="icon" persistent>
             <pf-overflow-menu-item persistent>
-              <pf-button variant="plain"><align-left-icon /></pf-button>
+              <pf-button variant="plain">
+                <template #icon>
+                  <align-left-icon />
+                </template>
+              </pf-button>
             </pf-overflow-menu-item>
             <pf-overflow-menu-item persistent>
-              <pf-button variant="plain"><align-center-icon /></pf-button>
+              <pf-button variant="plain">
+                <template #icon>
+                  <align-center-icon />
+                </template>
+              </pf-button>
             </pf-overflow-menu-item>
             <pf-overflow-menu-item persistent>
-              <pf-button variant="plain"><align-right-icon /></pf-button>
+              <pf-button variant="plain">
+                <template #icon>
+                  <align-right-icon />
+                </template>
+              </pf-button>
             </pf-overflow-menu-item>
           </pf-overflow-menu-group>
         </pf-overflow-menu-content>

apps/docs/src/stories/Components/Select-Typeahead.vue

@@ -17,7 +17,9 @@
         />
         <pf-text-input-group-utilities>
           <pf-button v-if="input" variant="plain" @click="handleClick">
-            <xmark-icon aria-hidden />
+            <template #icon>
+              <xmark-icon aria-hidden />
+            </template>
           </pf-button>
         </pf-text-input-group-utilities>
       </pf-text-input-group>

apps/docs/src/stories/Components/TextInputGroup.story.vue

@@ -33,7 +33,9 @@
         </pf-text-input-group-main>
         <pf-text-input-group-utilities v-if="!!inputValue">
           <pf-button variant="plain" aria-label="Clear button and input" @click="inputValue = ''">
-            <xmark-icon />
+            <template #icon>
+              <xmark-icon />
+            </template>
           </pf-button>
         </pf-text-input-group-utilities>
       </pf-text-input-group>
@@ -51,7 +53,9 @@
         </pf-text-input-group-main>
         <pf-text-input-group-utilities v-if="!!inputValue2">
           <pf-button variant="plain" aria-label="Clear button and input" @click="inputValue2 = ''">
-            <xmark-icon />
+            <template #icon>
+              <xmark-icon />
+            </template>
           </pf-button>
         </pf-text-input-group-utilities>
       </pf-text-input-group>

apps/docs/src/stories/Components/Toolbar.story.vue

@@ -23,7 +23,9 @@
             <pf-input-group>
               <pf-text-input type="search" aria-label="search input example" />
               <pf-button variant="control" aria-label="search button for search input">
-                <magnifying-glass-icon />
+                <template #icon>
+                  <magnifying-glass-icon />
+                </template>
               </pf-button>
             </pf-input-group>
           </pf-toolbar-item>
@@ -45,7 +47,9 @@
             <pf-input-group>
               <pf-text-input type="search" aria-label="search input example" />
               <pf-button variant="control" aria-label="search button for search input">
-                <magnifying-glass-icon />
+                <template #icon>
+                  <magnifying-glass-icon />
+                </template>
               </pf-button>
             </pf-input-group>
           </pf-toolbar-item>
@@ -131,17 +135,23 @@
           <pf-toolbar-group>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="edit">
-                <pen-to-square-icon />
+                <template #icon>
+                  <pen-to-square-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="clone">
-                <CloneIcon />
+                <template #icon>
+                  <clone-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="sync">
-                <rotate-icon />
+                <template #icon>
+                  <rotate-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
           </pf-toolbar-group>
@@ -165,14 +175,16 @@
         <pf-toolbar-content>
           <pf-toolbar-toggle-group xl>
             <template #icon>
-              <FilterIcon />
+              <filter-icon />
             </template>
 
             <pf-toolbar-item>
               <pf-input-group>
                 <pf-text-input type="search" aria-label="search input example" />
                 <pf-button variant="control" aria-label="search button for search input">
-                  <magnifying-glass-icon />
+                  <template #icon>
+                    <magnifying-glass-icon />
+                  </template>
                 </pf-button>
               </pf-input-group>
             </pf-toolbar-item>
@@ -213,7 +225,9 @@
               <pf-input-group>
                 <pf-text-input type="search" aria-label="search input example" />
                 <pf-button variant="control" aria-label="search button for search input">
-                  <magnifying-glass-icon />
+                  <template #icon>
+                    <magnifying-glass-icon />
+                  </template>
                 </pf-button>
               </pf-input-group>
             </pf-toolbar-item>
@@ -254,7 +268,9 @@
               <pf-input-group>
                 <pf-text-input type="search" aria-label="search input example" />
                 <pf-button variant="control" aria-label="search button for search input">
-                  <magnifying-glass-icon />
+                  <template #icon>
+                    <magnifying-glass-icon />
+                  </template>
                 </pf-button>
               </pf-input-group>
             </pf-toolbar-item>
@@ -287,17 +303,23 @@
           <pf-toolbar-group>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="edit">
-                <pen-to-square-icon />
+                <template #icon>
+                  <pen-to-square-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="clone">
-                <CloneIcon />
+                <template #icon>
+                  <clone-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
             <pf-toolbar-item>
               <pf-button variant="plain" aria-label="sync">
-                <rotate-icon />
+                <template #icon>
+                  <rotate-icon />
+                </template>
               </pf-button>
             </pf-toolbar-item>
           </pf-toolbar-group>
@@ -328,7 +350,7 @@
         <pf-toolbar-content>
           <pf-toolbar-toggle-group lg>
             <template #icon>
-              <FilterIcon />
+              <filter-icon />
             </template>
             <pf-toolbar-item id="stacked-example-resource-select" variant="label">Resource</pf-toolbar-item>
             <pf-toolbar-item>