Button size was incorrect. (#1864)

* Make small fixes to the button

* Create violet-actors-battle.md

Author: pksjce

.changeset/violet-actors-battle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Small fixes to icon button sizes. Truthy checks for children props

src/Button2/ButtonBase.tsx

@@ -26,7 +26,7 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
             <LeadingIcon />
           </Box>
         )}
-        <span data-component="text">{children}</span>
+        {children && <span data-component="text">{children}</span>}
         {TrailingIcon && (
           <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}}>
             <TrailingIcon />

src/Button2/IconButton.tsx

@@ -18,9 +18,11 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwar
   ])
   return (
     <StyledButton aria-labelledby={iconLabelId} sx={sxStyles} {...rest} ref={forwardedRef}>
-      <span id={iconLabelId} hidden={true}>
-        {iconLabel}
-      </span>
+      {iconLabel && (
+        <span id={iconLabelId} hidden={true}>
+          {iconLabel}
+        </span>
+      )}
       <Box as="span" sx={{display: 'inline-block'}}>
         <Icon />
       </Box>

src/Button2/styles.ts

@@ -152,6 +152,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
   return style[variant]
 }
 
+/* The button heights have to amount to 
+  small - 28
+  medium - 32
+  large - 34
+  In icon these have to be square.
+*/
 export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => {
   let paddingY, paddingX, fontSize
   switch (size) {
@@ -172,10 +178,10 @@ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default',
       fontSize = 1
   }
   if (iconOnly) {
-    paddingX = paddingY + 2
+    paddingX = paddingY + 3 // to make it a square
   }
   if (variant === 'invisible') {
-    paddingY = paddingY + 1
+    paddingY = paddingY + 1 // to make up for absence of border
   }
   return {
     paddingY: `${paddingY}px`,

src/__tests__/Button2.test.tsx

@@ -93,6 +93,6 @@ describe('Button', () => {
   it('styles icon only button to make it a square', async () => {
     const container = render(<IconButton icon={SearchIcon} iconLabel="Search icon only button" />)
     const IconOnlyButton = await container.findByRole('button')
-    expect(IconOnlyButton).toHaveStyleRule('padding-right', '7px')
+    expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
   })
 })

src/__tests__/__snapshots__/Button2.test.tsx.snap

@@ -82,11 +82,7 @@ exports[`Button renders consistently 1`] = `
 
 <button
   className="c0"
->
-  <span
-    data-component="text"
-  />
-</button>
+/>
 `;
 
 exports[`Button styles danger button appropriately 1`] = `