New package combobox

.storybook/addons.js

@@ -1,2 +1,3 @@
+import '@storybook/addon-options/register'
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'

.storybook/config.js

@@ -67,10 +67,8 @@ setOptions({
  selectedAddonPanel: undefined, // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
 })
 
-const req = require.context('../packages', true, /.stories.js$/)
-
 function loadStories() {
- req.keys().forEach(filename => req(filename))
+ require('./requireStories!./empty')
 }
 
 configure(loadStories, module)

.storybook/empty.js

@@ -0,0 +1,2 @@
+// This file exists to satisfy the `require('./requireStories!…')` call in
+// `config.js`. It doesn't need to contain anything, it just has to exist.

.storybook/requireStories.js

@@ -0,0 +1,34 @@
+const glob = require('glob')
+
+module.exports = function noop() {}
+module.exports.pitch = function pitch() {
+ // This is a temp fix for storybooks. If we are running static builds we'll have the PACKAGE var
+ // and we need to work from within that package. Otherwise we are running the server and we know
+ // we are inside the packages directory already
+ const packagesRoot = process.env.PACKAGE
+ ? `${__dirname}/../../packages/${process.env.PACKAGE}`
+ : process.cwd()
+
+ // Prevent node_modules from being loaded
+ const storiesPattern = `${packagesRoot}/packages/*/stories/**/*.stories.js`
+ const storybookFiles = glob.sync(storiesPattern, { cwd: __dirname })
+
+ console.log('require the following stories:')
+
+ // Pretty print the stories that are being loaded for testing
+ console.log(
+ JSON.stringify(
+ storybookFiles.map(x => x.substr(x.indexOf('evergreen/packages'))),
+ null,
+ 2,
+ ),
+ )
+
+ console.log(`Loading ${storybookFiles.length} storybook files`)
+
+ const storyRequireStatements = storybookFiles
+ .map(storyPath => `require(${JSON.stringify(storyPath)});`)
+ .join('\n')
+
+ return storyRequireStatements
+}

packages/evergreen-autocomplete/src/components/Autocomplete.js

@@ -2,32 +2,34 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import fuzzaldrin from 'fuzzaldrin-plus'
 import Downshift from 'downshift'
-import VirtualList from 'react-tiny-virtual-list'
-import AutocompleteItem from './AutocompleteItem'
 import { Pane } from 'evergreen-layers'
-import { Text } from 'evergreen-typography'
 import { Popover } from 'evergreen-popover'
+import VirtualList from 'react-tiny-virtual-list'
+import AutocompleteItem from './AutocompleteItem'
 
 const fuzzyFilter = (items, input) => fuzzaldrin.filter(items, input)
 
 const autocompleteItemRenderer = props => <AutocompleteItem {...props} />
 
