Browse Source

fix(styles): False should not cause additional button padding (#69154)

It's possible that false is passed down as a child but that does not
render anything and should not be considered as a child.
Tony Xiao 11 months ago
parent
commit
865e2085d2
1 changed files with 16 additions and 2 deletions
  1. 16 2
      static/app/components/button.tsx

+ 16 - 2
static/app/components/button.tsx

@@ -282,8 +282,8 @@ function BaseButton({
   );
 
   const hasChildren = Array.isArray(children)
-    ? children.some(child => child?.type !== null)
-    : !!children;
+    ? children.some(child => !isEmptyChild(child))
+    : !isEmptyChild(children);
 
   // Buttons come in 4 flavors: <Link>, <ExternalLink>, <a>, and <button>.
   // Let's use props to determine which to serve up, so we don't have to think about it.
@@ -582,6 +582,20 @@ const getIconMargin = ({size, hasChildren}: ChildrenIconProps) => {
   }
 };
 
+function isEmptyChild(child: React.ReactNode) {
+  // truthy values are non empty
+  if (child) {
+    return false;
+  }
+
+  // out of the falsey values, 0 is the only one that takes space
+  if (child === 0) {
+    return false;
+  }
+
+  return true;
+}
+
 interface IconProps extends ChildrenIconProps, Omit<StyledButtonProps, 'theme'> {}
 const Icon = styled('span')<IconProps>`
   display: flex;