From 1e083e85c368439a7d49b25ad0c5a0ea5ab9edaa Mon Sep 17 00:00:00 2001 From: parkiino Date: Mon, 27 Jan 2025 10:52:31 -0500 Subject: [PATCH 1/3] remove transparentize usage, start updating to euiTheme instead of json --- .../artifact_entry_card_minified.tsx | 6 +++--- .../components/card_compressed_header.tsx | 6 +++--- .../components/card_container_panel.tsx | 4 ++-- .../artifact_entry_card/components/card_header.tsx | 4 ++-- .../components/card_section_panel.tsx | 10 +++++----- .../components/criteria_conditions.tsx | 10 +++++----- .../components/side_panel/side_panel_flex_item.tsx | 13 +++++++------ 7 files changed, 27 insertions(+), 26 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx index c1acc122eb2d3..80243cbaf7362 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx @@ -17,7 +17,7 @@ import { EuiFlexItem, EuiButtonEmpty, } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import type { CriteriaConditionsProps } from './components/criteria_conditions'; import { CriteriaConditions } from './components/criteria_conditions'; import type { AnyArtifact } from './types'; @@ -29,12 +29,12 @@ import type { ArtifactEntryCardDecoratorProps } from './artifact_entry_card'; const CardContainerPanel = styled(EuiSplitPanel.Outer)` &.artifactEntryCardMinified + &.artifactEntryCardMinified { - margin-top: ${({ theme }) => theme.eui.euiSizeL}; + margin-top: ${({ theme }) => theme.euiTheme.size.l}; } `; const CustomSplitInnerPanel = styled(EuiSplitPanel.Inner)` - background-color: ${({ theme }) => theme.eui.euiColorLightestShade} !important; + background-color: ${({ theme }) => theme.euiTheme.colors.lightestShade} !important; `; export interface ArtifactEntryCardMinifiedProps extends CommonProps { diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_compressed_header.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_compressed_header.tsx index 2bb71a6f2e329..8837c320da6ea 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_compressed_header.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_compressed_header.tsx @@ -9,7 +9,7 @@ import type { ReactNode } from 'react'; import React, { memo, useCallback } from 'react'; import type { CommonProps } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { CardExpandButton } from './card_expand_button'; import { TextValueDisplay } from './text_value_display'; import { EffectScope } from './effect_scope'; @@ -80,8 +80,8 @@ CardCompressedHeader.displayName = 'CardCompressedHeader'; const ButtonIconPlaceHolder = styled.div` display: inline-block; // Sizes below should match that of the Eui's Button Icon, so that it holds the same space. - width: ${({ theme }) => theme.eui.euiSizeL}; - height: ${({ theme }) => theme.eui.euiSizeL}; + width: ${({ theme }) => theme.euiTheme.size.l}; + height: ${({ theme }) => theme.euiTheme.size.l}; `; const StyledEuiFlexGroup = styled(EuiFlexGroup)` diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_container_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_container_panel.tsx index 0bba651253c82..595b98a5b7acf 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_container_panel.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_container_panel.tsx @@ -5,14 +5,14 @@ * 2.0. */ -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { EuiPanel } from '@elastic/eui'; import type { EuiPanelProps } from '@elastic/eui/src/components/panel/panel'; import React, { memo } from 'react'; export const EuiPanelStyled = styled(EuiPanel)` &.artifactEntryCard + &.artifactEntryCard { - margin-top: ${({ theme }) => theme.eui.euiSizeL}; + margin-top: ${({ theme }) => theme.euiTheme.size.l}; } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx index 630cd5f4a18ce..69933f0d7b7ad 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx @@ -8,7 +8,7 @@ import React, { memo } from 'react'; import type { CommonProps } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { DateFieldValue } from './date_field_value'; import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; import type { CardActionsFlexItemProps } from './card_actions_flex_item'; @@ -23,7 +23,7 @@ export interface CardHeaderProps } const StyledEuiFlexItemSmallBottomMargin = styled(EuiFlexItem)` - margin-bottom: 4px !important; + margin-bottom: ${({ theme }) => theme.euiTheme.size.xs} !important; `; export const CardHeader = memo( diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx index 32de8e0e582bb..e369558fd1107 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx @@ -6,7 +6,7 @@ */ import React, { memo } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import type { EuiPanelProps } from '@elastic/eui'; import { EuiPanel } from '@elastic/eui'; @@ -16,15 +16,15 @@ export type CardSectionPanelProps = Exclude< >; const StyledEuiPanel = styled(EuiPanel)` - padding: 32px; + padding: ${({ theme }) => theme.euiTheme.size.xl}; &.top-section { - padding-bottom: 24px; + padding-bottom: ${({ theme }) => theme.euiTheme.size.l}; } &.bottom-section { - padding-top: 24px; + padding-top: ${({ theme }) => theme.euiTheme.size.l}; } &.artifact-entry-collapsible-card { - padding: 24px !important; + padding: ${({ theme }) => theme.euiTheme.size.l} !important; } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx index d872eee2d2cee..ce991d9542fe1 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx @@ -8,7 +8,7 @@ import React, { memo, useCallback, useMemo } from 'react'; import type { CommonProps } from '@elastic/eui'; import { EuiExpression, EuiToken, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types'; import { CONDITION_OS, @@ -52,16 +52,16 @@ const OPERATOR_TYPE_LABELS_EXCLUDED = Object.freeze({ }); const EuiFlexGroupNested = styled(EuiFlexGroup)` - margin-left: ${({ theme }) => theme.eui.euiSizeXL}; + margin-left: ${({ theme }) => theme.euiTheme.size.xl}; `; const EuiFlexItemNested = styled(EuiFlexItem)` - margin-bottom: 6px !important; - margin-top: 6px !important; + margin-bottom: ${({ theme }) => theme.euiTheme.size.s} !important; + margin-top: ${({ theme }) => theme.euiTheme.size.s} !important; `; const StyledCondition = styled('span')` - margin-right: 6px; + margin-right: ${({ theme }) => theme.euiTheme.size.s}; `; export type CriteriaConditionsProps = Pick & diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx index 74912078c8251..4855b74deadda 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx @@ -6,16 +6,17 @@ */ import React, { memo } from 'react'; -import styled from 'styled-components'; -import { EuiFlexItem, transparentize } from '@elastic/eui'; +import styled from '@emotion/styled'; +import { EuiFlexItem } from '@elastic/eui'; import { SidePanelContentManager } from './side_panel_content_manager'; import { useWithSidePanel } from '../../hooks/state_selectors/use_with_side_panel'; const StyledEuiFlexItemWhite = styled(EuiFlexItem)` - background-color: ${({ theme: { eui } }) => eui.euiColorEmptyShade} !important; - border-radius: ${({ theme: { eui } }) => `0 ${eui.euiSizeXS} ${eui.euiSizeXS} 0`}; - box-shadow: 0 ${({ theme: { eui } }) => eui.euiSizeXS} ${({ theme: { eui } }) => eui.euiSizeXS} - ${({ theme: { eui } }) => transparentize(eui.euiShadowColor, 0.04)}; + background-color: ${({ theme: { euiTheme } }) => euiTheme.colors.emptyShade} !important; + border-radius: ${({ theme: { euiTheme } }) => `0 ${euiTheme.size.xs} ${euiTheme.size.xs} 0`}; + box-shadow: 0 ${({ theme: { euiTheme } }) => euiTheme.size.xs} + ${({ theme: { euiTheme } }) => euiTheme.size.xs} + ${({ theme: { euiTheme } }) => euiTheme.colors.borderBaseSubdued}; `; export const SidePanelFlexItem = memo((props) => { From cfa9181d3f066ee9068ccb4a3aa39a904113c8bb Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 27 Jan 2025 22:48:44 +0000 Subject: [PATCH 2/3] [CI] Auto-commit changed files from 'node scripts/styled_components_mapping' --- packages/kbn-babel-preset/styled_components_files.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index 73be32c93c0e3..d8130e974b5f8 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -384,12 +384,6 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]rule_details[\/\\]right[\/\\]content.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]rule_details[\/\\]right[\/\\]index.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_card_grid[\/\\]components[\/\\]grid_header.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]artifact_entry_card_minified.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_compressed_header.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_container_panel.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_header.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_section_panel.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]criteria_conditions.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]date_field_value.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]effect_scope.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]touched_by_users.tsx/, @@ -409,7 +403,6 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]history_item.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_content_layout.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_content_manager.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_flex_item.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]user_command_input.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]console.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]context_menu_with_router_support[\/\\]context_menu_item_nav_by_router.tsx/, From b10dee5155e0caff862ef3a23285e6cfe8962327 Mon Sep 17 00:00:00 2001 From: parkiino Date: Tue, 11 Feb 2025 15:45:17 -0500 Subject: [PATCH 3/3] use updated tokens and remove important --- .../artifact_entry_card/artifact_entry_card_minified.tsx | 2 +- .../console/components/side_panel/side_panel_flex_item.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx index 80243cbaf7362..ffaa806b48e70 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx @@ -34,7 +34,7 @@ const CardContainerPanel = styled(EuiSplitPanel.Outer)` `; const CustomSplitInnerPanel = styled(EuiSplitPanel.Inner)` - background-color: ${({ theme }) => theme.euiTheme.colors.lightestShade} !important; + background-color: ${({ theme }) => theme.euiTheme.colors.backgroundBasePrimary}; `; export interface ArtifactEntryCardMinifiedProps extends CommonProps { diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx index 4855b74deadda..dde1c3cfb3c18 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx @@ -12,7 +12,7 @@ import { SidePanelContentManager } from './side_panel_content_manager'; import { useWithSidePanel } from '../../hooks/state_selectors/use_with_side_panel'; const StyledEuiFlexItemWhite = styled(EuiFlexItem)` - background-color: ${({ theme: { euiTheme } }) => euiTheme.colors.emptyShade} !important; + background-color: ${({ theme: { euiTheme } }) => euiTheme.colors.backgroundBasePlain}; border-radius: ${({ theme: { euiTheme } }) => `0 ${euiTheme.size.xs} ${euiTheme.size.xs} 0`}; box-shadow: 0 ${({ theme: { euiTheme } }) => euiTheme.size.xs} ${({ theme: { euiTheme } }) => euiTheme.size.xs}