[High Contrast Mode] Steps, timelines, and comment lists (#8223)

packages/eui/src-docs/src/views/comment/comment_props.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
 
 import {
-  EuiPanel,
   EuiButtonIcon,
   EuiCommentList,
   EuiComment,
@@ -50,11 +49,7 @@ export default ({ snippet }: { snippet: ReactNode }) => {
   );
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize="none"
-      style={{ maxWidth: '540px' }}
-    >
+    <div style={{ maxWidth: '540px' }}>
       <EuiCommentList>
         <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
@@ -149,6 +144,6 @@ export default ({ snippet }: { snippet: ReactNode }) => {
           {snippet}
         </EuiCodeBlock>
       </EuiAccordion>
-    </EuiPanel>
+    </div>
   );
 };

packages/eui/src/components/avatar/avatar.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 const _avatarSize = ({
@@ -18,9 +18,7 @@ const _avatarSize = ({
   fontSize: string;
 }) => {
   return `
-    ${logicalCSS('width', size)};
-    ${logicalCSS('height', size)};
-    line-height: ${size};
+    ${logicalSizeCSS(size)};
     font-size: ${fontSize};
   `;
 };
@@ -36,8 +34,7 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
     vertical-align: middle;
     background-size: cover;
     background-color: ${euiTheme.colors.lightShade};
-    ${logicalTextAlignCSS('center')}
-    ${logicalCSS('overflow-x', 'hidden')}
+    overflow: hidden;
     /* Explicitly state weight so it doesn't get overridden by inheritance */
     font-weight: ${euiTheme.font.weight.medium};
   `,
@@ -69,19 +66,19 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
   m: css(
     _avatarSize({
       size: euiTheme.size.xl,
-      fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+      fontSize: mathWithUnits(euiTheme.size.base, (x) => x * 0.9),
     })
   ),
   l: css(
     _avatarSize({
       size: euiTheme.size.xxl,
-      fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+      fontSize: mathWithUnits(euiTheme.size.l, (x) => x * 0.8),
     })
   ),
   xl: css(
     _avatarSize({
-      size: `calc(${euiTheme.size.base} * 4)`,
-      fontSize: `calc(${euiTheme.size.xl} * 0.8)`,
+      size: euiTheme.size.xxxxl,
+      fontSize: mathWithUnits(euiTheme.size.xl, (x) => x * 0.8),
     })
   ),
   // Casing

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

@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -28,7 +29,16 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
-    euiCommentEvent__header: css``,
+    euiCommentEvent__header: css`
+      ${highContrastModeStyles(euiThemeContext, {
+        // Remove duplicate high contrast panel borders
+        preferred: `
+          & > .euiPanel {
+            border: none;
+          }
+      `,
+      })}
+    `,
     border: css`
       ${logicalCSS('border-bottom-style', 'solid')}
       ${logicalCSS('border-bottom-width', euiTheme.border.width.thin)}

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

@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { useEuiBorderColorCSS } from '../../global_styling';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
@@ -99,7 +99,6 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   if (isTypeUpdate && !eventColor) {
     eventColor = 'transparent';
   }
-  const showEventBorders = isTypeRegular;
 
   const panelProps: EuiPanelProps = useMemo(
     () => ({
@@ -118,13 +117,16 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   /**
    * Styles
    */
+  const { highContrastMode } = useEuiTheme();
+  const showEventBorders = isTypeRegular;
+  const showHighContrastBorder = isTypeUpdate && highContrastMode;
   const borderStyles = useEuiBorderColorCSS();
 
   const styles = useEuiMemoizedStyles(euiCommentEventStyles);
   const cssStyles = [
     styles.euiCommentEvent,
-    showEventBorders && styles.border,
-    showEventBorders && borderStyles[eventColor!],
+    (showEventBorders || showHighContrastBorder) && styles.border,
+    (showEventBorders || showHighContrastBorder) && borderStyles[eventColor!],
   ];
 
   const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);

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

@@ -10,6 +10,8 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiText } from '../text';
+import { EuiTextArea } from '../form';
+import { EuiAvatar } from '../avatar';
 import { EuiButtonIcon } from '../button';
 import { EuiBadge } from '../badge';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -109,3 +111,87 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    comments: [
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: 'added a comment',
+        timestamp: 'on 3rd March 2022',
+        children: 'Phishing emails have been on the rise since February',
+        actions: copyAction,
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <EuiFlexGroup
+            responsive={false}
+            alignItems="center"
+            gutterSize="xs"
+            wrap
+          >
+            <EuiFlexItem grow={false}>added tags</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>case</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>phishing</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>security</EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ),
+        timestamp: 'on 3rd March 2022',
+        eventIcon: 'tag',
+        eventIconAriaLabel: 'tag',
+      },
+      {
+        username: 'system',
+        timelineAvatar: 'dot',
+        timelineAvatarAriaLabel: 'System',
+        event: 'pushed a new incident',
+        timestamp: 'on 4th March 2022',
+        eventColor: 'danger',
+      },
+      {
+        username: 'tiago',
+        timelineAvatar: <EuiAvatar name="tiago" />,
+        event: 'added a comment',
+        timestamp: 'on 4th March 2022',
+        actions: copyAction,
+        children: 'Take a look at this Office.exe',
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <>
+            marked case as <EuiBadge color="warning">In progress</EuiBadge>
+          </>
+        ),
+        timestamp: 'on 4th March 2022',
+      },
+      {
+        username: 'you',
+        timelineAvatar: (
+          <EuiAvatar name="Cat" imageUrl="https://picsum.photos/id/40/64" />
+        ),
+        children: (
+          <EuiTextArea
+            fullWidth
+            value={`Thanks Tiago for taking a look.
+
+I also found something suspicious: Update.exe`}
+            onChange={() => {}}
+          />
+        ),
+      },
+    ],
+  },
+};

packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`EuiStep is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -57,7 +57,7 @@ exports[`EuiStep props headingElement 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -128,7 +128,7 @@ exports[`EuiStep props status current is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-current"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -199,7 +199,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -237,7 +237,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -306,7 +306,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
       class="euiStepNumber emotion-euiStepNumber-s-warning"
     >
       <span
-        class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+        class="euiStepNumber__icon emotion-euiStepNumber__icon"
         data-euiicon-type="warning"
       >
         Step 1 has warnings
@@ -345,7 +345,7 @@ exports[`EuiStep props step 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         5
       </span>
@@ -383,7 +383,7 @@ exports[`EuiStep props titleSize 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>