fix: remove height 100 from outer container

BREAKING CHANGE: consumers of JsonSchemaViewer are expected to control its height. It no longer has height: 100% on its outer element

Author: marbemac

package.json

@@ -36,18 +36,17 @@
   },
   "peerDependencies": {
     "@stoplight/markdown-viewer": "^3",
-    "@stoplight/tree-list": "^4",
-    "@stoplight/ui-kit": "^2",
+    "@stoplight/ui-kit": "^3",
     "mobx": "^5",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "dependencies": {
     "@stoplight/json": "^3.5.1",
+    "@stoplight/json-schema-merge-allof": "^0.6.0",
     "@stoplight/react-error-boundary": "^1.0.0",
-    "@stoplight/tree-list": "5.0.0-beta.2",
+    "@stoplight/tree-list": "file:.yalc/@stoplight/tree-list",
     "classnames": "^2.2.6",
-    "@stoplight/json-schema-merge-allof": "^0.6.0",
     "lodash": "^4.17.15",
     "mobx-react-lite": "^1.4.1",
     "pluralize": "^8.0.0"
@@ -60,7 +59,7 @@
     "@stoplight/scripts": "^8.2.0",
     "@stoplight/storybook-config": "^2.0.5",
     "@stoplight/types": "11.0.0",
-    "@stoplight/ui-kit": "^2.10.0",
+    "@stoplight/ui-kit": "3.0.0-beta.2",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "3.10.3",
     "@types/jest": "^24.0.18",

src/__stories__/JsonSchemaViewer.tsx

@@ -130,7 +130,9 @@ storiesOf('JsonSchemaViewer', module)
           },
           address: {
             type: [
+              // @ts-ignore
               'null',
+              // @ts-ignore
               {
                 type: 'object',
                 properties: {

src/components/JsonSchemaViewer.tsx

@@ -104,7 +104,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
     }
 
     return (
-      <div className={cn(className, 'JsonSchemaViewer flex flex-col h-full w-full relative')}>
+      <div className={cn(className, 'JsonSchemaViewer flex flex-col relative')}>
         <SchemaTreeComponent expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
       </div>
     );

src/components/shared/Caret.tsx

@@ -16,7 +16,7 @@ export const Caret: React.FunctionComponent<ICaret> = ({ style, size, isExpanded
     <Icon
       iconSize={size}
       icon={isExpanded ? 'caret-down' : 'caret-right'}
-      className="text-darken-9 dark:text-lighten-9"
+      className="text-darken-9 dark:text-lighten-7"
     />
   </span>
 );