Replace style with css prop in CSP package

elastic · Nov 27, 2024 · 241318d · 241318d
1 parent 2c6c33c
commit 241318d
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 23 deletions.
diff --git a/...ck/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx b/...ck/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx
@@ -48,8 +48,8 @@ const nodeTypes = {
     };
     return (
       <div>
-        <Handle type="source" position={Position.Right} style={handleStyle} />
-        <Handle type="target" position={Position.Left} style={handleStyle} />
+        <Handle type="source" position={Position.Right} css={handleStyle} />
+        <Handle type="target" position={Position.Left} css={handleStyle} />
         {props.data.label}
       </div>
     );

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
@@ -47,8 +47,10 @@ export function DefaultEdge({
     <>
       <BaseEdge
         path={edgePath}
-        style={{
+        css={{
           stroke: euiTheme.colors[color],
+        }}
+        css={{
           strokeDasharray: '2,2',
         }}
         markerEnd={

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
@@ -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} />

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx
@@ -70,14 +70,14 @@ export const DiamondNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
@@ -16,36 +16,36 @@ 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"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="outside"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeResizeControl>
       <Handle
         type="source"
         isConnectable={false}
         position={Position.Left}
         id="inside"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
       <Handle
         type="target"
         isConnectable={false}
         position={Position.Left}
         id="in"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
     </>
   );

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx
@@ -70,14 +70,14 @@ export const EllipseNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx
@@ -70,14 +70,14 @@ export const HexagonNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx
@@ -24,14 +24,14 @@ export const LabelNode: React.FC<NodeProps> = memo((props: NodeProps) => {
         isConnectable={false}
         position={Position.Left}
         id="in"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
       <Handle
         type="source"
         isConnectable={false}
         position={Position.Right}
         id="out"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
     </LabelNodeContainer>
   );

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx
@@ -75,14 +75,14 @@ export const PentagonNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx
@@ -70,14 +70,14 @@ export const RectangleNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { Interpolation, Theme } from '@emotion/react';
 import {
   type EuiIconProps,
   type _EuiBackgroundColor,
@@ -177,7 +178,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>
@@ -217,7 +218,7 @@ export const RoundEuiButtonIcon = styled(EuiButtonIcon)`
   }
 `;
 
-export const HandleStyleOverride: React.CSSProperties = {
+export const HandleStyleOverride: Interpolation<Theme> = {
   background: 'none',
   border: 'none',
 };