Replace style prop with css in src/ folder

elastic · Nov 25, 2024 · de8278a · de8278a
1 parent 1f0f8d2
commit de8278a
Show file tree

Hide file tree

Showing 91 changed files with 153 additions and 155 deletions.
diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
@@ -43,7 +43,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
       <div
         data-test-subj="metric_value"
         className="legacyMtrVis__value"
-        style={{
+        css={{
           ...(style.spec as CSSProperties),
           ...(metric.color ? { color: metric.color } : {}),
         }}
@@ -60,7 +60,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
       {labelConfig.show && (
         <div
           data-test-subj="metric_label"
-          style={{
+          css={{
             ...(labelConfig.style.spec as CSSProperties),
             order: labelConfig.position === 'top' ? -1 : 2,
           }}
@@ -74,7 +74,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
   if (onFilter) {
     return (
       <button
-        style={{ display: 'block' }}
+        css={{ display: 'block' }}
         onClick={() => onFilter()}
         title={i18n.translate('expressionLegacyMetricVis.filterTitle', {
           defaultMessage: 'Click to filter by field',

diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx
@@ -122,7 +122,7 @@ export function withAutoScale<T>(WrappedComponent: ComponentType<T>) {
       <div ref={parentRef} style={autoScaleParams?.containerStyles} css={autoScaleWrapperStyle}>
         <div
           ref={childrenRef}
-          style={{
+          css={{
             transform: `scale(${scale || 0})`,
             ...(parentDimensions.width &&
             scale &&

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -133,7 +133,7 @@ const buildFilterEvent = (rowIdx: number, columnIdx: number, table: Datatable) =
 const getIcon =
   (type: string) =>
   ({ width, height, color }: { width: number; height: number; color: string }) =>
-    <EuiIcon type={type} width={width} height={height} fill={color} style={{ width, height }} />;
+    <EuiIcon type={type} width={width} height={height} fill={color} css={{ width, height }} />;
 
 export interface MetricVisComponentProps {
   data: Datatable;

diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx
@@ -125,7 +125,7 @@ export const getLegendActions = (
         ref={ref}
         role="button"
         aria-pressed="false"
-        style={{
+        css={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx
@@ -103,7 +103,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
       ref={ref}
       role="button"
       aria-pressed="false"
-      style={{
+      css={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -112,7 +112,7 @@ export function MarkerBody({
     return (
       <div
         className="eui-textTruncate"
-        style={{ maxWidth: LINES_MARKER_SIZE * 3 }}
+        css={{ maxWidth: LINES_MARKER_SIZE * 3 }}
         data-test-subj="xyVisAnnotationText"
       >
         {label}
@@ -123,13 +123,13 @@ export function MarkerBody({
     <div
       className="xyDecorationRotatedWrapper"
       data-test-subj="xyVisAnnotationText"
-      style={{
+      css={{
         width: LINES_MARKER_SIZE,
       }}
     >
       <div
         className="eui-textTruncate xyDecorationRotatedWrapper__label"
-        style={{
+        css={{
           maxWidth: LINES_MARKER_SIZE * 3,
         }}
       >

diff --git a/src/plugins/charts/public/static/components/color_picker.tsx b/src/plugins/charts/public/static/components/color_picker.tsx
@@ -197,13 +197,12 @@ export const ColorPicker = ({
               <EuiIcon
                 type="dot"
                 size="l"
-                color={selectedColor}
+                color={color}
                 css={[
                   visColorPickerValueDotStyle,
                   color === selectedColor ? visColorPickerValueDotSelectedStyle : null,
                 ]}
                 className="visColorPicker__valueDot"
-                style={{ color }}
                 data-test-subj={`visColorPickerColor-${color}`}
               />
               <EuiScreenReaderOnly>

diff --git a/src/plugins/charts/public/static/components/warnings.tsx b/src/plugins/charts/public/static/components/warnings.tsx
@@ -86,7 +86,7 @@ export function Warnings({
           )
         }
       >
-        <div style={{ maxWidth: 512 }}>
+        <div css={{ maxWidth: 512 }}>
           {warnings.map((w, i) => (
             <React.Fragment key={i}>
               <div

diff --git a/src/plugins/console/public/application/components/help_popover.tsx b/src/plugins/console/public/application/components/help_popover.tsx
@@ -117,7 +117,7 @@ export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPop
 
         <EuiSpacer size="s" />
 
-        <EuiText style={{ width: 300 }} color="subdued" size="s">
+        <EuiText css={{ width: 300 }} color="subdued" size="s">
           <p>
             {i18n.translate('console.helpPopover.description', {
               defaultMessage:

diff --git a/src/plugins/console/public/application/containers/editor/editor.tsx b/src/plugins/console/public/application/containers/editor/editor.tsx
@@ -135,7 +135,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
         </div>
       ) : null}
       <EuiResizableContainer
-        style={{ height: '100%' }}
+        css={{ height: '100%' }}
         direction={isVerticalLayout ? 'vertical' : 'horizontal'}
         onPanelWidthChange={(sizes) => onPanelSizeChange(sizes)}
         data-test-subj="consoleEditorContainer"
@@ -152,13 +152,13 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
                 grow={true}
                 borderRadius="none"
                 hasShadow={false}
-                style={{ height: '100%' }}
+                css={{ height: '100%' }}
               >
                 <EuiSplitPanel.Inner
                   paddingSize="none"
                   grow={true}
                   className="consoleEditorPanel"
-                  style={{ top: 0, height: 'calc(100% - 40px)' }}
+                  css={{ top: 0, height: 'calc(100% - 40px)' }}
                 >
                   {loading ? (
                     <EditorContentSpinner />
@@ -210,7 +210,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
               tabIndex={0}
               paddingSize="none"
             >
-              <EuiSplitPanel.Outer borderRadius="none" hasShadow={false} style={{ height: '100%' }}>
+              <EuiSplitPanel.Outer borderRadius="none" hasShadow={false} css={{ height: '100%' }}>
                 <EuiSplitPanel.Inner
                   paddingSize="none"
                   css={{ alignContent: 'center', top: 0 }}

diff --git a/src/plugins/console/public/application/containers/history/history.tsx b/src/plugins/console/public/application/containers/history/history.tsx
@@ -160,7 +160,7 @@ export function History() {
       data-test-subj="consoleHistoryPanel"
     >
       <EuiResizableContainer
-        style={{ height: '100%' }}
+        css={{ height: '100%' }}
         direction={isVerticalLayout ? 'vertical' : 'horizontal'}
       >
         {(EuiResizablePanel, EuiResizableButton) => (

diff --git a/...ls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx b/...ls/public/controls/data_controls/options_list_control/components/options_list_popover.tsx
@@ -42,7 +42,7 @@ export const OptionsListPopover = () => {
       <div
         data-test-subj={`optionsList-control-available-options`}
         data-option-count={loading ? 0 : Object.keys(availableOptions ?? {}).length}
-        style={{ width: '100%', height: '100%' }}
+        css={{ width: '100%', height: '100%' }}
       >
         <OptionsListPopoverSuggestions showOnlySelected={showOnlySelected} />
         {!showOnlySelected && invalidSelections && invalidSelections.size !== 0 && (

diff --git a/...ic/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx b/...ic/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx
@@ -56,7 +56,7 @@ export const OptionsListPopoverFooter = () => {
         `}
       >
         {loading && (
-          <div style={{ position: 'absolute', width: '100%' }}>
+          <div css={{ position: 'absolute', width: '100%' }}>
             <EuiProgress
               data-test-subj="optionsList-control-popover-loading"
               size="xs"

diff --git a/...indicator/search_session_indicator/components/search_session_name/search_session_name.tsx b/...indicator/search_session_indicator/components/search_session_name/search_session_name.tsx
@@ -38,7 +38,7 @@ export const SearchSessionName: React.FC<SearchSessionNameProps> = ({ name, edit
       justifyContent={'spaceBetween'}
       gutterSize={'none'}
       // padding to align with compressed input size
-      style={{ paddingTop: 4, paddingBottom: 4 }}
+      css={{ paddingTop: 4, paddingBottom: 4 }}
     >
       <EuiText size={'s'} className={'eui-textTruncate'}>
         <h4 className={'eui-textTruncate'}>{name}</h4>

diff --git a/...ns/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx b/...ns/data_view_editor/public/components/advanced_params_content/advanced_params_section.tsx
@@ -36,7 +36,7 @@ export const AdvancedParamsSection = ({ children, defaultVisible = false }: Prop
             })}
       </EuiButtonEmpty>
 
-      <div style={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
+      <div css={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
         <EuiSpacer size="m" />
         {/* We ned to wrap the children inside a "div" to have our css :first-child rule */}
         <div>{children}</div>

diff --git a/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx b/src/plugins/data_view_editor/public/components/form_fields/type_field.tsx
@@ -32,7 +32,7 @@ interface TypeFieldProps {
 }
 
 const standardSelectItem = (
-  <EuiDescriptionList style={{ whiteSpace: 'nowrap' }} data-test-subj="standardType">
+  <EuiDescriptionList css={{ whiteSpace: 'nowrap' }} data-test-subj="standardType">
     <EuiDescriptionListTitle>
       <FormattedMessage
         id="indexPatternEditor.typeSelect.standardTitle"
@@ -49,7 +49,7 @@ const standardSelectItem = (
 );
 
 const rollupSelectItem = (
-  <EuiDescriptionList style={{ whiteSpace: 'nowrap' }} data-test-subj="rollupType">
+  <EuiDescriptionList css={{ whiteSpace: 'nowrap' }} data-test-subj="rollupType">
     <EuiDescriptionListTitle>
       <FormattedMessage
         id="indexPatternEditor.typeSelect.rollupTitle"

diff --git a/...ins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx b/...ins/data_view_field_editor/public/components/field_editor/advanced_parameters_section.tsx
@@ -35,7 +35,7 @@ export const AdvancedParametersSection = ({ children }: Props) => {
             })}
       </EuiButtonEmpty>
 
-      <div style={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
+      <div css={{ display: isVisible ? 'block' : 'none' }} data-test-subj="advancedSettings">
         <EuiSpacer size="m" />
         {/* We ned to wrap the children inside a "div" to have our css :first-child rule */}
         <div>{children}</div>

diff --git a/...gins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx b/...gins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
@@ -195,7 +195,7 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
         render: (item: IndexedColor) => {
           return (
             <div
-              style={{
+              css={{
                 background: item.background,
                 color: item.text,
               }}

diff --git a/...ield_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx b/...ield_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx
@@ -154,7 +154,7 @@ export class StaticLookupFormatEditor extends DefaultFormatEditor<StaticLookupFo
 
     return (
       <Fragment>
-        <EuiBasicTable items={items} columns={columns} style={{ maxWidth: '400px' }} />
+        <EuiBasicTable items={items} columns={columns} css={{ maxWidth: '400px' }} />
         <EuiSpacer size="m" />
         <EuiButton
           iconType="plusInCircle"

diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
@@ -64,7 +64,7 @@ export class FormatEditor extends PureComponent<FormatEditorProps, FormatEditorS
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
               // ~430 corresponds to "4 lines" of EuiSkeletonText
-              <div style={{ minHeight: 430, marginTop: 8 }}>
+              <div css={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
                   <EuiSkeletonText lines={4} />
                 </EuiDelayRender>

diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview.tsx
@@ -148,7 +148,7 @@ export const FieldPreview = () => {
                   {/* List of other fields in the document */}
                   <EuiResizeObserver onResize={onFieldListResize}>
                     {(resizeRef) => (
-                      <div ref={resizeRef} style={{ flex: 1 }}>
+                      <div ref={resizeRef} css={{ flex: 1 }}>
                         <PreviewFieldList
                           height={fieldListHeight}
                           clearSearch={() => setSearchValue('')}

diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview_empty_prompt.tsx
@@ -13,7 +13,7 @@ import { EuiEmptyPrompt, EuiText, EuiTextColor, EuiFlexGroup, EuiFlexItem } from
 
 export const FieldPreviewEmptyPrompt = () => {
   return (
-    <EuiFlexGroup style={{ height: '100%' }} data-test-subj="emptyPrompt">
+    <EuiFlexGroup css={{ height: '100%' }} data-test-subj="emptyPrompt">
       <EuiFlexItem>
         <EuiEmptyPrompt
           iconType="inspect"

diff --git a/src/plugins/data_view_management/public/components/add_data_prompt.tsx b/src/plugins/data_view_management/public/components/add_data_prompt.tsx
@@ -105,7 +105,7 @@ export const AddDataPrompt: React.FC<AddDataPromptComponentProps> = ({
         return { default: DataViewIllustration };
       })
     ),
-    <EuiPanel color="subdued" style={{ width: 226, height: 206 }} />
+    <EuiPanel color="subdued" css={{ width: 226, height: 206 }} />
   );
 
   return (

diff --git a/...t/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx b/...t/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx
@@ -37,7 +37,7 @@ export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => {
               defaultMessage="Scripted fields can be used in visualizations and displayed in documents. However, they cannot be searched."
             />
             <br />
-            <EuiIcon type="warning" color="warning" style={{ marginRight: '4px' }} />
+            <EuiIcon type="warning" color="warning" css={{ marginRight: '4px' }} />
             <FormattedMessage
               id="indexPatternManagement.editIndexPattern.deprecation"
               tagName="span"

diff --git a/...ent/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/...ent/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
@@ -69,7 +69,7 @@ export class FieldFormatEditor extends PureComponent<
             fallback={
               // We specify minHeight to avoid too mitigate layout shifts while loading an editor
               // ~430 corresponds to "4 lines" of EuiSkeletonText
-              <div style={{ minHeight: 430, marginTop: 8 }}>
+              <div css={{ minHeight: 430, marginTop: 8 }}>
                 <EuiDelayRender>
                   <EuiSkeletonText lines={4} />
                 </EuiDelayRender>

diff --git a/...lugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx b/...lugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx
@@ -411,7 +411,7 @@ export const IndexPatternTable = ({
   return (
     <div data-test-subj="indexPatternTable" role="region" aria-label={title}>
       {isLoadingDataState ? (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div css={{ display: 'flex', justifyContent: 'center' }}>
           <EuiLoadingSpinner size="xxl" />
         </div>
       ) : (

diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
@@ -75,7 +75,7 @@ function DevToolsWrapper({
 
   return (
     <main className="devApp">
-      <EuiTabs style={{ paddingLeft: euiThemeVars.euiSizeS }} size="l">
+      <EuiTabs css={{ paddingLeft: euiThemeVars.euiSizeS }} size="l">
         {devTools.map((currentDevTool) => (
           <EuiTab
             key={currentDevTool.id}

diff --git a/...ation/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx b/...ation/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx
@@ -42,7 +42,7 @@ export default function ESQLToDataViewTransitionModal({
   return (
     <EuiModal
       onClose={() => onClose()}
-      style={{ width: 700 }}
+      css={{ width: 700 }}
       data-test-subj="discover-esql-to-dataview-modal"
     >
       <EuiModalHeader>

diff --git a/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx b/src/plugins/discover/public/application/main/components/total_documents/total_documents.tsx
@@ -28,7 +28,7 @@ export const TotalDocuments = ({
     <EuiText
       grow={false}
       size="s"
-      style={{ paddingRight: 2 }}
+      css={{ paddingRight: 2 }}
       data-test-subj="savedSearchTotalDocuments"
     >
       {isEsqlMode ? (

diff --git a/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx b/src/plugins/discover/public/components/doc_table/components/table_header/table_header.tsx
@@ -47,7 +47,7 @@ export function TableHeader({
 
   return (
     <tr data-test-subj="docTableHeader" className="kbnDocTableHeader">
-      <th style={{ width: '24px' }} />
+      <th css={{ width: '24px' }} />
       {displayedColumns.map((col, index) => {
         return (
           <TableHeaderColumn

diff --git a/src/plugins/discover/public/context_awareness/README.md b/src/plugins/discover/public/context_awareness/README.md
@@ -223,7 +223,7 @@ const getCellRenderers = (prev) => (params) => {
       const blueOrRed = useObservable(blueOrRed$, blueOrRed$.getValue());
 
       // ...and we can react to the changes
-      return <span style={{ color: blueOrRed }}>Look ma, I'm {blueOrRed}!</span>;
+      return <span css={{ color: blueOrRed }}>Look ma, I'm {blueOrRed}!</span>;
     },
   };
 };

diff --git a/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx b/src/plugins/discover/public/embeddable/components/saved_search_embeddable_base.tsx
@@ -69,7 +69,7 @@ export const SavedSearchEmbeddableBase: FC<PropsWithChildren<SavedSearchEmbeddab
         </EuiFlexItem>
       )}
 
-      <EuiFlexItem style={{ minHeight: 0 }}>{children}</EuiFlexItem>
+      <EuiFlexItem css={{ minHeight: 0 }}>{children}</EuiFlexItem>
 
       {Boolean(append) && <EuiFlexItem grow={false}>{append}</EuiFlexItem>}