[EuiComment] Create styles header and border for EuiCommentEvent#7288
[EuiComment] Create styles header and border for EuiCommentEvent#7288andreadelrio merged 22 commits intoelastic:mainfrom
Conversation
…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
left a comment
There was a problem hiding this comment.
CSS/JS cleanups have been pushed up - I just have two questions remaining for you @andreadelrio!
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
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
|
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.movCompared to prod: https://eui.elastic.co/#/display/comment-list#comment The avatar now jumps a bit
|
|
|
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! |
`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))
Summary
Continuation of the work started by Bree Hall in #7253
Closes #7238
This PR extends the
eventColorprop on EuiCommentEvent and applies the color to the entire comment header, not just the panel included inside of the header. This also updates the colortransparentto EuiComment of typeregular.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
eventColorprop and indicate the default color for comments of typeregularandupdate.QA
Remove or strikethrough items that do not apply to your PR.
General checklist
@defaultif default values are missing) and playground toggles~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)