Backport dynamic text sizing for non-size usage in Button, TextInput, and Select

src/buttons/src/Button.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import Box, { spacing, dimensions, position, layout } from 'ui-box'
 import { useStyleConfig } from '../../hooks'
 import { IconWrapper } from '../../icons/src/IconWrapper'
+import { getTextPropsForControlHeight } from '../../lib/deprecated-theme-helpers'
 import { Spinner } from '../../spinner'
 
 /* eslint-disable react/prop-types */
@@ -81,18 +82,22 @@ const Button = memo(
  is = 'button',
  isActive = false,
  isLoading,
- size = 'medium',
  ...restProps
  } = props
 
  const { className: themedClassName, ...boxProps } = useStyleConfig(
  'Button',
- { appearance, color, intent, size },
+ { appearance, color, intent, size: restProps.size || 'medium' },
  pseudoSelectors,
  internalStyles
  )
 
  const height = restProps.height || boxProps.height
+ // Keep backwards compat font sizing if an explicit height was passed in.
+ const textProps =
+ !restProps.size && restProps.height
+ ? getTextPropsForControlHeight(restProps.height)
+ : {}
  const iconSize = getIconSizeForButton(height)
 
  return (
@@ -104,6 +109,7 @@ const Button = memo(
  data-active={isActive || undefined}
  {...boxProps}
  {...restProps}
+ {...textProps}
  disabled={disabled || isLoading}
  >
  {isLoading && (

src/buttons/stories/index.stories.js

@@ -203,6 +203,15 @@ buttonsStory.add('Common', () => (
  </Box>
 ))
 
+buttonsStory.add('Button height vs. size', () => (
+ <Box padding={40}>
+ <Button marginRight={16} height={40}>
+ With Height
+ </Button>
+ <Button size="large">With size</Button>
+ </Box>
+))
+
 buttonsStory.add('Button types', () => (
  <Box padding={40}>
  <Heading>Default Appearance</Heading>

src/lib/deprecated-theme-helpers.js

@@ -0,0 +1,34 @@
+/**
+ * Helper function to be used across multiple components to preserve
+ * backwards-compat height behavior with the previous Evergreen.
+ * @param {number} height
+ */
+
+const text = {
+ 500: {
+ fontSize: '16px',
+ fontWeight: 400,
+ lineHeight: '20px',
+ letterSpacing: '-0.05px'
+ },
+ 400: {
+ fontSize: '14px',
+ fontWeight: 400,
+ lineHeight: '20px',
+ letterSpacing: '-0.05px'
+ },
+ 300: {
+ fontSize: '12px',
+ fontWeight: 400,
+ lineHeight: '16px',
+ letterSpacing: '0'
+ }
+}
+
+export const getTextPropsForControlHeight = height => {
+ if (height <= 32) return text['300']
+ if (height <= 40) return text['400']
+ return text['500']
+}
+
+export default getTextPropsForControlHeight

src/select/src/Select.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Box, { dimensions, spacing, position, layout } from 'ui-box'
 import { useStyleConfig } from '../../hooks'
 import { CaretDownIcon } from '../../icons'
+import { getTextPropsForControlHeight } from '../../lib/deprecated-theme-helpers'
 
 const internalStyles = {
  textTransform: 'default',
@@ -52,20 +53,24 @@ const Select = memo(
  name,
  onChange,
  required,
- size = 'medium',
  value,
  ...restProps
  } = props
 
  const { className: themedClassName, ...boxProps } = useStyleConfig(
  'Select',
- { appearance, size },
+ { appearance, size: restProps.size || 'medium' },
  pseudoSelectors,
  internalStyles
  )
 
  const height = heightProp || boxProps.height
 
+ const textProps =
+ !restProps.size && restProps.height
+ ? getTextPropsForControlHeight(restProps.height)
+ : {}
+
  const iconSize = getIconSizeForSelect(height)
  const iconMargin = height >= 36 ? 12 : 8
 
@@ -78,6 +83,7 @@ const Select = memo(
  width="auto"
  height={height}
  {...restProps}
+ {...textProps}
  >
  <Box
  is="select"

src/text-input/src/TextInput.js

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import Box, { spacing, dimensions, position, layout } from 'ui-box'
 import { useStyleConfig } from '../../hooks'
+import { getTextPropsForControlHeight } from '../../lib/deprecated-theme-helpers'
 import { useTheme } from '../../theme'
 
 const pseudoSelectors = {
@@ -34,7 +35,6 @@ const TextInput = memo(
  isInvalid = false,
  placeholder,
  required,
- size = 'medium',
  spellCheck = true,
  width = 280,
  ...restProps
@@ -45,12 +45,16 @@ const TextInput = memo(
  const themedFontFamily = fontFamilies[fontFamily] || fontFamily
  const { className: themedClassName, ...boxProps } = useStyleConfig(
  'Input',
- { appearance, size },
+ { appearance, size: restProps.size || 'medium' },
  pseudoSelectors,
  internalStyles
  )
 
  const height = restProps.height || boxProps.height
+ const textProps =
+ !restProps.size && restProps.height
+ ? getTextPropsForControlHeight(restProps.height)
+ : {}
 
  return (
  <Box
@@ -67,6 +71,7 @@ const TextInput = memo(
  fontFamily={themedFontFamily}
  {...boxProps}
  {...restProps}
+ {...textProps}
  height={height}
  />
  )