diff --git a/README.md b/README.md index a8c9ccc08..672d3200d 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Evergreen v4 supports theming partially. It is still complex to theme Evergreen. Evergreen offers easy Server Side Rendering (SSR) and automatic hydration. -Evergreen bundles 2 CSS-in-JS solutions, from glamor and ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function that will do SSR for both at once. +Evergreen provides a CSS-in-JS solution from `ui-box`. To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function that will do SSR for both at once. - How to use it with Next.js in the [ssr-next example app](examples/ssr-next). - [How to use it with GatsbyJS](https://github.com/segmentio/evergreen/issues/154) diff --git a/package.json b/package.json index 954840f58..a0f98fa0e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ "dependencies": { "@babel/runtime": "^7.1.2", "@blueprintjs/icons": "^3.2.0", - "@types/ui-box": "^1.4.0", "arrify": "^1.0.1", "classnames": "^2.2.6", "dom-helpers": "^3.2.1", @@ -60,7 +59,7 @@ "react-tiny-virtual-list": "^2.1.4", "react-transition-group": "^2.5.0", "tinycolor2": "^1.4.1", - "ui-box": "^1.4.0" + "ui-box": "^2.0.0" }, "peerDependencies": { "react": "^16.3.0", diff --git a/src/alert/src/Alert.tsx b/src/alert/src/Alert.tsx index 360eea175..a36f9063c 100644 --- a/src/alert/src/Alert.tsx +++ b/src/alert/src/Alert.tsx @@ -1,13 +1,13 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { BoxProps } from 'ui-box' +import Box from 'ui-box' import { withTheme } from '../../theme' import { Pane } from '../../layers' import { Heading, Paragraph } from '../../typography' import { IconButton } from '../../buttons' import { Icon } from '../../icon' -class Alert extends PureComponent { +class Alert extends PureComponent> { static propTypes = { /** * The content of the alert. When a string is passed it is wrapped in a `` component. diff --git a/src/alert/src/InlineAlert.tsx b/src/alert/src/InlineAlert.tsx index 23649515b..0f7651cb0 100644 --- a/src/alert/src/InlineAlert.tsx +++ b/src/alert/src/InlineAlert.tsx @@ -1,12 +1,14 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { BoxProps } from 'ui-box' +import Box from 'ui-box' import { withTheme } from '../../theme' import { Pane } from '../../layers' import { Text } from '../../typography' import { Icon } from '../../icon' -class InlineAlert extends PureComponent { +class InlineAlert extends PureComponent< + any & React.ComponentProps +> { static propTypes = { /** * The content of the alert. diff --git a/src/alert/test/snapshots/index.ts.md b/src/alert/test/snapshots/index.ts.md deleted file mode 100644 index d5f337b6b..000000000 --- a/src/alert/test/snapshots/index.ts.md +++ /dev/null @@ -1,216 +0,0 @@ -# Snapshot report for `src/alert/test/index.js` - -The actual snapshot is saved in `index.js.snap`. - -Generated by [AVA](https://ava.li). - -## appearance snapshot - -> Snapshot 1 - -
-
- - - -
-
-
-

- Test title -

-
-
-
- -## basic snapshot - -> Snapshot 1 - -
-
- - - -
-
-
-

- A simple general message -

-
-
-
- -## hasTrim=false snapshot - -> Snapshot 1 - -
-
- - - -
-
-
-

- Test title -

-
-
-
- -## hasTrim=true snapshot - -> Snapshot 1 - -
-
- - - -
-
-
-

- Test title -

-
-
-
- -## type snapshot - -> Snapshot 1 - -
-
- - - -
-
-
-

- Test title -

-
-
-
diff --git a/src/alert/test/snapshots/index.ts.snap b/src/alert/test/snapshots/index.ts.snap deleted file mode 100644 index 0cc15636c..000000000 Binary files a/src/alert/test/snapshots/index.ts.snap and /dev/null differ diff --git a/src/alert/test/snapshots/index.tsx.md b/src/alert/test/snapshots/index.tsx.md index 1a31b4b46..4799c2218 100644 --- a/src/alert/test/snapshots/index.tsx.md +++ b/src/alert/test/snapshots/index.tsx.md @@ -9,11 +9,11 @@ Generated by [AVA](https://ava.li). > Snapshot 1

Snapshot 1

Snapshot 1

Snapshot 1

Snapshot 1

{ static propTypes = { @@ -155,7 +156,7 @@ class Avatar extends PureComponent { > {(imageUnavailable || forceShowInitials) && ( { +class Button extends PureComponent> { static propTypes = { /** * The intent of the button. diff --git a/src/buttons/src/IconButton.tsx b/src/buttons/src/IconButton.tsx index bb17f4ebf..95b3c8aa1 100644 --- a/src/buttons/src/IconButton.tsx +++ b/src/buttons/src/IconButton.tsx @@ -1,11 +1,11 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Icon } from '../../icon' import { withTheme } from '../../theme' import Button from './Button' -class IconButton extends PureComponent { +class IconButton extends PureComponent> { static propTypes = { /** * Name of a Blueprint UI icon, or an icon element, to render. diff --git a/src/buttons/src/TextDropdownButton.tsx b/src/buttons/src/TextDropdownButton.tsx index 107595506..1a0953188 100644 --- a/src/buttons/src/TextDropdownButton.tsx +++ b/src/buttons/src/TextDropdownButton.tsx @@ -1,12 +1,14 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Text } from '../../typography' import { Icon } from '../../icon' import { Spinner } from '../../spinner' import { withTheme } from '../../theme' -class TextDropdownButton extends PureComponent { +class TextDropdownButton extends PureComponent< + any & React.ComponentProps +> { static propTypes = { /** * Forcefully set the active state of a button. diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index 430cec6aa..f3ceece8e 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Text } from '../../typography' import { withTheme } from '../../theme' @@ -32,7 +32,7 @@ MinusIcon.propTypes = { fill: PropTypes.string } -class Checkbox extends PureComponent { +class Checkbox extends PureComponent> { static propTypes = { /** * The id attribute of the checkbox. diff --git a/src/combobox/src/Combobox.tsx b/src/combobox/src/Combobox.tsx index 6a5d08372..4352fc31e 100644 --- a/src/combobox/src/Combobox.tsx +++ b/src/combobox/src/Combobox.tsx @@ -1,11 +1,14 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Autocomplete } from '../../autocomplete' import { TextInput } from '../../text-input' import { IconButton } from '../../buttons' -export default class Combobox extends PureComponent { +export default class Combobox extends PureComponent< + any & React.ComponentProps, + any +> { static propTypes = { /** * The options to show in the menu. diff --git a/src/corner-dialog/src/CornerDialog.tsx b/src/corner-dialog/src/CornerDialog.tsx index f8ced4a58..3a9eddc97 100644 --- a/src/corner-dialog/src/CornerDialog.tsx +++ b/src/corner-dialog/src/CornerDialog.tsx @@ -1,6 +1,7 @@ +import cx from 'classnames' +import { css as gcss } from 'glamor' import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { css as gcss } from 'glamor' import Transition from 'react-transition-group/Transition' import { Pane, Card } from '../../layers' import { Portal } from '../../portal' @@ -37,7 +38,7 @@ const closeAnimation = css.keyframes('closeAnimation', { } }) -const animationStyles = { +const animationStylesClass = css({ '&[data-state="entering"], &[data-state="entered"]': { animation: `${openAnimation} ${ANIMATION_DURATION}ms ${ animationEasing.spring @@ -46,7 +47,7 @@ const animationStyles = { '&[data-state="exiting"]': { animation: `${closeAnimation} 120ms ${animationEasing.acceleration} both` } -} +}) export default class CornerDialog extends PureComponent { static propTypes = { @@ -230,13 +231,13 @@ export default class CornerDialog extends PureComponent { backgroundColor="white" elevation={4} width={width} - css={animationStyles} data-state={state} position="fixed" bottom={16} right={16} padding={32} {...containerProps} + className={cx(containerProps.className, animationStylesClass)} > diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx index 952e4e010..6c202e443 100644 --- a/src/dialog/src/Dialog.tsx +++ b/src/dialog/src/Dialog.tsx @@ -1,6 +1,7 @@ +import cx from 'classnames' +import { css as gcss } from 'glamor' import React from 'react' import PropTypes from 'prop-types' -import { css as gcss } from 'glamor' import { Pane } from '../../layers' import { Paragraph, Heading } from '../../typography' import { Overlay } from '../../overlay' @@ -38,7 +39,7 @@ const closeAnimation = css.keyframes('closeAnimation', { } }) -const animationStyles = { +const animationStylesClass = css({ '&[data-state="entering"], &[data-state="entered"]': { animation: `${openAnimation} ${ANIMATION_DURATION}ms ${ animationEasing.deceleration @@ -49,7 +50,7 @@ const animationStyles = { animationEasing.acceleration } both` } -} +}) class Dialog extends React.Component { static propTypes = { @@ -250,7 +251,7 @@ class Dialog extends React.Component { cancelLabel, shouldCloseOnOverlayClick, shouldCloseOnEscapePress, - containerProps, + containerProps = {}, contentContainerProps, minHeightContent, preventBodyScrolling @@ -293,9 +294,9 @@ class Dialog extends React.Component { marginY={topOffsetWithUnit} display="flex" flexDirection="column" - css={animationStyles} data-state={state} {...containerProps} + className={cx(containerProps.className, animationStylesClass)} > {hasHeader && ( Snapshot 1 - -
- - - -
diff --git a/src/file-picker/test/snapshots/index.ts.snap b/src/file-picker/test/snapshots/index.ts.snap deleted file mode 100644 index e845f0583..000000000 Binary files a/src/file-picker/test/snapshots/index.ts.snap and /dev/null differ diff --git a/src/form-field/src/FormField.tsx b/src/form-field/src/FormField.tsx index f7e2cac0c..9be1dbb81 100644 --- a/src/form-field/src/FormField.tsx +++ b/src/form-field/src/FormField.tsx @@ -1,12 +1,14 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import FormFieldLabel from './FormFieldLabel' import FormFieldDescription from './FormFieldDescription' import FormFieldValidationMessage from './FormFieldValidationMessage' import FormFieldHint from './FormFieldHint' -export default class FormField extends PureComponent { +export default class FormField extends PureComponent< + any & React.ComponentProps +> { static propTypes = { /** * The label used above the input element. diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx index b39d75e0f..6389f35fa 100644 --- a/src/image/src/Image.tsx +++ b/src/image/src/Image.tsx @@ -1,8 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' -export default class Image extends PureComponent { +export default class Image extends PureComponent< + any & React.ComponentProps +> { static propTypes = { src: PropTypes.string } diff --git a/src/layers/src/Pane.tsx b/src/layers/src/Pane.tsx index 2f0966bc7..1eb77c80c 100644 --- a/src/layers/src/Pane.tsx +++ b/src/layers/src/Pane.tsx @@ -1,14 +1,29 @@ +import cx from 'classnames' +import { css as gcss } from 'glamor' import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { withTheme } from '../../theme' +interface Props { + background: string + elevation: 0 | 1 | 2 | 3 | 4 + hoverElevation?: any + activeElevation?: any + border?: any + borderTop?: any + borderRight?: any + borderBottom?: any + borderLeft?: any + theme?: any +} + const StringAndBoolPropType = PropTypes.oneOfType([ PropTypes.string, PropTypes.bool ]) -class Pane extends PureComponent { +class Pane extends PureComponent> { static propTypes = { /** * Background property. @@ -134,6 +149,7 @@ class Pane extends PureComponent { theme, background, + className, elevation, hoverElevation, @@ -145,6 +161,7 @@ class Pane extends PureComponent { borderBottom, borderLeft, + // TODO fully deprecate this css = {}, ...props } = this.props @@ -165,6 +182,15 @@ class Pane extends PureComponent { this.getBorderSideProperty({ borderSideProperty, border }) ) + const classNames = cx( + className, + gcss({ + ...css, + ...hoverElevationStyle, + ...activeElevationStyle + }) + ) + return ( { borderLeft={_borderLeft} boxShadow={elevationStyle} background={theme.getBackground(background)} - css={{ - ...css, - ...hoverElevationStyle, - ...activeElevationStyle - }} + className={classNames} {...props} /> ) diff --git a/src/overlay/src/Overlay.tsx b/src/overlay/src/Overlay.tsx index 86105d21c..f2569a5a0 100644 --- a/src/overlay/src/Overlay.tsx +++ b/src/overlay/src/Overlay.tsx @@ -1,4 +1,5 @@ import React from 'react' +import cx from 'classnames' import PropTypes from 'prop-types' import Transition from 'react-transition-group/Transition' import Box from 'ui-box' @@ -364,9 +365,12 @@ class Overlay extends React.Component { right={0} bottom={0} zIndex={zIndex} - css={animationStyles(theme.overlayBackgroundColor)} data-state={state} {...containerProps} + className={cx( + containerProps.className, + css(animationStyles(theme.overlayBackgroundColor)) + )} > {typeof children === 'function' ? children({ diff --git a/src/popover/src/Popover.tsx b/src/popover/src/Popover.tsx index d694bed2d..bc539a5e2 100644 --- a/src/popover/src/Popover.tsx +++ b/src/popover/src/Popover.tsx @@ -1,3 +1,5 @@ +import cx from 'classnames' +import { css as gcss } from 'glamor' import React, { Component } from 'react' import PropTypes from 'prop-types' import { Positioner } from '../../positioner' @@ -317,7 +319,7 @@ export default class Popover extends Component { minWidth, position, minHeight, - statelessProps, + statelessProps = {}, animationDuration, onCloseComplete } = this.props @@ -342,12 +344,12 @@ export default class Popover extends Component { getRef(ref) }} data-state={state} - css={css} style={style} display={display} minWidth={minWidth} minHeight={minHeight} {...statelessProps} + className={cx(statelessProps.className, gcss(css))} > {typeof content === 'function' ? content({ close: this.close }) diff --git a/src/positioner/test/snapshots/index.ts.md b/src/positioner/test/snapshots/index.ts.md index daca38678..5c26bb141 100644 --- a/src/positioner/test/snapshots/index.ts.md +++ b/src/positioner/test/snapshots/index.ts.md @@ -1,6 +1,6 @@ -# Snapshot report for `src/positioner/test/index.js` +# Snapshot report for `src/positioner/test/index.ts` -The actual snapshot is saved in `index.js.snap`. +The actual snapshot is saved in `index.ts.snap`. Generated by [AVA](https://ava.li). diff --git a/src/radio/src/Radio.tsx b/src/radio/src/Radio.tsx index a7b61e004..8bcae87db 100644 --- a/src/radio/src/Radio.tsx +++ b/src/radio/src/Radio.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Text } from '../../typography' import { withTheme } from '../../theme' @@ -15,7 +15,7 @@ CircleIcon.propTypes = { size: PropTypes.number } -class Radio extends PureComponent { +class Radio extends PureComponent> { static propTypes = { /** * The id attribute of the radio. diff --git a/src/radio/src/RadioGroup.tsx b/src/radio/src/RadioGroup.tsx index 96b1b743a..6a13ffe78 100644 --- a/src/radio/src/RadioGroup.tsx +++ b/src/radio/src/RadioGroup.tsx @@ -1,13 +1,16 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Pane } from '../../layers' import { Text } from '../../typography' import Radio from './Radio' let radioCount = 1 // Used for generating unique input names -export default class RadioGroup extends PureComponent { +export default class RadioGroup extends PureComponent< + any & React.ComponentProps, + any +> { static propTypes = { /** * The options for the radios of the Radio Group. diff --git a/src/segmented-control/src/SegmentedControl.tsx b/src/segmented-control/src/SegmentedControl.tsx index 37586907e..0c5a0e5d1 100644 --- a/src/segmented-control/src/SegmentedControl.tsx +++ b/src/segmented-control/src/SegmentedControl.tsx @@ -1,13 +1,13 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import safeInvoke from '../../lib/safe-invoke' import SegmentedControlRadio from './SegmentedControlRadio' let radioCount = 1 // Used for generating unique input names export default class SegmentedControl extends PureComponent< - any & BoxProps, + any & React.ComponentProps, any > { static propTypes = { diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx index 4c0d65e86..e23c12a10 100644 --- a/src/select/src/Select.tsx +++ b/src/select/src/Select.tsx @@ -1,11 +1,11 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { Text } from '../../typography' import { Icon } from '../../icon' import { withTheme } from '../../theme' -class Select extends PureComponent { +class Select extends PureComponent> { static propTypes = { /** * The id attribute for the select. diff --git a/src/side-sheet/src/SheetClose.tsx b/src/side-sheet/src/SheetClose.tsx index 3c84f1f07..6100e5042 100644 --- a/src/side-sheet/src/SheetClose.tsx +++ b/src/side-sheet/src/SheetClose.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Box, { BoxProps } from 'ui-box' +import Box from 'ui-box' import { css as gcss } from 'glamor' import { Icon } from '../../icon' import { Position } from '../../constants' @@ -126,7 +126,9 @@ const getSheetCloseClassName = position => { return sheetCloseClassNameCache[position] } -export default class SheetClose extends PureComponent { +export default class SheetClose extends PureComponent< + any & React.ComponentProps +> { static propTypes = { isClosing: PropTypes.bool, position: PropTypes.oneOf([ diff --git a/src/side-sheet/src/SideSheet.tsx b/src/side-sheet/src/SideSheet.tsx index aef710380..6b5357e39 100644 --- a/src/side-sheet/src/SideSheet.tsx +++ b/src/side-sheet/src/SideSheet.tsx @@ -234,7 +234,7 @@ class SideSheet extends React.Component { ({ fill: 'transparent' }) -class Spinner extends PureComponent { +class Spinner extends PureComponent< + any & React.ComponentProps, + any +> { static propTypes = { /** * Delay after which spinner should be visible. @@ -76,10 +79,16 @@ class Spinner extends PureComponent { const { theme, size, ...props } = this.props return ( - + Snapshot 1 - - { - cache: { - glamorIds: [ - 'ng405l', - 'fv6wzy', - ], - uiBoxCache: [ - [ - 'height11', - '📦h_11px', - ], - [ - 'boxSizingborder-box', - '📦box-szg_border-box', - ], - ], - }, - hydrationScript: