fix(tabs): vertical alignment of slotted icons (#2509)

* fix(tabs): fix slotted icon styles

* docs(tabs): update demos with appropriate sized icons

* chore(tabs): add changeset

---------

Co-authored-by: Benny Powers <[email protected]>

Author: zeroedin

.changeset/nervous-kiwis-carry.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-tabs>`: fix vertical alignment of slotted icons

elements/pf-tabs/demo/pf-tabs.html

@@ -117,12 +117,12 @@ <h2>Inset</h2>
 <div class="example">
   <h2>Icons and text</h2>
   <pf-tabs>
-    <pf-tab slot="tab"> Users          <pf-icon slot="icon" icon="users"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> Containers     <pf-icon slot="icon" icon="box-open"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> Database       <pf-icon slot="icon" icon="database"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> Server         <pf-icon slot="icon" icon="server"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> System         <pf-icon slot="icon" icon="laptop"></pf-icon></pf-tab>
-    <pf-tab slot="tab" active> Network <pf-icon slot="icon" icon="network-wired"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Users          <pf-icon slot="icon" icon="users" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Containers     <pf-icon slot="icon" icon="box-open" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Database       <pf-icon slot="icon" icon="database" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Server         <pf-icon slot="icon" icon="server" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> System         <pf-icon slot="icon" icon="laptop" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab" active> Network <pf-icon slot="icon" icon="network-wired" size="md"></pf-icon></pf-tab>
     <pf-tab-panel>Users</pf-tab-panel>
     <pf-tab-panel>Containers</pf-tab-panel>
     <pf-tab-panel>Database</pf-tab-panel>
@@ -147,9 +147,9 @@ <h2>Filled</h2>
 <div class="example">
   <h2>Filled with icons</h2>
   <pf-tabs fill>
-    <pf-tab slot="tab"> Users      <pf-icon slot="icon" icon="users"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> Containers <pf-icon slot="icon" icon="box-open"></pf-icon></pf-tab>
-    <pf-tab slot="tab"> Database   <pf-icon slot="icon" icon="database"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Users      <pf-icon slot="icon" icon="users" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Containers <pf-icon slot="icon" icon="box-open" size="md"></pf-icon></pf-tab>
+    <pf-tab slot="tab"> Database   <pf-icon slot="icon" icon="database" size="md"></pf-icon></pf-tab>
     <pf-tab-panel>Users</pf-tab-panel>
     <pf-tab-panel>Containers</pf-tab-panel>
     <pf-tab-panel>Database</pf-tab-panel>

elements/pf-tabs/docs/pf-tabs.md

@@ -134,7 +134,7 @@
     <pf-tab slot="tab">
       <svg slot="icon" slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 640 512" aria-hidden="true" role="img"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
       <!-- or -->
-      <pf-icon set="fas" icon="users" size="sm" loading="idle"></pf-icon>
+      <pf-icon slot="icon" set="fas" icon="users" size="sm" loading="idle"></pf-icon>
       Users
     </pf-tab>
     ...
@@ -144,7 +144,7 @@
   {% htmlexample class="overflow-tab-wrapper" %}
   <pf-tabs>
     <pf-tab slot="tab">
-      <pf-icon set="fas" icon="users" size="sm" loading="idle"></pf-icon>
+      <pf-icon slot="icon" set="fas" icon="users" size="md" loading="idle"></pf-icon>
       Users
     </pf-tab>
     <pf-tab-panel>Users</pf-tab-panel>

elements/pf-tabs/pf-tab.css

@@ -18,6 +18,8 @@
 }
 
 button {
+  align-items: center;
+  gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
   line-height: var(--pf-global--LineHeight--md, 1.5);
   color: var(--pf-global--Color--100, #151515);
   padding:
@@ -122,11 +124,7 @@ button:active {
 }
 
 [part="icon"] {
-  margin-inline-end: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
-}
-
-[part="icon"]:last-child {
-  --pf-c-tabs__link--child--MarginRight: 0;
+  display: flex !important;
 }
 
 :host([disabled][border-bottom="false"]) button,