From 4a59228126c279e5664ba87e60f0b6d8071f7932 Mon Sep 17 00:00:00 2001 From: patrykkopycinski Date: Thu, 21 Nov 2019 12:42:09 +0100 Subject: [PATCH] Update styled-components to latest version (#49679) (#51262) --- package.json | 8 +- x-pack/dev-tools/jest/create_jest_config.js | 7 +- x-pack/dev-tools/jest/setup/setup_test.js | 12 + .../eui_styled_components.tsx | 14 +- .../common/eui_styled_components/index.ts | 4 +- .../__test__/__snapshots__/List.test.tsx.snap | 424 +-- .../__test__/__snapshots__/List.test.js.snap | 4 +- .../ServiceOverview.test.tsx.snap | 24 +- .../Waterfall/WaterfallItem.tsx | 6 +- .../__test__/DiscoverErrorButton.test.tsx | 1 - .../__test__/DiscoverErrorLink.test.tsx | 1 - .../DiscoverTransactionButton.test.tsx | 1 - .../__test__/DiscoverTransactionLink.test.tsx | 1 - .../Filter/FilterTitleButton.tsx | 4 +- .../shared/LocalUIFilters/Filter/index.tsx | 11 +- .../Stacktrace/__test__/Stackframe.test.tsx | 1 - .../__snapshots__/Stackframe.test.tsx.snap | 340 ++- .../StickyProperties.test.js.snap | 16 +- .../__snapshots__/CustomPlot.test.js.snap | 532 ++-- .../__snapshots__/Histogram.test.js.snap | 2564 +++++++++-------- .../__snapshots__/Timeline.test.js.snap | 87 +- .../plugins/apm/public/utils/testHelpers.tsx | 1 - .../components/autocomplete_field/index.tsx | 4 +- .../autocomplete_field/suggestion_item.tsx | 6 +- .../legacy/plugins/infra/docs/arch_client.md | 4 +- .../autocomplete_field/autocomplete_field.tsx | 6 +- .../autocomplete_field/suggestion_item.tsx | 6 +- .../public/components/eui/toolbar/toolbar.tsx | 4 +- .../logging/log_highlights_menu.tsx | 6 +- .../logging/log_minimap/log_minimap.tsx | 2 +- .../components/logging/log_statusbar.tsx | 4 +- .../log_text_stream/column_headers.tsx | 10 +- .../log_text_stream/log_entry_column.tsx | 4 +- .../log_entry_field_column.tsx | 10 +- .../log_text_stream/log_entry_icon_column.tsx | 6 +- .../log_entry_message_column.tsx | 8 +- .../logging/log_text_stream/log_entry_row.tsx | 12 +- .../log_entry_timestamp_column.tsx | 8 +- .../scrollable_log_text_stream_view.tsx | 2 +- .../logging/log_text_stream/text_styles.tsx | 14 +- .../log_text_stream/vertical_scroll_panel.tsx | 11 +- .../components/navigation/app_navigation.tsx | 5 +- .../public/components/waffle/group_name.tsx | 4 +- .../components/waffle/group_of_groups.tsx | 2 +- .../infra/public/components/waffle/map.tsx | 5 +- .../infra/public/components/waffle/node.tsx | 6 +- .../pages/logs/stream/page_logs_content.tsx | 2 +- .../infra/public/pages/metrics/index.tsx | 2 +- .../components/autocomplete_field/index.tsx | 4 +- .../public/components/charts/areachart.tsx | 2 +- .../public/components/charts/barchart.tsx | 2 +- .../public/components/charts/common.test.tsx | 1 - .../utility_bar/utility_bar.test.tsx | 1 - .../utility_bar/utility_bar_action.test.tsx | 1 - .../drag_and_drop/draggable_wrapper.tsx | 96 +- .../drag_and_drop/droppable_wrapper.tsx | 2 +- .../draggables/field_badge/index.tsx | 20 +- .../components/edit_data_provider/index.tsx | 6 +- .../embeddables/embeddable_header.tsx | 14 +- .../components/embeddables/embedded_map.tsx | 63 +- .../events_viewer/events_viewer.tsx | 2 +- .../external_link_icon/index.test.tsx | 1 - .../fields_browser/category_columns.test.tsx | 1 - .../fields_browser/category_title.test.tsx | 1 - .../fields_browser/field_browser.tsx | 24 +- .../components/fields_browser/field_name.tsx | 82 +- .../components/fields_browser/index.test.tsx | 1 - .../filters_global/filters_global.tsx | 30 +- .../components/flyout/pane/index.test.tsx | 1 - .../components/header_page/index.test.tsx | 1 - .../components/header_section/index.test.tsx | 1 - .../components/header_section/index.tsx | 21 +- .../components/link_icon/index.test.tsx | 1 - .../siem/public/components/loader/index.tsx | 25 +- .../siem/public/components/loading/index.tsx | 6 +- .../markdown/markdown_hint.test.tsx | 1 - .../__snapshots__/anomaly_score.test.tsx.snap | 6 +- .../components/notes/add_note/index.test.tsx | 1 - .../note_card_body.test.tsx.snap | 492 +++- .../icon_header_columns.test.tsx | 1 - .../siem/public/components/page/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 682 ++++- .../components/paginated_table/index.tsx | 42 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/resize_handle/index.test.tsx | 1 - .../public/components/resize_handle/index.tsx | 26 +- .../components/selectable_text/index.test.tsx | 1 - .../components/skeleton_row/index.test.tsx | 1 - .../public/components/skeleton_row/index.tsx | 40 +- .../__snapshots__/index.test.tsx.snap | 86 +- .../column_headers/events_select/index.tsx | 6 +- .../header/__snapshots__/index.test.tsx.snap | 2 +- .../body/column_headers/header/index.test.tsx | 1 - .../timeline/body/column_headers/index.tsx | 4 +- .../timeline/body/events/stateful_event.tsx | 2 +- .../components/timeline/body/index.test.tsx | 1 - .../data_providers/provider_badge.tsx | 2 +- .../data_providers/provider_item_actions.tsx | 15 +- .../components/timeline/footer/index.tsx | 10 +- .../components/timeline/properties/index.tsx | 6 +- .../search_or_filter/search_or_filter.tsx | 4 +- .../public/components/timeline/styles.tsx | 311 +- .../public/components/timeline/timeline.tsx | 2 +- .../truncatable_text/index.test.tsx | 1 - .../components/with_hover_actions/index.tsx | 2 +- .../plugins/siem/public/pages/home/index.tsx | 2 +- .../navigation/conditional_flex_group.tsx | 10 +- .../monitor_ssl_certificate.test.tsx.snap | 8 +- .../__snapshots__/donut_chart.test.tsx.snap | 35 +- x-pack/package.json | 12 +- x-pack/typings/jest_styled_components.d.ts | 26 + yarn.lock | 419 +-- 112 files changed, 4332 insertions(+), 2563 deletions(-) create mode 100644 x-pack/dev-tools/jest/setup/setup_test.js create mode 100644 x-pack/typings/jest_styled_components.d.ts diff --git a/package.json b/package.json index 5e39fb49721a9..6ce4e5d501086 100644 --- a/package.json +++ b/package.json @@ -336,7 +336,7 @@ "@types/semver": "^5.5.0", "@types/sinon": "^7.0.13", "@types/strip-ansi": "^3.0.0", - "@types/styled-components": "^3.0.2", + "@types/styled-components": "^4.4.0", "@types/supertest": "^2.0.5", "@types/supertest-as-promised": "^2.0.38", "@types/type-detect": "^4.0.1", @@ -361,9 +361,9 @@ "dedent": "^0.7.0", "delete-empty": "^2.0.0", "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.14.0", - "enzyme-adapter-utils": "^1.12.0", - "enzyme-to-json": "^3.3.4", + "enzyme-adapter-react-16": "^1.15.1", + "enzyme-adapter-utils": "^1.12.1", + "enzyme-to-json": "^3.4.3", "eslint": "^6.5.1", "eslint-config-prettier": "^6.4.0", "eslint-plugin-babel": "^5.3.0", diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js index b4d6d82f39ab7..255b8a5e03981 100644 --- a/x-pack/dev-tools/jest/create_jest_config.js +++ b/x-pack/dev-tools/jest/create_jest_config.js @@ -36,7 +36,10 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) { `/dev-tools/jest/setup/polyfills.js`, `/dev-tools/jest/setup/enzyme.js`, ], - setupFilesAfterEnv: [`${kibanaDirectory}/src/dev/jest/setup/mocks.js`], + setupFilesAfterEnv: [ + `/dev-tools/jest/setup/setup_test.js`, + `${kibanaDirectory}/src/dev/jest/setup/mocks.js`, + ], testMatch: ['**/*.test.{js,ts,tsx}'], transform: { '^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`, @@ -49,7 +52,7 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) { ], snapshotSerializers: [ `${kibanaDirectory}/node_modules/enzyme-to-json/serializer`, - `${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts` + `${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts`, ], reporters: [ 'default', diff --git a/x-pack/dev-tools/jest/setup/setup_test.js b/x-pack/dev-tools/jest/setup/setup_test.js new file mode 100644 index 0000000000000..533ea58a561ac --- /dev/null +++ b/x-pack/dev-tools/jest/setup/setup_test.js @@ -0,0 +1,12 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +/* + Global import, so we don't need to remember to import the lib in each file + https://www.npmjs.com/package/jest-styled-components#global-installation +*/ + +import 'jest-styled-components'; diff --git a/x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx b/x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx index 8becf6892ff92..aab16f9d79c4b 100644 --- a/x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx +++ b/x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx @@ -16,16 +16,18 @@ export interface EuiTheme { darkMode: boolean; } -const EuiThemeProvider = ({ +const EuiThemeProvider = < + OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme +>({ darkMode = false, ...otherProps -}: ThemeProviderProps & { +}: Omit, 'theme'> & { darkMode?: boolean; - children?: React.ReactNode; }) => ( ({ + theme={(outerTheme?: OuterTheme) => ({ + ...outerTheme, eui: darkMode ? euiDarkVars : euiLightVars, darkMode, })} @@ -35,9 +37,9 @@ const EuiThemeProvider = ({ const { default: euiStyled, css, - injectGlobal, + createGlobalStyle, keyframes, withTheme, } = (styledComponents as unknown) as ThemedStyledComponentsModule; -export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme }; +export { css, euiStyled, EuiThemeProvider, createGlobalStyle, keyframes, withTheme }; diff --git a/x-pack/legacy/common/eui_styled_components/index.ts b/x-pack/legacy/common/eui_styled_components/index.ts index 9d07b540d4974..9b3ed903627b4 100644 --- a/x-pack/legacy/common/eui_styled_components/index.ts +++ b/x-pack/legacy/common/eui_styled_components/index.ts @@ -9,12 +9,12 @@ import { euiStyled, EuiTheme, EuiThemeProvider, - injectGlobal, + createGlobalStyle, keyframes, withTheme, } from './eui_styled_components'; -export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme }; +export { css, euiStyled, EuiTheme, EuiThemeProvider, createGlobalStyle, keyframes, withTheme }; // In order to to mimic the styled-components module we need to ignore the following // eslint-disable-next-line import/no-default-export export default euiStyled; diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap index c663c52d7d639..32e5fb5b58ae8 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap +++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap @@ -669,18 +669,24 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = ` List should render with data 1`] = `
-
- - - - About to blow up! - - - -
- -
+ + About to blow up! + + + + +
+ - elasticapm.contrib.django.client.capture -
- -
+ +
+ elasticapm.contrib.django.client.capture +
+ + +
+ List should render with data 1`] = ` List should render with data 1`] = `
-
- - - - AssertionError: - - - -
- -
+ + AssertionError: + + + + +
+ - opbeans.views.oopsie -
- -
+ +
+ opbeans.views.oopsie +
+ + +
+ List should render with data 1`] = ` List should render with data 1`] = `
-
- - - - AssertionError: Bad luck! - - - -
- -
+ + AssertionError: Bad luck! + + + + +
+ - opbeans.tasks.update_stats -
- -
+ +
+ opbeans.tasks.update_stats +
+ + +
+ List should render with data 1`] = ` List should render with data 1`] = `
-
- - - - Customer with ID 8517 not found - - - -
- -
+ + Customer with ID 8517 not found + + + + +
+ - opbeans.views.customer -
- -
+ +
+ opbeans.views.customer +
+ + +
+ List should render columns correctly 1`] = ` id="service-name-tooltip" position="top" > - opbeans-python - + `; diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap index 6dcb9140a8bb9..489d4f2908cbe 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap @@ -138,7 +138,15 @@ NodeList [ exports[`Service Overview -> View should render services, when list is not empty 1`] = ` NodeList [ - @@ -236,7 +244,15 @@ NodeList [ , - diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx index c64231a6ded86..339346ae2961e 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx @@ -27,12 +27,10 @@ interface IContainerStyleProps { interface IBarStyleProps { type: ItemType; - left: number; - width: number; color: string; } -const Container = styled('div')` +const Container = styled.div` position: relative; display: block; user-select: none; @@ -50,7 +48,7 @@ const Container = styled('div')` } `; -const ItemBar = styled('div')` +const ItemBar = styled.div` box-sizing: border-box; position: relative; height: ${px(unit)}; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorButton.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorButton.test.tsx index 26f830a3b8efb..33cf05401a729 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorButton.test.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorButton.test.tsx @@ -5,7 +5,6 @@ */ import { shallow, ShallowWrapper } from 'enzyme'; -import 'jest-styled-components'; import React from 'react'; import { APMError } from '../../../../../../typings/es_schemas/ui/APMError'; import { DiscoverErrorLink } from '../DiscoverErrorLink'; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorLink.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorLink.test.tsx index 26f830a3b8efb..33cf05401a729 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorLink.test.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverErrorLink.test.tsx @@ -5,7 +5,6 @@ */ import { shallow, ShallowWrapper } from 'enzyme'; -import 'jest-styled-components'; import React from 'react'; import { APMError } from '../../../../../../typings/es_schemas/ui/APMError'; import { DiscoverErrorLink } from '../DiscoverErrorLink'; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx index 979391f260eda..a16bf389f177c 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx @@ -5,7 +5,6 @@ */ import { shallow } from 'enzyme'; -import 'jest-styled-components'; import React from 'react'; import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction'; import { diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionLink.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionLink.test.tsx index 9b314615f6413..3b876aa5950b4 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionLink.test.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionLink.test.tsx @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import 'jest-styled-components'; import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction'; // @ts-ignore import configureStore from '../../../../../store/config/configureStore'; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx index a257e52ab01cc..d2e9578b45e07 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx @@ -8,12 +8,12 @@ import React from 'react'; import { EuiButtonEmpty, EuiTitle } from '@elastic/eui'; import styled from 'styled-components'; -const Button = styled(EuiButtonEmpty).attrs({ +const Button = styled(EuiButtonEmpty).attrs(() => ({ contentProps: { className: 'alignLeft' }, color: 'text' -})` +}))` width: 100%; .alignLeft { diff --git a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx index 412b92d525aa2..f47bc92567f9f 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx @@ -4,10 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useMemo, useEffect } from 'react'; +import React, { FunctionComponent, useState, useMemo, useEffect } from 'react'; import { EuiTitle, EuiPopover, + EuiPopoverProps, EuiSelectable, EuiSpacer, EuiHorizontalRule, @@ -23,9 +24,11 @@ import { FilterBadgeList } from './FilterBadgeList'; import { unit, px } from '../../../../style/variables'; import { FilterTitleButton } from './FilterTitleButton'; -const Popover = styled(EuiPopover).attrs({ - anchorClassName: 'anchor' -})` +const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs( + () => ({ + anchorClassName: 'anchor' + }) +)` .anchor { display: block; } diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx index 5f6519b7c7b96..b485b4f844f64 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx +++ b/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx @@ -5,7 +5,6 @@ */ import { mount, ReactWrapper, shallow } from 'enzyme'; -import 'jest-styled-components'; import React from 'react'; import { IStackframe } from '../../../../../typings/es_schemas/raw/fields/Stackframe'; import { Stackframe } from '../Stackframe'; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap index 55cec7389dc5c..5b17b124a321d 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap +++ b/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap @@ -394,8 +394,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`] className="c8" > + url.full - + } delay="regular" position="top" @@ -59,9 +59,9 @@ exports[`StickyProperties should render entire component 1`] = ` + http.request.method - + } delay="regular" position="top" @@ -88,9 +88,9 @@ exports[`StickyProperties should render entire component 1`] = ` + error.exception.handled - + } delay="regular" position="top" @@ -117,9 +117,9 @@ exports[`StickyProperties should render entire component 1`] = ` + user.id - + } delay="regular" position="top" diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap index aeef8ed995e92..ff917dd95bf96 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap @@ -6,28 +6,28 @@ Array [ "color": "#3185fc", "disabled": undefined, "onClick": [Function], - "text": + "text": Avg. - + 468 ms - - , + + , }, Object { "color": "#e6c220", "disabled": undefined, "onClick": [Function], - "text": + "text": 95th percentile - , + , }, Object { "color": "#f98510", "disabled": undefined, "onClick": [Function], - "text": + "text": 99th percentile - , + , }, ] `; @@ -2703,66 +2703,112 @@ Array [ display: inline-block; } -
+
- - - Avg. - - 468 ms - - -
-
- - + + + + + Avg. + + + 468 ms + + + + +
+ + - 95th percentile - -
-
- - + + + + + + 95th percentile + + +
+ + - 99th percentile - +
+ + + + + + 99th percentile + + +
+ - , + , ] `; @@ -5077,85 +5123,159 @@ Array [ } } > -
+
- 1502283720 -
-
-
-
- - Avg. -
-
- 438704.4 -
-
-
-
- - 95th -
+
- 1557383.999999999 + 1502283720
-
-
+ +
- - 99th + +
+ + +
+ + + + Avg. +
+ + + +
+ 438704.4 +
+ +
+ + +
+ + +
+ + + + 95th +
+ + + +
+ 1557383.999999999 +
+ +
+ + +
+ + +
+ + + + 99th +
+ + + +
+ 1820377.1200000006 +
+ +
+
+ +
- 1820377.1200000006 -
-
+ className="c10" + /> +
-
-
+
@@ -5740,66 +5860,112 @@ Array [ display: inline-block; } -
+
- - - Avg. - - 468 ms - - -
-
- - + + + + + Avg. + + + 468 ms + + + + +
+ + - 95th percentile - -
-
- - + + + + + + 95th percentile + + +
+ + - 99th percentile - +
+ + + + + + 99th percentile + + +
+ - , + , ] `; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap index 468116b84b6bb..da71e264ac099 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap @@ -19,1400 +19,1402 @@ exports[`Histogram Initially should have default markup 1`] = ` } } > -
+
- - - - - - - + - + + + + + - - + - - - 0 ms - - - - - + + 0 ms + + + - 500 ms - - - - - + + 500 ms + + + - 1,000 ms - - - - - + + 1,000 ms + + + - 1,500 ms - - - - - + + 1,500 ms + + + - 2,000 ms - - - - - + + 2,000 ms + + + - 2,500 ms - - - - - + + 2,500 ms + + + - 3,000 ms - + + + 3,000 ms + + - - - - - 0.0 occ. - - - - - + + 0.0 occ. + + + - 27.5 occ. - - - - - + + 27.5 occ. + + + - 55.0 occ. - + + + 55.0 occ. + + - - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + /> + + +
- + `; @@ -1467,26 +1469,36 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar } } > -
-
- 811 - 927 ms -
+
-
- 49.0 occurrences -
+ +
+ 811 - 927 ms +
+ + +
+ +
+ 49.0 occurrences +
+ +
+ + +
+
-
-
+
`; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap index c1bde70f93429..80baba28fcfdf 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap @@ -540,19 +540,32 @@ exports[`Timeline should render with data 1`] = ` onMouseOut={[Function]} onMouseOver={[Function]} > -
- -
+
+ + + +
+
-
- -
+
+ + + +
+
-
- -
+
+ + + +
+
diff --git a/x-pack/legacy/plugins/apm/public/utils/testHelpers.tsx b/x-pack/legacy/plugins/apm/public/utils/testHelpers.tsx index 60a5f7172b956..751756146b8fe 100644 --- a/x-pack/legacy/plugins/apm/public/utils/testHelpers.tsx +++ b/x-pack/legacy/plugins/apm/public/utils/testHelpers.tsx @@ -9,7 +9,6 @@ import { ReactWrapper } from 'enzyme'; import enzymeToJson from 'enzyme-to-json'; import { Location } from 'history'; -import 'jest-styled-components'; import moment from 'moment'; import { Moment } from 'moment-timezone'; import React from 'react'; diff --git a/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/index.tsx b/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/index.tsx index 3ac2ff72c0116..4270a5ae1ec8d 100644 --- a/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/index.tsx +++ b/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/index.tsx @@ -275,10 +275,10 @@ const AutocompleteContainer = styled.div` position: relative; `; -const SuggestionsPanel = styled(EuiPanel).attrs({ +const SuggestionsPanel = styled(EuiPanel).attrs(() => ({ paddingSize: 'none', hasShadow: true, -})` +}))` position: absolute; width: 100%; margin-top: 2px; diff --git a/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx index 2ae475475829f..a90451c388d7a 100644 --- a/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx @@ -57,7 +57,7 @@ const SuggestionItemField = styled.div` padding: ${props => props.theme.eui.default.euiSizeXs}; `; -const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>` +const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: string }>` background-color: ${props => { return tint(0.1, getEuiIconColor(props.theme, props.suggestionType)); }}; @@ -69,12 +69,12 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str width: ${props => props.theme.eui.default.euiSizeXl}; `; -const SuggestionItemTextField = SuggestionItemField.extend` +const SuggestionItemTextField = styled(SuggestionItemField)` flex: 2 0 0; font-family: ${props => props.theme.eui.default.euiCodeFontFamily}; `; -const SuggestionItemDescriptionField = SuggestionItemField.extend` +const SuggestionItemDescriptionField = styled(SuggestionItemField)` flex: 3 0 0; p { display: inline; diff --git a/x-pack/legacy/plugins/infra/docs/arch_client.md b/x-pack/legacy/plugins/infra/docs/arch_client.md index 2be9de469f0ee..cdc4746357216 100644 --- a/x-pack/legacy/plugins/infra/docs/arch_client.md +++ b/x-pack/legacy/plugins/infra/docs/arch_client.md @@ -14,10 +14,10 @@ The `apps` folder contains the entry point for the UI code, such as for use in K - All components, please use Styled-Components. This also applies to small tweaks to EUI, just use `styled(Component)` and the `attrs` method for always used props. For example: ```jsx -export const Toolbar = styled(EuiPanel).attrs({ +export const Toolbar = styled(EuiPanel).attrs(() => ({ paddingSize: 'none', grow: false, -})` +}))` margin: -2px; `; ``` diff --git a/x-pack/legacy/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/legacy/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx index 255e5b75c1390..c569a5d01a1a4 100644 --- a/x-pack/legacy/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx +++ b/x-pack/legacy/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx @@ -101,7 +101,7 @@ export class AutocompleteField extends React.Component< } } - public componentDidUpdate(prevProps: AutocompleteFieldProps, prevState: AutocompleteFieldState) { + public componentDidUpdate(prevProps: AutocompleteFieldProps) { const hasNewValue = prevProps.value !== this.props.value; const hasNewSuggestions = prevProps.suggestions !== this.props.suggestions; @@ -312,10 +312,10 @@ const AutocompleteContainer = euiStyled.div` position: relative; `; -const SuggestionsPanel = euiStyled(EuiPanel).attrs({ +const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({ paddingSize: 'none', hasShadow: true, -})` +}))` position: absolute; width: 100%; margin-top: 2px; diff --git a/x-pack/legacy/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/legacy/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx index d7c9876a07a8d..6ddcd675487ba 100644 --- a/x-pack/legacy/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/legacy/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -57,7 +57,7 @@ const SuggestionItemField = euiStyled.div` padding: ${props => props.theme.eui.euiSizeXS}; `; -const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>` +const SuggestionItemIconField = euiStyled(SuggestionItemField)<{ suggestionType: string }>` background-color: ${props => transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))}; color: ${props => getEuiIconColor(props.theme, props.suggestionType)}; @@ -66,12 +66,12 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str width: ${props => props.theme.eui.euiSizeXL}; `; -const SuggestionItemTextField = SuggestionItemField.extend` +const SuggestionItemTextField = euiStyled(SuggestionItemField)` flex: 2 0 0; font-family: ${props => props.theme.eui.euiCodeFontFamily}; `; -const SuggestionItemDescriptionField = SuggestionItemField.extend` +const SuggestionItemDescriptionField = euiStyled(SuggestionItemField)` flex: 3 0 0; p { diff --git a/x-pack/legacy/plugins/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/legacy/plugins/infra/public/components/eui/toolbar/toolbar.tsx index 6f1cfc4078ae2..2c3b5cb924e36 100644 --- a/x-pack/legacy/plugins/infra/public/components/eui/toolbar/toolbar.tsx +++ b/x-pack/legacy/plugins/infra/public/components/eui/toolbar/toolbar.tsx @@ -8,10 +8,10 @@ import { EuiPanel } from '@elastic/eui'; import euiStyled from '../../../../../../common/eui_styled_components'; -export const Toolbar = euiStyled(EuiPanel).attrs({ +export const Toolbar = euiStyled(EuiPanel).attrs(() => ({ grow: false, paddingSize: 'none', -})` +}))` border-top: none; border-right: none; border-left: none; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx index 6fcb1779cba0c..24a5e8bacb4f9 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx @@ -149,11 +149,11 @@ const goToNextHighlightLabel = i18n.translate( } ); -const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs({ +const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({ type: 'checkInCircleFilled', size: 'm', - color: props => props.theme.eui.euiColorAccent, -})` + color: theme.eui.euiColorAccent, +}))` padding-left: ${props => props.theme.eui.paddingSizes.xs}; `; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx index 90b1e455d477e..ad47d17fe3db9 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -238,7 +238,7 @@ export class LogMinimap extends React.Component { + ref={node => { this.dragTargetArea = node; }} x={0} diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_statusbar.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_statusbar.tsx index c52ef4a5062dc..4bda5a5a4b009 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_statusbar.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_statusbar.tsx @@ -8,11 +8,11 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import euiStyled from '../../../../../common/eui_styled_components'; -export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({ +export const LogStatusbar = euiStyled(EuiFlexGroup).attrs(() => ({ alignItems: 'center', gutterSize: 'none', justifyContent: 'flexEnd', -})` +}))` padding: ${props => props.theme.eui.euiSizeS}; border-top: ${props => props.theme.eui.euiBorderThin}; max-height: 48px; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx index 56a84d258c907..bf4a09769d254 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx @@ -79,9 +79,9 @@ const LogColumnHeader: React.FunctionComponent<{ ); -const LogColumnHeadersWrapper = euiStyled.div.attrs({ +const LogColumnHeadersWrapper = euiStyled.div.attrs(() => ({ role: 'row', -})` +}))` align-items: stretch; display: flex; flex-direction: row; @@ -95,9 +95,9 @@ const LogColumnHeadersWrapper = euiStyled.div.attrs({ z-index: 1; `; -const LogColumnHeaderWrapper = LogEntryColumn.extend.attrs({ +const LogColumnHeaderWrapper = euiStyled(LogEntryColumn).attrs(() => ({ role: 'columnheader', -})` +}))` align-items: center; display: flex; flex-direction: row; @@ -105,7 +105,7 @@ const LogColumnHeaderWrapper = LogEntryColumn.extend.attrs({ overflow: hidden; `; -const LogColumnHeaderContent = LogEntryColumnContent.extend` +const LogColumnHeaderContent = euiStyled(LogEntryColumnContent)` color: ${props => props.theme.eui.euiTitleColor}; font-size: ${props => props.theme.eui.euiFontSizeS}; font-weight: ${props => props.theme.eui.euiFontWeightSemiBold}; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx index 3df727789da74..643f98018cb0a 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx @@ -22,9 +22,9 @@ interface LogEntryColumnProps { shrinkWeight: number; } -export const LogEntryColumn = euiStyled.div.attrs({ +export const LogEntryColumn = euiStyled.div.attrs(() => ({ role: 'cell', -})` +}))` align-items: stretch; display: flex; flex-basis: ${props => props.baseWidth || '0%'}; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx index cf2f67f3eb126..6252b3a396d1b 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx @@ -8,7 +8,7 @@ import stringify from 'json-stable-stringify'; import { darken, transparentize } from 'polished'; import React, { useMemo } from 'react'; -import styled, { css } from '../../../../../../common/eui_styled_components'; +import euiStyled, { css } from '../../../../../../common/eui_styled_components'; import { isFieldColumn, isHighlightFieldColumn, @@ -83,7 +83,7 @@ const unwrappedContentStyle = css` white-space: pre; `; -const CommaSeparatedLi = styled.li` +const CommaSeparatedLi = euiStyled.li` display: inline; &:not(:last-child) { margin-right: 1ex; @@ -93,11 +93,13 @@ const CommaSeparatedLi = styled.li` } `; -const FieldColumnContent = LogEntryColumnContent.extend.attrs<{ +interface LogEntryColumnContentProps { isHighlighted: boolean; isHovered: boolean; isWrapped?: boolean; -}>({})` +} + +const FieldColumnContent = euiStyled(LogEntryColumnContent)` background-color: ${props => props.theme.eui.euiColorEmptyShade}; text-overflow: ellipsis; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx index 8e55caae738e7..f7d841bcce94f 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx @@ -47,10 +47,12 @@ export const LogEntryDetailsIconColumn: React.FunctionComponent({})` +} + +const IconColumnContent = euiStyled(LogEntryColumnContent)` background-color: ${props => props.theme.eui.euiColorEmptyShade}; overflow: hidden; user-select: none; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx index 3e6b1dc48e89d..11d73736463e2 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx @@ -6,7 +6,7 @@ import React, { memo, useMemo } from 'react'; -import { css } from '../../../../../../common/eui_styled_components'; +import euiStyled, { css } from '../../../../../../common/eui_styled_components'; import { isConstantSegment, isFieldSegment, @@ -62,11 +62,13 @@ const unwrappedContentStyle = css` white-space: pre; `; -const MessageColumnContent = LogEntryColumnContent.extend.attrs<{ +interface MessageColumnContentProps { isHovered: boolean; isHighlighted: boolean; isWrapped?: boolean; -}>({})` +} + +const MessageColumnContent = euiStyled(LogEntryColumnContent)` background-color: ${props => props.theme.eui.euiColorEmptyShade}; text-overflow: ellipsis; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx index ce3c0cf0f5a22..0da601ae52088 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx @@ -103,7 +103,7 @@ export const LogEntryRow = ({ return ( ({ +} + +const LogEntryRowWrapper = euiStyled.div.attrs(() => ({ role: 'row', -})` +}))` align-items: stretch; color: ${props => props.theme.eui.euiTextColor}; display: flex; @@ -204,5 +206,5 @@ const LogEntryRowWrapper = euiStyled.div.attrs<{ justify-content: flex-start; overflow: hidden; - ${props => monospaceTextStyle(props.scale)} + ${props => monospaceTextStyle(props.scale)}; `; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx index 884e5ff0a5bde..8e161367b428d 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx @@ -7,7 +7,7 @@ import { darken, transparentize } from 'polished'; import React, { memo } from 'react'; -import { css } from '../../../../../../common/eui_styled_components'; +import euiStyled, { css } from '../../../../../../common/eui_styled_components'; import { useFormattedTime } from '../../formatted_time'; import { LogEntryColumnContent } from './log_entry_column'; @@ -41,10 +41,12 @@ const hoveredContentStyle = css` color: ${props => props.theme.eui.euiColorFullShade}; `; -const TimestampColumnContent = LogEntryColumnContent.extend.attrs<{ +interface TimestampColumnContentProps { isHovered: boolean; isHighlighted: boolean; -}>({})` +} + +const TimestampColumnContent = euiStyled(LogEntryColumnContent)` color: ${props => props.theme.eui.euiColorDarkShade}; overflow: hidden; text-overflow: clip; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx index fc3c8b3bf2b31..674c3f59ce957 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx @@ -179,7 +179,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent< /> {({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => ( - + css` default: return props.theme.eui.euiFontSize; } - }} + }}; line-height: ${props => props.theme.eui.euiLineHeight}; `; @@ -59,7 +59,7 @@ export const useMeasuredCharacterDimensions = (scale: TextScale) => { const CharacterDimensionsProbe = useMemo( () => () => ( - + X ), @@ -72,11 +72,13 @@ export const useMeasuredCharacterDimensions = (scale: TextScale) => { }; }; -const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs<{ +interface MonospaceCharacterDimensionsProbe { scale: TextScale; -}>({ +} + +const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs(() => ({ 'aria-hidden': true, -})` +}))` visibility: hidden; position: absolute; height: auto; @@ -84,5 +86,5 @@ const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs<{ padding: 0; margin: 0; - ${props => monospaceTextStyle(props.scale)} + ${props => monospaceTextStyle(props.scale)}; `; diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx index 62db9d517c9d2..6daa942be78c8 100644 --- a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx +++ b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx @@ -247,10 +247,7 @@ export class VerticalScrollPanel extends React.PureComponent< style={{ height, width: width + scrollbarOffset }} scrollbarOffset={scrollbarOffset} onScroll={this.handleScroll} - innerRef={ - /* workaround for missing RefObject support in styled-components typings */ - this.scrollRef as any - } + ref={this.scrollRef} > {typeof children === 'function' ? children(this.registerChild) : null} @@ -258,7 +255,11 @@ export class VerticalScrollPanel extends React.PureComponent< } } -const ScrollPanelWrapper = euiStyled.div.attrs<{ scrollbarOffset?: number }>({})` +interface ScrollPanelWrapperProps { + scrollbarOffset?: number; +} + +const ScrollPanelWrapper = euiStyled.div` overflow-x: hidden; overflow-y: scroll; position: relative; diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx index fe3c930f9e08e..79785c11a3ebe 100644 --- a/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx +++ b/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx @@ -25,10 +25,9 @@ const Nav = euiStyled.nav` background: ${props => props.theme.eui.euiColorEmptyShade}; border-bottom: ${props => props.theme.eui.euiBorderThin}; padding: ${props => - `${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`} - + `${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`}; .euiTabs { padding-left: 3px; margin-left: -3px; - } + }; `; diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/group_name.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/group_name.tsx index 511b41d91dd7b..731bcdd52a98e 100644 --- a/x-pack/legacy/plugins/infra/public/components/waffle/group_name.tsx +++ b/x-pack/legacy/plugins/infra/public/components/waffle/group_name.tsx @@ -52,7 +52,7 @@ export class GroupName extends React.PureComponent { const GroupNameContainer = euiStyled.div` position: relative; - text-align: center + text-align: center; font-size: 16px; margin-bottom: 5px; top: 20px; @@ -65,7 +65,7 @@ interface InnerProps { isChild?: boolean; } -const Inner = euiStyled('div')` +const Inner = euiStyled.div` border: 1px solid ${props => props.theme.eui.euiBorderColor}; background-color: ${props => props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade}; diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/group_of_groups.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/group_of_groups.tsx index eaf0ea5e81d57..bf10133d1f16e 100644 --- a/x-pack/legacy/plugins/infra/public/components/waffle/group_of_groups.tsx +++ b/x-pack/legacy/plugins/infra/public/components/waffle/group_of_groups.tsx @@ -51,7 +51,7 @@ export const GroupOfGroups: React.SFC = props => { const GroupOfGroupsContainer = euiStyled.div` margin: 0 10px; - width: 100% + width: 100%; `; const Groups = euiStyled.div` diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/map.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/map.tsx index f15bfff5d283e..14c15cfd0fe3e 100644 --- a/x-pack/legacy/plugins/infra/public/components/waffle/map.tsx +++ b/x-pack/legacy/plugins/infra/public/components/waffle/map.tsx @@ -46,10 +46,7 @@ export const Map: React.SFC = ({ {({ measureRef, content: { width = 0, height = 0 } }) => { const groupsWithLayout = applyWaffleMapLayout(map, width, height); return ( - measureRef(el)} - data-test-subj="waffleMap" - > + measureRef(el)} data-test-subj="waffleMap"> {groupsWithLayout.map(group => { if (isWaffleMapGroupWithGroups(group)) { diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/node.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/node.tsx index 5839d070248cd..8f09a3fdca9cf 100644 --- a/x-pack/legacy/plugins/infra/public/components/waffle/node.tsx +++ b/x-pack/legacy/plugins/infra/public/components/waffle/node.tsx @@ -116,7 +116,7 @@ interface ColorProps { color: string; } -const SquareOuter = euiStyled('div')` +const SquareOuter = euiStyled.div` position: absolute; top: 4px; left: 4px; @@ -127,7 +127,7 @@ const SquareOuter = euiStyled('div')` box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); `; -const SquareInner = euiStyled('div')` +const SquareInner = euiStyled.div` cursor: pointer; position: absolute; top: 0; @@ -161,7 +161,7 @@ const ValueInner = euiStyled.button` } `; -const SquareTextContent = euiStyled('div')` +const SquareTextContent = euiStyled.div` text-align: center; width: 100%; overflow: hidden; diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx index 7e351bfe78952..beb5eb391d368 100644 --- a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx @@ -130,7 +130,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => { {({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => { return ( - + {({ buckets }) => ( diff --git a/x-pack/legacy/plugins/infra/public/pages/metrics/index.tsx b/x-pack/legacy/plugins/infra/public/pages/metrics/index.tsx index 643d943273a81..00be769d572ac 100644 --- a/x-pack/legacy/plugins/infra/public/pages/metrics/index.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/metrics/index.tsx @@ -151,7 +151,7 @@ export const MetricDetail = withMetricPageProviders( {({ measureRef, bounds: { width = 0 } }) => { const w = width ? `${width}px` : `100%`; return ( - + diff --git a/x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx b/x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx index b78f2b0d07d39..124ef26602f35 100644 --- a/x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx @@ -319,10 +319,10 @@ const AutocompleteContainer = euiStyled.div` AutocompleteContainer.displayName = 'AutocompleteContainer'; -const SuggestionsPanel = euiStyled(EuiPanel).attrs({ +const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({ paddingSize: 'none', hasShadow: true, -})` +}))` position: absolute; width: 100%; margin-top: 2px; diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx index 6347b93772b4e..d51f5e081468c 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx @@ -127,7 +127,7 @@ export const AreaChart = React.memo<{ return checkIfAnyValidSeriesExist(areaChart) ? ( {({ measureRef, content: { height, width } }) => ( - + {({ measureRef, content: { height, width } }) => ( - + { diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx index bf13a503838cf..0ae247f5c9dd0 100644 --- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx @@ -7,7 +7,6 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import '../../../mock/ui_settings'; diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx index 7a1c35183e503..74eed8cfabf2d 100644 --- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import '../../../mock/ui_settings'; diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx index 35d54414944f4..0f0e61e0206ec 100644 --- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx +++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx @@ -39,31 +39,43 @@ const Wrapper = styled.div` Wrapper.displayName = 'Wrapper'; const ProviderContainer = styled.div<{ isDragging: boolean }>` - ${({ theme, isDragging }) => css` - &, - &::before, - &::after { - transition: background ${theme.eui.euiAnimSpeedFast} ease, - color ${theme.eui.euiAnimSpeedFast} ease; - } - - ${!isDragging && - ` + &, + &::before, + &::after { + transition: background ${({ theme }) => theme.eui.euiAnimSpeedFast} ease, + color ${({ theme }) => theme.eui.euiAnimSpeedFast} ease; + } + + ${({ isDragging }) => + !isDragging && + css` & { border-radius: 2px; padding: 0 4px 0 8px; position: relative; - z-index: ${theme.eui.euiZLevel0} !important; + z-index: ${({ theme }) => theme.eui.euiZLevel0} !important; &::before { background-image: linear-gradient( 135deg, - ${theme.eui.euiColorMediumShade} 25%, + ${({ theme }) => theme.eui.euiColorMediumShade} 25%, + transparent 25% + ), + linear-gradient( + -135deg, + ${({ theme }) => theme.eui.euiColorMediumShade} 25%, transparent 25% ), - linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%), - linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%), - linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%); + linear-gradient( + 135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorMediumShade} 75% + ), + linear-gradient( + -135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorMediumShade} 75% + ); background-position: 0 0, 1px 0, 1px -1px, 0px 1px; background-size: 2px 2px; bottom: 2px; @@ -87,17 +99,29 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>` .${STATEFUL_EVENT_CSS_CLASS_NAME}:hover &, tr:hover & { - background-color: ${theme.eui.euiColorLightShade}; + background-color: ${({ theme }) => theme.eui.euiColorLightShade}; &::before { background-image: linear-gradient( 135deg, - ${theme.eui.euiColorDarkShade} 25%, + ${({ theme }) => theme.eui.euiColorDarkShade} 25%, + transparent 25% + ), + linear-gradient( + -135deg, + ${({ theme }) => theme.eui.euiColorDarkShade} 25%, transparent 25% ), - linear-gradient(-135deg, ${theme.eui.euiColorDarkShade} 25%, transparent 25%), - linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorDarkShade} 75%), - linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorDarkShade} 75%); + linear-gradient( + 135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorDarkShade} 75% + ), + linear-gradient( + -135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorDarkShade} 75% + ); } } @@ -107,34 +131,46 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>` .${STATEFUL_EVENT_CSS_CLASS_NAME}:focus &:focus, tr:hover &:hover, tr:hover &:focus { - background-color: ${theme.eui.euiColorPrimary}; + background-color: ${({ theme }) => theme.eui.euiColorPrimary}; &, & a, & a:hover { - color: ${theme.eui.euiColorEmptyShade}; + color: ${({ theme }) => theme.eui.euiColorEmptyShade}; } &::before { background-image: linear-gradient( 135deg, - ${theme.eui.euiColorEmptyShade} 25%, + ${({ theme }) => theme.eui.euiColorEmptyShade} 25%, transparent 25% ), - linear-gradient(-135deg, ${theme.eui.euiColorEmptyShade} 25%, transparent 25%), - linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%), - linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%); + linear-gradient( + -135deg, + ${({ theme }) => theme.eui.euiColorEmptyShade} 25%, + transparent 25% + ), + linear-gradient( + 135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorEmptyShade} 75% + ), + linear-gradient( + -135deg, + transparent 75%, + ${({ theme }) => theme.eui.euiColorEmptyShade} 75% + ); } } `} - ${isDragging && - ` + ${({ isDragging }) => + isDragging && + css` & { z-index: 9999 !important; } `} - `} `; ProviderContainer.displayName = 'ProviderContainer'; @@ -192,7 +228,7 @@ const DraggableWrapperComponent = React.memo( ( {(provided, snapshot) => ( diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx index faf65338b4337..5bff59494b9ad 100644 --- a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx @@ -7,19 +7,17 @@ import { rgba } from 'polished'; import * as React from 'react'; import { pure } from 'recompose'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; const Field = styled.div` - ${({ theme }) => css` - background-color: ${theme.eui.euiColorEmptyShade}; - border: ${theme.eui.euiBorderThin}; - box-shadow: 0 2px 2px -1px ${rgba(theme.eui.euiColorMediumShade, 0.3)}, - 0 1px 5px -2px ${rgba(theme.eui.euiColorMediumShade, 0.3)}; - font-size: ${theme.eui.euiFontSizeXS}; - font-weight: ${theme.eui.euiFontWeightSemiBold}; - line-height: ${theme.eui.euiLineHeight}; - padding: ${theme.eui.paddingSizes.xs}; - `} + background-color: ${({ theme }) => theme.eui.euiColorEmptyShade}; + border: ${({ theme }) => theme.eui.euiBorderThin}; + box-shadow: 0 2px 2px -1px ${({ theme }) => rgba(theme.eui.euiColorMediumShade, 0.3)}, + 0 1px 5px -2px ${({ theme }) => rgba(theme.eui.euiColorMediumShade, 0.3)}; + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; + font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold}; + line-height: ${({ theme }) => theme.eui.euiLineHeight}; + padding: ${({ theme }) => theme.eui.paddingSizes.xs}; `; Field.displayName = 'Field'; diff --git a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx index ec6646fc76085..214ac926e8868 100644 --- a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx @@ -18,7 +18,7 @@ import { EuiToolTip, } from '@elastic/eui'; import React, { useEffect, useState, useCallback } from 'react'; -import styled, { injectGlobal } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; import { BrowserFields } from '../../containers/source'; import { OnDataProviderEdited } from '../timeline/events'; @@ -46,11 +46,11 @@ export const HeaderContainer = styled.div` HeaderContainer.displayName = 'HeaderContainer'; -// SIDE EFFECT: the following `injectGlobal` overrides the default styling +// SIDE EFFECT: the following `createGlobalStyle` overrides the default styling // of euiComboBoxOptionsList because it's implemented as a popover, so it's // not selectable as a child of the styled component // eslint-disable-next-line no-unused-expressions -injectGlobal` +createGlobalStyle` .euiComboBoxOptionsList { z-index: 9999; } diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.tsx index dbd9e3f763f92..f2abfdf307fa3 100644 --- a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.tsx +++ b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.tsx @@ -6,15 +6,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; -const Header = styled.header.attrs({ - className: 'siemEmbeddable__header', -})` - ${({ theme }) => css` - border-bottom: ${theme.eui.euiBorderThin}; - padding: ${theme.eui.paddingSizes.m}; - `} +const Header = styled.header.attrs(({ className }) => ({ + className: `siemEmbeddable__header ${className}`, +}))` + border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; + padding: ${({ theme }) => theme.eui.paddingSizes.m}; `; Header.displayName = 'Header'; diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx index 794e26b417012..fa3b95a2c805b 100644 --- a/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx +++ b/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx @@ -34,41 +34,40 @@ interface EmbeddableMapProps { maintainRatio?: boolean; } -const EmbeddableMap = styled.div.attrs({ +const EmbeddableMap = styled.div.attrs(() => ({ className: 'siemEmbeddable__map', -})` - ${({ maintainRatio, theme }) => css` - .embPanel { - border: none; - box-shadow: none; - } - - .mapToolbarOverlay__button { - display: none; - } - - ${maintainRatio && - css` - padding-top: calc(3 / 4 * 100%); //4:3 (standard) ratio - position: relative; - - @media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) { - padding-top: calc(9 / 32 * 100%); //32:9 (ultra widescreen) ratio - } +}))` + .embPanel { + border: none; + box-shadow: none; + } - @media only screen and (min-width: 1441px) and (min-height: 901px) { - padding-top: calc(9 / 21 * 100%); //21:9 (ultrawide) ratio - } + .mapToolbarOverlay__button { + display: none; + } - .embPanel { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - } - `} - `} + ${({ maintainRatio }) => + maintainRatio && + css` + padding-top: calc(3 / 4 * 100%); //4:3 (standard) ratio + position: relative; + + @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) { + padding-top: calc(9 / 32 * 100%); //32:9 (ultra widescreen) ratio + } + + @media only screen and (min-width: 1441px) and (min-height: 901px) { + padding-top: calc(9 / 21 * 100%); //21:9 (ultrawide) ratio + } + + .embPanel { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } + `} `; EmbeddableMap.displayName = 'EmbeddableMap'; diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx index c5c0fe3503561..c868b7950289a 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx @@ -100,7 +100,7 @@ export const EventsViewer = React.memo( {({ measureRef, content: { width = 0 } }) => ( <> - +
` - ${({ theme, width }) => css` - background-color: ${theme.eui.euiColorLightestShade}; - border: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorMediumShade}; - border-radius: ${theme.eui.euiBorderRadius}; - left: 0; - padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}; - position: absolute; - top: calc(100% + ${theme.eui.euiSize}); - width: ${width}px; - z-index: 9990; - `} + background-color: ${({ theme }) => theme.eui.euiColorLightestShade}; + border: ${({ theme }) => theme.eui.euiBorderWidthThin} solid + ${({ theme }) => theme.eui.euiColorMediumShade}; + border-radius: ${({ theme }) => theme.eui.euiBorderRadius}; + left: 0; + padding: ${({ theme }) => theme.eui.paddingSizes.s} ${({ theme }) => theme.eui.paddingSizes.s} + ${({ theme }) => theme.eui.paddingSizes.m}; + position: absolute; + top: calc(100% + ${({ theme }) => theme.eui.euiSize}); + width: ${({ width }) => width}px; + z-index: 9990; `; FieldsBrowserContainer.displayName = 'FieldsBrowserContainer'; diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx index 9c2cf2cb0e0b2..d5d8c54775566 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx @@ -16,7 +16,7 @@ import { EuiToolTip, } from '@elastic/eui'; import React, { useContext } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard'; import { ColumnHeader } from '../timeline/body/column_headers/column_header'; @@ -30,51 +30,55 @@ import * as i18n from './translations'; * The name of a (draggable) field */ export const FieldNameContainer = styled.span` - ${({ theme }) => css` - padding: 5px; - { - border-radius: 4px; - padding: 0 4px 0 8px; - position: relative; + padding: 5px; + { + border-radius: 4px; + padding: 0 4px 0 8px; + position: relative; + + &::before { + background-image: linear-gradient( + 135deg, + ${({ theme }) => theme.eui.euiColorMediumShade} 25%, + transparent 25% + ), + linear-gradient(-135deg, ${({ theme }) => + theme.eui.euiColorMediumShade} 25%, transparent 25%), + linear-gradient(135deg, transparent 75%, ${({ theme }) => + theme.eui.euiColorMediumShade} 75%), + linear-gradient(-135deg, transparent 75%, ${({ theme }) => + theme.eui.euiColorMediumShade} 75%); + background-position: 0 0, 1px 0, 1px -1px, 0px 1px; + background-size: 2px 2px; + bottom: 2px; + content: ''; + display: block; + left: 2px; + position: absolute; + top: 2px; + width: 4px; + } + + &:hover, + &:focus { + transition: background-color 0.7s ease; + background-color: #000; + color: #fff; &::before { background-image: linear-gradient( 135deg, - ${theme.eui.euiColorMediumShade} 25%, + #fff 25%, transparent 25% ), - linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%), - linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%), - linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%); - background-position: 0 0, 1px 0, 1px -1px, 0px 1px; - background-size: 2px 2px; - bottom: 2px; - content: ''; - display: block; - left: 2px; - position: absolute; - top: 2px; - width: 4px; + linear-gradient(-135deg, ${({ theme }) => + theme.eui.euiColorLightestShade} 25%, transparent 25%), + linear-gradient(135deg, transparent 75%, ${({ theme }) => + theme.eui.euiColorLightestShade} 75%), + linear-gradient(-135deg, transparent 75%, ${({ theme }) => + theme.eui.euiColorLightestShade} 75%); } - - &:hover, - &:focus { - transition: background-color 0.7s ease; - background-color: #000; - color: #fff; - - &::before { - background-image: linear-gradient( - 135deg, - #fff 25%, - transparent 25% - ), - linear-gradient(-135deg, ${theme.eui.euiColorLightestShade} 25%, transparent 25%), - linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%), - linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%); - } - } - `} + } `; FieldNameContainer.displayName = 'FieldNameContainer'; diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx index 8948f765b8fbc..e943ca6f3e863 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx @@ -6,7 +6,6 @@ import { mount } from 'enzyme'; import * as React from 'react'; -import 'jest-styled-components'; import { mockBrowserFields } from '../../containers/source/mock'; import { TestProviders } from '../../mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx index 892c160d054bd..bdda8497a8bcb 100644 --- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx +++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx @@ -18,25 +18,23 @@ const disableSticky = 'screen and (max-width: ' + euiLightVars.euiBreakpoints.s const disableStickyMq = window.matchMedia(disableSticky); const Wrapper = styled.aside<{ isSticky?: boolean }>` - ${props => css` - position: relative; - z-index: ${props.theme.eui.euiZNavigation}; - background: ${props.theme.eui.euiColorEmptyShade}; - border-bottom: ${props.theme.eui.euiBorderThin}; - padding: ${props.theme.eui.paddingSizes.m} ${gutterTimeline} ${ - props.theme.eui.paddingSizes.m - } ${props.theme.eui.paddingSizes.l}; - - ${props.isSticky && - ` + position: relative; + z-index: ${({ theme }) => theme.eui.euiZNavigation}; + background: ${({ theme }) => theme.eui.euiColorEmptyShade}; + border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; + padding: ${({ theme }) => theme.eui.paddingSizes.m} ${gutterTimeline} ${({ theme }) => + theme.eui.paddingSizes.m} ${({ theme }) => theme.eui.paddingSizes.l}; + + ${({ isSticky }) => + isSticky && + css` top: ${offsetChrome}px !important; `} - @media only ${disableSticky} { - position: static !important; - z-index: ${props.theme.eui.euiZContent} !important; - } - `} + @media only ${disableSticky} { + position: static !important; + z-index: ${({ theme }) => theme.eui.euiZContent} !important; + } `; Wrapper.displayName = 'Wrapper'; diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx index 6681e5a90b1a4..323165aae40d3 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { flyoutHeaderHeight } from '../'; diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx index ae33b63e93d39..9c50a915b7ba8 100644 --- a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx @@ -7,7 +7,6 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import { TestProviders } from '../../mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx index fffeece818d13..4a6da9c80968f 100644 --- a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx @@ -7,7 +7,6 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import { TestProviders } from '../../mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx index e46ae55a57a45..14af10eb6cd9b 100644 --- a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx @@ -15,19 +15,18 @@ interface HeaderProps { border?: boolean; } -const Header = styled.header.attrs({ +const Header = styled.header.attrs(() => ({ className: 'siemHeaderSection', -})` - ${({ border, theme }) => css` - margin-bottom: ${theme.eui.euiSizeL}; - user-select: text; +}))` + margin-bottom: ${({ theme }) => theme.eui.euiSizeL}; + user-select: text; - ${border && - css` - border-bottom: ${theme.eui.euiBorderThin}; - padding-bottom: ${theme.eui.paddingSizes.l}; - `} - `} + ${({ border }) => + border && + css` + border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; + padding-bottom: ${({ theme }) => theme.eui.paddingSizes.l}; + `} `; Header.displayName = 'Header'; diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx index 8e4387f35056e..451db49028ee1 100644 --- a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import { TestProviders } from '../../mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx index 988fa4a677d7a..55628fe2e8d33 100644 --- a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx @@ -18,14 +18,14 @@ import { pure } from 'recompose'; import styled, { css } from 'styled-components'; const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>` - ${({ overlay, overlayBackground, theme }) => css` - padding: ${theme.eui.paddingSizes.m}; + padding: ${({ theme }) => theme.eui.paddingSizes.m}; - ${overlay && - ` - background: ${ - overlayBackground ? rgba(overlayBackground, 0.9) : rgba(theme.eui.euiColorEmptyShade, 0.9) - }; + ${({ overlay, overlayBackground, theme }) => + overlay && + css` + background: ${overlayBackground + ? rgba(overlayBackground, 0.9) + : rgba(theme.eui.euiColorEmptyShade, 0.9)}; bottom: 0; left: 0; position: absolute; @@ -33,22 +33,21 @@ const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>` top: 0; z-index: ${theme.eui.euiZLevel1}; `} - `} `; Aside.displayName = 'Aside'; -const FlexGroup = styled(EuiFlexGroup).attrs({ +const FlexGroup = styled(EuiFlexGroup).attrs(() => ({ alignItems: 'center', direction: 'column', gutterSize: 's', justifyContent: 'center', -})<{ overlay: { overlay?: boolean } }>` +}))<{ overlay: { overlay?: boolean } }>` ${({ overlay }) => overlay && - ` - height: 100%; - `} + css` + height: 100%; + `} `; FlexGroup.displayName = 'FlexGroup'; diff --git a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx index 5b9cb48789739..eb85edce78a8f 100644 --- a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx @@ -7,11 +7,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui'; import * as React from 'react'; import { pure } from 'recompose'; -import styled, { injectGlobal } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; -// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly +// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly // eslint-disable-next-line no-unused-expressions -injectGlobal` +createGlobalStyle` .euiPanel-loading-hide-border { border: none; } diff --git a/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx b/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx index a1d12f0d4e29e..6319af3e6ffa1 100644 --- a/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { MarkdownHint } from './markdown_hint'; diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap index 8760dce2b76df..9813456e41638 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap @@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` } @@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` - + 17 - + , "title": "Max Anomaly Score", }, diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx index a764727e8af26..fc76780ef80c7 100644 --- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { AddNote } from '.'; diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap index 7a8232357d3e1..7e4b6babae449 100644 --- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap @@ -1,7 +1,493 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`NoteCardBody renders correctly against snapshot 1`] = ` - + + + `; diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx index 26dc0ca455f73..e5047662eef67 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx @@ -7,7 +7,6 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep, omit } from 'lodash/fp'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; -import 'jest-styled-components'; import * as React from 'react'; import { ThemeProvider } from 'styled-components'; diff --git a/x-pack/legacy/plugins/siem/public/components/page/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/index.tsx index d211d1513767d..bc701006c3a9c 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/index.tsx @@ -13,11 +13,11 @@ import { EuiIcon, EuiPage, } from '@elastic/eui'; -import styled, { injectGlobal } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; -// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly +// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly // eslint-disable-next-line no-unused-expressions -injectGlobal` +createGlobalStyle` div.app-wrapper { background-color: rgba(0,0,0,0); } diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap index 14c5538843ef5..e000eeb14214e 100644 --- a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap @@ -1,107 +1,593 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Paginated Table Component rendering it renders the default load more table 1`] = ` - - My test supplement. -

- } - headerTitle="Hosts" - headerTooltip="My test tooltip" - headerUnit="Test Unit" - itemsPerRow={ - Array [ - Object { - "numberOfRow": 2, - "text": "2 rows", - }, - Object { - "numberOfRow": 5, - "text": "5 rows", - }, - Object { - "numberOfRow": 10, - "text": "10 rows", - }, - Object { - "numberOfRow": 20, - "text": "20 rows", - }, - Object { - "numberOfRow": 50, - "text": "50 rows", - }, - ] - } - limit={1} - loadPage={[Function]} - loading={false} - pageOfItems={ - Array [ - Object { - "cursor": Object { - "value": "98966fa2013c396155c460d35c0902be", - }, - "host": Object { - "_id": "cPsuhGcB0WOhS6qyTKC0", - "firstSeen": "2018-12-06T15:40:53.319Z", - "name": "elrond.elstc.co", - "os": "Ubuntu", - "version": "18.04.1 LTS (Bionic Beaver)", + +> + + My test supplement. +

+ } + headerTitle="Hosts" + headerTooltip="My test tooltip" + headerUnit="Test Unit" + itemsPerRow={ + Array [ + Object { + "numberOfRow": 2, + "text": "2 rows", + }, + Object { + "numberOfRow": 5, + "text": "5 rows", + }, + Object { + "numberOfRow": 10, + "text": "10 rows", + }, + Object { + "numberOfRow": 20, + "text": "20 rows", + }, + Object { + "numberOfRow": 50, + "text": "50 rows", + }, + ] + } + limit={1} + loadPage={[Function]} + loading={false} + pageOfItems={ + Array [ + Object { + "cursor": Object { + "value": "98966fa2013c396155c460d35c0902be", + }, + "host": Object { + "_id": "cPsuhGcB0WOhS6qyTKC0", + "firstSeen": "2018-12-06T15:40:53.319Z", + "name": "elrond.elstc.co", + "os": "Ubuntu", + "version": "18.04.1 LTS (Bionic Beaver)", + }, + }, + Object { + "cursor": Object { + "value": "aa7ca589f1b8220002f2fc61c64cfbf1", + }, + "host": Object { + "_id": "KwQDiWcB0WOhS6qyXmrW", + "firstSeen": "2018-12-07T14:12:38.560Z", + "name": "siem-kibana", + "os": "Debian GNU/Linux", + "version": "9 (stretch)", + }, + }, + ] + } + showMorePagesIndicator={true} + totalCount={10} + updateActivePage={[Function]} + updateLimitPagination={[Function]} + /> + `; diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx index 7be0c1885811b..aedec1a340bfd 100644 --- a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx @@ -17,7 +17,7 @@ import { } from '@elastic/eui'; import { noop } from 'lodash/fp'; import React, { memo, useState, useEffect } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { Direction } from '../../graphql/types'; import { AuthTableColumns } from '../page/hosts/authentications_table'; @@ -319,37 +319,35 @@ const BasicTable = styled(EuiBasicTable)` BasicTable.displayName = 'BasicTable'; -const FooterAction = styled(EuiFlexGroup).attrs({ +const FooterAction = styled(EuiFlexGroup).attrs(() => ({ alignItems: 'center', responsive: false, -})` - margin-top: ${props => props.theme.eui.euiSizeXS}; +}))` + margin-top: ${({ theme }) => theme.eui.euiSizeXS}; `; FooterAction.displayName = 'FooterAction'; const PaginationEuiFlexItem = styled(EuiFlexItem)` - ${props => css` - @media only screen and (min-width: ${props.theme.eui.euiBreakpoints.m}) { - .euiButtonIcon:last-child { - margin-left: 28px; - } + @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) { + .euiButtonIcon:last-child { + margin-left: 28px; + } - .euiPagination { - position: relative; - } + .euiPagination { + position: relative; + } - .euiPagination::before { - bottom: 0; - color: ${props.theme.eui.euiButtonColorDisabled}; - content: '\\2026'; - font-size: ${props.theme.eui.euiFontSizeS}; - padding: 5px ${props.theme.eui.euiSizeS}; - position: absolute; - right: ${props.theme.eui.euiSizeL}; - } + .euiPagination::before { + bottom: 0; + color: ${({ theme }) => theme.eui.euiButtonColorDisabled}; + content: '\\2026'; + font-size: ${({ theme }) => theme.eui.euiFontSizeS}; + padding: 5px ${({ theme }) => theme.eui.euiSizeS}; + position: absolute; + right: ${({ theme }) => theme.eui.euiSizeL}; } - `} + } `; PaginationEuiFlexItem.displayName = 'PaginationEuiFlexItem'; diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap index 432abd799b48a..6ae630f363b58 100644 --- a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Resizeable it renders 1`] = ` } diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx index 6bb036a88a9d7..f84276f99315d 100644 --- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { TestProviders } from '../../mock/test_providers'; diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx index 0a6203056fd20..eb3326c2f2cd0 100644 --- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx @@ -7,7 +7,7 @@ import React, { useEffect, useRef } from 'react'; import { fromEvent, Observable, Subscription } from 'rxjs'; import { concatMap, takeUntil } from 'rxjs/operators'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; export type OnResize = ({ delta, id }: { delta: number; id: string }) => void; @@ -42,16 +42,14 @@ interface Props extends ResizeHandleContainerProps { } const ResizeHandleContainer = styled.div` - ${({ bottom, height, left, positionAbsolute, right, theme, top }) => css` - bottom: ${positionAbsolute && bottom}; - cursor: ${resizeCursorStyle}; - height: ${height}; - left: ${positionAbsolute && left}; - position: ${positionAbsolute && 'absolute'}; - right: ${positionAbsolute && right}; - top: ${positionAbsolute && top}; - z-index: ${positionAbsolute && theme.eui.euiZLevel1}; - `} + bottom: ${({ positionAbsolute, bottom }) => positionAbsolute && bottom}; + cursor: ${resizeCursorStyle}; + height: ${({ height }) => height}; + left: ${({ positionAbsolute, left }) => positionAbsolute && left}; + position: ${({ positionAbsolute }) => positionAbsolute && 'absolute'}; + right: ${({ positionAbsolute, right }) => positionAbsolute && right}; + top: ${({ positionAbsolute, top }) => positionAbsolute && top}; + z-index: ${({ positionAbsolute, theme }) => positionAbsolute && theme.eui.euiZLevel1}; `; ResizeHandleContainer.displayName = 'ResizeHandleContainer'; @@ -69,7 +67,7 @@ export const Resizeable = React.memo( const dragEventTargets = useRef>([]); const dragSubscription = useRef(null); const prevX = useRef(0); - const ref = useRef>(React.createRef()); + const ref = useRef(null); const upSubscription = useRef(null); const isResizingRef = useRef(false); @@ -80,7 +78,7 @@ export const Resizeable = React.memo( }; useEffect(() => { const move$ = fromEvent(document, 'mousemove'); - const down$ = fromEvent(ref.current.current!, 'mousedown'); + const down$ = fromEvent(ref.current!, 'mousedown'); const up$ = fromEvent(document, 'mouseup'); drag$.current = down$.pipe(concatMap(() => move$.pipe(takeUntil(up$)))); @@ -131,7 +129,7 @@ export const Resizeable = React.memo( bottom={bottom} data-test-subj="resize-handle-container" height={height} - innerRef={ref.current} + ref={ref} left={left} positionAbsolute={positionAbsolute} right={right} diff --git a/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx index 3ecbfcc630752..95c68d0233c69 100644 --- a/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { SelectableText } from '.'; diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx index b5147d395c738..fc1c6e00edc03 100644 --- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import React from 'react'; import { TestProviders } from '../../mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx index 6359063798ba8..20aea3251d838 100644 --- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx @@ -5,24 +5,22 @@ */ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; interface RowProps { rowHeight?: string; rowPadding?: string; } -const Row = styled.div.attrs({ +const Row = styled.div.attrs(({ rowHeight, rowPadding, theme }) => ({ className: 'siemSkeletonRow', -})` - ${({ rowHeight, rowPadding, theme }) => css` - border-bottom: ${theme.eui.euiBorderThin}; - display: flex; - height: ${rowHeight ? rowHeight : theme.eui.euiSizeXL}; - padding: ${rowPadding - ? rowPadding - : theme.eui.paddingSizes.s + ' ' + theme.eui.paddingSizes.xs}; - `} + rowHeight: rowHeight || theme.eui.euiSizeXL, + rowPadding: rowPadding || `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.xs}`, +}))` + border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; + display: flex; + height: ${({ rowHeight }) => rowHeight}; + padding: ${({ rowPadding }) => rowPadding}; `; Row.displayName = 'Row'; @@ -31,18 +29,18 @@ interface CellProps { cellMargin?: string; } -const Cell = styled.div.attrs({ +const Cell = styled.div.attrs(({ cellColor, cellMargin, theme }) => ({ className: 'siemSkeletonRow__cell', -})` - ${({ cellColor, cellMargin, theme }) => css` - background-color: ${cellColor ? cellColor : theme.eui.euiColorLightestShade}; - border-radius: 2px; - flex: 1; + cellColor: cellColor || theme.eui.euiColorLightestShade, + cellMargin: cellMargin || theme.eui.gutterTypes.gutterSmall, +}))` + background-color: ${({ cellColor }) => cellColor}; + border-radius: 2px; + flex: 1; - & + & { - margin-left: ${cellMargin ? cellMargin : theme.eui.gutterTypes.gutterSmall}; - } - `} + & + & { + margin-left: ${({ cellMargin }) => cellMargin}; + } `; Cell.displayName = 'Cell'; diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index 7475220b56e77..952d92f532c83 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -38,11 +38,11 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] = data-test-subj="stat-item" >

— @@ -292,11 +292,11 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] = data-test-subj="stat-item" >

— @@ -616,11 +616,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default data-test-subj="stat-item" >

1,714 @@ -857,10 +857,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default key="stat-items-field-uniqueDestinationIps" >

2,359 @@ -957,10 +957,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default >

} + handle={} id="@timestamp" onResize={[Function]} positionAbsolute={true} diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx index 69899ece0cea8..ce465ac4f837e 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx @@ -6,7 +6,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; -import 'jest-styled-components'; import * as React from 'react'; import { Direction } from '../../../../../graphql/types'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx index 4bd2bce015252..746de21f6a0a9 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx @@ -115,7 +115,7 @@ export const ColumnHeaders = React.memo( {dropProvided => ( {columnHeaders.map((header, i) => ( @@ -137,7 +137,7 @@ export const ColumnHeaders = React.memo( {...dragProvided.draggableProps} {...dragProvided.dragHandleProps} data-test-subj="draggable-header" - innerRef={dragProvided.innerRef} + ref={dragProvided.innerRef} isDragging={dragSnapshot.isDragging} position="relative" // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291 diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx index d54fe8df28a85..b3ef4b7b39466 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx @@ -200,7 +200,7 @@ export const StatefulEvent = React.memo( { + ref={c => { if (c != null) { divElement.current = c; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx index 86a6ebe22799b..0fb4c4f375684 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx @@ -5,7 +5,6 @@ */ import { mount, ReactWrapper } from 'enzyme'; -import 'jest-styled-components'; import * as React from 'react'; import { mockBrowserFields } from '../../../containers/source/mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx index b7d0f2ff50bc1..59d15bc43e10c 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx @@ -53,7 +53,7 @@ interface ProviderBadgeProps { isEnabled: boolean; isExcluded: boolean; providerId: string; - togglePopover?: () => void; + togglePopover: () => void; val: string | number; operator: QueryOperator; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx index ee9e5f2af654a..121f832221d3e 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx @@ -3,8 +3,13 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { EuiContextMenu, EuiContextMenuPanelDescriptor, EuiPopover } from '@elastic/eui'; -import React from 'react'; +import { + EuiContextMenu, + EuiContextMenuPanelDescriptor, + EuiPopover, + EuiPopoverProps, +} from '@elastic/eui'; +import React, { FunctionComponent } from 'react'; import styled from 'styled-components'; import { BrowserFields } from '../../../containers/source'; @@ -41,7 +46,11 @@ interface OwnProps { value: string | number; } -const MyEuiPopover = styled(EuiPopover)` +const MyEuiPopover = styled((EuiPopover as unknown) as FunctionComponent)< + EuiPopoverProps & { + id?: string; + } +>` height: 100%; user-select: none; `; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx index a0942cbaba091..93f1e484828d2 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx @@ -16,9 +16,10 @@ import { EuiPopover, EuiText, EuiToolTip, + EuiPopoverProps, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useState } from 'react'; import { pure } from 'recompose'; import styled from 'styled-components'; @@ -55,7 +56,12 @@ const LoadingPanelContainer = styled.div` LoadingPanelContainer.displayName = 'LoadingPanelContainer'; -const PopoverRowItems = styled(EuiPopover)` +const PopoverRowItems = styled((EuiPopover as unknown) as FunctionComponent)< + EuiPopoverProps & { + className?: string; + id?: string; + } +>` .euiButtonEmpty__content { padding: 0px 0px; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx index 40ba16c0c128a..ccc222673d7bc 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx @@ -6,7 +6,7 @@ import { EuiAvatar, EuiFlexItem, EuiIcon } from '@elastic/eui'; import React, { useState, useCallback } from 'react'; -import styled, { injectGlobal } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; import { Note } from '../../../lib/note'; import { InputsModelId } from '../../../store/inputs/constants'; @@ -22,10 +22,10 @@ type UpdateTitle = ({ id, title }: { id: string; title: string }) => void; type UpdateDescription = ({ id, description }: { id: string; description: string }) => void; type ToggleLock = ({ linkToId }: { linkToId: InputsModelId }) => void; -// SIDE EFFECT: the following `injectGlobal` overrides `EuiPopover` +// SIDE EFFECT: the following `createGlobalStyle` overrides `EuiPopover` // and `EuiToolTip` global styles: // eslint-disable-next-line no-unused-expressions -injectGlobal` +createGlobalStyle` .euiPopover__panel.euiPopover__panel-isOpen { z-index: 9900 !important; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx index db8909adda239..2d953ce3cfc95 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx @@ -7,7 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiToolTip } from '@elastic/eui'; import * as React from 'react'; import { pure } from 'recompose'; -import styled, { injectGlobal } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; import { StaticIndexPattern } from 'ui/index_patterns'; import { esFilters } from '../../../../../../../../src/plugins/data/public'; @@ -27,7 +27,7 @@ const searchOrFilterPopoverWidth = '352px'; // SIDE EFFECT: the following creates a global class selector // eslint-disable-next-line no-unused-expressions -injectGlobal` +createGlobalStyle` .${timelineSelectModeItemsClassName} { width: 350px !important; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx index 86c470ef4d3a5..856259f11ced9 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx @@ -6,7 +6,7 @@ import { EuiLoadingSpinner } from '@elastic/eui'; import { rgba } from 'polished'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; /** * OFFSET PIXEL VALUES @@ -18,30 +18,28 @@ export const OFFSET_SCROLLBAR = 17; * TIMELINE BODY */ -export const TimelineBody = styled.div.attrs({ - className: 'siemTimeline__body', -})<{ bodyHeight: number }>` - ${({ bodyHeight, theme }) => css` - height: ${bodyHeight + 'px'}; - overflow: auto; - scrollbar-width: thin; - - &::-webkit-scrollbar { - height: ${theme.eui.euiScrollBar}; - width: ${theme.eui.euiScrollBar}; - } +export const TimelineBody = styled.div.attrs(({ className }) => ({ + className: `siemTimeline__body ${className}`, +}))<{ bodyHeight: number }>` + height: ${({ bodyHeight }) => bodyHeight + 'px'}; + overflow: auto; + scrollbar-width: thin; - &::-webkit-scrollbar-thumb { - background-clip: content-box; - background-color: ${rgba(theme.eui.euiColorDarkShade, 0.5)}; - border: ${theme.eui.euiScrollBarCorner} solid transparent; - } + &::-webkit-scrollbar { + height: ${({ theme }) => theme.eui.euiScrollBar}; + width: ${({ theme }) => theme.eui.euiScrollBar}; + } - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background-color: transparent; - } - `} + &::-webkit-scrollbar-thumb { + background-clip: content-box; + background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)}; + border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent; + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: transparent; + } `; TimelineBody.displayName = 'TimelineBody'; @@ -49,39 +47,38 @@ TimelineBody.displayName = 'TimelineBody'; * EVENTS TABLE */ -export const EventsTable = styled.div.attrs({ - className: 'siemEventsTable', +export const EventsTable = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable ${className}`, role: 'table', -})``; +}))``; EventsTable.displayName = 'EventsTable'; /* EVENTS HEAD */ -export const EventsThead = styled.div.attrs({ - className: 'siemEventsTable__thead', +export const EventsThead = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__thead ${className}`, role: 'rowgroup', -})` - ${({ theme }) => css` - background-color: ${theme.eui.euiColorEmptyShade}; - border-bottom: ${theme.eui.euiBorderWidthThick} solid ${theme.eui.euiColorLightShade}; - position: sticky; - top: 0; - z-index: ${theme.eui.euiZLevel1}; - `} +}))` + background-color: ${({ theme }) => theme.eui.euiColorEmptyShade}; + border-bottom: ${({ theme }) => theme.eui.euiBorderWidthThick} solid + ${({ theme }) => theme.eui.euiColorLightShade}; + position: sticky; + top: 0; + z-index: ${({ theme }) => theme.eui.euiZLevel1}; `; EventsThead.displayName = 'EventsThead'; -export const EventsTrHeader = styled.div.attrs({ - className: 'siemEventsTable__trHeader', +export const EventsTrHeader = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__trHeader ${className}`, role: 'row', -})` +}))` display: flex; `; EventsTrHeader.displayName = 'EventsTrHeader'; -export const EventsThGroupActions = styled.div.attrs({ - className: 'siemEventsTable__thGroupActions', -})<{ actionsColumnWidth: number }>` +export const EventsThGroupActions = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__thGroupActions ${className}`, +}))<{ actionsColumnWidth: number }>` display: flex; flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'}; justify-content: space-between; @@ -89,17 +86,17 @@ export const EventsThGroupActions = styled.div.attrs({ `; EventsThGroupActions.displayName = 'EventsThGroupActions'; -export const EventsThGroupData = styled.div.attrs({ - className: 'siemEventsTable__thGroupData', -})` +export const EventsThGroupData = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__thGroupData ${className}`, +}))` display: flex; `; EventsThGroupData.displayName = 'EventsThGroupData'; -export const EventsTh = styled.div.attrs({ - className: 'siemEventsTable__th', +export const EventsTh = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__th ${className}`, role: 'columnheader', -})<{ isDragging?: boolean; position?: string }>` +}))<{ isDragging?: boolean; position?: string }>` align-items: center; display: flex; flex-shrink: 0; @@ -118,66 +115,62 @@ export const EventsTh = styled.div.attrs({ `; EventsTh.displayName = 'EventsTh'; -export const EventsThContent = styled.div.attrs({ - className: 'siemEventsTable__thContent', -})<{ textAlign?: string }>` - ${({ textAlign, theme }) => css` - font-size: ${theme.eui.euiFontSizeXS}; - font-weight: ${theme.eui.euiFontWeightSemiBold}; - line-height: ${theme.eui.euiLineHeight}; - min-width: 0; - padding: ${theme.eui.paddingSizes.xs}; - text-align: ${textAlign}; - width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11 - `} +export const EventsThContent = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__thContent ${className}`, +}))<{ textAlign?: string }>` + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; + font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold}; + line-height: $({ theme }) =>theme.eui.euiLineHeight}; + min-width: 0; + padding: ${({ theme }) => theme.eui.paddingSizes.xs}; + text-align: ${({ textAlign }) => textAlign}; + width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11 `; EventsThContent.displayName = 'EventsThContent'; /* EVENTS BODY */ -export const EventsTbody = styled.div.attrs({ - className: 'siemEventsTable__tbody', +export const EventsTbody = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__tbody ${className}`, role: 'rowgroup', -})` +}))` overflow-x: hidden; `; EventsTbody.displayName = 'EventsTbody'; -export const EventsTrGroup = styled.div.attrs({ - className: 'siemEventsTable__trGroup', -})<{ className?: string }>` - ${({ theme }) => css` - border-bottom: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorLightShade}; +export const EventsTrGroup = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__trGroup ${className}`, +}))<{ className?: string }>` + border-bottom: ${({ theme }) => theme.eui.euiBorderWidthThin} solid + ${({ theme }) => theme.eui.euiColorLightShade}; - &:hover { - background-color: ${theme.eui.euiTableHoverColor}; - } - `} + &:hover { + background-color: ${({ theme }) => theme.eui.euiTableHoverColor}; + } `; EventsTrGroup.displayName = 'EventsTrGroup'; -export const EventsTrData = styled.div.attrs({ - className: 'siemEventsTable__trData', +export const EventsTrData = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__trData ${className}`, role: 'row', -})` +}))` display: flex; `; EventsTrData.displayName = 'EventsTrData'; -export const EventsTrSupplement = styled.div.attrs({ - className: 'siemEventsTable__trSupplement', -})<{ className: string }>` - ${({ theme }) => css` - font-size: ${theme.eui.euiFontSizeXS}; - line-height: ${theme.eui.euiLineHeight}; - padding: 0 ${theme.eui.paddingSizes.xs} 0 ${theme.eui.paddingSizes.xl}; - `} +export const EventsTrSupplement = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__trSupplement ${className}`, +}))<{ className: string }>` + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; + line-height: ${({ theme }) => theme.eui.euiLineHeight}; + padding: 0 ${({ theme }) => theme.eui.paddingSizes.xs} 0 + ${({ theme }) => theme.eui.paddingSizes.xl}; `; EventsTrSupplement.displayName = 'EventsTrSupplement'; -export const EventsTdGroupActions = styled.div.attrs({ - className: 'siemEventsTable__tdGroupActions', -})<{ actionsColumnWidth: number }>` +export const EventsTdGroupActions = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__tdGroupActions ${className}`, +}))<{ actionsColumnWidth: number }>` display: flex; justify-content: space-between; flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'}; @@ -185,17 +178,17 @@ export const EventsTdGroupActions = styled.div.attrs({ `; EventsTdGroupActions.displayName = 'EventsTdGroupActions'; -export const EventsTdGroupData = styled.div.attrs({ - className: 'siemEventsTable__tdGroupData', -})` +export const EventsTdGroupData = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__tdGroupData ${className}`, +}))` display: flex; `; EventsTdGroupData.displayName = 'EventsTdGroupData'; -export const EventsTd = styled.div.attrs({ - className: 'siemEventsTable__td', +export const EventsTd = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__td ${className}`, role: 'cell', -})` +}))` align-items: center; display: flex; flex-shrink: 0; @@ -207,17 +200,15 @@ export const EventsTd = styled.div.attrs({ `; EventsTd.displayName = 'EventsTd'; -export const EventsTdContent = styled.div.attrs({ - className: 'siemEventsTable__tdContent', -})<{ textAlign?: string }>` - ${({ textAlign, theme }) => css` - font-size: ${theme.eui.euiFontSizeXS}; - line-height: ${theme.eui.euiLineHeight}; - min-width: 0; - padding: ${theme.eui.paddingSizes.xs}; - text-align: ${textAlign}; - width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11 - `} +export const EventsTdContent = styled.div.attrs(({ className }) => ({ + className: `siemEventsTable__tdContent ${className}`, +}))<{ textAlign?: string }>` + font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; + line-height: ${({ theme }) => theme.eui.euiLineHeight}; + min-width: 0; + padding: ${({ theme }) => theme.eui.paddingSizes.xs}; + text-align: ${({ textAlign }) => textAlign}; + width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11 `; EventsTdContent.displayName = 'EventsTdContent'; @@ -225,9 +216,9 @@ EventsTdContent.displayName = 'EventsTdContent'; * EVENTS HEADING */ -export const EventsHeading = styled.div.attrs({ - className: 'siemEventsHeading', -})<{ isLoading: boolean }>` +export const EventsHeading = styled.div.attrs(({ className }) => ({ + className: `siemEventsHeading ${className}`, +}))<{ isLoading: boolean }>` align-items: center; display: flex; @@ -237,81 +228,75 @@ export const EventsHeading = styled.div.attrs({ `; EventsHeading.displayName = 'EventsHeading'; -export const EventsHeadingTitleButton = styled.button.attrs({ - className: 'siemEventsHeading__title siemEventsHeading__title--aggregatable', +export const EventsHeadingTitleButton = styled.button.attrs(({ className }) => ({ + className: `siemEventsHeading__title siemEventsHeading__title--aggregatable ${className}`, type: 'button', -})` - ${({ theme }) => css` - align-items: center; - display: flex; - font-weight: inherit; - min-width: 0; - - &:hover, - &:focus { - color: ${theme.eui.euiColorPrimary}; - text-decoration: underline; - } +}))` + align-items: center; + display: flex; + font-weight: inherit; + min-width: 0; - &:hover { - cursor: pointer; - } + &:hover, + &:focus { + color: ${({ theme }) => theme.eui.euiColorPrimary}; + text-decoration: underline; + } - & > * + * { - margin-left: ${theme.eui.euiSizeXS}; - } - `} + &:hover { + cursor: pointer; + } + + & > * + * { + margin-left: ${({ theme }) => theme.eui.euiSizeXS}; + } `; EventsHeadingTitleButton.displayName = 'EventsHeadingTitleButton'; -export const EventsHeadingTitleSpan = styled.span.attrs({ - className: 'siemEventsHeading__title siemEventsHeading__title--notAggregatable', -})` +export const EventsHeadingTitleSpan = styled.span.attrs(({ className }) => ({ + className: `siemEventsHeading__title siemEventsHeading__title--notAggregatable ${className}`, +}))` min-width: 0; `; EventsHeadingTitleSpan.displayName = 'EventsHeadingTitleSpan'; -export const EventsHeadingExtra = styled.div.attrs({ - className: 'siemEventsHeading__extra', -})<{ className?: string }>` - ${({ theme }) => css` - margin-left: auto; - - &.siemEventsHeading__extra--close { - opacity: 0; - transition: all ${theme.eui.euiAnimSpeedNormal} ease; - visibility: hidden; - - .siemEventsTable__th:hover & { - opacity: 1; - visibility: visible; - } - } - `} -`; -EventsHeadingExtra.displayName = 'EventsHeadingExtra'; +export const EventsHeadingExtra = styled.div.attrs(({ className }) => ({ + className: `siemEventsHeading__extra ${className}`, +}))` + margin-left: auto; -export const EventsHeadingHandle = styled.div.attrs({ - className: 'siemEventsHeading__handle', -})` - ${({ theme }) => css` - background-color: ${theme.eui.euiBorderColor}; - height: 100%; + &.siemEventsHeading__extra--close { opacity: 0; - transition: all ${theme.eui.euiAnimSpeedNormal} ease; + transition: all ${({ theme }) => theme.eui.euiAnimSpeedNormal} ease; visibility: hidden; - width: ${theme.eui.euiBorderWidthThick}; - .siemEventsTable__thead:hover & { + .siemEventsTable__th:hover & { opacity: 1; visibility: visible; } + } +`; +EventsHeadingExtra.displayName = 'EventsHeadingExtra'; - &:hover { - background-color: ${theme.eui.euiColorPrimary}; - cursor: col-resize; - } - `} +export const EventsHeadingHandle = styled.div.attrs(({ className }) => ({ + className: `siemEventsHeading__handle ${className}`, +}))` + background-color: ${({ theme }) => theme.eui.euiBorderColor}; + height: 100%; + opacity: 0; + transition: all ${({ theme }) => theme.eui.euiAnimSpeedNormal} ease; + visibility: hidden; + width: ${({ theme }) => theme.eui.euiBorderWidthThick}; + + .siemEventsTable__thead:hover & { + opacity: 1; + visibility: visible; + } + + &:hover { + background-color: ${({ theme }) => theme.eui.euiColorPrimary}; + cursor: col-resize; + } `; EventsHeadingHandle.displayName = 'EventsHeadingHandle'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx index 59469f96d0720..089fb72ff4c85 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx @@ -137,7 +137,7 @@ export const Timeline = React.memo( gutterSize="none" justifyContent="flexStart" > - + props.theme.eui.textColors.default} + color: ${({ theme }) => theme.eui.textColors.default}; height: 100%; position: relative; `; diff --git a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx index eb816876bdba8..2cc98930767dc 100644 --- a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx @@ -59,7 +59,7 @@ const calculateFlyoutHeight = ({ export const HomePage = pure(() => ( {({ measureRef, windowMeasurement: { height: windowHeight = 0 } }) => ( - +
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx b/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx index 80084de743526..0fcd7fa48f73c 100644 --- a/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx @@ -5,14 +5,12 @@ */ import { EuiFlexGroup } from '@elastic/eui'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; export const ConditionalFlexGroup = styled(EuiFlexGroup)` - ${() => css` - @media only screen and (min-width: 1441px) { - flex-direction: row; - } - `} + @media only screen and (min-width: 1441px) { + flex-direction: row; + } `; ConditionalFlexGroup.displayName = 'ConditionalFlexGroup'; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_ssl_certificate.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_ssl_certificate.test.tsx.snap index 56bc101f59dfa..45c24fd11194d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_ssl_certificate.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_ssl_certificate.test.tsx.snap @@ -5,8 +5,12 @@ Array [
, -
@@ -40,13 +61,13 @@ exports[`DonutChart component renders a donut chart 1`] = ` class="euiFlexItem" >
Down 32 @@ -91,7 +112,7 @@ exports[`DonutChart component renders a donut chart 1`] = ` class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow" >
Up 95 diff --git a/x-pack/package.json b/x-pack/package.json index d1596044eece5..c2b1df0b4157d 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -98,7 +98,7 @@ "@types/reduce-reducers": "^0.3.0", "@types/redux-actions": "^2.2.1", "@types/sinon": "^7.0.13", - "@types/styled-components": "^3.0.2", + "@types/styled-components": "^4.4.0", "@types/supertest": "^2.0.5", "@types/tar-fs": "^1.16.1", "@types/tinycolor2": "^1.4.1", @@ -118,9 +118,9 @@ "copy-webpack-plugin": "^5.0.4", "cypress": "^3.5.5", "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.14.0", - "enzyme-adapter-utils": "^1.12.0", - "enzyme-to-json": "^3.3.4", + "enzyme-adapter-react-16": "^1.15.1", + "enzyme-adapter-utils": "^1.12.1", + "enzyme-to-json": "^3.4.3", "execa": "^3.2.0", "fancy-log": "^1.3.2", "fetch-mock": "^7.3.9", @@ -136,7 +136,7 @@ "hapi": "^17.5.3", "jest": "^24.9.0", "jest-cli": "^24.9.0", - "jest-styled-components": "^6.3.3", + "jest-styled-components": "^7.0.0-beta.2", "jsdom": "^12.2.0", "madge": "3.4.4", "mocha": "6.2.1", @@ -333,7 +333,7 @@ "squel": "^5.13.0", "stats-lite": "^2.2.0", "style-it": "^2.1.3", - "styled-components": "3.4.10", + "styled-components": "beta", "suricata-sid-db": "^1.0.2", "tinycolor2": "1.4.1", "tinymath": "1.2.1", diff --git a/x-pack/typings/jest_styled_components.d.ts b/x-pack/typings/jest_styled_components.d.ts new file mode 100644 index 0000000000000..86f82ffb013c7 --- /dev/null +++ b/x-pack/typings/jest_styled_components.d.ts @@ -0,0 +1,26 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +// https://github.com/styled-components/jest-styled-components/issues/264 + +declare namespace jest { + interface AsymmetricMatcher { + $$typeof: Symbol; //eslint-disable-line + sample?: string | RegExp | object | Array | Function; // eslint-disable-line + } + + type Value = string | number | RegExp | AsymmetricMatcher | undefined; + + interface Options { + media?: string; + modifier?: string; + supports?: string; + } + + interface Matchers { + toHaveStyleRule(property: string, value?: Value, options?: Options): R; + } +} diff --git a/yarn.lock b/yarn.lock index c8da0e2ee9613..1f4c2ec69ff42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -87,6 +87,16 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.6.3": + version "7.6.4" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.4.tgz#a4f8437287bf9671b07f483b76e3bb731bc97671" + integrity sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w== + dependencies: + "@babel/types" "^7.6.3" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -304,6 +314,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.0.tgz#3e05d0647432a8326cb28d0de03895ae5a57f39b" integrity sha512-+o2q111WEx4srBs7L9eJmcwi655eD8sXniLqMB93TBK9GrNzGrxDWSjiqz2hLU0Ha8MTXFIP0yd9fNdP+m43ZQ== +"@babel/parser@^7.6.3": + version "7.6.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81" + integrity sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A== + "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -1045,6 +1060,21 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/traverse@^7.4.5": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9" + integrity sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.6.3" + "@babel/helper-function-name" "^7.1.0" + "@babel/helper-split-export-declaration" "^7.4.4" + "@babel/parser" "^7.6.3" + "@babel/types" "^7.6.3" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a" @@ -1063,6 +1093,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.6.3": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09" + integrity sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef" @@ -1407,6 +1446,13 @@ dependencies: "@emotion/memoize" "0.7.3" +"@emotion/is-prop-valid@^0.8.3": + version "0.8.4" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.4.tgz#cf1dcfc1812c226f05e1ba53592eb6b51e734990" + integrity sha512-QBW8h6wVQgeQ55F52rNaprEJxtVR+/ScOP8/V1ScSpPzKqHdFB9QVqby0Z50sqS8mcaeIl5vR1vQpKwJbIS6NQ== + dependencies: + "@emotion/memoize" "0.7.3" + "@emotion/memoize@0.7.2": version "0.7.2" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30" @@ -1462,12 +1508,12 @@ "@emotion/styled-base" "^10.0.23" babel-plugin-emotion "^10.0.23" -"@emotion/stylis@0.8.4": +"@emotion/stylis@0.8.4", "@emotion/stylis@^0.8.4": version "0.8.4" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c" integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ== -"@emotion/unitless@0.7.4": +"@emotion/unitless@0.7.4", "@emotion/unitless@^0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== @@ -3821,6 +3867,14 @@ resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e" integrity sha512-FGd6J1GQ7zvl1GZ3BBev83B7nfak8dqoR2PZ+l5MoisKMpd4xOLhZJC1ugpmk3Rz5F85t6HbOg9mYqXW97BsNA== +"@types/react-native@*": + version "0.60.22" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.22.tgz#ba199a441cb0612514244ffb1d0fe6f04c878575" + integrity sha512-LTXMKEyGA+x4kadmjujX6yAgpcaZutJ01lC7zLJWCULaZg7Qw5/3iOQpwIJRUcOc+a8A2RR7rSxplehVf9IuhA== + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + "@types/react-redux@^6.0.6": version "6.0.6" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-6.0.6.tgz#87f1d0a6ea901b93fcaf95fa57641ff64079d277" @@ -3996,13 +4050,14 @@ dependencies: "@types/node" "*" -"@types/styled-components@^3.0.2": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-3.0.2.tgz#274133bfafaca17f28707b667858bce197ae3b84" - integrity sha512-nG9swaAqmSrUDXyjpE0NxabjVYAGlmtqWXlCpRWRIZBMbTkdcyQULC+ElvTfghTc+1ANJjn6DCyUQirF5a2OOg== +"@types/styled-components@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.0.tgz#15a3d59533fd3a5bd013db4a7c4422ec542c59d2" + integrity sha512-QFl+w3hQJNHE64Or3PXMFpC3HAQDiuQLi5o9m1XPEwYWfgCZtAribO5ksjxnO8U0LG8Parh0ESCgVxo4VfxlHg== dependencies: - "@types/node" "*" "@types/react" "*" + "@types/react-native" "*" + csstype "^2.2.0" "@types/superagent@*": version "3.8.4" @@ -4705,13 +4760,13 @@ aggregate-error@^3.0.0: string.prototype.padstart "^3.0.0" symbol.prototype.description "^1.0.0" -airbnb-prop-types@^2.13.2: - version "2.13.2" - resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz#43147a5062dd2a4a5600e748a47b64004cc5f7fc" - integrity sha512-2FN6DlHr6JCSxPPi25EnqGaXC4OC3/B3k1lCd6MMYrZ51/Gf/1qDfaR+JElzWa+Tl7cY2aYOlsYJGFeQyVHIeQ== +airbnb-prop-types@^2.15.0: + version "2.15.0" + resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef" + integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA== dependencies: - array.prototype.find "^2.0.4" - function.prototype.name "^1.1.0" + array.prototype.find "^2.1.0" + function.prototype.name "^1.1.1" has "^1.0.3" is-regex "^1.0.4" object-is "^1.0.1" @@ -4719,7 +4774,7 @@ airbnb-prop-types@^2.13.2: object.entries "^1.1.0" prop-types "^15.7.2" prop-types-exact "^1.2.0" - react-is "^16.8.6" + react-is "^16.9.0" ajv-errors@^1.0.0: version "1.0.0" @@ -4969,6 +5024,11 @@ ansi-regex@^4.1.0: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997" integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg== +ansi-regex@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75" + integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg== + ansi-styles@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de" @@ -5527,7 +5587,7 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= -array.prototype.find@^2.0.4: +array.prototype.find@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7" integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg== @@ -6115,6 +6175,16 @@ babel-plugin-react-docgen@^3.0.0: resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook-babel7/-/babel-plugin-require-context-hook-babel7-1.0.0.tgz#1273d4cee7e343d0860966653759a45d727e815d" integrity sha512-kez0BAN/cQoyO1Yu1nre1bQSYZEF93Fg7VQiBHFfMWuaZTy7vJSTT4FY68FwHTYG53Nyt0A7vpSObSVxwweQeQ== +"babel-plugin-styled-components@>= 1": + version "1.10.6" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" + integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -6987,14 +7057,6 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" -buffer@^5.0.3: - version "5.0.8" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24" - integrity sha512-xXvjQhVNz50v2nPeoOsNqWCLGfiv4ji/gXZM28jnVwdLJxH4mFyqgqCKfaK9zf1KUbG6zTkjLOy7ou+jSMarGA== - dependencies: - base64-js "^1.0.2" - ieee754 "^1.1.4" - buffer@^5.1.0, buffer@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6" @@ -7332,6 +7394,11 @@ camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + can-use-dom@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a" @@ -9049,14 +9116,14 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" -css-to-react-native@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b" - integrity sha1-z0zEB1WLNHTUuovhos07bOcTEBs= +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== dependencies: + camelize "^1.0.0" css-color-keywords "^1.0.0" - fbjs "^0.8.5" - postcss-value-parser "^3.3.0" + postcss-value-parser "^4.0.2" css-tree@1.0.0-alpha.28: version "1.0.0-alpha.28" @@ -10750,38 +10817,47 @@ envify@^3.0.0: jstransform "^11.0.3" through "~2.3.4" -enzyme-adapter-react-16@^1.14.0: - version "1.14.0" - resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz#204722b769172bcf096cb250d33e6795c1f1858f" - integrity sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA== +enzyme-adapter-react-16@^1.15.1: + version "1.15.1" + resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz#8ad55332be7091dc53a25d7d38b3485fc2ba50d5" + integrity sha512-yMPxrP3vjJP+4wL/qqfkT6JAIctcwKF+zXO6utlGPgUJT2l4tzrdjMDWGd/Pp1BjHBcljhN24OzNEGRteibJhA== dependencies: - enzyme-adapter-utils "^1.12.0" + enzyme-adapter-utils "^1.12.1" + enzyme-shallow-equal "^1.0.0" has "^1.0.3" object.assign "^4.1.0" object.values "^1.1.0" prop-types "^15.7.2" - react-is "^16.8.6" + react-is "^16.10.2" react-test-renderer "^16.0.0-0" semver "^5.7.0" -enzyme-adapter-utils@^1.12.0: - version "1.12.0" - resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz#96e3730d76b872f593e54ce1c51fa3a451422d93" - integrity sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA== +enzyme-adapter-utils@^1.12.1: + version "1.12.1" + resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.1.tgz#e828e0d038e2b1efa4b9619ce896226f85c9dd88" + integrity sha512-KWiHzSjZaLEoDCOxY8Z1RAbUResbqKN5bZvenPbfKtWorJFVETUw754ebkuCQ3JKm0adx1kF8JaiR+PHPiP47g== dependencies: - airbnb-prop-types "^2.13.2" - function.prototype.name "^1.1.0" + airbnb-prop-types "^2.15.0" + function.prototype.name "^1.1.1" object.assign "^4.1.0" - object.fromentries "^2.0.0" + object.fromentries "^2.0.1" prop-types "^15.7.2" - semver "^5.6.0" + semver "^5.7.0" -enzyme-to-json@^3.3.4: - version "3.3.5" - resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz#f8eb82bd3d5941c9d8bc6fd9140030777d17d0af" - integrity sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA== +enzyme-shallow-equal@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz#d8e4603495e6ea279038eef05a4bf4887b55dc69" + integrity sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ== dependencies: - lodash "^4.17.4" + has "^1.0.3" + object-is "^1.0.1" + +enzyme-to-json@^3.4.3: + version "3.4.3" + resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.4.3.tgz#ed4386f48768ed29e2d1a2910893542c34e7e0af" + integrity sha512-jqNEZlHqLdz7OTpXSzzghArSS3vigj67IU/fWkPyl1c0TCj9P5s6Ze0kRkYZWNEoCqCR79xlQbigYlMx5erh8A== + dependencies: + lodash "^4.17.15" enzyme@^3.10.0: version "3.10.0" @@ -10844,41 +10920,23 @@ error@7.0.2, error@^7.0.0, error@^7.0.2: string-template "~0.2.1" xtend "~4.0.0" -es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.5.0: - version "1.13.0" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9" - integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg== +es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.14.2, es-abstract@^1.15.0, es-abstract@^1.4.3, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.7.0, es-abstract@^1.9.0: + version "1.16.0" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.0.tgz#d3a26dc9c3283ac9750dca569586e976d9dcc06d" + integrity sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg== dependencies: es-to-primitive "^1.2.0" function-bind "^1.1.1" has "^1.0.3" + has-symbols "^1.0.0" is-callable "^1.1.4" is-regex "^1.0.4" - object-keys "^1.0.12" - -es-abstract@^1.4.3, es-abstract@^1.9.0: - version "1.12.0" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165" - integrity sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA== - dependencies: - es-to-primitive "^1.1.1" - function-bind "^1.1.1" - has "^1.0.1" - is-callable "^1.1.3" - is-regex "^1.0.4" - -es-abstract@^1.5.1, es-abstract@^1.7.0: - version "1.10.0" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864" - integrity sha512-/uh/DhdqIOSkAWifU+8nG78vlQxdLckUdI/sPgy0VhuXi2qJ7T8czBmqIYtLQVpCIFYafChnsRsB5pyb1JdmCQ== - dependencies: - es-to-primitive "^1.1.1" - function-bind "^1.1.1" - has "^1.0.1" - is-callable "^1.1.3" - is-regex "^1.0.4" + object-inspect "^1.6.0" + object-keys "^1.1.1" + string.prototype.trimleft "^2.1.0" + string.prototype.trimright "^2.1.0" -es-to-primitive@^1.1.1, es-to-primitive@^1.2.0: +es-to-primitive@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377" integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg== @@ -12175,7 +12233,7 @@ fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.16: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9: +fbjs@^0.8.4, fbjs@^0.8.9: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" integrity sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s= @@ -13028,11 +13086,26 @@ function.prototype.name@^1.1.0: function-bind "^1.1.1" is-callable "^1.1.3" +function.prototype.name@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392" + integrity sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q== + dependencies: + define-properties "^1.1.3" + function-bind "^1.1.1" + functions-have-names "^1.1.1" + is-callable "^1.1.4" + functional-red-black-tree@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= +functions-have-names@^1.1.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.0.tgz#83da7583e4ea0c9ac5ff530f73394b033e0bf77d" + integrity sha512-zKXyzksTeaCSw5wIX79iCA40YAa6CJMJgNg9wdkU/ERBrIdPSimPICYiLp65lRbSBqtiHql/HZfS2DyI/AH6tQ== + fuse.js@^3.4.4: version "3.4.5" resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.5.tgz#8954fb43f9729bd5dbcb8c08f251db552595a7a6" @@ -14537,14 +14610,7 @@ has-values@^1.0.0: is-number "^3.0.0" kind-of "^4.0.0" -has@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28" - integrity sha1-hGFzP1OLCDfJNh45qauelwTcLyg= - dependencies: - function-bind "^1.0.2" - -has@^1.0.1, has@^1.0.3, has@~1.0.3: +has@^1.0.0, has@^1.0.1, has@^1.0.3, has@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== @@ -16890,10 +16956,10 @@ jest-specific-snapshot@^2.0.0: dependencies: jest-snapshot "^24.1.0" -jest-styled-components@^6.3.3: - version "6.3.3" - resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-6.3.3.tgz#e15bbda13a6b6ff876d6b783751fe9840860c52a" - integrity sha512-RBMPZSJJSgPDTTJsuYzx5fsij/CULaqQNZOWkn8J/L++rX6P830o2vB9CXGzfQf/bVq9qGr1ZBNoivi+v6JPYg== +jest-styled-components@^7.0.0-beta.2: + version "7.0.0-beta.2" + resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.0-beta.2.tgz#0442a8491a2411ea3fad0b1594214112722c173d" + integrity sha512-0t3FjoCoQPhmHxPZXm/zI9jAVnWGQERVr7hpRjN1EKyEH8R4YE8bPwA0BmA/9UTcL9iznODr1VDmz+9yXylpNw== dependencies: css "^2.2.4" @@ -20407,10 +20473,10 @@ object-hash@^1.1.8, object-hash@^1.3.1: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df" integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA== -object-inspect@^1.6.0, object-inspect@~1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b" - integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ== +object-inspect@^1.6.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67" + integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw== object-inspect@~0.4.0: version "0.4.0" @@ -20422,21 +20488,21 @@ object-inspect@~1.4.0: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.4.1.tgz#37ffb10e71adaf3748d05f713b4c9452f402cbc4" integrity sha512-wqdhLpfCUbEsoEwl3FXwGyv8ief1k/1aUdIPCqVnupM6e8l63BEJdiF/0swtn04/8p05tG/T0FrpTlfwvljOdw== +object-inspect@~1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b" + integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ== + object-is@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6" integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY= -object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.9: +object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.0.9, object-keys@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== -object-keys@^1.0.6: - version "1.0.11" - resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d" - integrity sha1-xUYBd4rVYPEULODgG8yotW0TQm0= - object-keys@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336" @@ -20501,15 +20567,15 @@ object.fromentries@^1.0.0: function-bind "^1.1.1" has "^1.0.1" -object.fromentries@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab" - integrity sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA== +object.fromentries@^2.0.0, object.fromentries@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704" + integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA== dependencies: - define-properties "^1.1.2" - es-abstract "^1.11.0" + define-properties "^1.1.3" + es-abstract "^1.15.0" function-bind "^1.1.1" - has "^1.0.1" + has "^1.0.3" object.getownpropertydescriptors@^2.0.3: version "2.0.3" @@ -21866,6 +21932,11 @@ postcss-value-parser@^4.0.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d" integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ== +postcss-value-parser@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9" + integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ== + postcss-values-parser@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047" @@ -22097,7 +22168,7 @@ prop-types@15.6.1: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -22996,10 +23067,10 @@ react-intl@^2.8.0: intl-relativeformat "^2.1.0" invariant "^2.1.1" -react-is@^16.3.1: - version "16.4.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e" - integrity sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ== +react-is@^16.10.2, react-is@^16.9.0: + version "16.11.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa" + integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw== react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.2, react-is@^16.8.6: version "16.8.6" @@ -24745,6 +24816,11 @@ safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== +safe-buffer@~5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519" + integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg== + safe-json-parse@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-1.0.1.tgz#3e76723e38dfdda13c9b1d29a1e07ffee4b30b57" @@ -26126,16 +26202,7 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -string-width@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.0.0.tgz#5a1690a57cc78211fffd9bf24bbe24d090604eb1" - integrity sha512-rr8CUxBbvOZDUvc5lNIJ+OC1nPVpz+Siw9VBtUjB9b6jZehZLFt0JMCZzShFHIsI8cbhm0EsNIfWJMFV3cu3Ew== - dependencies: - emoji-regex "^7.0.1" - is-fullwidth-code-point "^2.0.0" - strip-ansi "^5.0.0" - -string-width@^3.1.0: +string-width@^3.0.0, string-width@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w== @@ -26145,21 +26212,21 @@ string-width@^3.1.0: strip-ansi "^5.1.0" string-width@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff" - integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ== + version "4.2.0" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5" + integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg== dependencies: emoji-regex "^8.0.0" is-fullwidth-code-point "^3.0.0" - strip-ansi "^5.2.0" + strip-ansi "^6.0.0" string.prototype.matchall@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.0.tgz#66f4d8dd5c6c6cea4dffb55ec5f3184a8dd0dd59" - integrity sha512-/g0YW/cEfXASRHAaLR7VZbTUlxgP14fmCsfSRFG2gvlG2S1q9rBpjYnEy/EIIzY+bjzs2nTfAHJYXmQ+zTnXSQ== + version "3.0.2" + resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.2.tgz#c1fdb23f90058e929a69cfa2e8b12300daefe030" + integrity sha512-hsRe42jQ8+OJej2GVjhnSVodQ3NQgHV0FDD6dW7ZTM22J4uIbuYiAADCCc1tfyN7ocEl/KUUbudM36E2tZcF8w== dependencies: - define-properties "^1.1.2" - es-abstract "^1.12.0" + define-properties "^1.1.3" + es-abstract "^1.14.2" function-bind "^1.1.1" has-symbols "^1.0.0" regexp.prototype.flags "^1.2.0" @@ -26182,7 +26249,16 @@ string.prototype.padstart@^3.0.0: es-abstract "^1.4.3" function-bind "^1.0.2" -string.prototype.trim@^1.1.2, string.prototype.trim@~1.1.2: +string.prototype.trim@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz#75a729b10cfc1be439543dae442129459ce61e3d" + integrity sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.13.0" + function-bind "^1.1.1" + +string.prototype.trim@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea" integrity sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo= @@ -26191,24 +26267,33 @@ string.prototype.trim@^1.1.2, string.prototype.trim@~1.1.2: es-abstract "^1.5.0" function-bind "^1.0.2" +string.prototype.trimleft@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634" + integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw== + dependencies: + define-properties "^1.1.3" + function-bind "^1.1.1" + +string.prototype.trimright@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58" + integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg== + dependencies: + define-properties "^1.1.3" + function-bind "^1.1.1" + string_decoder@0.10, string_decoder@~0.10.x: version "0.10.31" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ= -string_decoder@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.0.tgz#384f322ee8a848e500effde99901bba849c5d403" - integrity sha512-8zQpRF6juocE69ae7CSPmYEGJe4VCXwP6S6dxUWI7i53Gwv54/ec41fiUA+X7BPGGv7fRSQJjBQVa0gomGaOgg== +string_decoder@^1.0.0, string_decoder@^1.1.1: + version "1.3.0" + resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e" + integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA== dependencies: - safe-buffer "~5.1.0" - -string_decoder@^1.1.1: - version "1.2.0" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d" - integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w== - dependencies: - safe-buffer "~5.1.0" + safe-buffer "~5.2.0" string_decoder@~1.1.1: version "1.1.1" @@ -26240,7 +26325,14 @@ stringstream@~0.0.4, stringstream@~0.0.5: resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72" integrity sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA== -strip-ansi@*, strip-ansi@5.2.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: +strip-ansi@*, strip-ansi@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532" + integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w== + dependencies: + ansi-regex "^5.0.0" + +strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae" integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA== @@ -26268,13 +26360,6 @@ strip-ansi@^4.0.0: dependencies: ansi-regex "^3.0.0" -strip-ansi@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.0.0.tgz#f78f68b5d0866c20b2c9b8c61b5298508dc8756f" - integrity sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow== - dependencies: - ansi-regex "^4.0.0" - strip-ansi@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991" @@ -26380,31 +26465,27 @@ style-loader@0.23.1, style-loader@^0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" -styled-components@3.4.10: - version "3.4.10" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1" - integrity sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q== +styled-components@beta: + version "5.0.0-rc.2" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.2.tgz#6c44570ff202f47a1a688d6f1249bc079b10a958" + integrity sha512-dRMU2Ka12F2qbJK6XMDVy1H6KOXpbf7nAKReV0uIikCdW/zbO2K3C+XUCL0EqTVeevugFBJUACZUoTc7ShKsTg== dependencies: - buffer "^5.0.3" - css-to-react-native "^2.0.3" - fbjs "^0.8.16" - hoist-non-react-statics "^2.5.0" - prop-types "^15.5.4" - react-is "^16.3.1" - stylis "^3.5.0" + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.3" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + shallowequal "^1.1.0" stylis-rule-sheet "^0.0.10" - supports-color "^3.2.3" + supports-color "^5.5.0" stylis-rule-sheet@^0.0.10: version "0.0.10" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== -stylis@^3.5.0: - version "3.5.1" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.1.tgz#fd341d59f57f9aeb412bc14c9d8a8670b438e03b" - integrity sha512-yM4PyeHuwhIOUHNJxi1/Mbq8kVLv4AkyE7IYLP/LK0lIFcr3tRa2H1iZlBYKIxOlf+/jruBTe8DdKSyQX9w4OA== - stylus-lookup@^3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd" @@ -26513,7 +26594,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3: +supports-color@^3.1.0, supports-color@^3.1.2: version "3.2.3" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=