fix(Button): rendered position modifier only when children are passed

patternfly · Aug 16, 2024 · e3e2755 · e3e2755
1 parent aee9a75
commit e3e2755
Showing 1 changed file with 18 additions and 6 deletions.
diff --git 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)}>