Skip to content

Commit

Permalink
[EuiCommentEvent] Restore child classNames removed in Emotion convers…
Browse files Browse the repository at this point in the history 
…ion (#6089)

* Restore `__` child classNames to EuiCommentEvent

- currently used in Kibana for CSS hooks/test selectors

* Add `data` attribute to replace old modifier classes

* [cleanup] Remove emotion CSS with no styles, move modifiers above children

* [cleanup] Remove unnecessary const declarations

- in favor of just calling headerStyles children directly (since there are no concatenated styles)

* [opinionated] move eventHeader into final JSX directly instead of being a separate const

- I'm not seeing a super strong reason for the separate const personally

* Update EuiComment snapshots

* Changelog
  • Loading branch information
@cee-chen
Constance authored and cee-chen committed Aug 2, 2022
1 parent 04e8de6 commit 1634ae0
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 92 deletions.
33 changes: 19 additions & 14 deletions src/components/comment_list/__snapshots__/comment.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ exports[`EuiComment is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
</div>
</li>
Expand Down Expand Up @@ -63,26 +64,27 @@ exports[`EuiComment props event is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
data-type="update"
>
<div
class="emotion-euiCommentEvent__header"
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent-euiCommentEvent__headerPanel"
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
>
<div
class="emotion-euiCommentEvent__headerMain"
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
>
<div
class="emotion-euiCommentEvent__headerData"
class="euiCommentEvent__headerData emotion-euiCommentEvent__headerData"
>
<div
class="emotion-euiCommentEvent__headerUsername"
class="euiCommentEvent__headerUsername emotion-euiCommentEvent__headerUsername"
>
someuser
</div>
<div
class="emotion-euiCommentEvent__headerEvent"
class="euiCommentEvent__headerEvent emotion-euiCommentEvent__headerEvent"
>
commented
</div>
Expand Down Expand Up @@ -123,26 +125,27 @@ exports[`EuiComment props timestamp is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
data-type="update"
>
<div
class="emotion-euiCommentEvent__header"
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent-euiCommentEvent__headerPanel"
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
>
<div
class="emotion-euiCommentEvent__headerMain"
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
>
<div
class="emotion-euiCommentEvent__headerData"
class="euiCommentEvent__headerData emotion-euiCommentEvent__headerData"
>
<div
class="emotion-euiCommentEvent__headerUsername"
class="euiCommentEvent__headerUsername emotion-euiCommentEvent__headerUsername"
>
someuser
</div>
<div
class="emotion-euiCommentEvent__headerTimestamp"
class="euiCommentEvent__headerTimestamp"
>
<time>
21 days ago
Expand Down Expand Up @@ -185,9 +188,10 @@ exports[`EuiComment renders a body 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
>
<div
class="emotion-euiCommentEvent__body-custom"
class="euiCommentEvent__body emotion-euiCommentEvent__body-custom"
>
<p>
This is the body.
Expand Down Expand Up @@ -226,9 +230,10 @@ exports[`EuiComment renders a timeline icon 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
>
<div
class="emotion-euiCommentEvent__body-custom"
class="euiCommentEvent__body emotion-euiCommentEvent__body-custom"
>
<p>
This is the body.
Expand Down
43 changes: 24 additions & 19 deletions src/components/comment_list/__snapshots__/comment_event.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
exports[`EuiCommentEvent is rendered with custom content 1`] = `
<div
class="euiCommentEvent testClass1 testClass2 emotion-euiCommentEvent-custom"
data-type="custom"
>
<div
class="emotion-euiCommentEvent__body-custom"
class="euiCommentEvent__body emotion-euiCommentEvent__body-custom"
>
<p>
Some custom content
Expand All @@ -17,26 +18,27 @@ exports[`EuiCommentEvent is rendered with custom content 1`] = `
exports[`EuiCommentEvent props event is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
data-type="update"
>
<div
class="emotion-euiCommentEvent__header"
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent-euiCommentEvent__headerPanel"
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
>
<div
class="emotion-euiCommentEvent__headerMain"
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
>
<div
class="emotion-euiCommentEvent__headerData"
class="euiCommentEvent__headerData emotion-euiCommentEvent__headerData"
>
<div
class="emotion-euiCommentEvent__headerUsername"
class="euiCommentEvent__headerUsername emotion-euiCommentEvent__headerUsername"
>
someuser
</div>
<div
class="emotion-euiCommentEvent__headerEvent"
class="euiCommentEvent__headerEvent emotion-euiCommentEvent__headerEvent"
>
commented
</div>
Expand All @@ -50,29 +52,31 @@ exports[`EuiCommentEvent props event is rendered 1`] = `
exports[`EuiCommentEvent props eventColor is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
`;

exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
data-type="update"
>
<div
class="emotion-euiCommentEvent__header"
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent-euiCommentEvent__headerPanel"
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
>
<div
class="emotion-euiCommentEvent__headerMain"
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
>
<div
class="emotion-euiCommentEvent__headerData"
class="euiCommentEvent__headerData emotion-euiCommentEvent__headerData"
>
<div
aria-hidden="false"
aria-label="edit"
class="euiAvatar euiAvatar--s euiAvatar--user emotion-euiAvatar-s-user-subdued-euiCommentEvent__headerEventIcon"
class="euiAvatar euiAvatar--s euiAvatar--user euiCommentEvent__headerEventIcon emotion-euiAvatar-s-user-subdued-euiCommentEvent__headerEventIcon"
role="img"
title="edit"
>
Expand All @@ -82,7 +86,7 @@ exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`]
/>
</div>
<div
class="emotion-euiCommentEvent__headerUsername"
class="euiCommentEvent__headerUsername emotion-euiCommentEvent__headerUsername"
>
someuser
</div>
Expand All @@ -96,26 +100,27 @@ exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`]
exports[`EuiCommentEvent props timestamp is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
data-type="update"
>
<div
class="emotion-euiCommentEvent__header"
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent-euiCommentEvent__headerPanel"
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
>
<div
class="emotion-euiCommentEvent__headerMain"
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
>
<div
class="emotion-euiCommentEvent__headerData"
class="euiCommentEvent__headerData emotion-euiCommentEvent__headerData"
>
<div
class="emotion-euiCommentEvent__headerUsername"
class="euiCommentEvent__headerUsername emotion-euiCommentEvent__headerUsername"
>
someuser
</div>
<div
class="emotion-euiCommentEvent__headerTimestamp"
class="euiCommentEvent__headerTimestamp"
>
<time>
21 days ago
Expand Down
4 changes: 4 additions & 0 deletions src/components/comment_list/__snapshots__/comment_list.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ exports[`EuiCommentList is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
</div>
</li>
Expand Down Expand Up @@ -72,6 +73,7 @@ exports[`EuiCommentList props gutterSize l is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
</div>
</li>
Expand Down Expand Up @@ -110,6 +112,7 @@ exports[`EuiCommentList props gutterSize m is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
</div>
</li>
Expand Down Expand Up @@ -148,6 +151,7 @@ exports[`EuiCommentList props gutterSize xl is rendered 1`] = `
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
data-type="custom"
/>
</div>
</li>
Expand Down
23 changes: 11 additions & 12 deletions src/components/comment_list/comment_event.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,17 @@ export const euiCommentEventStyles = ({ euiTheme }: UseEuiTheme) => ({

export const euiCommentEventHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
euiCommentEvent__header: css``,
euiCommentEvent__headerPanel: css``,
// types
regular: css`
background: ${euiTheme.colors.lightestShade};
border-bottom: ${euiTheme.border.thin};
padding: ${euiTheme.size.s};
`,
// variants
hasEventColor: css`
padding: 0;
`,
// Children
euiCommentEvent__headerMain: css`
display: flex;
flex: 1;
Expand All @@ -51,22 +61,11 @@ export const euiCommentEventHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
white-space: pre-wrap;
flex-wrap: wrap;
`,
euiCommentEvent__headerTimestamp: css``,
euiCommentEvent__headerActions: css`
display: flex;
flex-wrap: wrap;
gap: ${euiTheme.size.xs};
`,
// types
regular: css`
background: ${euiTheme.colors.lightestShade};
border-bottom: ${euiTheme.border.thin};
padding: ${euiTheme.size.s};
`,
// variants
hasEventColor: css`
padding: 0;
`,
});

export const euiCommentEventBodyStyles = ({ euiTheme }: UseEuiTheme) => ({
Expand Down
Loading

0 comments on commit 1634ae0

Please sign in to comment.