[V4] Use Tooltip inside of a Popover

docs/src/componentRoutes.js

@@ -48,6 +48,10 @@ module.exports = [
     name: 'Colors',
     path: '/components/colors'
   },
+  {
+    name: 'Select',
+    path: '/components/select'
+  },
   {
     name: 'Select Menu',
     path: '/components/select-menu'

docs/src/utils/getComponent.js

@@ -7,7 +7,6 @@ import buttonsDocs from '../../../src/buttons/docs'
 import autocompleteDocs from '../../../src/autocomplete/docs/'
 import comboboxDocs from '../../../src/combobox/docs/'
 // import badgesDocs from '../../src/badges/docs/'
-// import selectDocs from '../../src/select/docs/'
 import popoverDocs from '../../../src/popover/docs/'
 // import portalDocs from '../../src/portal/docs/'
 import textInputDocs from '../../../src/text-input/docs/'
@@ -29,6 +28,7 @@ import cornerDialogDocs from '../../../src/corner-dialog/docs/'
 import alertDocs from '../../../src/alert/docs/'
 import toasterDocs from '../../../src/toaster/docs/'
 import selectMenuDocs from '../../../src/select-menu/docs/'
+import selectDocs from '../../../src/select/docs/'
 
 const map = {
   radio: radioDocs,
@@ -41,6 +41,7 @@ const map = {
   layers: layersDocs,
   typography: typographyDocs,
   colors: colorsDocs,
+  select: selectDocs,
   'select menu': selectMenuDocs,
   'text input': textInputDocs,
   'search input': searchInputDocs,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evergreen-ui",
-  "version": "4.0.0-14",
+  "version": "4.0.0-15",
   "description": "🌲 React UI Kit by Segment 🌲",
   "contributors": [
     "Jeroen Ransijn (https://jssr.design/)",

src/index.js

@@ -32,7 +32,7 @@ export { Radio, RadioGroup } from './radio'
 export { minorScale, majorScale } from './scales'
 export { SearchInput } from './search-input'
 export { SegmentedControl } from './segmented-control'
-export { Select } from './select'
+export { Select, SelectField } from './select'
 export {
   OptionShapePropType,
   OptionsList,

src/popover/src/Popover.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Position, Positioner } from '../../positioner'
+import { Tooltip } from '../../tooltip'
 import PopoverStateless from './PopoverStateless'
 
 export default class Popover extends Component {
@@ -237,12 +238,16 @@ export default class Popover extends Component {
 
   renderTarget = ({ getRef, isShown }) => {
     const { children } = this.props
+    const isTooltipInside = children && children.type === Tooltip
 
     const getTargetRef = ref => {
       this.targetRef = ref
       getRef(ref)
     }
 
+    /**
+     * When a function is passed, you can control the Popover manually.
+     */
     if (typeof children === 'function') {
       return children({
         toggle: this.toggle,
@@ -251,13 +256,39 @@ export default class Popover extends Component {
       })
     }
 
-    return React.cloneElement(children, {
+    const popoverTargetProps = {
       onClick: this.toggle,
       onKeyDown: this.handleKeyDown,
-      innerRef: getTargetRef,
       role: 'button',
       'aria-expanded': isShown,
       'aria-haspopup': true
+    }
+
+    /**
+     * Tooltips can be used within a Popover (not the other way around)
+     * In this case the children is the Tooltip instead of a button.
+     * Pass the properties to the Tooltip and let the Tooltip
+     * add the properties to the target.
+     */
+    if (isTooltipInside) {
+      return React.cloneElement(children, {
+        popoverProps: {
+          getTargetRef,
+          isShown,
+
+          // These propeties will be spread as `popoverTargetProps`
+          // in the Tooltip component.
+          ...popoverTargetProps
+        }
+      })
+    }
+
+    /**
+     * With normal usage only popover props end up on the target.
+     */
+    return React.cloneElement(children, {
+      innerRef: getTargetRef,
+      ...popoverTargetProps
     })
   }
 

src/popover/stories/index.stories.js

@@ -3,9 +3,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
 import { Popover } from '../../popover'
+import { Tooltip } from '../../tooltip'
 import { TextInputField } from '../../text-input'
 import { Pane } from '../../layers'
-import { Text } from '../../typography'
+import { Heading, Paragraph, Text } from '../../typography'
 import { Button } from '../../buttons'
 import { Position } from '../../positioner'
 import { Icon, IconNames } from '../../icon'
@@ -186,3 +187,37 @@ storiesOf('popover', module)
       </Popover>
     </Box>
   ))
+  .add('Popover with tooltip', () => (
+    <Box padding={120}>
+      {(() => {
+        document.body.style.margin = '0'
+        document.body.style.height = '100vh'
+      })()}
+      <Popover content={<PopoverContentWithTextInput />}>
+        <Tooltip content="Click me">
+          <Button marginRight={20}>Tooltip Card + Popover</Button>
+        </Tooltip>
+      </Popover>
+      <Popover content={<PopoverContentWithTextInput />}>
+        <Tooltip
+          appearance="card"
+          content={
+            <React.Fragment>
+              <Heading>Heading</Heading>
+              <Paragraph color="muted" marginTop={4}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </Paragraph>
+            </React.Fragment>
+          }
+          statelessProps={{
+            paddingY: 24,
+            paddingX: 24,
+            maxWidth: 280
+          }}
+        >
+          <Button>Tooltip + Popover</Button>
+        </Tooltip>
+      </Popover>
+    </Box>
+  ))

src/select/docs/examples/Select-basic.example

@@ -0,0 +1,4 @@
+<Select onChange={(event) => alert(event.target.value)}>
+  <option value="foo" checked>Foo</option>
+  <option value="bar">Bar</option>
+</Select>

src/select/docs/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import Box from 'ui-box'
+import Component from '@reactions/component'
+import Select from '../src/Select'
+
+/* eslint-disable import/no-unresolved, import/no-webpack-loader-syntax */
+import sourceSelect from '!raw-loader!../src/Select'
+/* eslint-enable import/no-unresolved, import/no-webpack-loader-syntax */
+
+/**
+ * Code examples
+ */
+import exampleSelectBasic from './examples/Select-basic.example'
+
+const title = 'Select'
+const subTitle = 'A styled native <select> for choosing items from a list.'
+
+const introduction = (
+  <div>
+    <p>
+      The <code>Select</code> component is a styled wrapper around a native{' '}
+      <code>select</code> element, which allows selection of one item from a
+      dropdown list. Anytime you would reach for a native select, use this.
+    </p>
+  </div>
+)
+
+const appearanceOptions = null
+
+const scope = {
+  Box,
+  Select,
+  Component
+}
+
+const components = [
+  {
+    name: 'Select',
+    source: sourceSelect,
+    description: (
+      <p>
+        The <code>Select</code> component.
+      </p>
+    ),
+    examples: [
+      {
+        title: 'Basic Select Example',
+        description: (
+          <div>
+            <p>This example shows basic usage with a selected item.</p>
+          </div>
+        ),
+        codeText: exampleSelectBasic,
+        scope
+      }
+    ]
+  }
+]
+
+export default {
+  title,
+  subTitle,
+  introduction,
+  appearanceOptions,
+  components
+}

src/select/index.js

@@ -1 +1,2 @@
 export Select from './src/Select'
+export SelectField from './src/SelectField'

src/select/src/Select.js

@@ -105,13 +105,14 @@ class Select extends PureComponent {
     const textSize = theme.getTextSizeForControlHeight(height)
     const borderRadius = theme.getBorderRadiusForControlHeight(height)
     const iconSize = theme.getIconSizeForSelect(height)
+    const iconMargin = height >= 36 ? 12 : 8
 
     return (
       <Box
         display="inline-flex"
         flex={1}
         position="relative"
-        width={200}
+        width="auto"
         height={height}
         {...props}
       >
@@ -130,6 +131,8 @@ class Select extends PureComponent {
           borderRadius={borderRadius}
           textTransform="default"
           paddingLeft={Math.round(height / 3.2)}
+          // Provide enough space for auto-sizing select including the icon
+          paddingRight={iconMargin * 2 + iconSize}
         >
           {children}
         </Text>
@@ -140,7 +143,7 @@ class Select extends PureComponent {
           position="absolute"
           top="50%"
           marginTop={-iconSize / 2}
-          right={height >= 36 ? 12 : 8}
+          right={iconMargin}
           pointerEvents="none"
         />
       </Box>