[EuiComment] Create styles header and border for EuiCommentEvent #7288

andreadelrio · 2023-10-16T03:32:55Z

Summary

Continuation of the work started by Bree Hall in #7253
Closes #7238

This PR extends the eventColor prop on EuiCommentEvent and applies the color to the entire comment header, not just the panel included inside of the header. This also updates the color transparent to EuiComment of type regular.

EuiComment type regular, eventColor="danger"

Before

After

EuiComment type regular, eventColor="transparent"

Before

After

I also updated the Comment section in the docs to include the eventColor prop and indicate the default color for comments of type regular and update.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
Release checklist
- A changelog entry exists and is marked appropriately.
  ~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist~
- Updated the Figma library counterpart

…eader color to the entire comment header, not just the text background color

…e the color toggling

- 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

…r event borders for testing

…olors for event borders for testing" This reverts commit e5341a2.

- by setting border not via the shorthand property

+ simplify padding logic generally to exist on the `EuiPanel`, not on the header wrapper + code organization w/ comments

+ clean up storybook - add a story for each type, and make the example action change in color as well

cee-chen

CSS/JS cleanups have been pushed up - I just have two questions remaining for you @andreadelrio!

src/components/comment_list/comment_event.tsx

src-docs/src/views/comment/comment_list.tsx

This reverts commit c09a629.

- 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

kibanamachine · 2023-10-18T16:59:19Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7288/
Storybook: https://eui.elastic.co/pr_7288/storybook

elasticmachine · 2023-10-18T16:59:23Z

💚 Build Succeeded

Buildkite Build
Commit: 30e0dc5

History

💚 Build #838 succeeded bb18869
💚 Build #837 succeeded ac1e51d
💚 Build #836 succeeded 0edacd3

cee-chen · 2023-10-18T17:23:05Z

Was waiting for staging to do one final QA pass! I think may just found a regression(?) with the update comments in how the avatar is aligned:

screencap.mov

Compared to prod: https://eui.elastic.co/#/display/comment-list#comment

The avatar now jumps a bit ~~due to the extra padding added for the new bg colors~~ because the previous colored example didn't have any icons, and the new one does. @andreadelrio any preference on this?

Vertically align the avatar to the top instead of to the center
Reduce the panel padding from 8px to 4px so the avatar doesn't jump
Leave it as it is, as this likely won't be noticeable to actual production use cases

andreadelrio · 2023-10-18T17:38:28Z

The avatar now jumps a bit ~~due to the extra padding added for the new bg colors~~ because the previous colored example didn't have any icons, and the new one does. @andreadelrio any preference on this?

Vertically align the avatar to the top instead of to the center

Reduce the panel padding from 8px to 4px so the avatar doesn't jump

Leave it as it is, as this likely won't be noticeable to actual production use cases

Nice catch! I would go with #3 with #1 as my second option.

cee-chen · 2023-10-18T17:45:58Z

Leaving it as-is makes sense to me, just wanted to make sure it was a deliberate choice! Everything else looks fantastic - let's ship it!

cee-chen

🎉

