Jh/button specs (#1631)

* Adjust button spacing when icons are present
* Remove unused sizes
* Remove unused import
* Switch to rem from px

Author: jhardy

packages/components/CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Vertical cadence of `ActionList` reduced to a minimum of `36px`
 - `Popover`, `Menu`, and `Select` no longer cancel the first click outside by default (use `cancelClickOutside` to override this)
 - `DialogContent` no longer has `py` unless it overflows the available space (acting as `overflow: scroll`)
+- Padding in `Button`'s has been updated to have better visual balance when icons are used
 
 ### Fixed
 

packages/components/snapshots/Button/Icon After-snap.png

@@ -47,6 +47,7 @@ import {
   ButtonSizes,
   ButtonSizeProps,
   buttonIconSizeMap,
+  buttonPadding,
 } from './size'
 import { ButtonIcon, buttonIcon, ButtonIconProps } from './icon'
 
@@ -146,6 +147,7 @@ const ButtonJSX = forwardRef(
         onKeyUp={handleOnKeyUp}
         onBlur={handleOnBlur}
         ref={ref}
+        px={buttonPadding(!!(iconBefore || iconAfter), size)}
       >
         {iconBefore && <ButtonIcon name={iconBefore} size={iconSize} />}
         {children}

packages/components/snapshots/Button/Icon Before-snap.png

@@ -25,39 +25,14 @@
  */
 
 import styled from 'styled-components'
-import { variant } from 'styled-system'
 import { ButtonBase } from './ButtonBase'
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-const transparentButtonPadding = variant({
-  prop: 'size',
-  variants: {
-    xxsmall: {
-      px: 'xsmall',
-    },
-    xsmall: {
-      px: 'xsmall',
-    },
-    small: {
-      px: 'small',
-    },
-    medium: {
-      px: 'large',
-    },
-    large: {
-      px: 'large',
-    },
-  },
-})
-
 export const ButtonTransparent = styled(ButtonBase)`
   background: transparent;
   border: 1px solid transparent;
   color: ${({ theme, color = 'key' }) => theme.colors[color]};
-  ${(props) =>
-    props.iconBefore || props.iconAfter
-      ? transparentButtonPadding
-      : `padding: 0 ${props.theme.space.xsmall};`}
+  padding: 0 ${(props) => props.theme.space.xsmall};
 
   &:hover,
   &:focus,

packages/components/snapshots/Button/Large-snap.png

@@ -27,8 +27,8 @@ exports[`Button Focus: renders outline when tabbing into focus, but not when cli
   white-space: nowrap;
   font-size: 0.875rem;
   height: 36px;
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .c0[disabled] {
@@ -74,7 +74,7 @@ exports[`Button Focus: renders outline when tabbing into focus, but not when cli
 
 exports[`Button Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 cFuMRs ButtonBase-sc-1bpio6j-1 Button-sc-18euc9m-0 dXZmpP"
+  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 iARsUm ButtonBase-sc-1bpio6j-1 Button-sc-18euc9m-0 dXZmpP"
 >
   focus
 </button>

packages/components/snapshots/MessageBar/Custom Actions Deux-snap.png

@@ -27,8 +27,8 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
   white-space: nowrap;
   font-size: 0.875rem;
   height: 36px;
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .c0[disabled] {
@@ -76,7 +76,7 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 
 exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 cFuMRs ButtonBase-sc-1bpio6j-1 ButtonOutline-ncggc7-0 iADMFt"
+  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 iARsUm ButtonBase-sc-1bpio6j-1 ButtonOutline-ncggc7-0 iADMFt"
 >
   focus
 </button>