fix: copy button and long value components fixes (#219)

Author: bocembocem

src/lib/kit/components/CopyButton/CopyButton.scss

@@ -1,6 +1,14 @@
 @import '../../styles/variables.scss';
 
 .#{$ns}copy-button {
+    width: 20px;
     display: none;
-    margin: 2px 0 0 5px;
+    position: relative;
+    margin: -1px 0 0 5px;
+
+    &__button {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }

src/lib/kit/components/CopyButton/CopyButton.tsx

@@ -21,7 +21,11 @@ export interface CopyButtonProps {
 
 export const CopyButton: React.FC<CopyButtonProps> = ({spec, value}) => {
     if ((isStringSpec(spec) || isNumberSpec(spec)) && spec.viewSpec.copy) {
-        return <ClipboardButton className={b()} text={`${value}`} size="s" />;
+        return (
+            <div className={b()}>
+                <ClipboardButton className={b('button')} text={`${value}`} size="xs" />
+            </div>
+        );
     }
 
     return null;

src/lib/kit/components/LongValue/LongValue.scss

@@ -2,6 +2,13 @@
 
 .#{$ns}long-value {
     max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &_open {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
 
     &_long {
         cursor: pointer;
@@ -10,8 +17,4 @@
             color: var(--g-color-text-secondary);
         }
     }
-
-    &__container {
-        display: flex;
-    }
 }

src/lib/kit/components/LongValue/LongValue.tsx

@@ -21,18 +21,6 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
 
     const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
 
-    const currentTextProperies = React.useMemo(() => {
-        let wordBreak: 'break-all' | undefined;
-        let whiteSpace: 'break-spaces' | undefined;
-
-        if (open) {
-            wordBreak = 'break-all';
-            whiteSpace = 'break-spaces';
-        }
-
-        return {wordBreak, whiteSpace};
-    }, [open]);
-
     React.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -58,10 +46,14 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
     });
 
     return (
-        <div className={b('container')} ref={ref} onClick={long ? handleClick : undefined}>
-            <Text className={b({long}, className)} ellipsis={true} {...currentTextProperies}>
-                {value}
-            </Text>
-        </div>
+        <Text
+            as="div"
+            ref={ref}
+            className={b({open, long}, className)}
+            // @ts-ignore
+            onClick={long ? handleClick : undefined}
+        >
+            {value}
+        </Text>
     );
 };

src/stories/components/Editor/Editor.tsx

@@ -159,22 +159,26 @@ export const Editor: React.FC<EditorProps> = ({spec: externalSpec, value, viewMo
                                     />
                                 </div>
                             ) : null}
-                            <div className={b('input-view', {hidden: toggler !== 'view'})}>
-                                <Flex gap={1} spacing={{mb: 6}}>
-                                    <Text variant="body-2">Enable showLayoutDescription props</Text>
-                                    <Switch
-                                        onChange={() => setShowLayoutDescription((v) => !v)}
-                                        className={b('switch')}
+                            {toggler === 'view' ? (
+                                <div className={b('input-view')}>
+                                    <Flex gap={1} spacing={{mb: 6}}>
+                                        <Text variant="body-2">
+                                            Enable showLayoutDescription props
+                                        </Text>
+                                        <Switch
+                                            onChange={() => setShowLayoutDescription((v) => !v)}
+                                            className={b('switch')}
+                                        />
+                                    </Flex>
+                                    <DynamicView
+                                        {...getViewProps(
+                                            form.values.input,
+                                            spec,
+                                            showLayoutDescription,
+                                        )}
                                     />
-                                </Flex>
-                                <DynamicView
-                                    {...getViewProps(
-                                        form.values.input,
-                                        spec,
-                                        showLayoutDescription,
-                                    )}
-                                />
-                            </div>
+                                </div>
+                            ) : null}
                             {toggler === 'json' ? (
                                 <div className={b('monaco')}>
                                     <MonacoInput {...getValuesEditorProps(form.values.input)} />

src/stories/components/InputPreview/InputPreview.tsx

@@ -175,12 +175,14 @@ export const InputPreview: React.FC<InputPreviewProps> = ({
                                 search={searchInput}
                             />
                         </div>
-                        <div className={b('input-view', {hidden: togglerInput !== 'view'})}>
-                            <DynamicView
-                                value={form.values.input}
-                                spec={transformIncorrect(form.values.options)}
-                            />
-                        </div>
+                        {togglerInput === 'view' ? (
+                            <div className={b('input-view')}>
+                                <DynamicView
+                                    value={form.values.input}
+                                    spec={transformIncorrect(form.values.options)}
+                                />
+                            </div>
+                        ) : null}
                         {togglerInput === 'json' ? (
                             <div className={b('monaco')}>{renderMonaco(form.values.input)}</div>
                         ) : null}