Skip to content

Commit

Permalink
[Fleet][Eui Visual Refresh] Update text color tokens (#204537)
Browse files Browse the repository at this point in the history
## Summary

Closes #201989

This PR updates color variables to the up-to-date naming per
#199715 (comment).

Impacted elements:
1. Read-only icon buttons in Fleet and Integrations top bar.
2. Danger-styled context menu item for deleting package policy from
agent policy.

I have also reviews [all
occurrences](https://github.com/search?q=repo%3Aelastic%2Fkibana+path%3Ax-pack%2Fplugins%2Ffleet%2Fpublic+color%3D%22text&type=code)
of `color="text` throughout fleet and found these to be part of the
following components:
- `EuiButton`
- `EuiButtonEmpty`
- `EuiButtonIcon`
- `EuiIcon`

The use of `color="text"` seems to be valid for these cases.

## Screenshots

### Amsterdam

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-amsterdam"
src="https://github.com/user-attachments/assets/c6c58a75-b79b-45a9-abef-f25014a7c8c6"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-amsterdam"
src="https://github.com/user-attachments/assets/fa2a5b10-4aca-46ee-bb59-c0f62091c322"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-amsterdam"
src="https://github.com/user-attachments/assets/c2375413-373b-4cdf-b907-0d5f577e1fbe"
/>

### Borealis

Read-only Fleet top bar:

<img width="1918" alt="fleet-readonly-borealis"
src="https://github.com/user-attachments/assets/aad169c6-52b0-4707-87a5-1e0babd59a43"
/>

Read-only Integrations top bar:

<img width="1918" alt="integrations-readonly-borealis"
src="https://github.com/user-attachments/assets/08d1cec7-285d-47a3-958b-63b5a22d9b19"
/>

Delete integration context menu item:

<img width="1918" alt="delete-integration-borealis"
src="https://github.com/user-attachments/assets/9cf20708-2a3f-4252-98ac-1ebca12bd8e6"
/>
  • Loading branch information
jillguyonnet authored Dec 18, 2024
1 parent 4ed0d85 commit a1b3b88
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 7 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/fleet/public/applications/fleet/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ const FleetTopNav = memo(

const readOnlyBtnClass = React.useMemo(() => {
return css`
color: ${euiTheme.colors.text};
color: ${euiTheme.colors.textParagraph};
`;
}, [euiTheme]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const IntegrationsHeader = ({
const { euiTheme } = useEuiTheme();
const readOnlyBtnClass = React.useMemo(() => {
return css`
color: ${euiTheme.colors.text};
color: ${euiTheme.colors.textParagraph};
`;
}, [euiTheme]);
const isReadOnly = useIsReadOnly();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,19 @@
* 2.0.
*/

import styled from 'styled-components';
import { EuiContextMenuItem } from '@elastic/eui';
import React from 'react';
import { css } from '@emotion/react';
import type { EuiContextMenuItemProps } from '@elastic/eui';
import { EuiContextMenuItem, useEuiTheme } from '@elastic/eui';

export const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
color: ${(props) => props.theme.eui.euiColorDangerText};
`;
export const DangerEuiContextMenuItem = (props: EuiContextMenuItemProps) => {
const theme = useEuiTheme();
return (
<EuiContextMenuItem
{...props}
css={css`
color: ${theme.euiTheme.colors.textDanger};
`}
/>
);
};

0 comments on commit a1b3b88

Please sign in to comment.