remove theme font from labels

src/common-elements/fields.ts

@@ -96,7 +96,6 @@ export const ConstraintItem = styled(FieldLabel)`
     margin: 0 ${theme.spacing.unit}px;
     padding: 0 ${theme.spacing.unit}px;
     border: 1px solid ${transparentize(0.9, theme.colors.primary.main)};
-    font-family: ${theme.typography.code.fontFamily};
 }`};
   & + & {
     margin-left: 0;

src/components/Fields/FieldDetail.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ExampleValue, FieldLabel } from '../../common-elements/fields';
 
 export interface FieldDetailProps {

src/components/Fields/FieldDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import * as React from 'react';
 
 import {
   RecursiveLabel,
@@ -25,7 +25,7 @@ import { Pattern } from './Pattern';
 import { ArrayItemDetails } from './ArrayItemDetails';
 
 function FieldDetailsComponent(props: FieldProps) {
-  const { enumSkipQuotes, hideSchemaTitles } = useContext(OptionsContext);
+  const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);
 
   const { showExamples, field, renderDiscriminatorSwitch } = props;
   const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
@@ -33,7 +33,7 @@ function FieldDetailsComponent(props: FieldProps) {
 
   const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate
 
-  const renderedExamples = useMemo<JSX.Element | null>(() => {
+  const renderedExamples = React.useMemo<JSX.Element | null>(() => {
     if (showExamples && (field.example !== undefined || field.examples !== undefined)) {
       if (field.examples !== undefined) {
         return <Examples field={field} />;

src/components/Fields/Pattern.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import * as React from 'react';
 import { PatternLabel, ToggleButton } from '../../common-elements/fields';
 import { OptionsContext } from '../OptionsProvider';
 import { SchemaModel } from '../../services';
@@ -7,9 +7,12 @@ const MAX_PATTERN_LENGTH = 45;
 
 export function Pattern(props: { schema: SchemaModel }) {
   const pattern = props.schema.pattern;
-  const { hideSchemaPattern } = useContext(OptionsContext);
+  const { hideSchemaPattern } = React.useContext(OptionsContext);
-  const [isPatternShown, setIsPatternShown] = useState(false);
+  const [isPatternShown, setIsPatternShown] = React.useState(false);
-  const togglePattern = useCallback(() => setIsPatternShown(!isPatternShown), [isPatternShown]);
+  const togglePattern = React.useCallback(
+    () => setIsPatternShown(!isPatternShown),
+    [isPatternShown],
+  );
 
   if (!pattern || hideSchemaPattern) return null;
 

src/utils/__tests__/__snapshots__/loadAndBundleSpec.test.ts.snap

@@ -277,10 +277,102 @@ Object {
             },
           },
           "name": Object {
-            "description": "The name given to a pet",
+            "description": "this is a description",
-            "example": "Guru",
+            "items": Object {
+              "maxLength": 80,
+              "type": "string",
+            },
+            "type": "array",
+          },
+          "name1": Object {
+            "description": "this is a description",
+            "items": Object {
+              "pattern": "^[a-z]$",
+              "type": "string",
+            },
+            "type": "array",
+          },
+          "name10": Object {
+            "description": "description",
+            "maxLength": 80,
+            "pattern": "^[a-f0-9]{8}-[a-f0-9]{4}-4[a-f0-9]{3}-[89aAbB][a-f0-9]{3}-[a-f0-9]{12}$",
             "type": "string",
           },
+          "name2": Object {
+            "description": "this is a description",
+            "items": Object {
+              "maxLength": 80,
+              "minLength": 2,
+              "type": "string",
+            },
+            "type": "array",
+          },
+          "name3": Object {
+            "description": "this is a description",
+            "items": Object {
+              "maxLength": 80,
+              "minLength": 2,
+              "pattern": "^[a-z]$",
+              "type": "string",
+            },
+            "type": "array",
+          },
+          "name4": Object {
+            "description": "this is a description",
+            "items": Object {
+              "multipleOf": 5,
+              "type": "integer",
+            },
+            "maxItems": 5,
+            "type": "array",
+          },
+          "name5": Object {
+            "description": "this is a description",
+            "items": Object {
+              "maximum": 10,
+              "multipleOf": 5,
+              "type": "integer",
+            },
+            "type": "array",
+          },
+          "name6": Object {
+            "description": "this is a description",
+            "items": Object {
+              "maximum": 10,
+              "minimum": 5,
+              "multipleOf": 5,
+              "type": "integer",
+            },
+            "type": "array",
+          },
+          "name7": Object {
+            "description": "this is a description",
+            "items": Object {
+              "maximum": 100,
+              "minimum": 1,
+              "type": "integer",
+            },
+            "type": "array",
+          },
+          "name8": Object {
+            "description": "this is a description",
+            "items": Object {
+              "exclusiveMaximum": true,
+              "maximum": 100,
+              "minimum": 1,
+              "type": "integer",
+            },
+            "type": "array",
+          },
+          "name9": Object {
+            "description": "this is a description",
+            "items": Object {
+              "exclusiveMaximum": 100,
+              "minimum": 1,
+              "type": "integer",
+            },
+            "type": "array",
+          },
           "petType": Object {
             "description": "Type of a pet",
             "type": "string",

tsconfig.json

@@ -15,8 +15,7 @@
     "pretty": true,
     "lib": ["es2015", "es2016", "es2017", "dom", "WebWorker.ImportScripts"],
     "jsx": "react",
-    "types": ["webpack", "webpack-env", "jest"],
+    "types": ["webpack", "webpack-env", "jest"]
-    "allowSyntheticDefaultImports": true
   },
   "compileOnSave": false,
   "exclude": ["node_modules", ".tmp", "lib", "e2e/**"],