[components] Align validation status element

sanity-io · Oct 6, 2020 · 1828849 · 1828849
1 parent be4e960
commit 1828849
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/@sanity/components/src/@types/parts.d.ts b/packages/@sanity/components/src/@types/parts.d.ts
@@ -316,6 +316,9 @@ declare module 'part:@sanity/base/visibility-icon' {
 declare module 'part:@sanity/base/warning-icon' {
   export {default} from '@sanity/base/src/components/icons/Warning'
 }
+declare module 'part:@sanity/base/warning-outline-icon' {
+  export {default} from '@sanity/base/src/components/icons/WarningOutline'
+}
 
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 // Because `@sanity/components` depends on `@sanity/base` we need these "ambient" definitions

diff --git a/packages/@sanity/components/src/fieldsets/DefaultFieldset.css b/packages/@sanity/components/src/fieldsets/DefaultFieldset.css
@@ -148,6 +148,16 @@
   cursor: default;
 }
 
+.labelContainer {
+  outline: none;
+  display: flex;
+  align-items: center;
+}
+
+.validationStatus {
+  margin: -5px 0 -4px;
+}
+
 .label {
   padding-right: var(--small-padding);
 }

diff --git a/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx b/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx
@@ -157,9 +157,9 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
                   onKeyDown={event => (event.key === 'Enter' ? this.handleToggle() : false)}
                 >
                   <div
-                    tabIndex={-1}
+                    className={styles.labelContainer}
                     onClick={isCollapsible ? this.handleToggle : undefined}
-                    style={{outline: 'none', display: 'flex', alignItems: 'center'}}
+                    tabIndex={-1}
                   >
                     {isCollapsible && (
                       <div className={`${styles.arrow} ${isCollapsed ? '' : styles.isOpen}`}>
@@ -171,6 +171,7 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
                     </DefaultLabel>
                   </div>
                   <ValidationStatus
+                    className={styles.validationStatus}
                     markers={
                       showSummary
                         ? validation.filter(marker => marker.path.length <= level)