Make style editor inputs more obvious resemble inputs

facebook · Jul 24, 2019 · 2e8b9fa · 2e8b9fa
1 parent 4c61095
commit 2e8b9fa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -68,8 +68,12 @@ export default function AutoSizeInput({
       return;
     }
 
+    // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
+    // Not sure why this is, but the old DevTools did a similar thing.
+    const targetWidth = Math.ceil(scrollWidth) + 1;
+
     if (inputRef.current !== null) {
-      inputRef.current.style.width = `${scrollWidth}px`;
+      inputRef.current.style.width = `${targetWidth}px`;
     }
   }, [value]);
 

diff --git a/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css b/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -42,6 +42,12 @@
 
 .Input {
   flex: 0 1 auto;
+  padding: 1px;
+  box-shadow: 0px 1px 3px transparent;
+}
+.Input:focus {
+  color: var(--color-text);
+  box-shadow: 0px 1px 3px var(--color-shadow);
 }
 
 .Empty {