From e0a2a4e461014ebd64ce9c435f5ab0085e178ee1 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 4 Oct 2023 10:50:19 -0400 Subject: [PATCH 01/20] [EuiCommentEvent] Extended the eventColor prop to apply the desired header color to the entire comment header, not just the text background color --- .../__snapshots__/comment_event.test.tsx.snap | 2 +- .../comment_list/comment_event.styles.ts | 54 ++++++++++++++----- src/components/comment_list/comment_event.tsx | 12 ++++- 3 files changed, 52 insertions(+), 16 deletions(-) diff --git a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap index da6a1fb9aef..5c7023b6e1c 100644 --- a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap @@ -51,7 +51,7 @@ exports[`EuiCommentEvent props event is rendered 1`] = ` exports[`EuiCommentEvent props eventColor is rendered 1`] = `
`; diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index de9acc41bde..67a99755346 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -8,20 +8,47 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; -import { logicalCSS } from '../../global_styling'; +import { logicalCSS, euiBackgroundColor } from '../../global_styling'; -export const euiCommentEventStyles = ({ euiTheme }: UseEuiTheme) => ({ - euiCommentEvent: css` - overflow: hidden; - `, - // types - regular: css` - border: ${euiTheme.border.thin}; - border-radius: ${euiTheme.border.radius.medium}; - `, - update: css``, - custom: css``, -}); +export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiCommentEvent: css` + overflow: hidden; + `, + // types + regular: css` + border: ${euiTheme.border.thin}; + border-radius: ${euiTheme.border.radius.medium}; + `, + update: css``, + custom: css``, + // variants + border: { + warning: css` + border: 1px solid ${euiBackgroundColor(euiThemeContext, 'warning')}; + `, + accent: css` + border: 1px solid ${euiBackgroundColor(euiThemeContext, 'accent')}; + `, + primary: css` + border: 1px solid ${euiBackgroundColor(euiThemeContext, 'primary')}; + `, + success: css` + border: 1px solid ${euiBackgroundColor(euiThemeContext, 'success')}; + `, + danger: css` + border: 1px solid ${euiBackgroundColor(euiThemeContext, 'danger')}; + `, + subdued: css` + border: ${euiTheme.border.thin}; + `, + transparent: css``, + plain: css``, + }, + }; +}; export const euiCommentEventHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({ euiCommentEvent__header: css``, @@ -34,6 +61,7 @@ export const euiCommentEventHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({ // variants hasEventColor: css` padding: 0; + ${logicalCSS('border-bottom', 'none')} `, // Children euiCommentEvent__headerMain: css` diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 177a5534c22..3ad26284806 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -9,6 +9,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; +import { useEuiBackgroundColorCSS } from '../../global_styling'; import classNames from 'classnames'; import { IconType } from '../icon'; import { EuiPanel, EuiPanelProps } from '../panel'; @@ -90,13 +91,20 @@ export const EuiCommentEvent: FunctionComponent = ({ const euiTheme = useEuiTheme(); const styles = euiCommentEventStyles(euiTheme); - const cssStyles = [styles.euiCommentEvent, styles[type]]; + const cssStyles = [ + styles.euiCommentEvent, + styles[type], + eventColor && styles.border[eventColor], + ]; const headerStyles = euiCommentEventHeaderStyles(euiTheme); + const eventBackgroundColors = useEuiBackgroundColorCSS(); const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, - eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular, + eventColor && + eventBackgroundColors[eventColor] && + headerStyles.hasEventColor, ]; const bodyStyles = euiCommentEventBodyStyles(euiTheme); From f6c139eb3047f7cf6bb2a67c62f10a68b54dfd88 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 4 Oct 2023 10:50:48 -0400 Subject: [PATCH 02/20] Storybook - Create simple storybook for EuiCommentEvent to demonstrate the color toggling --- .../comment_list/comment_event.stories.tsx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/components/comment_list/comment_event.stories.tsx diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx new file mode 100644 index 00000000000..6c0729d52a2 --- /dev/null +++ b/src/components/comment_list/comment_event.stories.tsx @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; +import { EuiText } from '../text'; +import { EuiButtonIcon } from '../button'; + +const meta: Meta = { + title: 'EuiCommentEvent', + component: EuiCommentEvent, + args: { + username: 'janed', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + event: 'added a comment', + eventIcon: 'faceHappy', + eventIconAriaLabel: 'Happy face comment icon', + timestamp: 'on Jan 1, 2020', + children: ( + +

+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +

+ + ), + actions: ( + + ), + }, +}; From 80bdfa021a12b4d194da7714d1658ac2fd247820 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 5 Oct 2023 11:32:18 -0400 Subject: [PATCH 03/20] [EuiComment] - Create DRY style helper for border styles - Update styling conditions in CommentEvent to add a matching border when eventColor is passed in and the comment is of the *regular* type --- .../comment_list/comment_event.styles.ts | 195 +++++++++++++----- src/components/comment_list/comment_event.tsx | 10 +- 2 files changed, 149 insertions(+), 56 deletions(-) diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 67a99755346..3d603937dae 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -7,12 +7,56 @@ */ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../services'; -import { logicalCSS, euiBackgroundColor } from '../../global_styling'; +import { UseEuiTheme, tintOrShade } from '../../services'; +import { logicalCSS } from '../../global_styling'; +import { EuiCommentEventProps } from './comment_event'; + +const _generateEventBorderColor = ( + { euiTheme, colorMode }: UseEuiTheme, + color: EuiCommentEventProps['eventColor'] +) => { + //const ratio = colorMode === 'LIGHT' ? 0.6 : 0.6; + const ratio = 0.6; + switch (color) { + case 'accent': + return `1px solid ${tintOrShade( + euiTheme.colors.accent, + ratio, + colorMode + )}`; + case 'danger': + return `1px solid ${tintOrShade( + euiTheme.colors.danger, + ratio, + colorMode + )}`; + case 'primary': + return `1px solid ${tintOrShade( + euiTheme.colors.primary, + ratio, + colorMode + )}`; + case 'success': + return `1px solid ${tintOrShade( + euiTheme.colors.success, + ratio, + colorMode + )}`; + case 'warning': + return `1px solid ${tintOrShade( + euiTheme.colors.warning, + 0.5, + colorMode + )}`; + case 'subdued': + return euiTheme.border.thin; + default: + return; + } +}; export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; - return { euiCommentEvent: css` overflow: hidden; @@ -27,22 +71,22 @@ export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { // variants border: { warning: css` - border: 1px solid ${euiBackgroundColor(euiThemeContext, 'warning')}; + border: ${_generateEventBorderColor(euiThemeContext, 'warning')}; `, accent: css` - border: 1px solid ${euiBackgroundColor(euiThemeContext, 'accent')}; + border: ${_generateEventBorderColor(euiThemeContext, 'accent')}; `, primary: css` - border: 1px solid ${euiBackgroundColor(euiThemeContext, 'primary')}; + border: ${_generateEventBorderColor(euiThemeContext, 'primary')}; `, success: css` - border: 1px solid ${euiBackgroundColor(euiThemeContext, 'success')}; + border: ${_generateEventBorderColor(euiThemeContext, 'success')}; `, danger: css` - border: 1px solid ${euiBackgroundColor(euiThemeContext, 'danger')}; + border: ${_generateEventBorderColor(euiThemeContext, 'danger')}; `, subdued: css` - border: ${euiTheme.border.thin}; + border: ${_generateEventBorderColor(euiThemeContext, 'subdued')}; `, transparent: css``, plain: css``, @@ -50,51 +94,94 @@ export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { }; }; -export const euiCommentEventHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({ - euiCommentEvent__header: css``, - // types - regular: css` - background: ${euiTheme.colors.lightestShade}; - ${logicalCSS('border-bottom', euiTheme.border.thin)} - padding: ${euiTheme.size.s}; - `, - // variants - hasEventColor: css` - padding: 0; - ${logicalCSS('border-bottom', 'none')} - `, - // Children - euiCommentEvent__headerMain: css` - display: flex; - flex: 1; - gap: ${euiTheme.size.s}; - `, - euiCommentEvent__headerData: css` - display: flex; - flex: 1; - align-items: center; - flex-wrap: wrap; - gap: ${euiTheme.size.xs}; - `, - euiCommentEvent__headerEventIcon: css` - ${logicalCSS('margin-right', euiTheme.size.xs)} - `, - euiCommentEvent__headerUsername: css` - font-weight: ${euiTheme.font.weight.semiBold}; - `, - euiCommentEvent__headerEvent: css` - align-items: center; - display: inline-flex; - /* the header event can have inline badges so we're adding some white-space and flex-wrap properties */ - white-space: pre-wrap; - flex-wrap: wrap; - `, - euiCommentEvent__headerActions: css` - display: flex; - flex-wrap: wrap; - gap: ${euiTheme.size.xs}; - `, -}); +export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiCommentEvent__header: css``, + // types + regular: css` + background: ${euiTheme.colors.lightestShade}; + ${logicalCSS('border-bottom', euiTheme.border.thin)} + padding: ${euiTheme.size.s}; + `, + // variants + hasEventColor: css` + padding: 0; + `, + border: { + warning: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'warning') + )} + `, + accent: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'accent') + )} + `, + primary: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'primary') + )} + `, + success: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'success') + )} + `, + danger: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'danger') + )} + `, + subdued: css` + ${logicalCSS( + 'border-bottom', + _generateEventBorderColor(euiThemeContext, 'subdued') + )} + `, + transparent: css``, + plain: css``, + }, + // Children + euiCommentEvent__headerMain: css` + display: flex; + flex: 1; + gap: ${euiTheme.size.s}; + `, + euiCommentEvent__headerData: css` + display: flex; + flex: 1; + align-items: center; + flex-wrap: wrap; + gap: ${euiTheme.size.xs}; + `, + euiCommentEvent__headerEventIcon: css` + ${logicalCSS('margin-right', euiTheme.size.xs)} + `, + euiCommentEvent__headerUsername: css` + font-weight: ${euiTheme.font.weight.semiBold}; + `, + euiCommentEvent__headerEvent: css` + align-items: center; + display: inline-flex; + /* the header event can have inline badges so we're adding some white-space and flex-wrap properties */ + white-space: pre-wrap; + flex-wrap: wrap; + `, + euiCommentEvent__headerActions: css` + display: flex; + flex-wrap: wrap; + gap: ${euiTheme.size.xs}; + `, + }; +}; export const euiCommentEventBodyStyles = ({ euiTheme }: UseEuiTheme) => ({ euiCommentEvent__body: css``, diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 3ad26284806..7d027027879 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -88,13 +88,15 @@ export const EuiCommentEvent: FunctionComponent = ({ type = 'custom'; } + const showEventBorders = isTypeRegular && eventColor; + const euiTheme = useEuiTheme(); const styles = euiCommentEventStyles(euiTheme); const cssStyles = [ styles.euiCommentEvent, styles[type], - eventColor && styles.border[eventColor], + showEventBorders && styles.border[eventColor], ]; const headerStyles = euiCommentEventHeaderStyles(euiTheme); @@ -102,6 +104,7 @@ export const EuiCommentEvent: FunctionComponent = ({ const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, isTypeRegular && headerStyles.regular, + showEventBorders && headerStyles.border[eventColor], eventColor && eventBackgroundColors[eventColor] && headerStyles.hasEventColor, @@ -130,7 +133,10 @@ export const EuiCommentEvent: FunctionComponent = ({ className="euiCommentEvent__header" css={cssHeaderStyles} > - +
Date: Thu, 5 Oct 2023 11:32:42 -0400 Subject: [PATCH 04/20] Update test cases --- .../comment_list/__snapshots__/comment_event.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap index 5c7023b6e1c..da6a1fb9aef 100644 --- a/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap @@ -51,7 +51,7 @@ exports[`EuiCommentEvent props event is rendered 1`] = ` exports[`EuiCommentEvent props eventColor is rendered 1`] = `
`; From e5341a2afea82337c1dfdcee59f0af02a48971de Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 5 Oct 2023 11:33:24 -0400 Subject: [PATCH 05/20] [DO NOT MERGE] Added a doc with the different variations of colors for event borders for testing --- src-docs/src/views/comment/comment_list.tsx | 74 +++++++++++++++------ 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index 82d0c5640c2..b6b02789434 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -56,44 +56,76 @@ const longBody = ( const comments: EuiCommentProps[] = [ { - username: 'janed', + username: 'Warning', timelineAvatarAriaLabel: 'Jane Doe', event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, actions: copyAction, + eventColor: 'warning', }, { - username: 'juanab', - timelineAvatarAriaLabel: 'Juana Barros', + username: 'Success', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, actions: copyAction, - event: 'pushed incident X0Z235', - timestamp: 'on Jan 3, 2020', + eventColor: 'success', }, { - username: 'pancho1', - timelineAvatarAriaLabel: 'Pancho Pérez', - event: 'edited case', - timestamp: 'on Jan 9, 2020', - eventIcon: 'pencil', - eventIconAriaLabel: 'edit', + username: 'Danger', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, + actions: copyAction, + eventColor: 'danger', }, { - username: 'pedror', - timelineAvatarAriaLabel: 'Pedro Rodriguez', + username: 'Accent', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, actions: copyAction, - event: complexEvent, - timestamp: 'on Jan 11, 2020', - eventIcon: 'tag', - eventIconAriaLabel: 'tag', + eventColor: 'accent', }, { - username: 'elohar', - timelineAvatarAriaLabel: 'Elohar Jackson', + username: 'Primary', + timelineAvatarAriaLabel: 'Jane Doe', event: 'added a comment', - timestamp: 'on Jan 14, 2020', - children: longBody, + timestamp: 'on Jan 1, 2020', + children: body, + actions: copyAction, + eventColor: 'primary', + }, + { + username: 'Subdued', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, + actions: copyAction, + eventColor: 'subdued', + }, + { + username: 'Transparent', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, + actions: copyAction, + eventColor: 'transparent', + }, + { + username: 'Plain', + timelineAvatarAriaLabel: 'Jane Doe', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, actions: copyAction, + eventColor: 'plain', }, ]; From 762ded33f92dca22bc15fbea9a531f3bd0b5200a Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 6 Oct 2023 15:14:28 -0400 Subject: [PATCH 06/20] Revert "[DO NOT MERGE] Added a doc with the different variations of colors for event borders for testing" This reverts commit e5341a2afea82337c1dfdcee59f0af02a48971de. --- src-docs/src/views/comment/comment_list.tsx | 74 ++++++--------------- 1 file changed, 21 insertions(+), 53 deletions(-) diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index b6b02789434..82d0c5640c2 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -56,76 +56,44 @@ const longBody = ( const comments: EuiCommentProps[] = [ { - username: 'Warning', + username: 'janed', timelineAvatarAriaLabel: 'Jane Doe', event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, actions: copyAction, - eventColor: 'warning', }, { - username: 'Success', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, + username: 'juanab', + timelineAvatarAriaLabel: 'Juana Barros', actions: copyAction, - eventColor: 'success', + event: 'pushed incident X0Z235', + timestamp: 'on Jan 3, 2020', }, { - username: 'Danger', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, - actions: copyAction, - eventColor: 'danger', + username: 'pancho1', + timelineAvatarAriaLabel: 'Pancho Pérez', + event: 'edited case', + timestamp: 'on Jan 9, 2020', + eventIcon: 'pencil', + eventIconAriaLabel: 'edit', }, { - username: 'Accent', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, + username: 'pedror', + timelineAvatarAriaLabel: 'Pedro Rodriguez', actions: copyAction, - eventColor: 'accent', + event: complexEvent, + timestamp: 'on Jan 11, 2020', + eventIcon: 'tag', + eventIconAriaLabel: 'tag', }, { - username: 'Primary', - timelineAvatarAriaLabel: 'Jane Doe', + username: 'elohar', + timelineAvatarAriaLabel: 'Elohar Jackson', event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, - actions: copyAction, - eventColor: 'primary', - }, - { - username: 'Subdued', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, - actions: copyAction, - eventColor: 'subdued', - }, - { - username: 'Transparent', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, - actions: copyAction, - eventColor: 'transparent', - }, - { - username: 'Plain', - timelineAvatarAriaLabel: 'Jane Doe', - event: 'added a comment', - timestamp: 'on Jan 1, 2020', - children: body, + timestamp: 'on Jan 14, 2020', + children: longBody, actions: copyAction, - eventColor: 'plain', }, ]; From 8cb2a478c97d5a71728351c96d0136360f945ba6 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sat, 14 Oct 2023 22:46:33 -0700 Subject: [PATCH 07/20] update examples --- .../src/views/comment/comment_flexible.tsx | 76 ++++++++++++++----- src-docs/src/views/comment/comment_list.tsx | 17 +++-- .../comment_list/comment_event.styles.ts | 4 +- src/components/comment_list/comment_event.tsx | 12 ++- 4 files changed, 79 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 06733166fbd..7c3637fe90b 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -11,6 +11,8 @@ import { EuiFlexItem, EuiSpacer, EuiCommentListProps, + EuiSelect, + EuiCode, } from '../../../../src/components/'; const body = ( @@ -64,14 +66,6 @@ const commentsData: EuiCommentListProps['comments'] = [ eventIconAriaLabel: 'tag', actions: copyAction, }, - { - username: 'system', - timelineAvatarAriaLabel: 'System', - timelineAvatar: 'dot', - event: 'pushed a new incident', - timestamp: '20 hours ago', - eventColor: 'danger', - }, { username: 'pancho1', timelineAvatarAriaLabel: 'Pancho Pérez', @@ -95,18 +89,28 @@ const toggleButtons = [ id: 'update', label: 'Update', }, - { - id: 'updateDanger', - label: 'Update danger', - }, { id: 'custom', label: 'Custom', }, ]; +const colors = [ + { value: 'subdued', text: 'subdued' }, + { + value: 'transparent', + text: 'transparent', + }, + { value: 'danger', text: 'danger' }, + { value: 'warning', text: 'warning' }, + { value: 'accent', text: 'accent' }, + { value: 'primary', text: 'primary' }, + { value: 'success', text: 'success' }, +]; + export default () => { const [toggleIdSelected, setToggleIdSelected] = useState('regular'); + const [color, setColor] = useState(colors[0].value); const [comment, setComment] = useState(commentsData[0]); const onChangeButtonGroup = (optionId: any) => { @@ -119,19 +123,49 @@ export default () => { setComment(commentsData[selectedCommentIndex]); }; + const onChangeSize = (e) => { + setColor(e.target.value); + }; + return ( <> - + + + + + + onChangeSize(e)} + compressed + /> + + + {toggleIdSelected === 'regular' && color === 'subdued' ? ( + + subdued is the default eventColor for regular{' '} + EuiComment + + ) : toggleIdSelected === 'update' && color === 'transparent' ? ( + + transparent is the default eventColor for + update EuiComment + + ) : undefined} + + - + ); diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index 82d0c5640c2..e51c0d51a05 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -70,6 +70,13 @@ const comments: EuiCommentProps[] = [ event: 'pushed incident X0Z235', timestamp: 'on Jan 3, 2020', }, + { + username: 'juanab', + timelineAvatarAriaLabel: 'Juana Barros', + actions: copyAction, + event: 'pushed incident X0Z235', + timestamp: 'on Jan 3, 2020', + }, { username: 'pancho1', timelineAvatarAriaLabel: 'Pancho Pérez', @@ -88,12 +95,12 @@ const comments: EuiCommentProps[] = [ eventIconAriaLabel: 'tag', }, { - username: 'elohar', - timelineAvatarAriaLabel: 'Elohar Jackson', - event: 'added a comment', - timestamp: 'on Jan 14, 2020', - children: longBody, + username: 'Assistant', + timelineAvatarAriaLabel: 'Assistant', + timestamp: 'on Jan 14, 2020, 1:39:04 PM', + children:

An error ocurred sending your message.

, actions: copyAction, + eventColor: 'danger', }, ]; diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 3d603937dae..9f30040214d 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -45,7 +45,7 @@ const _generateEventBorderColor = ( case 'warning': return `1px solid ${tintOrShade( euiTheme.colors.warning, - 0.5, + 0.4, colorMode )}`; case 'subdued': @@ -101,7 +101,7 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { euiCommentEvent__header: css``, // types regular: css` - background: ${euiTheme.colors.lightestShade}; + /* background: salmon; */ ${logicalCSS('border-bottom', euiTheme.border.thin)} padding: ${euiTheme.size.s}; `, diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 7d027027879..13d79f251f5 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -54,7 +54,10 @@ export interface EuiCommentEventProps extends CommonProps { /** * Background color for the comment's header. */ - eventColor?: EuiPanelProps['color']; + // eventColor?: EuiPanelProps['color']; + eventColor?: Exclude; + // eventColor?: Partial>; + // eventColor?: EuiPanelProps['color']; } export const EuiCommentEvent: FunctionComponent = ({ @@ -99,6 +102,10 @@ export const EuiCommentEvent: FunctionComponent = ({ showEventBorders && styles.border[eventColor], ]; + if (isTypeRegular && !eventColor) { + eventColor = 'subdued'; + } + const headerStyles = euiCommentEventHeaderStyles(euiTheme); const eventBackgroundColors = useEuiBackgroundColorCSS(); const cssHeaderStyles = [ @@ -120,7 +127,8 @@ export const EuiCommentEvent: FunctionComponent = ({ // The 'plain' color creates a shadow and adds a border radius that we don't want. // So for these cases we use the transparent color instead. - const finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor; + // const finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor; + const finalEventColor = eventColor; const panelProps = finalEventColor ? { color: finalEventColor, paddingSize: 's' } From 343ef779abc369b8155858174e4cbbe2be1d35a5 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sat, 14 Oct 2023 22:57:07 -0700 Subject: [PATCH 08/20] update example --- .../src/views/comment/comment_flexible.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 7c3637fe90b..70cdd1d8187 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -140,15 +140,17 @@ export default () => { color="primary" /> - - onChangeSize(e)} - compressed - /> - + {toggleIdSelected !== 'custom' ? ( + + onChangeSize(e)} + compressed + /> + + ) : undefined} {toggleIdSelected === 'regular' && color === 'subdued' ? ( From 292b43d0847ef81ed2427dc5713c4c152566dbb1 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 15 Oct 2023 14:11:19 -0700 Subject: [PATCH 09/20] clean up --- .../src/views/comment/comment_flexible.tsx | 38 ++++++++++--------- src-docs/src/views/comment/comment_list.tsx | 20 ---------- .../comment_list/comment_event.styles.ts | 3 -- src/components/comment_list/comment_event.tsx | 18 +++------ 4 files changed, 26 insertions(+), 53 deletions(-) diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 70cdd1d8187..a0c8800561d 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -15,6 +15,8 @@ import { EuiCode, } from '../../../../src/components/'; +import { EuiCommentEventProps } from '../../../../src/components/comment_list/comment_event'; + const body = (

@@ -95,20 +97,19 @@ const toggleButtons = [ }, ]; -const colors = [ - { value: 'subdued', text: 'subdued' }, - { - value: 'transparent', - text: 'transparent', - }, - { value: 'danger', text: 'danger' }, - { value: 'warning', text: 'warning' }, - { value: 'accent', text: 'accent' }, - { value: 'primary', text: 'primary' }, - { value: 'success', text: 'success' }, -]; - export default () => { + const colors: Array<{ + value: EuiCommentEventProps['eventColor']; + text: string; + }> = [ + { value: 'subdued', text: 'subdued' }, + { value: 'transparent', text: 'transparent' }, + { value: 'danger', text: 'danger' }, + { value: 'warning', text: 'warning' }, + { value: 'accent', text: 'accent' }, + { value: 'primary', text: 'primary' }, + { value: 'success', text: 'success' }, + ]; const [toggleIdSelected, setToggleIdSelected] = useState('regular'); const [color, setColor] = useState(colors[0].value); const [comment, setComment] = useState(commentsData[0]); @@ -123,8 +124,8 @@ export default () => { setComment(commentsData[selectedCommentIndex]); }; - const onChangeSize = (e) => { - setColor(e.target.value); + const onChangeSize = (e: React.ChangeEvent) => { + setColor(e.target.value as EuiCommentEventProps['eventColor']); }; return ( @@ -152,17 +153,18 @@ export default () => { ) : undefined} - {toggleIdSelected === 'regular' && color === 'subdued' ? ( + {toggleIdSelected === 'regular' && color === 'subdued' && ( subdued is the default eventColor for regular{' '} EuiComment - ) : toggleIdSelected === 'update' && color === 'transparent' ? ( + )} + {toggleIdSelected === 'update' && color === 'transparent' && ( transparent is the default eventColor for update EuiComment - ) : undefined} + )} diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index e51c0d51a05..3e92e1d4292 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -41,19 +41,6 @@ const complexEvent = ( ); -const longBody = ( - -

- This planet has - or rather had - a problem, which was this: most of the - people living on it were unhappy for pretty much of the time. Many - solutions were suggested for this problem, but most of these were largely - concerned with the movements of small green pieces of paper, which is odd - because on the whole it was not the small green pieces of paper that were - unhappy. -

- -); - const comments: EuiCommentProps[] = [ { username: 'janed', @@ -70,13 +57,6 @@ const comments: EuiCommentProps[] = [ event: 'pushed incident X0Z235', timestamp: 'on Jan 3, 2020', }, - { - username: 'juanab', - timelineAvatarAriaLabel: 'Juana Barros', - actions: copyAction, - event: 'pushed incident X0Z235', - timestamp: 'on Jan 3, 2020', - }, { username: 'pancho1', timelineAvatarAriaLabel: 'Pancho Pérez', diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 9f30040214d..ffc9819730c 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -89,7 +89,6 @@ export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { border: ${_generateEventBorderColor(euiThemeContext, 'subdued')}; `, transparent: css``, - plain: css``, }, }; }; @@ -101,7 +100,6 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { euiCommentEvent__header: css``, // types regular: css` - /* background: salmon; */ ${logicalCSS('border-bottom', euiTheme.border.thin)} padding: ${euiTheme.size.s}; `, @@ -147,7 +145,6 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { )} `, transparent: css``, - plain: css``, }, // Children euiCommentEvent__headerMain: css` diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 13d79f251f5..1ed09904f68 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -54,10 +54,7 @@ export interface EuiCommentEventProps extends CommonProps { /** * Background color for the comment's header. */ - // eventColor?: EuiPanelProps['color']; eventColor?: Exclude; - // eventColor?: Partial>; - // eventColor?: EuiPanelProps['color']; } export const EuiCommentEvent: FunctionComponent = ({ @@ -99,7 +96,8 @@ export const EuiCommentEvent: FunctionComponent = ({ const cssStyles = [ styles.euiCommentEvent, styles[type], - showEventBorders && styles.border[eventColor], + showEventBorders && + (eventColor !== undefined ? styles.border[eventColor] : false), ]; if (isTypeRegular && !eventColor) { @@ -111,7 +109,8 @@ export const EuiCommentEvent: FunctionComponent = ({ const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, isTypeRegular && headerStyles.regular, - showEventBorders && headerStyles.border[eventColor], + showEventBorders && + (eventColor !== undefined ? headerStyles.border[eventColor] : false), eventColor && eventBackgroundColors[eventColor] && headerStyles.hasEventColor, @@ -125,13 +124,8 @@ export const EuiCommentEvent: FunctionComponent = ({ const Element = isFigure ? 'figure' : 'div'; const HeaderElement = isFigure ? 'figcaption' : 'div'; - // The 'plain' color creates a shadow and adds a border radius that we don't want. - // So for these cases we use the transparent color instead. - // const finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor; - const finalEventColor = eventColor; - - const panelProps = finalEventColor - ? { color: finalEventColor, paddingSize: 's' } + const panelProps = eventColor + ? { color: eventColor, paddingSize: 's' } : { color: 'transparent', paddingSize: 'none' }; return ( From 0edacd3878f7206b27a858c6ec86137ca8189d0e Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 15 Oct 2023 20:44:11 -0700 Subject: [PATCH 10/20] add cl --- upcoming_changelogs/7288.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/7288.md diff --git a/upcoming_changelogs/7288.md b/upcoming_changelogs/7288.md new file mode 100644 index 00000000000..afb18662a6c --- /dev/null +++ b/upcoming_changelogs/7288.md @@ -0,0 +1 @@ +- Updated the `eventColor` prop on `EuiCommentEvent` to apply the color to the entire comment header. \ No newline at end of file From ac1e51db04abf6da1f003aa989427139e30f45a0 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 15 Oct 2023 21:54:36 -0700 Subject: [PATCH 11/20] remove line --- src/components/comment_list/comment_event.styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index ffc9819730c..32687ad9bfd 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -15,7 +15,6 @@ const _generateEventBorderColor = ( { euiTheme, colorMode }: UseEuiTheme, color: EuiCommentEventProps['eventColor'] ) => { - //const ratio = colorMode === 'LIGHT' ? 0.6 : 0.6; const ratio = 0.6; switch (color) { case 'accent': From c09a629a435794aa3fc958dd43268439a3fd1103 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Oct 2023 12:47:53 -0700 Subject: [PATCH 12/20] Change actions button examples to match `eventColor` --- .../src/views/comment/comment_actions.tsx | 4 +-- .../src/views/comment/comment_flexible.tsx | 25 ++++++++++++++----- src-docs/src/views/comment/comment_list.tsx | 17 +++++++------ 3 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx index db51097d5e9..36791c758ab 100644 --- a/src-docs/src/views/comment/comment_actions.tsx +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -103,7 +103,7 @@ export default () => { aria-label="Copy alert link" iconType="link" size="xs" - color="text" + color="danger" />, { aria-label="Show details" iconType="popout" size="xs" - color="text" + color="danger" onClick={toggleFlyout} />, ]; diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index a0c8800561d..140632a1201 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -5,6 +5,7 @@ import { EuiComment, EuiButtonGroup, EuiButtonIcon, + EuiButtonIconProps, EuiText, EuiBadge, EuiFlexGroup, @@ -26,11 +27,11 @@ const body = ( ); -const copyAction = ( +const CopyAction = ({ color = 'text' }: Pick) => ( ); @@ -42,7 +43,7 @@ const eventWithMultipleTags = ( case - phising + phishing security @@ -57,7 +58,6 @@ const commentsData: EuiCommentListProps['comments'] = [ event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, - actions: copyAction, }, { username: 'luisg', @@ -66,7 +66,6 @@ const commentsData: EuiCommentListProps['comments'] = [ timestamp: '22 hours ago', eventIcon: 'tag', eventIconAriaLabel: 'tag', - actions: copyAction, }, { username: 'pancho1', @@ -169,7 +168,21 @@ export default () => { - + + ) + } + /> ); diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index 3e92e1d4292..d6224aa3de4 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -3,7 +3,10 @@ import { EuiCommentList, EuiCommentProps, } from '../../../../src/components/comment_list'; -import { EuiButtonIcon } from '../../../../src/components/button'; +import { + EuiButtonIcon, + EuiButtonIconProps, +} from '../../../../src/components/button'; import { EuiText } from '../../../../src/components/text'; import { EuiBadge } from '../../../../src/components/badge'; import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; @@ -17,11 +20,11 @@ const body = ( ); -const copyAction = ( +const CopyAction = ({ color = 'text' }: Pick) => ( ); @@ -48,12 +51,12 @@ const comments: EuiCommentProps[] = [ event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, - actions: copyAction, + actions: , }, { username: 'juanab', timelineAvatarAriaLabel: 'Juana Barros', - actions: copyAction, + actions: , event: 'pushed incident X0Z235', timestamp: 'on Jan 3, 2020', }, @@ -68,7 +71,7 @@ const comments: EuiCommentProps[] = [ { username: 'pedror', timelineAvatarAriaLabel: 'Pedro Rodriguez', - actions: copyAction, + actions: , event: complexEvent, timestamp: 'on Jan 11, 2020', eventIcon: 'tag', @@ -79,7 +82,7 @@ const comments: EuiCommentProps[] = [ timelineAvatarAriaLabel: 'Assistant', timestamp: 'on Jan 14, 2020, 1:39:04 PM', children:

An error ocurred sending your message.

, - actions: copyAction, + actions: , eventColor: 'danger', }, ]; From c16b791481b275702af36e2107e8d3e234984857 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Oct 2023 14:07:52 -0700 Subject: [PATCH 13/20] [css] DRY out repeated border styles - by setting border not via the shorthand property --- .../comment_list/comment_event.styles.ts | 144 +++++------------- src/components/comment_list/comment_event.tsx | 20 +-- 2 files changed, 44 insertions(+), 120 deletions(-) diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 32687ad9bfd..9dcbe466417 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -9,49 +9,35 @@ import { css } from '@emotion/react'; import { UseEuiTheme, tintOrShade } from '../../services'; import { logicalCSS } from '../../global_styling'; -import { EuiCommentEventProps } from './comment_event'; -const _generateEventBorderColor = ( - { euiTheme, colorMode }: UseEuiTheme, - color: EuiCommentEventProps['eventColor'] -) => { +export const euiCommentEventBorderColors = ({ + euiTheme, + colorMode, +}: UseEuiTheme) => { const ratio = 0.6; - switch (color) { - case 'accent': - return `1px solid ${tintOrShade( - euiTheme.colors.accent, - ratio, - colorMode - )}`; - case 'danger': - return `1px solid ${tintOrShade( - euiTheme.colors.danger, - ratio, - colorMode - )}`; - case 'primary': - return `1px solid ${tintOrShade( - euiTheme.colors.primary, - ratio, - colorMode - )}`; - case 'success': - return `1px solid ${tintOrShade( - euiTheme.colors.success, - ratio, - colorMode - )}`; - case 'warning': - return `1px solid ${tintOrShade( - euiTheme.colors.warning, - 0.4, - colorMode - )}`; - case 'subdued': - return euiTheme.border.thin; - default: - return; - } + return { + warning: css` + border-color: ${tintOrShade(euiTheme.colors.warning, 0.4, colorMode)}; + `, + accent: css` + border-color: ${tintOrShade(euiTheme.colors.accent, ratio, colorMode)}; + `, + primary: css` + border-color: ${tintOrShade(euiTheme.colors.primary, ratio, colorMode)}; + `, + success: css` + border-color: ${tintOrShade(euiTheme.colors.success, ratio, colorMode)}; + `, + danger: css` + border-color: ${tintOrShade(euiTheme.colors.danger, ratio, colorMode)}; + `, + subdued: css` + border-color: ${euiTheme.border.color}; + `, + transparent: css` + border-color: ${euiTheme.border.color}; + `, + }; }; export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { @@ -60,35 +46,11 @@ export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { euiCommentEvent: css` overflow: hidden; `, - // types - regular: css` - border: ${euiTheme.border.thin}; + border: css` + border-width: ${euiTheme.border.width.thin}; + border-style: solid; border-radius: ${euiTheme.border.radius.medium}; `, - update: css``, - custom: css``, - // variants - border: { - warning: css` - border: ${_generateEventBorderColor(euiThemeContext, 'warning')}; - `, - accent: css` - border: ${_generateEventBorderColor(euiThemeContext, 'accent')}; - `, - primary: css` - border: ${_generateEventBorderColor(euiThemeContext, 'primary')}; - `, - success: css` - border: ${_generateEventBorderColor(euiThemeContext, 'success')}; - `, - danger: css` - border: ${_generateEventBorderColor(euiThemeContext, 'danger')}; - `, - subdued: css` - border: ${_generateEventBorderColor(euiThemeContext, 'subdued')}; - `, - transparent: css``, - }, }; }; @@ -97,54 +59,16 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { return { euiCommentEvent__header: css``, - // types regular: css` - ${logicalCSS('border-bottom', euiTheme.border.thin)} padding: ${euiTheme.size.s}; `, - // variants hasEventColor: css` padding: 0; `, - border: { - warning: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'warning') - )} - `, - accent: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'accent') - )} - `, - primary: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'primary') - )} - `, - success: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'success') - )} - `, - danger: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'danger') - )} - `, - subdued: css` - ${logicalCSS( - 'border-bottom', - _generateEventBorderColor(euiThemeContext, 'subdued') - )} - `, - transparent: css``, - }, + border: css` + ${logicalCSS('border-bottom-style', 'solid')} + ${logicalCSS('border-bottom-width', euiTheme.border.width.thin)} + `, // Children euiCommentEvent__headerMain: css` display: flex; diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 1ed09904f68..fab887a9e13 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -15,6 +15,7 @@ import { IconType } from '../icon'; import { EuiPanel, EuiPanelProps } from '../panel'; import { EuiAvatar } from '../avatar'; import { + euiCommentEventBorderColors, euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles, @@ -88,29 +89,28 @@ export const EuiCommentEvent: FunctionComponent = ({ type = 'custom'; } - const showEventBorders = isTypeRegular && eventColor; + if (isTypeRegular && !eventColor) { + eventColor = 'subdued'; + } + const showEventBorders = isTypeRegular; const euiTheme = useEuiTheme(); + const borderStyles = euiCommentEventBorderColors(euiTheme); const styles = euiCommentEventStyles(euiTheme); const cssStyles = [ styles.euiCommentEvent, - styles[type], - showEventBorders && - (eventColor !== undefined ? styles.border[eventColor] : false), + showEventBorders && styles.border, + showEventBorders && borderStyles[eventColor!], ]; - if (isTypeRegular && !eventColor) { - eventColor = 'subdued'; - } - const headerStyles = euiCommentEventHeaderStyles(euiTheme); const eventBackgroundColors = useEuiBackgroundColorCSS(); const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, isTypeRegular && headerStyles.regular, - showEventBorders && - (eventColor !== undefined ? headerStyles.border[eventColor] : false), + showEventBorders && headerStyles.border, + showEventBorders && borderStyles[eventColor!], eventColor && eventBackgroundColors[eventColor] && headerStyles.hasEventColor, From d02181bc55c7db163b7b169a9a7ddb24aa44a0fb Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Oct 2023 15:03:28 -0700 Subject: [PATCH 14/20] Fix missing padding on `undefined` color `update` type comments + simplify padding logic generally to exist on the `EuiPanel`, not on the header wrapper + code organization w/ comments --- .../comment_list/comment_event.styles.ts | 6 --- src/components/comment_list/comment_event.tsx | 50 +++++++++++-------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 9dcbe466417..1e953d537c2 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -59,12 +59,6 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => { return { euiCommentEvent__header: css``, - regular: css` - padding: ${euiTheme.size.s}; - `, - hasEventColor: css` - padding: 0; - `, border: css` ${logicalCSS('border-bottom-style', 'solid')} ${logicalCSS('border-bottom-width', euiTheme.border.width.thin)} diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index fab887a9e13..c1e1fd874e3 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -6,14 +6,15 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, ReactNode } from 'react'; -import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; -import { useEuiBackgroundColorCSS } from '../../global_styling'; +import React, { FunctionComponent, ReactNode, useMemo } from 'react'; import classNames from 'classnames'; + +import { useEuiTheme } from '../../services'; +import { CommonProps } from '../common'; import { IconType } from '../icon'; import { EuiPanel, EuiPanelProps } from '../panel'; import { EuiAvatar } from '../avatar'; + import { euiCommentEventBorderColors, euiCommentEventStyles, @@ -71,6 +72,9 @@ export const EuiCommentEvent: FunctionComponent = ({ }) => { const classes = classNames('euiCommentEvent', className); + /** + * Branching logic + */ // the username is required so we only check if other elements are define const hasEventElements = eventIcon || timestamp || event || actions; @@ -92,8 +96,27 @@ export const EuiCommentEvent: FunctionComponent = ({ if (isTypeRegular && !eventColor) { eventColor = 'subdued'; } + if (isTypeUpdate && !eventColor) { + eventColor = 'transparent'; + } const showEventBorders = isTypeRegular; + const panelProps: EuiPanelProps = useMemo( + () => ({ + color: type === 'custom' ? 'transparent' : eventColor, + paddingSize: type === 'custom' ? 'none' : 's', + borderRadius: type === 'regular' ? 'none' : 'm', + }), + [type, eventColor] + ); + + const isFigure = isTypeRegular; + const Element = isFigure ? 'figure' : 'div'; + const HeaderElement = isFigure ? 'figcaption' : 'div'; + + /** + * Styles + */ const euiTheme = useEuiTheme(); const borderStyles = euiCommentEventBorderColors(euiTheme); @@ -105,29 +128,15 @@ export const EuiCommentEvent: FunctionComponent = ({ ]; const headerStyles = euiCommentEventHeaderStyles(euiTheme); - const eventBackgroundColors = useEuiBackgroundColorCSS(); const cssHeaderStyles = [ headerStyles.euiCommentEvent__header, - isTypeRegular && headerStyles.regular, showEventBorders && headerStyles.border, showEventBorders && borderStyles[eventColor!], - eventColor && - eventBackgroundColors[eventColor] && - headerStyles.hasEventColor, ]; const bodyStyles = euiCommentEventBodyStyles(euiTheme); const cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]]; - const isFigure = isTypeRegular; - - const Element = isFigure ? 'figure' : 'div'; - const HeaderElement = isFigure ? 'figcaption' : 'div'; - - const panelProps = eventColor - ? { color: eventColor, paddingSize: 's' } - : { color: 'transparent', paddingSize: 'none' }; - return ( {hasEventElements && ( @@ -135,10 +144,7 @@ export const EuiCommentEvent: FunctionComponent = ({ className="euiCommentEvent__header" css={cssHeaderStyles} > - +
Date: Tue, 17 Oct 2023 15:04:27 -0700 Subject: [PATCH 15/20] Adds docs/storybook testing for `undefined` eventColor value + clean up storybook - add a story for each type, and make the example action change in color as well --- .../src/views/comment/comment_flexible.tsx | 8 +- .../comment_list/comment_event.stories.tsx | 76 ++++++++++++++----- 2 files changed, 64 insertions(+), 20 deletions(-) diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 140632a1201..0dab6b036a5 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -108,6 +108,7 @@ export default () => { { value: 'accent', text: 'accent' }, { value: 'primary', text: 'primary' }, { value: 'success', text: 'success' }, + { value: undefined, text: 'undefined' }, ]; const [toggleIdSelected, setToggleIdSelected] = useState('regular'); const [color, setColor] = useState(colors[0].value); @@ -124,7 +125,12 @@ export default () => { }; const onChangeSize = (e: React.ChangeEvent) => { - setColor(e.target.value as EuiCommentEventProps['eventColor']); + const color = e.target.value; + setColor( + color && color !== 'undefined' + ? (color as EuiCommentEventProps['eventColor']) + : undefined + ); }; return ( diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx index 6c0729d52a2..2e163530398 100644 --- a/src/components/comment_list/comment_event.stories.tsx +++ b/src/components/comment_list/comment_event.stories.tsx @@ -8,10 +8,10 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; -import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; -import { EuiText } from '../text'; import { EuiButtonIcon } from '../button'; +import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; const meta: Meta = { title: 'EuiCommentEvent', @@ -19,32 +19,70 @@ const meta: Meta = { args: { username: 'janed', }, + argTypes: { + eventColor: { + options: [ + undefined, + 'subdued', + 'transparent', + 'warning', + 'danger', + 'success', + 'primary', + 'accent', + ], + control: { type: 'radio' }, + defaultValue: undefined, + }, + }, +}; + +const useRenderWithColorAwareAction = (args: EuiCommentEventProps) => { + const [{ eventColor }] = useArgs(); + const buttonColor = + eventColor && eventColor !== 'subdued' && eventColor !== 'transparent' + ? eventColor + : 'text'; + + const button = ( + + ); + return ; }; export default meta; type Story = StoryObj; -export const Playground: Story = { +export const Regular: Story = { + render: useRenderWithColorAwareAction, + args: { + event: 'added a comment', + eventIcon: 'faceHappy', + eventIconAriaLabel: 'Happy face comment icon', + timestamp: 'on Jan 1, 2020', + children: + 'Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.', + }, +}; + +export const Update: Story = { + render: useRenderWithColorAwareAction, args: { event: 'added a comment', eventIcon: 'faceHappy', eventIconAriaLabel: 'Happy face comment icon', timestamp: 'on Jan 1, 2020', - children: ( - -

- Far out in the uncharted backwaters of the unfashionable end of the - western spiral arm of the Galaxy lies a small unregarded yellow sun. -

- - ), - actions: ( - - ), + }, +}; + +export const Custom: Story = { + args: { + children: + 'No header or wrapper should appear if no event, icon, timestamp, or actions are passed', }, }; From 5e0cb2ef5ace63f6161d70448f202082ffcbb702 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 17 Oct 2023 15:10:19 -0700 Subject: [PATCH 16/20] Update snapshots --- .../__snapshots__/comment.test.tsx.snap | 14 +++++++------- .../__snapshots__/comment_event.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/comment_list.test.tsx.snap | 8 ++++---- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap index e955ed2877c..8ade678a2de 100644 --- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap @@ -29,7 +29,7 @@ exports[`EuiComment is rendered 1`] = ` class="emotion-euiTimelineItemEvent-center" >
@@ -63,14 +63,14 @@ exports[`EuiComment props event is rendered 1`] = ` class="emotion-euiTimelineItemEvent-center" >
`; exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`] = `
@@ -72,7 +72,7 @@ exports[`EuiCommentList props gutterSize l is rendered 1`] = ` class="emotion-euiTimelineItemEvent-center" >
@@ -111,7 +111,7 @@ exports[`EuiCommentList props gutterSize m is rendered 1`] = ` class="emotion-euiTimelineItemEvent-center" >
@@ -150,7 +150,7 @@ exports[`EuiCommentList props gutterSize xl is rendered 1`] = ` class="emotion-euiTimelineItemEvent-center" >
From 5a1fd73858aa136ba53c498f3c3cee3044bedfc7 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 18 Oct 2023 08:46:44 -0700 Subject: [PATCH 17/20] Revert "Change actions button examples to match `eventColor`" This reverts commit c09a629a435794aa3fc958dd43268439a3fd1103. --- .../src/views/comment/comment_actions.tsx | 4 +-- .../src/views/comment/comment_flexible.tsx | 25 +++++-------------- src-docs/src/views/comment/comment_list.tsx | 17 ++++++------- 3 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx index 36791c758ab..db51097d5e9 100644 --- a/src-docs/src/views/comment/comment_actions.tsx +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -103,7 +103,7 @@ export default () => { aria-label="Copy alert link" iconType="link" size="xs" - color="danger" + color="text" />, { aria-label="Show details" iconType="popout" size="xs" - color="danger" + color="text" onClick={toggleFlyout} />, ]; diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 0dab6b036a5..3a63840f8a5 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -5,7 +5,6 @@ import { EuiComment, EuiButtonGroup, EuiButtonIcon, - EuiButtonIconProps, EuiText, EuiBadge, EuiFlexGroup, @@ -27,11 +26,11 @@ const body = ( ); -const CopyAction = ({ color = 'text' }: Pick) => ( +const copyAction = ( ); @@ -43,7 +42,7 @@ const eventWithMultipleTags = ( case - phishing + phising security @@ -58,6 +57,7 @@ const commentsData: EuiCommentListProps['comments'] = [ event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, + actions: copyAction, }, { username: 'luisg', @@ -66,6 +66,7 @@ const commentsData: EuiCommentListProps['comments'] = [ timestamp: '22 hours ago', eventIcon: 'tag', eventIconAriaLabel: 'tag', + actions: copyAction, }, { username: 'pancho1', @@ -174,21 +175,7 @@ export default () => { - - ) - } - /> + ); diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index d6224aa3de4..3e92e1d4292 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -3,10 +3,7 @@ import { EuiCommentList, EuiCommentProps, } from '../../../../src/components/comment_list'; -import { - EuiButtonIcon, - EuiButtonIconProps, -} from '../../../../src/components/button'; +import { EuiButtonIcon } from '../../../../src/components/button'; import { EuiText } from '../../../../src/components/text'; import { EuiBadge } from '../../../../src/components/badge'; import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; @@ -20,11 +17,11 @@ const body = ( ); -const CopyAction = ({ color = 'text' }: Pick) => ( +const copyAction = ( ); @@ -51,12 +48,12 @@ const comments: EuiCommentProps[] = [ event: 'added a comment', timestamp: 'on Jan 1, 2020', children: body, - actions: , + actions: copyAction, }, { username: 'juanab', timelineAvatarAriaLabel: 'Juana Barros', - actions: , + actions: copyAction, event: 'pushed incident X0Z235', timestamp: 'on Jan 3, 2020', }, @@ -71,7 +68,7 @@ const comments: EuiCommentProps[] = [ { username: 'pedror', timelineAvatarAriaLabel: 'Pedro Rodriguez', - actions: , + actions: copyAction, event: complexEvent, timestamp: 'on Jan 11, 2020', eventIcon: 'tag', @@ -82,7 +79,7 @@ const comments: EuiCommentProps[] = [ timelineAvatarAriaLabel: 'Assistant', timestamp: 'on Jan 14, 2020, 1:39:04 PM', children:

An error ocurred sending your message.

, - actions: , + actions: copyAction, eventColor: 'danger', }, ]; From 500a178b1dbddbc2886d0716a551f1d5bbc1c32d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 18 Oct 2023 08:49:02 -0700 Subject: [PATCH 18/20] [storybook] Revert eventColor action as well --- .../comment_list/comment_event.stories.tsx | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx index 2e163530398..b1d0bb1be35 100644 --- a/src/components/comment_list/comment_event.stories.tsx +++ b/src/components/comment_list/comment_event.stories.tsx @@ -8,7 +8,6 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { useArgs } from '@storybook/preview-api'; import { EuiButtonIcon } from '../button'; import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; @@ -37,46 +36,37 @@ const meta: Meta = { }, }; -const useRenderWithColorAwareAction = (args: EuiCommentEventProps) => { - const [{ eventColor }] = useArgs(); - const buttonColor = - eventColor && eventColor !== 'subdued' && eventColor !== 'transparent' - ? eventColor - : 'text'; - - const button = ( - - ); - return ; -}; +const exampleAction = ( + +); export default meta; type Story = StoryObj; export const Regular: Story = { - render: useRenderWithColorAwareAction, args: { event: 'added a comment', eventIcon: 'faceHappy', eventIconAriaLabel: 'Happy face comment icon', timestamp: 'on Jan 1, 2020', + actions: exampleAction, children: 'Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.', }, }; export const Update: Story = { - render: useRenderWithColorAwareAction, args: { event: 'added a comment', eventIcon: 'faceHappy', eventIconAriaLabel: 'Happy face comment icon', timestamp: 'on Jan 1, 2020', + actions: exampleAction, }, }; From 5ac2f4b13f4edc154967210a8bf8d39d470a0761 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 18 Oct 2023 09:05:22 -0700 Subject: [PATCH 19/20] Restore `plain` color --- src-docs/src/views/comment/comment_flexible.tsx | 1 + src/components/comment_list/comment_event.stories.tsx | 1 + src/components/comment_list/comment_event.styles.ts | 3 +++ src/components/comment_list/comment_event.tsx | 3 ++- 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/comment/comment_flexible.tsx b/src-docs/src/views/comment/comment_flexible.tsx index 3a63840f8a5..4af633f7ae5 100644 --- a/src-docs/src/views/comment/comment_flexible.tsx +++ b/src-docs/src/views/comment/comment_flexible.tsx @@ -104,6 +104,7 @@ export default () => { }> = [ { value: 'subdued', text: 'subdued' }, { value: 'transparent', text: 'transparent' }, + { value: 'plain', text: 'plain' }, { value: 'danger', text: 'danger' }, { value: 'warning', text: 'warning' }, { value: 'accent', text: 'accent' }, diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx index b1d0bb1be35..5dfd0902c84 100644 --- a/src/components/comment_list/comment_event.stories.tsx +++ b/src/components/comment_list/comment_event.stories.tsx @@ -24,6 +24,7 @@ const meta: Meta = { undefined, 'subdued', 'transparent', + 'plain', 'warning', 'danger', 'success', diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 1e953d537c2..42530c43101 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -37,6 +37,9 @@ export const euiCommentEventBorderColors = ({ transparent: css` border-color: ${euiTheme.border.color}; `, + plain: css` + border-color: ${euiTheme.border.color}; + `, }; }; diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index c1e1fd874e3..4747e3910c9 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -56,7 +56,7 @@ export interface EuiCommentEventProps extends CommonProps { /** * Background color for the comment's header. */ - eventColor?: Exclude; + eventColor?: EuiPanelProps['color']; } export const EuiCommentEvent: FunctionComponent = ({ @@ -106,6 +106,7 @@ export const EuiCommentEvent: FunctionComponent = ({ color: type === 'custom' ? 'transparent' : eventColor, paddingSize: type === 'custom' ? 'none' : 's', borderRadius: type === 'regular' ? 'none' : 'm', + hasShadow: false, // `plain` color needs this }), [type, eventColor] ); From 30e0dc57f414de32d83893a2df96c844ffa64aec Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 18 Oct 2023 09:28:51 -0700 Subject: [PATCH 20/20] Improve Storybook DX further - the `actions` control for JSX is very annoying, this makes it take up less space on the pane and also super easy to toggle on/off --- .../comment_list/comment_event.stories.tsx | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx index 5dfd0902c84..9a4ee0c8cb5 100644 --- a/src/components/comment_list/comment_event.stories.tsx +++ b/src/components/comment_list/comment_event.stories.tsx @@ -34,18 +34,24 @@ const meta: Meta = { control: { type: 'radio' }, defaultValue: undefined, }, + actions: { + control: 'radio', + options: ['Example action', 'No actions'], + mapping: { + 'Example action': ( + + ), + 'No actions': null, + }, + }, }, }; -const exampleAction = ( - -); - export default meta; type Story = StoryObj; @@ -55,7 +61,7 @@ export const Regular: Story = { eventIcon: 'faceHappy', eventIconAriaLabel: 'Happy face comment icon', timestamp: 'on Jan 1, 2020', - actions: exampleAction, + actions: 'Example action', children: 'Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.', }, @@ -67,12 +73,13 @@ export const Update: Story = { eventIcon: 'faceHappy', eventIconAriaLabel: 'Happy face comment icon', timestamp: 'on Jan 1, 2020', - actions: exampleAction, + actions: 'Example action', }, }; export const Custom: Story = { args: { + actions: 'No actions', children: 'No header or wrapper should appear if no event, icon, timestamp, or actions are passed', },