[form-builder][components] Fix various UI forms issues (#2001)

* [components] fix minor boolean visuals * [components] fix too much spacing between some fields (#1984) * [components] fix collapsible object arrow alignment * [components] Fix size of switch input * [components] Fix alignment of checkbox component * [components][form-builder][base] Unify form elements' focus effects * [components] Adjust spacing between fieldsets, fields and labels * [form-builder][components] Fix checkbox boolean spacing * [components] Fix switch label alignment * [components] Fix border issue in SearchableSelect * [components][form-builder] Improve link icon in SearchableSelect * [base] Add animations to default clear buttons hover and active states * [components] Fix focus state of StyleSelect * [components] Fix spacing of items in RadioSelect * [base] Remove red ring when field with error is focused * [components] Add spacing above form labels' descriptions * [form-builder] Fix alignment of delete button in image grid array * [components] Change styles of tags to better fit other designs Co-authored-by: vicbergquist <victoria.bergquist@gmail.com>
sanity-io · Sep 9, 2020 · 733fc25 · 733fc25 · vercel · Sep 9, 2020
1 parent 893592e
commit 733fc25
Show file tree

Hide file tree

Showing 24 changed files with 73 additions and 51 deletions.
diff --git a/packages/@sanity/base/src/styles/forms/clear-button.css b/packages/@sanity/base/src/styles/forms/clear-button.css
@@ -12,15 +12,16 @@
   margin: 0;
   display: inline-flex;
   align-items: center;
+  transition: transform 0.1s;
 
   &:hover,
   &:focus {
     color: var(--clear-cross-color-hover);
-    transform: scale(1.5);
+    transform: scale(1.3);
   }
 
   &:active {
-    transform: scale(2);
+    transform: scale(1.6);
   }
 
   @nest & svg {

diff --git a/packages/@sanity/base/src/styles/forms/text-input.css b/packages/@sanity/base/src/styles/forms/text-input.css
@@ -47,7 +47,7 @@
     }
 
     @nest &:focus, &:focus-within {
-      box-shadow: var(--input-box-shadow--focus);
+      box-shadow: var(--input-box-shadow-thin--focus);
       background-color: var(--input-bg-focus);
       border-color: var(--input-border-color-focus);
 

diff --git a/packages/@sanity/base/src/styles/variables/forms.css b/packages/@sanity/base/src/styles/variables/forms.css
@@ -19,21 +19,20 @@
   --input-border-radius-large: var(--border-radius-large);
   --input-border-radius-small: var(--border-radius-small);
   --input-border-color-hover: var(--gray-light);
-  --input-border-color-focus: transparent;
-  --input-border-color-active: color(var(--brand-primary) a(50%));
+  --input-border-color-focus: var(--brand-primary);
+  --input-border-color-active: var(--brand-primary);
   --input-border-color-invalid: color(var(--state-danger-color) a(50%));
   --input-color-placeholder: var(--gray-lighter);
   --input-box-shadow-base: var(--gray);
   --input-box-shadow: none;
   --input-box-shadow--hover: none;
-  --input-box-shadow--focus: 0 0 0 1px var(--component-bg),
-    0 0 0 3px color(var(--brand-primary) a(50%));
+  --input-box-shadow--focus: 0 0 0 2px var(--brand-primary);
+  --input-box-shadow-thin--focus: 0 0 0 1px var(--brand-primary);
   --input-box-shadow--invalid: none;
-  --input-box-shadow--invalid-focus: 0 0 0 1px var(--component-bg),
-    0 0 0 3px color(var(--state-danger-color) a(50%));
+  --input-box-shadow--invalid-focus: 0 0 0 1px var(--brand-primary);
 
   /* Focus */
-  --focus-color: color(var(--brand-primary) alpha(40%));
+  --focus-color: var(--brand-primary);
 
   /* Label */
   --label-color: var(--text-color);

diff --git a/packages/@sanity/components/src/buttons/styles/DefaultButton.css b/packages/@sanity/components/src/buttons/styles/DefaultButton.css
@@ -13,7 +13,7 @@
   /* :focus */
   --color-button-focus-bg: color(var(--color-button-bg) lightness(- 5%));
   --color-button-focus-shadow: 0 0 0 1px var(--component-bg),
-    0 0 0 3px color(var(--brand-primary) alpha(50%));
+    0 0 0 3px var(--brand-primary);
   /* :hover */
   --color-button-hover-bg: color(var(--color-button-bg) lightness(- 5%));
   /* :active */

diff --git a/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css b/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css
@@ -9,10 +9,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-gap: var(--large-padding) var(--medium-padding);
-
-  @media (--screen-medium) {
-    grid-gap: var(--extra-large-padding) var(--medium-padding);
-  }
 }
 
 .fieldset {
@@ -27,7 +23,6 @@
   display: flex;
   align-items: center;
   margin-bottom: var(--small-padding);
-  padding: var(--extra-small-padding) 0;
 }
 
 .headerMain {
@@ -40,7 +35,7 @@
 
 .description {
   composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
-  margin: 0;
+  margin: var(--extra-small-padding) 0 0;
   padding: 0;
   display: block;
 }
@@ -129,7 +124,7 @@
   vertical-align: middle;
   transition: transform 0.1s linear;
   transform: rotate(-90deg);
-  margin-top: -0.1em;
+  margin-top: 1px;
 
   @nest &.isOpen {
     transform: rotate(0);

diff --git a/packages/@sanity/components/src/fileinput/DefaultFileInput.css b/packages/@sanity/components/src/fileinput/DefaultFileInput.css
@@ -1,6 +1,5 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root:not(:focus):focus-within > span:not(:focus) {
-  box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px color(var(--brand-primary) alpha(50%));
-  border-color: transparent !important;
+  box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px var(--brand-primary);
 }
diff --git a/packages/@sanity/components/src/formfields/styles/DefaultFormField.css b/packages/@sanity/components/src/formfields/styles/DefaultFormField.css
@@ -45,6 +45,7 @@
 
 .description {
   composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
+  margin-top: var(--extra-small-padding);  
 
   /* @nest .inline & {
     font-size: var(--font-size-tiny);
@@ -58,8 +59,7 @@
 .header {
   display: flex;
   align-items: center;
-  padding: var(--extra-small-padding) 0;
-  margin-bottom: var(--small-padding);
+  padding: 0 0 var(--small-padding);
 }
 
 .headerMain {

diff --git a/packages/@sanity/components/src/selects/styles/DefaultSelect.css b/packages/@sanity/components/src/selects/styles/DefaultSelect.css
@@ -48,7 +48,7 @@
     }
 
     @nest &:focus, &:focus-within {
-      box-shadow: var(--input-box-shadow--focus);
+      box-shadow: var(--input-box-shadow-thin--focus);
       border-color: var(--input-border-color-focus);
     }
 

diff --git a/packages/@sanity/components/src/selects/styles/RadioSelect.css b/packages/@sanity/components/src/selects/styles/RadioSelect.css
@@ -4,7 +4,7 @@
   display: flex;
   border: var(--input-border-size) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
-  padding: var(--medium-padding);
+  padding: var(--medium-padding) var(--medium-padding) 0;
 }
 
 .vertical {
@@ -21,5 +21,6 @@
 }
 
 .item {
-  margin-right: 1rem;
+  margin-right: var(--medium-padding);
+  margin-bottom: var(--medium-padding);
 }
diff --git a/packages/@sanity/components/src/selects/styles/SearchableSelect.css b/packages/@sanity/components/src/selects/styles/SearchableSelect.css
@@ -49,6 +49,8 @@
 
 .functions {
   composes: functions from 'part:@sanity/components/selects/default-style';
+  border: 1px solid transparent;
+  box-sizing: border-box;
 }
 
 .popper {
@@ -110,8 +112,7 @@
 .openItem {
   display: flex;
   align-items: center;
-  transition: transform 0.1s linear, opacity 0.1s linear;
-  opacity: 0.6;
+  transition: transform 0.1s;
   cursor: pointer;
   outline: none;
 

diff --git a/packages/@sanity/components/src/selects/styles/StyleSelect.css b/packages/@sanity/components/src/selects/styles/StyleSelect.css
@@ -38,7 +38,8 @@
       }
 
       @nest &:focus {
-        box-shadow: var(--input-box-shadow--focus);
+        box-shadow: var(--input-box-shadow-thin--focus);
+        border-color: var(--brand-primary);
       }
     }
   }

diff --git a/packages/@sanity/components/src/tags/styles/TextField.css b/packages/@sanity/components/src/tags/styles/TextField.css
@@ -30,10 +30,9 @@
 
 .tag {
   display: inline-block;
-  background-color: var(--gray-lightest);
+  background-color: color(var(--gray) alpha(10%));
   border-radius: var(--border-radius-small);
-  color: var(--gray-dark);
-  border: 1px solid var(--gray-light);
+  color: var(--gray-darker);
   box-sizing: border-box;
   padding: 0 0.5em;
   font-size: 1em;
@@ -49,11 +48,13 @@
 
 .clearTag {
   right: 0;
-  top: 0;
+  top: -0.05em;
+  position: relative;
   cursor: pointer;
   height: 100%;
   font-size: 1em;
   padding-left: 0.5em;
+  color: var(--gray-dark);
 
   @nest &:hover {
     color: var(--state-danger-color);

diff --git a/packages/@sanity/components/src/toggles/Checkbox.css b/packages/@sanity/components/src/toggles/Checkbox.css
@@ -13,7 +13,6 @@
 .root {
   position: relative;
   display: flex;
-  margin-bottom: var(--small-padding);
 }
 
 .input {
@@ -40,14 +39,12 @@
   border: 1px solid var(--checkbox-off-color);
   border-radius: 3px;
   margin-top: 1px;
-  margin-right: var(--small-padding);
   line-height: 1;
 
   @nest & .mark {
     position: absolute;
     top: calc((100% - var(--checkbox-button-size)) / 2);
     left: calc((100% - var(--checkbox-button-size)) / 2);
-    transform: scale(0.5);
     opacity: 0;
     flex: 1;
     height: var(--checkbox-button-size);
@@ -83,7 +80,6 @@
 .input:checked + .checkbox {
   @nest & .checkmark {
     opacity: 1;
-    transform: scale(0.8);
   }
 }
 

diff --git a/packages/@sanity/components/src/toggles/Checkbox.tsx b/packages/@sanity/components/src/toggles/Checkbox.tsx
@@ -55,22 +55,23 @@ export default React.forwardRef(function Checkbox(
       <div className={styles.checkbox}>
         <svg
           className={`${styles.mark} ${styles.checkmark}`}
-          viewBox="0 0 12 10"
+          viewBox="0 0 16 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M0.73999 4.5L4.13999 7.9L10.6 1.44" stroke="currentColor" strokeWidth="2" />
+          <path d="M3 7.5L6.5 11L13 4.5" stroke="currentColor" strokeWidth="2" />
         </svg>
         <svg
           className={`${styles.mark} ${styles.indeterminate}`}
-          viewBox="0 0 9 3"
+          viewBox="0 0 16 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M0.0799561 1.5H8.91996" stroke="currentColor" strokeWidth="2" />
+          <path d="M12 8H4" stroke="currentColor" strokeWidth="2" />
         </svg>
       </div>
-      <div>
+      {label && (
+      <div className={sharedStyles.label}>
         <div className={sharedStyles.titleWrapper}>
           <label className={sharedStyles.title} htmlFor={`checkbox-${elementId}-input`}>
             {label}
@@ -83,6 +84,7 @@ export default React.forwardRef(function Checkbox(
           </div>
         )}
       </div>
+      )}
     </div>
   )
 })
diff --git a/packages/@sanity/components/src/toggles/Switch.css b/packages/@sanity/components/src/toggles/Switch.css
@@ -6,15 +6,15 @@
   --focus-color: var(--brand-primary);
 
   /* Thumb */
-  --thumb-size: calc(var(--track-height) * 0.7);
+  --thumb-size: 1rem;
   --thumb-color: var(--switch-color);
   --thumb-off-color: var(--white);
   --thumb-on-color: var(--white);
   --thumb-disabled-color: var(--input-color-disabled);
   --thumb-offset: 4px;
   /* Track */
-  --track-height: 1.4em;
-  --track-width: 2.5em;
+  --track-height: 1.5rem;
+  --track-width: 2.5rem;
   --track-disabled-color: var(--input-bg-disabled);
   --track-color: var(--gray-light);
   --track-off-color: var(--gray);
@@ -25,6 +25,7 @@
 .root {
   position: relative;
   display: flex;
+  align-items: center;
 }
 
 .input {
@@ -44,7 +45,6 @@
 .switchWrapper {
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--small-padding);
   height: var(--track-height);
   width: var(--track-width);
   border-radius: var(--track-height);
@@ -58,7 +58,7 @@
   top: calc((100% - var(--thumb-size)) / 2);
   height: var(--thumb-size);
   width: var(--thumb-size);
-  border-radius: var(--thumb-size);
+  border-radius: 50%;
   cursor: default;
   composes: animation-default from 'part:@sanity/base/theme/animation-style';
   transform-origin: left;

diff --git a/packages/@sanity/components/src/toggles/Switch.tsx b/packages/@sanity/components/src/toggles/Switch.tsx
@@ -45,7 +45,8 @@ export default React.forwardRef(function Switch(
         <div className={styles.track} />
         <div className={styles.thumb} />
       </div>
-      <div>
+      {label && (
+      <div className={sharedStyles.label}>
         <div className={sharedStyles.titleWrapper}>
           <label className={sharedStyles.title} htmlFor={`switch-${elementId}-input`}>
             {label}
@@ -58,6 +59,7 @@ export default React.forwardRef(function Switch(
           </div>
         )}
       </div>
+      )}
     </div>
   )
 })
diff --git a/packages/@sanity/components/src/toggles/shared.css b/packages/@sanity/components/src/toggles/shared.css
@@ -6,7 +6,15 @@
   z-index: 1;
 }
 
+.label {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: var(--small-padding);
+}
+
 .title {
+  composes: label from 'part:@sanity/base/theme/typography/forms-style';
   padding-right: var(--small-padding);
 }
 

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/styles/ItemValue.css b/packages/@sanity/form-builder/src/inputs/ArrayInput/styles/ItemValue.css
@@ -98,7 +98,7 @@
 .functionsInGrid {
   composes: functions;
   position: absolute;
-  top: var(--extra-small-padding);
+  top: var(--small-padding);
   right: var(--extra-small-padding);
   z-index: 1;
   color: var(--text-color);

diff --git a/packages/@sanity/form-builder/src/inputs/DateInputs/styles/BaseDateTimeInput.css b/packages/@sanity/form-builder/src/inputs/DateInputs/styles/BaseDateTimeInput.css
@@ -27,7 +27,7 @@
   }
 
   @nest &:focus, &:focus-within {
-    box-shadow: var(--input-box-shadow--focus);
+    box-shadow: var(--input-box-shadow-thin--focus);
     background-color: var(--input-bg-focus);
     border-color: var(--input-border-color-focus);
 

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css
@@ -46,7 +46,7 @@
   }
 
   @nest &.focused {
-    box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px color(var(--brand-primary) alpha(50%));
+    box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px var(--brand-primary);
   }
 }
 

diff --git a/packages/@sanity/form-builder/src/inputs/OptionsArrayInput/OptionsArrayInput.tsx b/packages/@sanity/form-builder/src/inputs/OptionsArrayInput/OptionsArrayInput.tsx
@@ -123,7 +123,10 @@ export default class OptionsArrayInput extends React.PureComponent<OptionsArrayI
               }
               const checked = inArray(value, resolveValueWithLegacyOptionsSupport(option))
               return (
-                <div key={option._key || index}>
+                <div
+                  className={direction === 'vertical' ? styles.itemVertical : ''}
+                  key={option._key || index}
+                >
                   <Item
                     type={optionType}
                     readOnly={readOnly}