+// https://github.com/paypal/downshift/issues/164
 export default class Autocomplete extends PureComponent {
  static propTypes = {
  children: PropTypes.func,
  itemSize: PropTypes.number,
  renderItem: PropTypes.func,
  itemsFilter: PropTypes.func,
+ isFilterDisabled: PropTypes.bool,
  popoverMaxHeight: PropTypes.number,
  useSmartPositioning: PropTypes.bool,
  ...Downshift.propTypes,
  }
 
  static defaultProps = {
- itemsFilter: fuzzyFilter,
- useSmartPositioning: false,
  itemSize: 32,
+ itemsFilter: fuzzyFilter,
+ isFilterDisabled: false,
  popoverMaxHeight: 240,
+ useSmartPositioning: false,
  renderItem: autocompleteItemRenderer,
  }
 
@@ -40,14 +42,16 @@ export default class Autocomplete extends PureComponent {
  getItemProps,
  }) => {
  const {
- itemsFilter,
  itemSize,
+ itemsFilter,
  items: originalItems,
- popoverMaxHeight,
  renderItem,
+ popoverMaxHeight,
+ isFilterDisabled,
  } = this.props
+
  const items =
- inputValue.trim() === ''
+ isFilterDisabled || inputValue.trim() === ''
  ? originalItems
  : itemsFilter(originalItems, inputValue)
 
@@ -56,12 +60,12 @@ export default class Autocomplete extends PureComponent {
  {items.length > 0 && (
  <VirtualList
  width="100%"
- scrollToIndex={highlightedIndex || 0}
- scrollToAlignment="auto"
  height={Math.min(items.length * itemSize, popoverMaxHeight)}
- itemCount={items.length}
  itemSize={itemSize}
+ itemCount={items.length}
+ scrollToIndex={highlightedIndex || 0}
  overscanCount={3}
+ scrollToAlignment="auto"
  renderItem={({ index, style }) => {
  const item = items[index]
  return renderItem(
@@ -70,11 +74,13 @@ export default class Autocomplete extends PureComponent {
  key: item,
  index,
  style,
- onClick: () => selectItemAtIndex(index),
- isHighlighted: highlightedIndex === index,
  isEven: index % 2 === 1,
- isSelected: selectedItem === item,
  children: item,
+ onMouseUp: () => {
+ selectItemAtIndex(index)
+ },
+ isSelected: selectedItem === item,
+ isHighlighted: highlightedIndex === index,
  }),
  )
  }}
@@ -108,7 +114,8 @@ export default class Autocomplete extends PureComponent {
  }) => (
  <div>
  <Popover
- useSmartPositioning={useSmartPositioning}
+ isOpen={isOpen}
+ display="inline-block"
  content={({ targetRect }) =>
  this.renderResults({
  width: targetRect.width,
@@ -118,8 +125,8 @@ export default class Autocomplete extends PureComponent {
  highlightedIndex,
  selectItemAtIndex,
  })}
- display="inline-block"
- isOpen={isOpen}
+ animationDuration={0}
+ useSmartPositioning={useSmartPositioning}
  >
  {({ isOpen: isOpenPopover, toggle, getRef, key }) =>
  children({

packages/evergreen-autocomplete/src/components/AutocompleteItem.js

@@ -22,19 +22,25 @@ export default class AutocompleteItem extends PureComponent {
  children,
  ...props
  } = this.props
+
  return (
  <Pane
  style={style}
  display="flex"
  paddingX={8}
  alignItems="center"
  cursor="pointer"
- {...(isEven && !isHighlighted
+ {...(isEven && !isSelected
  ? {
  backgroundColor: colors.neutral['5'],
  }
  : {})}
  {...(isHighlighted
+ ? {
+ backgroundColor: colors.blue['15'],
+ }
+ : {})}
+ {...(isSelected
  ? {
  backgroundColor: colors.blue['300'],
  }
@@ -46,7 +52,11 @@ export default class AutocompleteItem extends PureComponent {
  : {})}
  {...props}
  >
- <Text size={300} {...(isHighlighted ? { color: '#ffffff' } : {})}>
+ <Text
+ size={300}
+ {...(isHighlighted ? { color: colors.blue['500'] } : {})}
+ {...(isSelected ? { color: '#ffffff' } : {})}
+ >
  {children}
  </Text>
  </Pane>

packages/evergreen-buttons/package.json

@@ -19,6 +19,7 @@
  },
  "dependencies": {
  "evergreen-colors": "^2.2.6",
+ "evergreen-shared-styles": "^2.2.6",
  "evergreen-typography": "^2.2.6",
  "ui-box": "^0.4.1"
  }

packages/evergreen-buttons/src/components/Button.js

@@ -1,20 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Text, TextStyles } from 'evergreen-typography'
+import { Text } from 'evergreen-typography'
+import {
+ getBorderRadiusForControlHeight,
+ getTextStyleForControlHeight,
+} from 'evergreen-shared-styles'
 import ButtonAppearances from '../styles/button-appearances'
 
-const getTextStyleForButton = ({ height }) => {
- // HACK: add padding top to visually align in center
- if (height <= 24) return { ...TextStyles['200'], paddingTop: 1 }
- if (height <= 28) return TextStyles['300']
- if (height <= 32) return TextStyles['300']
- if (height <= 36) return TextStyles['400']
- if (height <= 40) return TextStyles['400']
- if (height <= 48) return TextStyles['500']
- if (height <= 56) return TextStyles['700']
- return TextStyles['800']
-}
-
 export default class Button extends PureComponent {
  static propTypes = {
  ...Text.propTypes,
@@ -24,6 +16,7 @@ export default class Button extends PureComponent {
 
  static defaultProps = {
  is: 'button',
+ position: 'relative',
  appearance: 'default',
  paddingTop: 0,
  paddingBottom: 0,
@@ -47,10 +40,15 @@ export default class Button extends PureComponent {
  ...props
  } = this.props
  const appearanceStyle = ButtonAppearances[appearance]
- const textStyle = getTextStyleForButton({ height })
+ const textStyle = getTextStyleForControlHeight({ height })
+ const borderRadius = getBorderRadiusForControlHeight({ height })
 
  return (
  <Text
+ borderTopRightRadius={borderRadius}
+ borderBottomRightRadius={borderRadius}
+ borderTopLeftRadius={borderRadius}
+ borderBottomLeftRadius={borderRadius}
  paddingTop={paddingTop}
  paddingBottom={paddingBottom}
  paddingRight={

packages/evergreen-buttons/src/styles/button-appearances.js

@@ -6,7 +6,6 @@ const baseStyle = {
  textDecoration: 'none',
  transition: 'box-shadow 80ms ease-in-out',
  WebkitAppearance: 'none',
- borderRadius: 5,
  border: 'none',
  outline: 'none',
  cursor: 'pointer',
@@ -42,6 +41,7 @@ const ButtonAppearances = {
  ]}, inset 0 -1px 1px 0 ${colors.neutral['15A']}`,
  },
  [focusState]: {
+ zIndex: 2,
  boxShadow: `0 0 0 2px ${colors.blue['20A']}, inset 0 0 0 1px ${colors
  .neutral['70A']}, inset 0 -1px 1px 0 ${colors.neutral['10A']}`,
  },
@@ -66,6 +66,7 @@ const ButtonAppearances = {
  .blue['500']})`,
  },
  [focusState]: {
+ zIndex: 2,
  boxShadow: `0 0 0 2px ${colors.blue['50A']}, inset 0 0 0 1px ${colors
  .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
  },
@@ -91,6 +92,7 @@ const ButtonAppearances = {
  .green['600']})`,
  },
  [focusState]: {
+ zIndex: 2,
  boxShadow: `0 0 0 2px ${colors.green['100A']}, inset 0 0 0 1px ${colors
  .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
  },
@@ -116,6 +118,7 @@ const ButtonAppearances = {
  .red['600']})`,
  },
  [focusState]: {
+ zIndex: 2,
  boxShadow: `0 0 0 2px ${colors.red['100A']}, inset 0 0 0 1px ${colors
  .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
  },
@@ -134,6 +137,7 @@ const ButtonAppearances = {
  backgroundColor: colors.neutral['7A'],
  },
  [focusState]: {
+ zIndex: 2,
  boxShadow: `0 0 0 2px ${colors.blue['50A']}`,
  },
  [activeState]: {

packages/evergreen-buttons/yarn.lock

@@ -30,16 +30,24 @@ encoding@^0.1.11:
  dependencies:
  iconv-lite "~0.4.13"
 
-evergreen-colors@^2.0.0-0:
- version "2.0.0-0"
- resolved "https://registry.yarnpkg.com/evergreen-colors/-/evergreen-colors-2.0.0-0.tgz#f11e80410d1f2eb7ee73ef5b1815b393b3f16324"
+evergreen-colors@^2.2.6:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/evergreen-colors/-/evergreen-colors-2.2.6.tgz#229277e934eab18de8ac67d4fedf565f59502497"
 
-evergreen-typography@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/evergreen-typography/-/evergreen-typography-2.0.0.tgz#561a1bef47e294c20361314c96342c9858b9b161"
+evergreen-shared-styles@^2.2.6:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/evergreen-shared-styles/-/evergreen-shared-styles-2.2.6.tgz#0acb2263c06f1ad648e975e95b42d96f13361e39"
  dependencies:
- evergreen-colors "^2.0.0-0"
- ui-box "^0.4.0"
+ evergreen-colors "^2.2.6"
+ evergreen-typography "^2.2.6"
+ ui-box "^0.4.1"
+
+evergreen-typography@^2.2.6:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/evergreen-typography/-/evergreen-typography-2.2.6.tgz#9d7fa8a2892e353069c6f6d37eddf6843bd1f765"
+ dependencies:
+ evergreen-colors "^2.2.6"
+ ui-box "^0.4.1"
 
 fbjs@^0.8.12, fbjs@^0.8.9:
  version "0.8.14"
@@ -135,13 +143,6 @@ ua-parser-js@^0.7.9:
  version "0.7.14"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
-ui-box@^0.4.0:
- version "0.4.0"
- resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-0.4.0.tgz#ec49e2b1e70dfd84d555e6bf3391690155a550e7"
- dependencies:
- classnames "^2.2.5"
- glamor "^2.20.22"
-
 ui-box@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-0.4.1.tgz#410f7b14ef9abdfac10973e21ba6fc1e1d0fa072"