fix(Label, Pagination, SearchInput, Tabs): fixed placement of icons in buttons

Author: mtorromeo

packages/core/src/components/Label/LabelGroup.vue

@@ -39,7 +39,9 @@
 
       <div v-if="closable" :class="styles.labelGroupClose">
         <pf-button variant="plain" no-padding :aria-label="closeBtnAriaLabel" @click="emit('click', $event)">
-          <circle-xmark-icon aria-hidden />
+          <template #icon>
+            <circle-xmark-icon aria-hidden />
+          </template>
         </pf-button>
       </div>
     </div>

packages/core/src/components/Pagination/PaginationNavigation.vue

@@ -8,7 +8,9 @@
         data-action="first"
         @click="goToFirstPage"
       >
-        <angles-left-icon />
+        <template #icon>
+          <angles-left-icon />
+        </template>
       </pf-button>
     </div>
 
@@ -20,7 +22,9 @@
         data-action="previous"
         @click="goToPreviousPage"
       >
-        <angle-left-icon />
+        <template #icon>
+          <angle-left-icon />
+        </template>
       </pf-button>
     </div>
 
@@ -49,7 +53,9 @@
         data-action="next"
         @click="goToNextPage"
       >
-        <angle-right-icon />
+        <template #icon>
+          <angle-right-icon />
+        </template>
       </pf-button>
     </div>
 
@@ -61,7 +67,9 @@
         data-action="last"
         @click="goToLastPage"
       >
-        <angles-right-icon />
+        <template #icon>
+          <angles-right-icon />
+        </template>
       </pf-button>
     </div>
   </nav>

packages/core/src/components/SearchInput/SearchInput.vue

@@ -26,7 +26,9 @@
                 :aria-label="previousNavigationButtonAriaLabel"
                 @click="onPreviousClick"
               >
-                <angle-up-icon />
+                <template #icon>
+                  <angle-up-icon />
+                </template>
               </pf-button>
 
               <pf-button
@@ -35,7 +37,9 @@
                 :aria-label="nextNavigationButtonAriaLabel"
                 @click="onNextClick"
               >
-                <angle-down-icon />
+                <template #icon>
+                  <angle-down-icon />
+                </template>
               </pf-button>
             </div>
 
@@ -46,7 +50,9 @@
               :aria-label="resetButtonLabel"
               @click="onClearInput"
             >
-              <xmark-icon />
+              <template #icon>
+                <xmark-icon />
+              </template>
             </pf-button>
           </pf-text-input-group-utilities>
         </pf-text-input-group>
@@ -60,7 +66,9 @@
           :aria-expanded="advancedSearchOpen"
           @click="onToggle"
         >
-          <caret-down-icon />
+          <template #icon>
+            <caret-down-icon />
+          </template>
         </pf-button>
 
         <pf-button
@@ -71,7 +79,9 @@
           :aria-label="submitSearchButtonLabel"
           @click="onSearchHandler"
         >
-          <arrow-right-icon />
+          <template #icon>
+            <arrow-right-icon />
+          </template>
         </pf-button>
       </template>
 
@@ -83,8 +93,10 @@
         :aria-expanded="expanded"
         @click="onExpand"
       >
-        <xmark-icon v-if="expanded" />
-        <magnifying-glass-icon v-else />
+        <template #icon>
+          <xmark-icon v-if="expanded" />
+          <magnifying-glass-icon v-else />
+        </template>
       </pf-button>
     </component>
 

packages/core/src/components/Tabs/Tabs.vue

@@ -30,7 +30,9 @@
         :aria-hidden="disableLeftScrollButton"
         @click="scrollLeft"
       >
-        <angle-left-icon />
+        <template #icon>
+          <angle-left-icon />
+        </template>
       </pf-button>
     </div>
 
@@ -83,7 +85,9 @@
         :aria-hidden="disableRightScrollButton"
         @click="scrollRight"
       >
-        <angle-right-icon />
+        <template #icon>
+          <angle-right-icon />
+        </template>
       </pf-button>
     </div>
   </component>