[form-builder] Make FileInput's focus ring consistent with other inputs

sanity-io · Oct 6, 2020 · 4fc33c9 · 4fc33c9
1 parent 905a920
commit 4fc33c9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 40 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.css b/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.css
@@ -1,14 +1,30 @@
 @import 'part:@sanity/base/theme/variables-style';
 
-.content {
-  display: grid;
-  grid-gap: var(--medium-padding);
+.root {
 }
 
-.functions {
+.content {
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 0 1px var(--hairline-color);
+    pointer-events: none;
+    border-radius: var(--input-border-radius);
+  }
+
+  @nest .root.focused &::after {
+    box-shadow: inset 0 0 0 1px var(--focus-color), 0 0 0 1px var(--focus-color);
+  }
 }
 
-.content + .functions {
+.functions {
   margin-top: var(--small-padding);
 
   @media (--screen-medium) {
@@ -46,7 +62,6 @@
   max-height: 10rem;
   overflow: hidden;
   flex-grow: 1;
-  border-bottom: 1px;
   box-sizing: border-box;
   background-color: color(var(--gray-lightest) alpha(50%));
   border-radius: var(--input-border-radius);
@@ -62,26 +77,10 @@
     }
   }
 
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    box-shadow: inset 0 0 0 1px var(--hairline-color);
-    pointer-events: none;
-  }
-
-  @nest &.readOnly {
+  @nest .root.readOnly & {
     background-image: none;
     background: var(--input-bg-disabled);
   }
-
-  @nest &.focused {
-    box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px var(--brand-primary);
-  }
 }
 
 .previewAsset {

diff --git a/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx b/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx
@@ -367,30 +367,32 @@ export default class FileInput extends React.PureComponent<Props, FileInputState
             subtitle={<div>We're really sorry, but the upload could not be completed.</div>}
           />
         )}
-        <div>
-          <div className={styles.content}>
-            <ChangeIndicatorCompareValueProvider
-              value={value?.asset?._ref}
-              compareValue={compareValue?.asset?._ref}
-            >
-              <ChangeIndicator>
-                <div
-                  className={classNames(
-                    styles.assetWrapper,
-                    readOnly && styles.readOnly,
-                    hasFocus && styles.focused
-                  )}
-                >
+
+        <div
+          className={classNames(
+            styles.root,
+            readOnly && styles.readOnly,
+            hasFocus && styles.focused
+          )}
+        >
+          <ChangeIndicatorCompareValueProvider
+            value={value?.asset?._ref}
+            compareValue={compareValue?.asset?._ref}
+          >
+            <ChangeIndicator>
+              <div className={styles.content}>
+                <div className={styles.assetWrapper}>
                   {value && value._upload && (
                     <div className={styles.uploadState}>
                       {this.renderUploadState(value._upload)}
                     </div>
                   )}
                   {this.renderAsset()}
                 </div>
-              </ChangeIndicator>
-            </ChangeIndicatorCompareValueProvider>
-          </div>
+              </div>
+            </ChangeIndicator>
+          </ChangeIndicatorCompareValueProvider>
+
           <div className={styles.functions}>
             <ButtonGrid>
               {!readOnly && (