Use typed styled-components api in infra plugin

elastic · Mar 28, 2019 · 408eadd · 408eadd
1 parent 60a5840
commit 408eadd
Show file tree

Hide file tree

Showing 42 changed files with 159 additions and 135 deletions.
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
@@ -11,10 +11,10 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -296,11 +296,11 @@ const FixedEuiFieldSearch: React.SFC<
     }
 > = EuiFieldSearch as any;
 
-const AutocompleteContainer = styled.div`
+const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
 
-const SuggestionsPanel = styled(EuiPanel).attrs({
+const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   paddingSize: 'none',
   hasShadow: true,
 })`

diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -7,9 +7,9 @@
 import { EuiIcon } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface SuggestionItemProps {
   isSelected?: boolean;
@@ -44,25 +44,25 @@ export class SuggestionItem extends React.Component<SuggestionItemProps> {
   }
 }
 
-const SuggestionItemContainer = styled.div<{
+const SuggestionItemContainer = euiStyled.div<{
   isSelected?: boolean;
 }>`
   display: flex;
   flex-direction: row;
   font-size: ${props => props.theme.eui.euiFontSizeS};
-  height: ${props => props.theme.eui.euiSizeXl};
+  height: ${props => props.theme.eui.euiSizeXL};
   white-space: nowrap;
   background-color: ${props =>
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
 `;
 
-const SuggestionItemField = styled.div`
+const SuggestionItemField = euiStyled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${props => props.theme.eui.euiSizeXl};
-  padding: ${props => props.theme.eui.euiSizeXs};
+  height: ${props => props.theme.eui.euiSizeXL};
+  padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
@@ -71,7 +71,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${props => props.theme.eui.euiSizeXl};
+  width: ${props => props.theme.eui.euiSizeXL};
 `;
 
 const SuggestionItemTextField = SuggestionItemField.extend`

diff --git a/x-pack/plugins/infra/public/components/empty_states/no_data.tsx b/x-pack/plugins/infra/public/components/empty_states/no_data.tsx
@@ -6,7 +6,8 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoDataProps {
   titleText: string;
@@ -36,6 +37,6 @@ export const NoData: React.SFC<NoDataProps> = ({
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;
diff --git a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx
@@ -6,7 +6,8 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoIndicesProps {
   message: string;
@@ -24,6 +25,6 @@ export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title,
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;
diff --git a/x-pack/plugins/infra/public/components/error_page.tsx b/x-pack/plugins/infra/public/components/error_page.tsx
@@ -14,8 +14,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../common/eui_styled_components';
 import { FlexPage } from './page';
 
 interface Props {
@@ -64,6 +64,6 @@ export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessa
   </FlexPage>
 );
 
-const MinimumPageContent = styled(EuiPageContent)`
+const MinimumPageContent = euiStyled(EuiPageContent)`
   min-width: 50vh;
 `;
diff --git a/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx
@@ -6,9 +6,9 @@
 
 import { EuiPanel } from '@elastic/eui';
 
-import styled from 'styled-components';
+import euiStyled from '../../../../../../common/eui_styled_components';
 
-export const Toolbar = styled(EuiPanel).attrs({
+export const Toolbar = euiStyled(EuiPanel).attrs({
   grow: false,
   paddingSize: 'none',
 })`

diff --git a/x-pack/plugins/infra/public/components/loading/index.tsx b/x-pack/plugins/infra/public/components/loading/index.tsx
@@ -6,7 +6,8 @@
 
 import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface InfraLoadingProps {
   text: string | JSX.Element;
@@ -32,15 +33,15 @@ export class InfraLoadingPanel extends React.PureComponent<InfraLoadingProps, {}
   }
 }
 
-export const InfraLoadingStaticPanel = styled.div`
+export const InfraLoadingStaticPanel = euiStyled.div`
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
 `;
 
-export const InfraLoadingStaticContentPanel = styled.div`
+export const InfraLoadingStaticContentPanel = euiStyled.div`
   flex: 0 0 auto;
   align-self: center;
   text-align: center;

diff --git a/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx
@@ -7,7 +7,8 @@
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface LogCustomizationMenuState {
   isShown: boolean;
@@ -64,6 +65,6 @@ export class LogCustomizationMenu extends React.Component<{}, LogCustomizationMe
   }
 }
 
-const CustomizationMenuContent = styled.div`
+const CustomizationMenuContent = euiStyled.div`
   min-width: 200px;
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_flyout.tsx b/x-pack/plugins/infra/public/components/logging/log_flyout.tsx
@@ -15,7 +15,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraLogItem, InfraLogItemField } from '../../graphql/types';
 import { InfraLoadingPanel } from '../loading';
 interface Props {
@@ -105,7 +106,7 @@ export const LogFlyout = injectI18n(
   }
 );
 
-export const InfraFlyoutLoadingPanel = styled.div`
+export const InfraFlyoutLoadingPanel = euiStyled.div`
   position: absolute;
   top: 0;
   right: 0;

diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
@@ -8,8 +8,8 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { area, curveMonotoneY } from 'd3-shape';
 import max from 'lodash/fp/max';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { SummaryBucket } from './types';
 
 interface DensityChartProps {
@@ -55,14 +55,14 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
   );
 };
 
