fix(react-native/ButtonHero): prevent consumer props from overriding hero styling; merge twClassName with variant classes and exclude styling props from spread

cursoragent · cursoragent · commit 0db85cbb4c17 · 2026-02-27T21:01:12.000Z
diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx
@@ -13,24 +13,39 @@ import type { ButtonHeroProps } from './ButtonHero.types';
  * @param options0.isLoading - Whether the button is in a loading state
  * @returns ButtonBase component with locked light theme styles
  */
-const ButtonHeroInner: React.FC<ButtonHeroProps> = ({
-  isDisabled,
-  isLoading,
-  ...props
-}) => (
-  <ButtonBase
-    twClassName={(pressed) =>
-      `bg-primary-default ${
-        pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''
-      }`
-    }
-    textClassName={() => 'text-primary-inverse'}
-    iconClassName={() => 'text-primary-inverse'}
-    isDisabled={isDisabled}
-    isLoading={isLoading}
-    {...props}
-  />
-);
+const ButtonHeroInner: React.FC<ButtonHeroProps> = (props) => {
+  const {
+    isDisabled,
+    isLoading,
+    // Exclude styling props from spread to avoid consumer overrides
+    twClassName = '',
+    textClassName: _ignoredTextClassName,
+    iconClassName: _ignoredIconClassName,
+    ...restProps
+  } = props;
+
+  const getContainerClassName = (pressed: boolean): string => {
+    const userClassName =
+      typeof twClassName === 'function' ? twClassName(pressed) : twClassName;
+
+    const baseClassName = `bg-primary-default ${
+      pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''
+    }`;
+
+    return `${baseClassName} ${userClassName}`.trim();
+  };
+
+  return (
+    <ButtonBase
+      twClassName={getContainerClassName}
+      textClassName={() => 'text-primary-inverse'}
+      iconClassName={() => 'text-primary-inverse'}
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      {...restProps}
+    />
+  );
+};
 
 /**
  * ButtonHero component - Hero button with locked light theme
