fix: ui fixes (#127)

* chore: ui fixes * test: update snapshots * fix: snapshots * test: update snapshot * chore: export validations * fix: carret and item name * fix: more snapshots
stoplightio · Apr 7, 2021 · 3c5029e · 3c5029e
1 parent a60a6d3
commit 3c5029e
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 121 deletions.
diff --git a/src/__tests__/__snapshots__/index.spec.tsx.snap b/src/__tests__/__snapshots__/index.spec.tsx.snap
diff --git a/src/__tests__/index.spec.tsx b/src/__tests__/index.spec.tsx
@@ -238,7 +238,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -263,7 +263,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -306,7 +306,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -401,7 +401,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -426,7 +426,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -485,7 +485,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -624,7 +624,7 @@ describe('Expanded depth', () => {
         expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
           "<div class=\\"\\">
             <div class=\\"JsonSchemaViewer\\">
-              <div style=\\"margin-left: 20px\\">
+              <div>
                 <div>
                   <div>
                     <div>
@@ -678,7 +678,7 @@ describe('$ref resolving', () => {
     expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
       "<div class=\\"\\">
         <div class=\\"JsonSchemaViewer\\">
-          <div style=\\"margin-left: 20px\\">
+          <div>
             <div>
               <div>
                 <div>
@@ -707,7 +707,7 @@ describe('$ref resolving', () => {
     expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
       "<div class=\\"\\">
         <div class=\\"JsonSchemaViewer\\">
-          <div style=\\"margin-left: 20px\\">
+          <div>
             <div>
               <div>
                 <div>

diff --git a/src/components/JsonSchemaViewer.tsx b/src/components/JsonSchemaViewer.tsx
@@ -66,7 +66,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
         <ChildStack
           childNodes={jsonSchemaTreeRoot.children}
           currentNestingLevel={-1}
-          className={cn(className, 'JsonSchemaViewer', 'sl-mr-5')}
+          className={cn(className, 'JsonSchemaViewer')}
         />
       </JSVOptionsContextProvider>
     </MosaicProvider>

diff --git a/src/components/SchemaRow/SchemaRow.tsx b/src/components/SchemaRow/SchemaRow.tsx
@@ -3,6 +3,7 @@ import {
   isMirroredNode,
   isReferenceNode,
   isRegularNode,
+  isRootNode,
   ReferenceNode,
   SchemaNode,
   SchemaNodeKind,
@@ -56,9 +57,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
   const isBrokenRef = typeof refNode?.error === 'string';
 
   const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
-
   return (
-    <div className="sl-text-sm sl-relative" style={{ marginLeft: CARET_ICON_BOX_DIMENSION }}>
+    <div
+      className="sl-text-sm sl-relative"
+      style={{
+        ...(schemaNode.parent && !isRootNode(schemaNode.parent) ? { marginLeft: CARET_ICON_BOX_DIMENSION } : null),
+      }}
+    >
       <div className="sl-flex">
         <div className="sl-min-w-0 sl-flex-grow">
           <div
@@ -85,7 +90,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
                 />
               ) : null}
 
-              <div className="sl-flex sl-items-center sl-text-base sl-flex-1">
+              <div className="sl-flex sl-items-baseline sl-text-base sl-flex-1">
                 {schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
                   <div className="sl-mr-2 sl-font-mono sl-font-bold">{last(schemaNode.subpath)}</div>
                 )}
@@ -137,7 +142,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
             </div>
 
             {typeof description === 'string' && description.length > 0 && (
-              <div className="sl-flex sl-flex-1 sl-my-2 sl-py-px">
+              <div className="sl-flex sl-flex-1 sl-my-2 sl-text-base">
                 <Description value={description} />
               </div>
             )}

diff --git a/src/components/shared/Caret.tsx b/src/components/shared/Caret.tsx
@@ -10,7 +10,7 @@ export interface ICaret {
 
 export const Caret: React.FunctionComponent<ICaret> = ({ style, size, isExpanded }) => (
   <div
-    className="sl-flex sl-absolute sl-justify-center sl-p-1 sl-cursor-pointer sl-text-muted"
+    className="sl-flex sl-absolute sl-justify-center sl-items-center sl-p-1 sl-cursor-pointer sl-text-muted"
     style={style}
     role="button"
   >

diff --git a/src/components/shared/Validations.tsx b/src/components/shared/Validations.tsx
@@ -1,5 +1,6 @@
 import { RegularNode } from '@stoplight/json-schema-tree';
 import { Dictionary } from '@stoplight/types';
+import cn from 'classnames';
 import { capitalize, keys, omit, pick, pickBy, uniq } from 'lodash';
 import * as React from 'react';
 
@@ -99,9 +100,7 @@ const NumberValidations = ({
       {entries
         .map(([key, value]) => numberValidationFormatters[key](value))
         .map((value, i) => (
-          <span key={i} className="sl-mr-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
-            {value}
-          </span>
+          <Value key={i} name={value} className="sl-mr-2" />
         ))}
     </div>
   );
@@ -127,30 +126,35 @@ const KeyValueValidation = ({ name, values }: { name: string; values: string[] }
     <div className="sl-flex sl-flex-wrap sl-text-muted sl-my-2">
       <span className="sl-text-light">{capitalize(name)}:</span>
       {uniq(values).map(value => (
-        <span key={value} className="sl-ml-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
-          {value}
-        </span>
+        <Value key={value} name={value} className="sl-ml-2" />
       ))}
     </div>
   );
 };
 
 const NameValidations = ({ validations }: { validations: Dictionary<unknown> }) => (
   <>
-    {keys(validations)
-      .filter(key => validations[key])
-      .map(key => {
-        return (
-          <div className="sl-flex sl-flex-1 sl-my-2" key={key}>
-            <span className="sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize">
-              {key}
-            </span>
-          </div>
-        );
-      })}
+    {keys(validations).length ? (
+      <div className="sl-flex sl-flex-wrap sl-my-2">
+        {keys(validations)
+          .filter(key => validations[key])
+          .map(key => (
+            <Value key={key} name={key} className="sl-mr-2 sl-text-muted sl-capitalize" />
+          ))}
+      </div>
+    ) : null}
   </>
 );
 
+const Value = ({ name, className }: { name: string; className?: string }) => (
+  <span
+    className={cn('sl-px-1 sl-font-mono sl-border sl-rounded-lg', className)}
+    style={{ backgroundColor: '#EDF2F7' }}
+  >
+    {name}
+  </span>
+);
+
 export function validationCount(schemaNode: RegularNode) {
   const validations = getValidationsFromSchema(schemaNode);
   const validationKeys = keys(omit(validations, excludedValidations));