feat(codeeditor): +new label and actions layout for codeeditor, minor…

.changeset/huge-doodles-bathe.md

@@ -0,0 +1,5 @@
+---
+'@coveord/plasma-mantine': patch
+---
+
+Changed the layout of the label and actions of the codeeditor, minor color changes, test fixed

packages/mantine/src/components/CodeEditor/CodeEditor.module.css

@@ -1,22 +1,32 @@
 .root {
-    --ce-bg: var(--mantine-color-gray-0);
+    --ce-bg: var(--mantine-color-white);
     --ce-border-color: var(--mantine-color-default-border);
 
     border: 1px solid var(--ce-border-color);
     border-radius: var(--mantine-radius-lg);
     z-index: 1;
-    height: 100%;
     background-color: var(--ce-bg);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 
     @mixin light {
-        --ce-bg: var(--mantine-color-gray-0);
+        --ce-bg: var(--mantine-color-white);
     }
 
     @mixin dark {
         --ce-bg: var(--mantine-color-black);
     }
 }
 
+.actions {
+    border-bottom: 1px solid var(--ce-border-color);
+}
+
+.editor {
+    flex: 1;
+}
+
 /*
  * The find widget's buttons (close, "Find in Selection", etc.) show a pointer-style hover tooltip.
  * A monaco bug (microsoft/monaco-editor#5208, #5139) makes that tooltip reposition on layout, which
@@ -43,7 +53,7 @@
 .disabled {
     @mixin light {
         --ce-bg: var(--mantine-color-gray-1);
-        --ce-border-color: var(--mantine-color-gray-1);
+        --ce-border-color: var(--mantine-color-default-border);
 
         :global {
             .monaco-editor {

packages/mantine/src/components/CodeEditor/CodeEditor.tsx

@@ -85,9 +85,9 @@ const defaultProps = {
     language: 'plaintext',
     monacoLoader: 'local',
     defaultValue: '',
-    minHeight: 300,
+    minHeight: 350,
     justify: 'flex-start',
-    gap: 'sm',
+    gap: 'xxs',
 } satisfies Partial<CodeEditorProps>;
 
 export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
@@ -151,7 +151,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
             inherit: true,
             rules: [],
             colors: {
-                'editor.background': theme.colors.gray[0],
+                'editor.background': '#ffffff', // mantine color white is #fff and monaco only accepts 6 digits
             },
         });
     };
@@ -206,7 +206,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ) : null;
 
     const _buttons = (
-        <Group justify="right" gap="xs">
+        <Group justify="right" gap="xs" p="xs" className={CodeEditorClasses.actions}>
             <Search handleSearch={handleSearch} />
             <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />
         </Group>
@@ -218,58 +218,59 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
 
     const _editor = loaded ? (
         <Box
-            p="md"
-            pl="xs"
             className={cx(
                 CodeEditorClasses.root,
                 {[CodeEditorClasses.error]: hasError},
                 {[CodeEditorClasses.disabled]: disabled || readOnly},
             )}
             data-testid="editor-wrapper"
         >
-            <Editor
-                key={editorKey}
-                onValidate={handleValidate}
-                defaultLanguage={language}
-                theme={editorTheme}
-                options={{
-                    minimap: {enabled: false},
-                    wordWrap: 'on',
-                    scrollBeyondLastLine: false,
-                    formatOnPaste: true,
-                    fontSize: px(theme.fontSizes.xs) as number,
-                    readOnly: disabled || readOnly,
-                    stickyScroll: {enabled: false},
-                    tabSize,
-                }}
-                value={_value}
-                onChange={(nextValue) => handleChange(nextValue ?? '')}
-                beforeMount={(monaco) => {
-                    registerLanguages(monaco);
-                    registerThemes(monaco);
-                }}
-                onMount={(editor) => {
-                    editorRef.current = editor;
-                    if (editorHandle) {
-                        editorHandle.current = editor;
-                    }
-                    editor.onDidFocusEditorText(() => onFocus?.());
-                    editor.onDidDispose(() => {
-                        // If the editor is disposed while the component is still mounted (e.g. React's
-                        // `<Activity>` tore down the effects to hide the panel), force a fresh instance so we
-                        // never render against a disposed editor when the panel becomes visible again.
-                        setEditorKey((key) => key + 1);
-                    });
-                    editor.onDidBlurEditorText(async () => {
-                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
-                        setTimeout(async () => {
-                            if (!hasMonacoErrorRef.current) {
-                                await editor?.getAction('editor.action.formatDocument')?.run();
-                            }
-                        }, 550);
-                    });
-                }}
-            />
+            {_buttons}
+            <Box p="md" pl="xs" className={CodeEditorClasses.editor}>
+                <Editor
+                    key={editorKey}
+                    onValidate={handleValidate}
+                    defaultLanguage={language}
+                    theme={editorTheme}
+                    options={{
+                        minimap: {enabled: false},
+                        wordWrap: 'on',
+                        scrollBeyondLastLine: false,
+                        formatOnPaste: true,
+                        fontSize: px(theme.fontSizes.xs) as number,
+                        readOnly: disabled || readOnly,
+                        stickyScroll: {enabled: false},
+                        tabSize,
+                    }}
+                    value={_value}
+                    onChange={(nextValue) => handleChange(nextValue ?? '')}
+                    beforeMount={(monaco) => {
+                        registerLanguages(monaco);
+                        registerThemes(monaco);
+                    }}
+                    onMount={(editor) => {
+                        editorRef.current = editor;
+                        if (editorHandle) {
+                            editorHandle.current = editor;
+                        }
+                        editor.onDidFocusEditorText(() => onFocus?.());
+                        editor.onDidDispose(() => {
+                            // If the editor is disposed while the component is still mounted (e.g. React's
+                            // `<Activity>` tore down the effects to hide the panel), force a fresh instance so we
+                            // never render against a disposed editor when the panel becomes visible again.
+                            setEditorKey((key) => key + 1);
+                        });
+                        editor.onDidBlurEditorText(async () => {
+                            // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
+                            setTimeout(async () => {
+                                if (!hasMonacoErrorRef.current) {
+                                    await editor?.getAction('editor.action.formatDocument')?.run();
+                                }
+                            }, 550);
+                        });
+                    }}
+                />
+            </Box>
         </Box>
     ) : (
         <Center className={CodeEditorClasses.editor}>
@@ -278,12 +279,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     );
 
     const height = Math.max(Number.isNaN(parentHeight) ? 0 : parentHeight, minHeight);
+
     return (
         <Stack ref={ref} {...others} h={h ?? height} mah={mah ?? maxHeight}>
-            <Group justify="space-between">
-                {_header}
-                {_buttons}
-            </Group>
+            {_header}
             {_editor}
             {_error}
         </Stack>

packages/mantine/src/components/CodeEditor/__tests__/CodeEditor.spec.tsx

@@ -83,6 +83,7 @@
         const user = userEvent.setup();
         const onCopySpy = vi.fn();
         render(<CodeEditor onCopy={onCopySpy} />);
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
         await user.click(screen.getByRole('button', {name: /copy/i}));
 
         expect(onCopySpy).toHaveBeenCalledTimes(1);
@@ -101,7 +102,7 @@
     it('defines editorHandle on mount', async () => {
         let editorHandle: React.MutableRefObject<editor.IStandaloneCodeEditor | null> = null!;
         const EditorWrapper = () => {
             editorHandle = useRef<editor.IStandaloneCodeEditor | null>(
                 null,
             ) as React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
             return <CodeEditor editorHandle={editorHandle} />;