Skip to content

Commit

Permalink
Replace style with css prop in CSP package (elastic#202013)
Browse files Browse the repository at this point in the history
## Summary

Part of the resolution of this issue: 
- elastic#149246

Removes the `style` prop in React components and elements to avoid using
inline styles. Instead, it uses now the `emotion.css` prop to
dynamically attach all styles to the native `class` attribute.

### Motivation

Using inline styles at scale causes a performance penalty at rendering
time. It's way more efficient to attach styles to a single or several
classnames instead.

### Screenshots

<details><summary>Default Edge</summary>
<img width="1028" alt="Screenshot 2024-12-02 at 16 27 47"
src="https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81">

</details> 

<details><summary>Graph Popovers</summary>
<img width="175" alt="Screenshot 2024-12-02 at 16 27 57"
src="https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d">

</details> 

<details><summary>Graph Stacked Edge Cases</summary>
<img width="1319" alt="Screenshot 2024-12-02 at 16 28 03"
src="https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c">
</details> 


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

- Minor risk with low impact and severity:
- Only risk is CSP graph nodes showing with a different background and
border
  • Loading branch information
albertoblaz authored and CAWilson94 committed Dec 12, 2024
1 parent 7df9e93 commit 468cd08
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export function DefaultEdge({
path={edgePath}
style={{
stroke: euiTheme.colors[color],
}}
css={{
strokeDasharray: '2,2',
}}
markerEnd={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const SvgDefsMarker = () => {
const { euiTheme } = useEuiTheme();

return (
<svg style={{ position: 'absolute', width: 0, height: 0 }}>
<svg css={{ position: 'absolute', width: 0, height: 0 }}>
<defs>
<Marker id="primary" color={euiTheme.colors.primary} />
<Marker id="danger" color={euiTheme.colors.danger} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
<>
<NodeResizeControl
position="right"
style={{ borderColor: 'transparent', background: 'transparent' }}
css={{ borderColor: 'transparent', background: 'transparent' }}
>
<Handle
type="target"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export const NodeIcon = ({ icon, color, x, y }: NodeIconProps) => {
return (
<foreignObject x={x} y={y} width="50" height="50">
<div
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
css={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
>
<EuiIcon type={getSpanIcon(icon) ?? icon} size="l" color={color ?? 'primary'} />
</div>
Expand Down

0 comments on commit 468cd08

Please sign in to comment.