Skip to content

Commit ac18514

Browse files
cee-chencee-chen
committed
[EuiComment] Improve high contrast border display
- add colored borders to update event types - remove duplicate panel borders in headers - add high contrast story that shows more edge cases
1 parent e637940 commit ac18514

5 files changed

Lines changed: 103 additions & 5 deletions

File tree

‎packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png‎

51.1 KB
Loading

‎packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png‎

124 KB
Loading

‎packages/eui/src/components/comment_list/comment_event.styles.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import { css } from '@emotion/react';
1010
import { UseEuiTheme } from '../../services';
1111
import { logicalCSS } from '../../global_styling';
12+
import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
1213

1314
export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => {
1415
const { euiTheme } = euiThemeContext;
@@ -28,7 +29,16 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => {
2829
const { euiTheme } = euiThemeContext;
2930

3031
return {
31-
euiCommentEvent__header: css``,
32+
euiCommentEvent__header: css`
33+
${highContrastModeStyles(euiThemeContext, {
34+
// Remove duplicate high contrast panel borders
35+
preferred: `
36+
& > .euiPanel {
37+
border: none;
38+
}
39+
`,
40+
})}
41+
`,
3242
border: css`
3343
${logicalCSS('border-bottom-style', 'solid')}
3444
${logicalCSS('border-bottom-width', euiTheme.border.width.thin)}

‎packages/eui/src/components/comment_list/comment_event.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import React, { FunctionComponent, ReactNode, useMemo } from 'react';
1010
import classNames from 'classnames';
1111

12-
import { useEuiMemoizedStyles } from '../../services';
12+
import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
1313
import { useEuiBorderColorCSS } from '../../global_styling';
1414
import { CommonProps } from '../common';
1515
import { IconType } from '../icon';
@@ -99,7 +99,6 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
9999
if (isTypeUpdate && !eventColor) {
100100
eventColor = 'transparent';
101101
}
102-
const showEventBorders = isTypeRegular;
103102

104103
const panelProps: EuiPanelProps = useMemo(
105104
() => ({
@@ -118,13 +117,16 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
118117
/**
119118
* Styles
120119
*/
120+
const { highContrastMode } = useEuiTheme();
121+
const showEventBorders = isTypeRegular;
122+
const showHighContrastBorder = isTypeUpdate && highContrastMode;
121123
const borderStyles = useEuiBorderColorCSS();
122124

123125
const styles = useEuiMemoizedStyles(euiCommentEventStyles);
124126
const cssStyles = [
125127
styles.euiCommentEvent,
126-
showEventBorders && styles.border,
127-
showEventBorders && borderStyles[eventColor!],
128+
(showEventBorders || showHighContrastBorder) && styles.border,
129+
(showEventBorders || showHighContrastBorder) && borderStyles[eventColor!],
128130
];
129131

130132
const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);

‎packages/eui/src/components/comment_list/comment_list.stories.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import React from 'react';
1010
import type { Meta, StoryObj } from '@storybook/react';
1111

1212
import { EuiText } from '../text';
13+
import { EuiTextArea } from '../form';
14+
import { EuiAvatar } from '../avatar';
1315
import { EuiButtonIcon } from '../button';
1416
import { EuiBadge } from '../badge';
1517
import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -109,3 +111,87 @@ export const Playground: Story = {
109111
],
110112
},
111113
};
114+
115+
export const HighContrast: Story = {
116+
tags: ['vrt-only'],
117+
globals: { highContrastMode: true },
118+
args: {
119+
comments: [
120+
{
121+
username: 'emma',
122+
timelineAvatar: <EuiAvatar name="emma" />,
123+
event: 'added a comment',
124+
timestamp: 'on 3rd March 2022',
125+
children: 'Phishing emails have been on the rise since February',
126+
actions: copyAction,
127+
},
128+
{
129+
username: 'emma',
130+
timelineAvatar: <EuiAvatar name="emma" />,
131+
event: (
132+
<EuiFlexGroup
133+
responsive={false}
134+
alignItems="center"
135+
gutterSize="xs"
136+
wrap
137+
>
138+
<EuiFlexItem grow={false}>added tags</EuiFlexItem>
139+
<EuiFlexItem grow={false}>
140+
<EuiBadge>case</EuiBadge>
141+
</EuiFlexItem>
142+
<EuiFlexItem grow={false}>
143+
<EuiBadge>phishing</EuiBadge>
144+
</EuiFlexItem>
145+
<EuiFlexItem grow={false}>
146+
<EuiBadge>security</EuiBadge>
147+
</EuiFlexItem>
148+
</EuiFlexGroup>
149+
),
150+
timestamp: 'on 3rd March 2022',
151+
eventIcon: 'tag',
152+
eventIconAriaLabel: 'tag',
153+
},
154+
{
155+
username: 'system',
156+
timelineAvatar: 'dot',
157+
timelineAvatarAriaLabel: 'System',
158+
event: 'pushed a new incident',
159+
timestamp: 'on 4th March 2022',
160+
eventColor: 'danger',
161+
},
162+
{
163+
username: 'tiago',
164+
timelineAvatar: <EuiAvatar name="tiago" />,
165+
event: 'added a comment',
166+
timestamp: 'on 4th March 2022',
167+
actions: copyAction,
168+
children: 'Take a look at this Office.exe',
169+
},
170+
{
171+
username: 'emma',
172+
timelineAvatar: <EuiAvatar name="emma" />,
173+
event: (
174+
<>
175+
marked case as <EuiBadge color="warning">In progress</EuiBadge>
176+
</>
177+
),
178+
timestamp: 'on 4th March 2022',
179+
},
180+
{
181+
username: 'you',
182+
timelineAvatar: (
183+
<EuiAvatar name="Cat" imageUrl="https://picsum.photos/id/40/64" />
184+
),
185+
children: (
186+
<EuiTextArea
187+
fullWidth
188+
value={`Thanks Tiago for taking a look.
189+
190+
I also found something suspicious: Update.exe`}
191+
onChange={() => {}}
192+
/>
193+
),
194+
},
195+
],
196+
},
197+
};

0 commit comments

Comments
 (0)