Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Defend Workflows][Eui Visual Refresh] Removed transparentize usage in responder #208457

Merged
merged 8 commits into from
Feb 11, 2025
Merged

[Defend Workflows][Eui Visual Refresh] Removed transparentize usage in responder #208457

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e083e8
remove transparentize usage, start updating to euiTheme instead of json
parkiino Jan 27, 2025
cfa9181
[CI] Auto-commit changed files from 'node scripts/styled_components_m…
kibanamachine Jan 27, 2025
7daed75
Merge remote-tracking branch 'upstream/main' into task/eui-borealis-r…
parkiino Jan 29, 2025
ce7da2f
Merge branch 'task/eui-borealis-refresh2' of github.com:parkiino/kiba…
parkiino Jan 29, 2025
8e71cfe
Merge remote-tracking branch 'upstream/main' into task/eui-borealis-r…
parkiino Feb 10, 2025
14ef44f
Merge remote-tracking branch 'upstream/main' into task/eui-borealis-r…
parkiino Feb 11, 2025
b10dee5
use updated tokens and remove important
parkiino Feb 11, 2025
5f92ba8
Merge remote-tracking branch 'upstream/main' into task/eui-borealis-r…
parkiino Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions packages/kbn-babel-preset/styled_components_files.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions ...olution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like lightestShade is deprecated - since this PR already touches this line, do you think we can use another color here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is !important still necessary after the refactor?

`;

export interface ArtifactEntryCardMinifiedProps extends CommonProps {
Expand Down
6 changes: 3 additions & 3 deletions ...on/public/management/components/artifact_entry_card/components/card_compressed_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)`
Expand Down
4 changes: 2 additions & 2 deletions ...tion/public/management/components/artifact_entry_card/components/card_container_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
`;

Expand Down
4 changes: 2 additions & 2 deletions ...rity_solution/public/management/components/artifact_entry_card/components/card_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<CardHeaderProps>(
Expand Down
10 changes: 5 additions & 5 deletions ...lution/public/management/components/artifact_entry_card/components/card_section_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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;
}
`;

Expand Down
10 changes: 5 additions & 5 deletions ...ution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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<ArtifactInfo, 'os' | 'entries'> &
Expand Down
13 changes: 7 additions & 6 deletions ...ution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, emptyShade is deprecated as well

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) => {
Expand Down