1506: Adds clickabe icon padding

workfloworchestrator · Nov 12, 2024 · 6e44247 · 6e44247
1 parent 87de232
commit 6e44247
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/packages/orchestrator-ui-components/src/components/WfoKeyValueTable/WfoValueCell.tsx b/packages/orchestrator-ui-components/src/components/WfoKeyValueTable/WfoValueCell.tsx
@@ -24,17 +24,20 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
     const {
         clipboardIconSize,
         clipboardIconStyle,
-        clickable,
+        clickableStyle,
         getBackgroundColorStyleForRow,
         valueColumnStyle,
         valueCellStyle,
     } = useWithOrchestratorTheme(getStyles);
 
     const shouldRenderCopyColumn = enableCopyIcon && textToCopy;
 
-    const valueToRender = React.isValidElement(value)
-        ? value
-        : JSON.stringify(value);
+    const valueToRender =
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        React.isValidElement(value)
+            ? value
+            : JSON.stringify(value);
 
     const copyText =
         typeof textToCopy === 'object'
@@ -48,7 +51,7 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
                 {shouldRenderCopyColumn && (
                     <EuiCopy textToCopy={copyText || ''}>
                         {(copy) => (
-                            <div onClick={copy} css={clickable}>
+                            <div onClick={copy} css={clickableStyle}>
                                 <WfoClipboardCopy
                                     width={clipboardIconSize}
                                     height={clipboardIconSize}

diff --git a/packages/orchestrator-ui-components/src/components/WfoKeyValueTable/styles.ts b/packages/orchestrator-ui-components/src/components/WfoKeyValueTable/styles.ts
@@ -73,9 +73,10 @@ export const getStyles = ({ theme }: WfoTheme) => {
         paddingBottom: 0,
     });
 
-    const clickable = css({
+    const clickableStyle = css({
         marginLeft: clipboardIconMargin,
         cursor: 'pointer',
+        paddingRight: theme.size.s,
     });
 
     return {
@@ -87,7 +88,7 @@ export const getStyles = ({ theme }: WfoTheme) => {
         keyCellStyle,
         valueCellStyle,
         clipboardIconStyle,
-        clickable,
+        clickableStyle,
         lightBackground,
         darkBackground,
         getBackgroundColorStyleForRow,