-const PositiveAreaPath = styled.path`
+const PositiveAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorMediumShade
       : props.theme.eui.euiColorLightShade};
 `;
 
-const NegativeAreaPath = styled.path`
+const NegativeAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorLightShade

diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx
@@ -5,7 +5,8 @@
  */
 
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface HighlightedIntervalProps {
   className?: string;
@@ -35,7 +36,7 @@ export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
 
 HighlightedInterval.displayName = 'HighlightedInterval';
 
-const HighlightPolygon = styled.polygon`
+const HighlightPolygon = euiStyled.polygon`
   fill: ${props => props.theme.eui.euiColorPrimary};
   fill-opacity: 0.3;
   stroke: ${props => props.theme.eui.euiColorPrimary};

diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
@@ -6,8 +6,8 @@
 
 import { scaleLinear } from 'd3-scale';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { LogEntryTime } from '../../../../common/log_entry';
 // import { SearchSummaryBucket } from '../../../../common/log_search_summary';
 import { DensityChart } from './density_chart';
@@ -116,11 +116,11 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
   }
 }
 
-const MinimapBackground = styled.rect`
+const MinimapBackground = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorLightestShade};
 `;
 
-const MinimapBorder = styled.line`
+const MinimapBorder = euiStyled.line`
   stroke: ${props => props.theme.eui.euiColorMediumShade};
   stroke-width: 1px;
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx
@@ -6,8 +6,8 @@
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
 
+import euiStyled, { keyframes } from '../../../../../../common/eui_styled_components';
 import { LogEntryTime } from '../../../../common/log_entry';
 import { SearchSummaryBucket } from '../../../../common/log_search_summary';
 import { SearchMarkerTooltip } from './search_marker_tooltip';
@@ -102,11 +102,11 @@ const fadeInAnimation = keyframes`
   }
 `;
 
-const SearchMarkerGroup = styled.g`
+const SearchMarkerGroup = euiStyled.g`
   animation: ${fadeInAnimation} ${props => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both;
 `;
 
-const SearchMarkerBackgroundRect = styled.rect`
+const SearchMarkerBackgroundRect = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorSecondary};
   opacity: 0;
   transition: opacity ${props => props.theme.eui.euiAnimSpeedNormal} ease-in;
@@ -116,6 +116,6 @@ const SearchMarkerBackgroundRect = styled.rect`
   }
 `;
 
-const SearchMarkerForegroundRect = styled.rect`
+const SearchMarkerForegroundRect = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorSecondary};
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -6,7 +6,8 @@
 
 import { scaleTime } from 'd3-scale';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface TimeRulerProps {
   end: number;
@@ -43,13 +44,13 @@ export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickC
 
 TimeRuler.displayName = 'TimeRuler';
 
-const TimeRulerTickLabel = styled.text`
+const TimeRulerTickLabel = euiStyled.text`
   font-size: ${props => props.theme.eui.euiFontSizeXS};
   line-height: ${props => props.theme.eui.euiLineHeight};
   fill: ${props => props.theme.eui.textColors.subdued};
 `;
 
-const TimeRulerGridLine = styled.line`
+const TimeRulerGridLine = euiStyled.line`
   stroke: ${props =>
     props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade};
   stroke-dasharray: 2, 2;

diff --git a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx
@@ -8,7 +8,8 @@ import { EuiFieldSearch } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface LogSearchInputProps {
   className?: string;
@@ -76,7 +77,7 @@ export const LogSearchInput = injectI18n(
   }
 );
 
-const PlainSearchField = styled(EuiFieldSearch)`
+const PlainSearchField = euiStyled(EuiFieldSearch)`
   background: transparent;
   box-shadow: none;
 

diff --git a/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx
@@ -5,9 +5,10 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import styled from 'styled-components';
 
-export const LogStatusbar = styled(EuiFlexGroup).attrs({
+import euiStyled from '../../../../../common/eui_styled_components';
+
+export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({
   alignItems: 'center',
   gutterSize: 'none',
   justifyContent: 'flexEnd',

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx
@@ -4,11 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import styled from 'styled-components';
-
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { switchProp } from '../../../utils/styles';
 
-export const LogTextStreamItemField = styled.div.attrs<{
+export const LogTextStreamItemField = euiStyled.div.attrs<{
   scale?: 'small' | 'medium' | 'large';
 }>({})`
   font-size: ${props =>