Sidebar feedback 999 (codesandbox#3585)

* different selection color for editor

* remove max height from animation of collapsible

* dont make input jump

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/FileInput.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react';
 
 import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import { FormField, Input, Stack } from '@codesandbox/components';
+import { FormField, Input } from '@codesandbox/components';
 
 function select(el) {
   if (el) {
@@ -30,6 +30,7 @@ export const FileInput: FunctionComponent<Props> = ({
   onChange,
   error,
   id,
+  ...props
 }) => {
   const [currentValue, setCurrentValue] = useState(title);
 
@@ -50,25 +51,24 @@ export const FileInput: FunctionComponent<Props> = ({
   };
 
   return (
-    <Stack direction="vertical" gap={1}>
-      <FormField
-        label={title ? `rename ${title}` : 'set name new file'}
-        hideLabel
-        css={{ height: '100%', padding: 0 }}
-        id={`input-${id}`}
-      >
-        <Input
-          onChange={handleChange}
-          onBlur={() => onCommit(currentValue, true)}
-          onKeyUp={handleKeyUp}
-          ref={select}
-          value={currentValue}
-          autoComplete="off"
-          spellCheck="false"
-          aria-invalid={Boolean(error)}
-          aria-errormessage={`error-${id}`}
-        />
-      </FormField>
-    </Stack>
+    <FormField
+      label={title ? `rename ${title}` : 'set name new file'}
+      hideLabel
+      css={{ height: '100%', padding: 0 }}
+      id={`input-${id}`}
+    >
+      <Input
+        onChange={handleChange}
+        onBlur={() => onCommit(currentValue, true)}
+        onKeyUp={handleKeyUp}
+        ref={select}
+        value={currentValue}
+        autoComplete="off"
+        spellCheck="false"
+        aria-invalid={Boolean(error)}
+        aria-errormessage={`error-${id}`}
+        {...props}
+      />
+    </FormField>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/index.tsx

@@ -201,6 +201,14 @@ const Entry: React.FC<IEntryProps> = ({
                 onCancel={resetState}
                 onCommit={handleRename}
                 error={error}
+                css={css({
+                  // i know how this looks, but to make the input feel like
+                  // it's editing in place, we move it back half the space
+                  // 0.5 * gap of 2 = 1 and then another 1px for the border
+                  // :upside-down:smile:
+                  marginLeft: '-5px',
+                  paddingLeft: 1,
+                })}
               />
             ) : (
               <Text maxWidth={150}>{title}</Text>

packages/common/src/themes/codesandbox-black.js

@@ -40,7 +40,7 @@ const colors = {
     lineHighlightBackground: tokens.grays[600],
     lineHighlightBorder: tokens.grays[600],
     rangeHighlightBackground: tokens.grays[600],
-    selectionBackground: tokens.grays[600],
+    selectionBackground: tokens.blues[500] + '33', // 20% opacity
     selectionHighlightBackground: tokens.grays[600],
     wordHighlightStrongBackground: tokens.grays[600],
     wordHighlightBackground: tokens.grays[600],
@@ -201,7 +201,7 @@ const colors = {
     hoverBackground: null,
   },
   selection: {
-    background: tokens.blues[700],
+    background: tokens.blues[500] + '40', // 25% opacity
   },
   separator: {
     background: tokens.grays[900],

packages/components/src/components/Collapsible/index.tsx

@@ -47,7 +47,6 @@ export const Body = styled(Element)<{
   css({
     borderBottom: props.open ? '1px solid' : 'none',
     borderColor: 'sideBar.border',
-    maxHeight: props.open ? '1000px' : 0,
     overflow: props.open ? 'auto' : 'hidden',
     paddingTop: props.open ? 4 : 0,
     paddingBottom: props.open ? 8 : 0,