diff --git a/.eslintrc.js b/.eslintrc.js index 5c99ded6eb68b0..28ffccd69ec11e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], + plugins: ['@typescript-eslint', 'emotion'], extends: ['sentry-app/strict'], globals: { require: false, @@ -11,7 +11,12 @@ module.exports = { tick: true, jest: true, }, - rules: {}, + rules: { + 'emotion/jsx-import': 'off', + 'emotion/no-vanilla': 'error', + 'emotion/import-from-emotion': 'error', + 'emotion/styled-import': 'error', + }, overrides: [ { files: ['*.ts', '*.tsx'], diff --git a/.eslintrc.relax.js b/.eslintrc.relax.js index 233612f20e5cdc..8a1cc394f001f4 100644 --- a/.eslintrc.relax.js +++ b/.eslintrc.relax.js @@ -3,4 +3,11 @@ const strict = require('./.eslintrc.js'); module.exports = { ...strict, extends: ['sentry-app'], + + rules: { + 'emotion/jsx-import': 'off', + 'emotion/no-vanilla': 'warn', + 'emotion/import-from-emotion': 'error', + 'emotion/styled-import': 'error', + }, }; diff --git a/babel.config.js b/babel.config.js index ff40b034bc989c..a9dbd6ca3a8f28 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,8 +1,19 @@ /*eslint-env node*/ module.exports = { - presets: ['@babel/react', '@babel/env', '@babel/preset-typescript'], + presets: [ + '@babel/react', + '@babel/env', + '@babel/preset-typescript', + [ + '@emotion/babel-preset-css-prop', + { + autoLabel: true, + sourceMap: false, + labelFormat: '[local]', + }, + ], + ], plugins: [ - 'emotion', 'react-hot-loader/babel', '@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread', @@ -34,13 +45,19 @@ module.exports = { ], }, development: { - plugins: [ - ['emotion', {sourceMap: true, autoLabel: true}], - '@babel/plugin-transform-react-jsx-source', + presets: [ + [ + '@emotion/babel-preset-css-prop', + { + autoLabel: true, + sourceMap: false, + }, + ], ], + plugins: ['@babel/plugin-transform-react-jsx-source'], }, test: { - plugins: [['emotion', {autoLabel: true}], 'dynamic-import-node'], + plugins: ['dynamic-import-node'], }, }, }; diff --git a/docs-ui/components/button.stories.js b/docs-ui/components/button.stories.js index b207c0a32733e3..ae648814a36846 100644 --- a/docs-ui/components/button.stories.js +++ b/docs-ui/components/button.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; import {action} from '@storybook/addon-actions'; diff --git a/docs-ui/components/checkboxFancy.stories.js b/docs-ui/components/checkboxFancy.stories.js index bc7a272bccb90e..7f6d14811a5889 100644 --- a/docs-ui/components/checkboxFancy.stories.js +++ b/docs-ui/components/checkboxFancy.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; import {number, boolean} from '@storybook/addon-knobs'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import CheckboxFancy from 'app/components/checkboxFancy'; diff --git a/docs-ui/components/colors.stories.js b/docs-ui/components/colors.stories.js index 947c2e54e2b4c2..a77e3a49e7d84a 100644 --- a/docs-ui/components/colors.stories.js +++ b/docs-ui/components/colors.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import theme from 'app/utils/theme'; diff --git a/docs-ui/components/emptyMessage.stories.js b/docs-ui/components/emptyMessage.stories.js index 12815be1cd30e6..f472bb2b8f39b9 100644 --- a/docs-ui/components/emptyMessage.stories.js +++ b/docs-ui/components/emptyMessage.stories.js @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import React from 'react'; import {Panel, PanelHeader} from 'app/components/panels'; diff --git a/docs-ui/components/gridEditable.stories.js b/docs-ui/components/gridEditable.stories.js index a3c11feb18fb01..8b3f9f2d5e88ab 100644 --- a/docs-ui/components/gridEditable.stories.js +++ b/docs-ui/components/gridEditable.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Button from 'app/components/button'; import GlobalModal from 'app/components/globalModal'; diff --git a/docs-ui/components/icons.stories.js b/docs-ui/components/icons.stories.js index 631d3daab5babd..1c517034e325bc 100644 --- a/docs-ui/components/icons.stories.js +++ b/docs-ui/components/icons.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import InlineSvg from 'app/components/inlineSvg'; diff --git a/docs-ui/components/idBadge.stories.js b/docs-ui/components/idBadge.stories.js index 7cacf07a803678..0dfddccca413df 100644 --- a/docs-ui/components/idBadge.stories.js +++ b/docs-ui/components/idBadge.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import IdBadge from 'app/components/idBadge'; diff --git a/docs-ui/components/issueSyncListElement.stories.js b/docs-ui/components/issueSyncListElement.stories.js index f980f00b4d61b1..18a29dda586086 100644 --- a/docs-ui/components/issueSyncListElement.stories.js +++ b/docs-ui/components/issueSyncListElement.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; diff --git a/docs-ui/components/platformIcon.stories.js b/docs-ui/components/platformIcon.stories.js index d0014f4640da5d..e993f19ce0c6ab 100644 --- a/docs-ui/components/platformIcon.stories.js +++ b/docs-ui/components/platformIcon.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {storiesOf} from '@storybook/react'; import {withInfo} from '@storybook/addon-info'; diff --git a/package.json b/package.json index aa527f83e1e4bb..62767dbc1417f9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "@babel/preset-react": "^7.7.0", "@babel/preset-typescript": "^7.7.2", "@babel/runtime": "~7.7.2", + "@emotion/babel-preset-css-prop": "^10.0.27", + "@emotion/core": "^10.0.27", + "@emotion/styled": "^10.0.27", "@sentry/apm": "5.10.1", "@sentry/browser": "5.10.1", "@sentry/integrations": "5.10.1", @@ -43,7 +46,6 @@ "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.0", "babel-plugin-add-react-displayname": "^0.0.5", - "babel-plugin-emotion": "9.2.11", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "bootstrap": "3.4.0", "classnames": "2.2.0", @@ -60,13 +62,12 @@ "dompurify": "^2.0.7", "echarts": "4.2.1", "echarts-for-react": "2.0.14", - "emotion": "9.2.12", - "emotion-theming": "9.2.9", + "emotion": "10.0.27", + "emotion-theming": "10.0.27", "file-loader": "^3.0.1", "focus-visible": "^5.0.2", "fuse.js": "^3.4.6", "gettext-parser": "1.3.1", - "grid-emotion": "^2.1.0", "intersection-observer": "^0.7.0", "ios-device-list": "^1.1.30", "jed": "^1.1.0", @@ -95,7 +96,6 @@ "react-date-range": "^1.0.0-beta", "react-document-title": "2.0.3", "react-dom": "16.7.0", - "react-emotion": "9.2.12", "react-hot-loader": "4.12.16", "react-keydown": "^1.9.7", "react-lazyload": "^2.3.0", @@ -107,6 +107,7 @@ "react-select": "^1.2.1", "react-sparklines": "1.7.0", "react-virtualized": "^9.20.1", + "reflexbox": "^4.0.6", "reflux": "0.4.1", "regenerator-runtime": "^0.13.3", "scroll-to-element": "^2.0.0", @@ -145,6 +146,7 @@ "enzyme-to-json": "3.4.3", "eslint": "5.11.1", "eslint-config-sentry-app": "1.27.0", + "eslint-plugin-emotion": "^10.0.14", "jest": "24.9.0", "jest-canvas-mock": "^2.2.0", "jest-junit": "^9.0.0", diff --git a/src/sentry/static/sentry/app/actionCreators/indicator.tsx b/src/sentry/static/sentry/app/actionCreators/indicator.tsx index b4d8d752b08838..78d4179534a4f2 100644 --- a/src/sentry/static/sentry/app/actionCreators/indicator.tsx +++ b/src/sentry/static/sentry/app/actionCreators/indicator.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {DEFAULT_TOAST_DURATION} from 'app/constants'; import {t, tct} from 'app/locale'; diff --git a/src/sentry/static/sentry/app/actionCreators/modal.tsx b/src/sentry/static/sentry/app/actionCreators/modal.tsx index a3c1543354f5d6..b288342baec63c 100644 --- a/src/sentry/static/sentry/app/actionCreators/modal.tsx +++ b/src/sentry/static/sentry/app/actionCreators/modal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {css} from 'react-emotion'; +import {css} from '@emotion/core'; import {ModalHeader, ModalBody, ModalFooter} from 'react-bootstrap'; import ModalActions from 'app/actions/modalActions'; @@ -14,6 +14,7 @@ export type ModalRenderProps = { export type ModalOptions = { onClose?: () => void; + modalCss?: ReturnType; modalClassName?: string; dialogClassName?: string; type?: string; @@ -73,7 +74,7 @@ export function openDiffModal(options: ModalOptions) { .then(mod => mod.default) .then(Modal => { // This is the only way to style the different Modal children - const diffModalCss = css` + const modalCss = css` .modal-dialog { display: flex; margin: 0; @@ -95,7 +96,7 @@ export function openDiffModal(options: ModalOptions) { `; openModal(deps => , { - modalClassName: diffModalCss, + modalCss, }); }); } @@ -200,7 +201,7 @@ export function openDebugFileSourceModal(options: ModalOptions = {}) { export async function openInviteMembersModal(options = {}) { const mod = await import(/* webpackChunkName: "InviteMembersModal" */ 'app/components/modals/inviteMembersModal'); - const {default: Modal, modalClassName} = mod; + const {default: Modal, modalCss} = mod; - openModal(deps => , {modalClassName}); + openModal(deps => , {modalCss}); } diff --git a/src/sentry/static/sentry/app/components/acl/featureDisabled.tsx b/src/sentry/static/sentry/app/components/acl/featureDisabled.tsx index 1f20fa0300ba27..0a1b1d97511ac6 100644 --- a/src/sentry/static/sentry/app/components/acl/featureDisabled.tsx +++ b/src/sentry/static/sentry/app/components/acl/featureDisabled.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {selectText} from 'app/utils/selectText'; import {t, tct} from 'app/locale'; @@ -32,7 +32,7 @@ type Props = { * Attaches additional styles to the FeatureDisabled component to make it * look consistent within the Alert. */ - alert?: boolean | React.ReactElement; + alert?: boolean | React.ElementType; /** * Do not show the help toggle. The description will always be rendered. */ @@ -118,7 +118,7 @@ class FeatureDisabled extends React.Component { return this.renderFeatureDisabled(); } - const AlertComponent = typeof alert === 'function' ? alert : Alert; + const AlertComponent = typeof alert === 'boolean' ? Alert : alert; return ( diff --git a/src/sentry/static/sentry/app/components/actions/actionLink.tsx b/src/sentry/static/sentry/app/components/actions/actionLink.tsx index dd423cef3b0f64..fb652fc1de4c9e 100644 --- a/src/sentry/static/sentry/app/components/actions/actionLink.tsx +++ b/src/sentry/static/sentry/app/components/actions/actionLink.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import classNames from 'classnames'; import PropTypes from 'prop-types'; diff --git a/src/sentry/static/sentry/app/components/activity/author.tsx b/src/sentry/static/sentry/app/components/activity/author.tsx index c389545c4985ed..780986e62117d1 100644 --- a/src/sentry/static/sentry/app/components/activity/author.tsx +++ b/src/sentry/static/sentry/app/components/activity/author.tsx @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; const ActivityAuthor = styled('span')` font-weight: 600; diff --git a/src/sentry/static/sentry/app/components/activity/item/avatar.jsx b/src/sentry/static/sentry/app/components/activity/item/avatar.jsx index 2b5fb86f3f2db4..f5d1e2b412a661 100644 --- a/src/sentry/static/sentry/app/components/activity/item/avatar.jsx +++ b/src/sentry/static/sentry/app/components/activity/item/avatar.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import UserAvatar from 'app/components/avatar/userAvatar'; import InlineSvg from 'app/components/inlineSvg'; diff --git a/src/sentry/static/sentry/app/components/activity/item/bubble.jsx b/src/sentry/static/sentry/app/components/activity/item/bubble.jsx index 08645babfed446..3b8cdd1fdb4a68 100644 --- a/src/sentry/static/sentry/app/components/activity/item/bubble.jsx +++ b/src/sentry/static/sentry/app/components/activity/item/bubble.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; /** * This creates a bordered box that has a left pointing arrow diff --git a/src/sentry/static/sentry/app/components/activity/item/index.jsx b/src/sentry/static/sentry/app/components/activity/item/index.jsx index d8ec10fd692c3f..1b1451b47ebe56 100644 --- a/src/sentry/static/sentry/app/components/activity/item/index.jsx +++ b/src/sentry/static/sentry/app/components/activity/item/index.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import DateTime from 'app/components/dateTime'; import TimeSince from 'app/components/timeSince'; diff --git a/src/sentry/static/sentry/app/components/activity/note/editorTools.tsx b/src/sentry/static/sentry/app/components/activity/note/editorTools.tsx index b6dbbba94ec69d..b28d9317d0c5ff 100644 --- a/src/sentry/static/sentry/app/components/activity/note/editorTools.tsx +++ b/src/sentry/static/sentry/app/components/activity/note/editorTools.tsx @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; const EditorTools = styled('span')` display: none; diff --git a/src/sentry/static/sentry/app/components/activity/note/header.jsx b/src/sentry/static/sentry/app/components/activity/note/header.jsx index 55e63872d36f0a..8ea7a16802d4fe 100644 --- a/src/sentry/static/sentry/app/components/activity/note/header.jsx +++ b/src/sentry/static/sentry/app/components/activity/note/header.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {t} from 'app/locale'; import ActivityAuthor from 'app/components/activity/author'; diff --git a/src/sentry/static/sentry/app/components/activity/note/index.jsx b/src/sentry/static/sentry/app/components/activity/note/index.jsx index 9ddf6d3c36860d..10f0039543b6f1 100644 --- a/src/sentry/static/sentry/app/components/activity/note/index.jsx +++ b/src/sentry/static/sentry/app/components/activity/note/index.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ActivityItem from 'app/components/activity/item'; import SentryTypes from 'app/sentryTypes'; diff --git a/src/sentry/static/sentry/app/components/activity/note/input.jsx b/src/sentry/static/sentry/app/components/activity/note/input.jsx index 61a63185727577..8fa9aa29ee82b3 100644 --- a/src/sentry/static/sentry/app/components/activity/note/input.jsx +++ b/src/sentry/static/sentry/app/components/activity/note/input.jsx @@ -1,7 +1,7 @@ import {MentionsInput, Mention} from 'react-mentions'; import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {t} from 'app/locale'; import Button from 'app/components/button'; diff --git a/src/sentry/static/sentry/app/components/alert.tsx b/src/sentry/static/sentry/app/components/alert.tsx index cd614b8fcb3422..aab6a9f633bc41 100644 --- a/src/sentry/static/sentry/app/components/alert.tsx +++ b/src/sentry/static/sentry/app/components/alert.tsx @@ -1,9 +1,9 @@ -import {css} from 'emotion'; +import {css} from '@emotion/core'; import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import color from 'color'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import InlineSvg from 'app/components/inlineSvg'; import TextBlock from 'app/views/settings/components/text/textBlock'; diff --git a/src/sentry/static/sentry/app/components/alertLink.tsx b/src/sentry/static/sentry/app/components/alertLink.tsx index cb2c7485c715fc..40f6b337c7ac60 100644 --- a/src/sentry/static/sentry/app/components/alertLink.tsx +++ b/src/sentry/static/sentry/app/components/alertLink.tsx @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import React from 'react'; import {LocationDescriptor} from 'history'; diff --git a/src/sentry/static/sentry/app/components/alertMessage.jsx b/src/sentry/static/sentry/app/components/alertMessage.jsx index e72af5cfa0c019..26b9bf62a9fee0 100644 --- a/src/sentry/static/sentry/app/components/alertMessage.jsx +++ b/src/sentry/static/sentry/app/components/alertMessage.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Alert from 'app/components/alert'; import AlertActions from 'app/actions/alertActions'; diff --git a/src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx b/src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx index 0283e57f22e838..938a555450fbb5 100644 --- a/src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx +++ b/src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import posed from 'react-pose'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {t} from 'app/locale'; import InlineSvg from 'app/components/inlineSvg'; diff --git a/src/sentry/static/sentry/app/components/assigneeSelector.tsx b/src/sentry/static/sentry/app/components/assigneeSelector.tsx index 8e211021cc673f..6e54d38813bbec 100644 --- a/src/sentry/static/sentry/app/components/assigneeSelector.tsx +++ b/src/sentry/static/sentry/app/components/assigneeSelector.tsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Reflux from 'reflux'; import createReactClass from 'create-react-class'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import SentryTypes from 'app/sentryTypes'; import {User} from 'app/types'; diff --git a/src/sentry/static/sentry/app/components/assistant/guideAnchor.jsx b/src/sentry/static/sentry/app/components/assistant/guideAnchor.jsx index 5516dc6fdaaad6..1d952a8a2d948a 100644 --- a/src/sentry/static/sentry/app/components/assistant/guideAnchor.jsx +++ b/src/sentry/static/sentry/app/components/assistant/guideAnchor.jsx @@ -1,7 +1,7 @@ +import {ClassNames} from '@emotion/core'; import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; -import {css} from 'emotion'; +import styled from '@emotion/styled'; import $ from 'jquery'; import createReactClass from 'create-react-class'; import Reflux from 'reflux'; @@ -43,7 +43,7 @@ const GuideAnchor = createReactClass({ registerAnchor(this); }, - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(_prevProps, prevState) { if (this.containerElement && !prevState.active && this.state.active) { const windowHeight = $(window).height(); $('html,body').animate({ @@ -74,7 +74,7 @@ const GuideAnchor = createReactClass({ interpolate(template, variables) { const regex = /\${([^{]+)}/g; - return template.replace(regex, (match, g1) => { + return template.replace(regex, (_match, g1) => { return variables[g1.trim()]; }); }, @@ -124,7 +124,7 @@ const GuideAnchor = createReactClass({ __html: this.interpolate(guide.steps[step].message, messageVariables), }} /> -
+
{step < guide.steps.length - 1 ? ( )}
-
+ ); return ( - - (this.containerElement = el)}>{this.props.children} - + + {({css}) => ( + + (this.containerElement = el)}>{this.props.children} + + )} + ); }, }); @@ -192,4 +196,8 @@ const StyledContent = styled('div')` } `; +const Actions = styled('div')` + margin-top: 1em; +`; + export default GuideAnchor; diff --git a/src/sentry/static/sentry/app/components/assistant/styles.tsx b/src/sentry/static/sentry/app/components/assistant/styles.tsx index 7b545b0d5c210d..fac20479c71ff0 100644 --- a/src/sentry/static/sentry/app/components/assistant/styles.tsx +++ b/src/sentry/static/sentry/app/components/assistant/styles.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import InlineSvg from 'app/components/inlineSvg'; import space from 'app/styles/space'; diff --git a/src/sentry/static/sentry/app/components/asyncComponentSearchInput.tsx b/src/sentry/static/sentry/app/components/asyncComponentSearchInput.tsx index 2bf2b50176af15..d77721560eecdf 100644 --- a/src/sentry/static/sentry/app/components/asyncComponentSearchInput.tsx +++ b/src/sentry/static/sentry/app/components/asyncComponentSearchInput.tsx @@ -1,7 +1,7 @@ import * as ReactRouter from 'react-router'; import debounce from 'lodash/debounce'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Input from 'app/views/settings/components/forms/controls/input'; import LoadingIndicator from 'app/components/loadingIndicator'; diff --git a/src/sentry/static/sentry/app/components/autoSelectText.jsx b/src/sentry/static/sentry/app/components/autoSelectText.jsx index 6f1334af4d92af..8f6f4c20a511b2 100644 --- a/src/sentry/static/sentry/app/components/autoSelectText.jsx +++ b/src/sentry/static/sentry/app/components/autoSelectText.jsx @@ -9,9 +9,8 @@ class AutoSelectText extends React.Component { /** * Can be a `node` for a simple auto select div container. * When children is a render function, it is passed 2 functions: - * - `doMount` - should be applied on parent element's `ref` - * (or `innerRef` for styled components) whose children is the - * text to be copied + * - `doMount` - should be applied on parent element's `ref` whose + * children is the text to be copied * - `doSelect` - selects text */ children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), diff --git a/src/sentry/static/sentry/app/components/avatar/avatarList.tsx b/src/sentry/static/sentry/app/components/avatar/avatarList.tsx index a875577fad372d..4b98adf8f6408f 100644 --- a/src/sentry/static/sentry/app/components/avatar/avatarList.tsx +++ b/src/sentry/static/sentry/app/components/avatar/avatarList.tsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled, {css} from 'react-emotion'; +import styled from '@emotion/styled'; +import {css} from '@emotion/core'; import {User} from 'app/types'; import SentryTypes from 'app/sentryTypes'; diff --git a/src/sentry/static/sentry/app/components/avatar/baseAvatar.tsx b/src/sentry/static/sentry/app/components/avatar/baseAvatar.tsx index 7618b2fdd3eac8..df4a4268534b37 100644 --- a/src/sentry/static/sentry/app/components/avatar/baseAvatar.tsx +++ b/src/sentry/static/sentry/app/components/avatar/baseAvatar.tsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import qs from 'query-string'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import LetterAvatar from 'app/components/letterAvatar'; import Tooltip from 'app/components/tooltip'; diff --git a/src/sentry/static/sentry/app/components/avatar/gravatar.tsx b/src/sentry/static/sentry/app/components/avatar/gravatar.tsx index c3de9f0ae8baee..547319afbdda39 100644 --- a/src/sentry/static/sentry/app/components/avatar/gravatar.tsx +++ b/src/sentry/static/sentry/app/components/avatar/gravatar.tsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import qs from 'query-string'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ConfigStore from 'app/stores/configStore'; import {callIfFunction} from 'app/utils/callIfFunction'; diff --git a/src/sentry/static/sentry/app/components/avatar/styles.tsx b/src/sentry/static/sentry/app/components/avatar/styles.tsx index 2323a6081f693d..5772e12863d355 100644 --- a/src/sentry/static/sentry/app/components/avatar/styles.tsx +++ b/src/sentry/static/sentry/app/components/avatar/styles.tsx @@ -1,4 +1,6 @@ -export const imageStyle = (props: {round?: boolean}) => ` +import {css} from '@emotion/core'; + +export const imageStyle = (props: {round?: boolean}) => css` position: absolute; top: 0px; left: 0px; diff --git a/src/sentry/static/sentry/app/components/avatarChooser.jsx b/src/sentry/static/sentry/app/components/avatarChooser.jsx index f6c1371d347e33..936813a2bd4d02 100644 --- a/src/sentry/static/sentry/app/components/avatarChooser.jsx +++ b/src/sentry/static/sentry/app/components/avatarChooser.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import RadioGroup from 'app/views/settings/components/forms/controls/radioGroup'; import {t} from 'app/locale'; diff --git a/src/sentry/static/sentry/app/components/avatarCropper.tsx b/src/sentry/static/sentry/app/components/avatarCropper.tsx index 3ff7c8d2728a44..9bc7d57cdf3c81 100644 --- a/src/sentry/static/sentry/app/components/avatarCropper.tsx +++ b/src/sentry/static/sentry/app/components/avatarCropper.tsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {addErrorMessage} from 'app/actionCreators/indicator'; import {AVATAR_URL_MAP} from 'app/constants'; @@ -368,7 +368,7 @@ class AvatarCropper extends React.Component { return ( - + { return ( {!src && uploader} - {src && } + {src && } {this.renderImageCrop()}
{src && {t('Change Photo')}} { +class CommitRow extends React.Component { static propTypes = { commit: PropTypes.object, customAvatar: PropTypes.node, @@ -65,12 +65,12 @@ export default class CommitRow extends React.Component { } render() { - const {commit, customAvatar} = this.props; + const {commit, customAvatar, ...props} = this.props; const {id, dateCreated, message, author, repository} = commit; const nonMemberEmail = author && author.id === undefined; return ( - + {customAvatar ? ( customAvatar ) : nonMemberEmail ? ( @@ -152,3 +152,7 @@ const Meta = styled(TextOverflow)` margin: 0; color: ${p => p.theme.gray3}; `; + +export default styled(CommitRow)` + align-items: center; +`; diff --git a/src/sentry/static/sentry/app/components/contextPickerModal.tsx b/src/sentry/static/sentry/app/components/contextPickerModal.tsx index 5631ee571a5cc4..1efa1ba35141d8 100644 --- a/src/sentry/static/sentry/app/components/contextPickerModal.tsx +++ b/src/sentry/static/sentry/app/components/contextPickerModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Reflux from 'reflux'; import createReactClass from 'create-react-class'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {Organization, Project} from 'app/types'; import {t} from 'app/locale'; @@ -214,7 +214,7 @@ class ContextPickerModal extends React.Component {
{t('Select an organization/project to continue')}
{needOrg && ( { + ref={ref => { this.orgSelect = ref; if (shouldShowProjectSelector) { return; @@ -232,7 +232,7 @@ class ContextPickerModal extends React.Component { {organization && needProject && projects && ( { + ref={ref => { this.projectSelect = ref; this.focusProjectSelector(); }} diff --git a/src/sentry/static/sentry/app/components/createProject.jsx b/src/sentry/static/sentry/app/components/createProject.jsx index 187cb8f7229c77..b2ce578f149922 100644 --- a/src/sentry/static/sentry/app/components/createProject.jsx +++ b/src/sentry/static/sentry/app/components/createProject.jsx @@ -2,7 +2,7 @@ import {browserHistory} from 'react-router'; import PropTypes from 'prop-types'; import React from 'react'; import * as Sentry from '@sentry/browser'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {inputStyles} from 'app/styles/input'; import {openCreateTeamModal} from 'app/actionCreators/modal'; diff --git a/src/sentry/static/sentry/app/components/customIgnoreCountModal.tsx b/src/sentry/static/sentry/app/components/customIgnoreCountModal.tsx index 9e670c3ca5cc4a..3af0e633273d7c 100644 --- a/src/sentry/static/sentry/app/components/customIgnoreCountModal.tsx +++ b/src/sentry/static/sentry/app/components/customIgnoreCountModal.tsx @@ -1,7 +1,7 @@ import Modal from 'react-bootstrap/lib/Modal'; import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {t} from 'app/locale'; import Button from 'app/components/button'; diff --git a/src/sentry/static/sentry/app/components/debugFileFeature.jsx b/src/sentry/static/sentry/app/components/debugFileFeature.jsx index 679d8b82813c86..8cea629f16b04c 100644 --- a/src/sentry/static/sentry/app/components/debugFileFeature.jsx +++ b/src/sentry/static/sentry/app/components/debugFileFeature.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Tooltip from 'app/components/tooltip'; import InlineSvg from 'app/components/inlineSvg'; diff --git a/src/sentry/static/sentry/app/components/dropdownAutoComplete.jsx b/src/sentry/static/sentry/app/components/dropdownAutoComplete.jsx index 62293790981305..931686d2098254 100644 --- a/src/sentry/static/sentry/app/components/dropdownAutoComplete.jsx +++ b/src/sentry/static/sentry/app/components/dropdownAutoComplete.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import DropdownAutoCompleteMenu from 'app/components/dropdownAutoCompleteMenu'; diff --git a/src/sentry/static/sentry/app/components/dropdownAutoCompleteMenu.jsx b/src/sentry/static/sentry/app/components/dropdownAutoCompleteMenu.jsx index 9994c35974cb11..9c90268407ccf6 100644 --- a/src/sentry/static/sentry/app/components/dropdownAutoCompleteMenu.jsx +++ b/src/sentry/static/sentry/app/components/dropdownAutoCompleteMenu.jsx @@ -2,7 +2,7 @@ import {AutoSizer, List} from 'react-virtualized'; import PropTypes from 'prop-types'; import React from 'react'; import flatMap from 'lodash/flatMap'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import {t} from 'app/locale'; import AutoComplete from 'app/components/autoComplete'; diff --git a/src/sentry/static/sentry/app/components/dropdownBubble.jsx b/src/sentry/static/sentry/app/components/dropdownBubble.jsx index d95fe602d1b64e..84b6ac555441b2 100644 --- a/src/sentry/static/sentry/app/components/dropdownBubble.jsx +++ b/src/sentry/static/sentry/app/components/dropdownBubble.jsx @@ -1,4 +1,5 @@ -import styled, {css} from 'react-emotion'; +import styled from '@emotion/styled'; +import {css} from '@emotion/core'; /** * If `blendCorner` is false, then we apply border-radius to all corners diff --git a/src/sentry/static/sentry/app/components/dropdownButton.jsx b/src/sentry/static/sentry/app/components/dropdownButton.jsx index b3f6aa9a4b66a2..033728ba508b2c 100644 --- a/src/sentry/static/sentry/app/components/dropdownButton.jsx +++ b/src/sentry/static/sentry/app/components/dropdownButton.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Button from 'app/components/button'; import InlineSvg from 'app/components/inlineSvg'; import omit from 'lodash/omit'; @@ -34,7 +34,7 @@ const StyledChevronDown = styled(props => ( const StyledButton = styled( React.forwardRef((props, ref) => { const forwardProps = omit(props, ['isOpen']); - return