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

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

Hide file tree

Showing 2 changed files with 31 additions and 34 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css
@@ -1,12 +1,28 @@
 @import 'part:@sanity/base/theme/variables-style';
 
-.imageInput {
-  /* for debugging */
+.root {
 }
 
 .content {
   position: relative;
   padding-bottom: calc(2 / 3 * 100%);
+
+  &::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);
+  }
 }
 
 .assetWrapper {
@@ -25,26 +41,10 @@
   border-radius: var(--input-border-radius);
   overflow: hidden;
 
-  &::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);
-  }
 }
 
 .fieldWrapper {
@@ -71,13 +71,10 @@
 
 .functions {
   composes: functions from 'part:@sanity/components/fieldsets/default-style';
+  margin-top: var(--small-padding);
 
-  @nest .contentContainer + & {
-    margin-top: var(--small-padding);
-
-    @media (--screen-medium) {
-      margin-top: var(--medium-padding);
-    }
+  @media (--screen-medium) {
+    margin-top: var(--medium-padding);
   }
 }
 

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx
@@ -595,7 +595,13 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
         useChangeIndicator={false}
         {...uploadProps}
       >
-        <div className={styles.imageInput}>
+        <div
+          className={classNames(
+            styles.root,
+            readOnly && styles.readOnly,
+            hasFocus && styles.focused
+          )}
+        >
           {uploadError && (
             <Snackbar
               kind="error"
@@ -611,15 +617,9 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
             value={value?.asset?._ref}
             compareValue={compareValue?.asset?._ref}
           >
-            <ChangeIndicator className={styles.contentContainer}>
+            <ChangeIndicator>
               <div className={styles.content}>
-                <div
-                  className={classNames(
-                    styles.assetWrapper,
-                    readOnly && styles.readOnly,
-                    hasFocus && styles.focused
-                  )}
-                >
+                <div className={styles.assetWrapper}>
                   {value && value._upload && (
                     <div className={styles.uploadState}>
                       {this.renderUploadState(value._upload)}