From e3e275544c2c1543598123f4950b943fdccfed0b Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 16 Aug 2024 11:35:06 -0400
Subject: [PATCH] fix(Button): rendered position modifier only when children
 are passed

---
 .../src/components/Button/Button.tsx          | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 608af5bb005..a440deb871e 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -136,6 +136,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
+  const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -157,6 +158,13 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
+  const _icon = icon && (
+    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+      {icon}
+    </span>
+  );
+  const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+
   return (
     <Component
       {...props}
@@ -198,12 +206,16 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
           />
         </span>
       )}
-      {icon && (iconPosition === 'start' || iconPosition === 'left') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
-      )}
-      {children && <span className={css('pf-v6-c-button__text')}>{children}</span>}
-      {icon && (iconPosition === 'end' || iconPosition === 'right') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
+      {isIconAlignedAtEnd ? (
+        <>
+          {_children}
+          {_icon}
+        </>
+      ) : (
+        <>
+          {_icon}
+          {_children}
+        </>
       )}
       {countOptions && (
         <span className={css(styles.buttonCount, countOptions.className)}>