`v89.1.0`⏩`v90.0.0` The majority of changes in this PR come from: - **EuiContextMenu** being converted to Emotion (elastic/eui#7312). If your usage of `EuiContextMenu` was significantly affected, we recommend pulling down this PR and QAing it locally. - `defaultProps` being removed from some very widespread components, particularly **EuiButton**, in anticipation of React's upcoming deprecation. (elastic/eui@b7dc9b4) **NOTE**: This only affected Enzyme snapshots, and did not affect production behavior. [Commits](https://github.com/elastic/kibana/pull/170179/commits) have been broken up by component changes as well as types of changes. --- ## [`90.0.0`](https://github.com/elastic/eui/tree/v90.0.0) - Updated the `eventColor` prop on `EuiCommentEvent` to apply the color to the entire comment header. ([#7288](elastic/eui#7288)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support a new controlled selection API: `selection.selected` ([#7321](elastic/eui#7321)) **Bug fixes** - Fixed controlled `EuiFieldNumbers` not correctly updating native validity state ([#7291](elastic/eui#7291)) - Fixed `EuiListGroupItem` to pass `style` props to the wrapping `<li>` element alongside `className` and `css`. All other props will be passed to the underlying content. ([#7298](elastic/eui#7298)) - Fixed `EuiListGroupItem`'s non-transitioned transform on hover/focus ([#7298](elastic/eui#7298)) - Fixed `EuiDataGrid`s with `gridStyle.stripes` sometimes showing buggy row striping after being sorted ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to not conflict with `gridStyle.stripes` if dynamically updated ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to support multiple space-separated classes ([#7301](elastic/eui#7301)) - Fixed `EuiInputPopover` not calling `onPanelResize` callback prop ([#7305](elastic/eui#7305)) - Fixed `EuiDualRange` incorrectly positioning highlights when rendered with `showInput="inputWithPopover"` ([#7305](elastic/eui#7305)) - Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate ([#7309](elastic/eui#7309)) - `EuiContextMenu` now renders text colors correctly when used within an `EuiBottomBar` ([#7312](elastic/eui#7312)) - Fixed the width of `EuiSuperDatePicker`'s Absolute date picker ([#7313](elastic/eui#7313)) - Fixed `EuiDataGrid` cells visually cutting off overflowing content a little too quickly ([#7320](elastic/eui#7320)) **Deprecations** - Deprecated `EuiBasicTable` and `EuiInMemoryTable`'s ref `setSelection` API. Use the new `selection.selected` API instead. ([#7321](elastic/eui#7321)) **Breaking changes** - Removed `EuiPageTemplate_Deprecated`, `EuiPageSideBar_Deprecated`, and `EuiPageContent*_Deprecated` ([#7265](elastic/eui#7265)) - Removed the `ghost` color option from `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`. Use an `<EuiThemeProvider colorMode="dark">` wrapper and `color="text"` instead. ([#7296](elastic/eui#7296)) **Dependency updates** - Updated `refractor` to v3.6.0 ([#7127](elastic/eui#7127)) - Updated `rehype-raw` to v5.1.0 ([#7127](elastic/eui#7127)) - Updated `vfile` to v4.2.1 ([#7127](elastic/eui#7127)) **Accessibility** - `EuiContextMenu` now correctly respects reduced motion preferences ([#7312](elastic/eui#7312)) - `EuiAccordion`s no longer attempt to focus child content when the accordion is externally opened via `forceState`, but will continue to focus expanded content when users click the toggle button. ([#7314](elastic/eui#7314)) **CSS-in-JS conversions** - Converted `EuiContextMenu`, `EuiContextMenuPanel`, and `EuiContextMenuItem` to Emotion; Removed `$euiContextMenuWidth` ([#7312](elastic/eui#7312))

breehall and others added 9 commits October 4, 2023 10:50

[EuiCommentEvent] Extended the eventColor prop to apply the desired h…

e0a2a4e

…eader color to the entire comment header, not just the text background color

Storybook - Create simple storybook for EuiCommentEvent to demonstrat…

f6c139e

…e the color toggling

[EuiComment]

80bdfa0

- 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

Update test cases

abb1f55

[DO NOT MERGE] Added a doc with the different variations of colors fo…

e5341a2

…r event borders for testing

Revert "[DO NOT MERGE] Added a doc with the different variations of c…

762ded3

…olors for event borders for testing" This reverts commit e5341a2.

update examples

8cb2a47

update example

343ef77

clean up

292b43d

andreadelrio changed the title ~~Comment list colors~~ [EuiComment] Create styles header and border for EuiCommentEvent Oct 16, 2023

add cl

0edacd3

andreadelrio marked this pull request as ready for review October 16, 2023 04:34

andreadelrio requested a review from a team as a code owner October 16, 2023 04:34

andreadelrio requested a review from cee-chen October 16, 2023 04:35

remove line

ac1e51d

cee-chen mentioned this pull request Oct 17, 2023

[EuiComment] 🛑 WIP Create styles header and border for EuiCommentEvent #7253

Closed

11 tasks

cee-chen added 6 commits October 17, 2023 15:13

Change actions button examples to match eventColor

c09a629

[css] DRY out repeated border styles

c16b791

- by setting border not via the shorthand property

Fix missing padding on undefined color update type comments

d02181b

+ simplify padding logic generally to exist on the `EuiPanel`, not on the header wrapper + code organization w/ comments

Adds docs/storybook testing for undefined eventColor value

b9dd8b0

+ clean up storybook - add a story for each type, and make the example action change in color as well

Update snapshots

5e0cb2e

Merge branch 'main' into CommentList-Colors

bb18869

cee-chen reviewed Oct 17, 2023

View reviewed changes

src/components/comment_list/comment_event.tsx Outdated Show resolved Hide resolved

src-docs/src/views/comment/comment_list.tsx Outdated Show resolved Hide resolved

cee-chen added 5 commits October 18, 2023 08:46

Merge branch 'main' into CommentList-Colors

7831d5a

Revert "Change actions button examples to match eventColor"

5a1fd73

This reverts commit c09a629.

[storybook] Revert eventColor action as well

500a178

Restore plain color

5ac2f4b

Improve Storybook DX further

30e0dc5

- 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

andreadelrio requested a review from cee-chen October 18, 2023 17:02

cee-chen approved these changes Oct 18, 2023

View reviewed changes

andreadelrio merged commit 6f5d004 into elastic:main Oct 18, 2023
7 checks passed

cee-chen mentioned this pull request Oct 30, 2023

Upgrade EUI to v90.0.0 elastic/kibana#170179

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiComment] Create styles header and border for EuiCommentEvent #7288

[EuiComment] Create styles header and border for EuiCommentEvent #7288

andreadelrio commented Oct 16, 2023 •

edited by cee-chen

Loading

cee-chen left a comment

kibanamachine commented Oct 18, 2023

elasticmachine commented Oct 18, 2023

cee-chen commented Oct 18, 2023 •

edited

Loading

andreadelrio commented Oct 18, 2023 •

edited

Loading

cee-chen commented Oct 18, 2023

cee-chen left a comment

[EuiComment] Create styles header and border for EuiCommentEvent #7288

[EuiComment] Create styles header and border for EuiCommentEvent #7288

Conversation

andreadelrio commented Oct 16, 2023 • edited by cee-chen Loading

Summary

EuiComment type regular, eventColor="danger"

EuiComment type regular, eventColor="transparent"

QA

General checklist

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 18, 2023

elasticmachine commented Oct 18, 2023

💚 Build Succeeded

History

cee-chen commented Oct 18, 2023 • edited Loading

andreadelrio commented Oct 18, 2023 • edited Loading

cee-chen commented Oct 18, 2023

cee-chen left a comment

Choose a reason for hiding this comment

andreadelrio commented Oct 16, 2023 •

edited by cee-chen

Loading

cee-chen commented Oct 18, 2023 •

edited

Loading

andreadelrio commented Oct 18, 2023 •

edited

Loading