diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts index 43cd8f8d38..2c0114b335 100644 --- a/src/common-elements/fields-layout.ts +++ b/src/common-elements/fields-layout.ts @@ -1,5 +1,5 @@ import { transparentize } from 'polished'; -import styled from '../styled-components'; +import styled, { withProps } from '../styled-components'; import { deprecatedCss } from './mixins'; export const PropertiesTableCaption = styled.caption` @@ -57,7 +57,7 @@ export const PropertyCellWithInner = PropertyCell.extend` padding: 0; `; -export const PropertyNameCell = PropertyCell.extend` +export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend)` vertical-align: top; line-height: 20px; white-space: nowrap; @@ -68,6 +68,8 @@ export const PropertyNameCell = PropertyCell.extend` &.deprecated { ${deprecatedCss}; } + + ${({ kind }) => (kind !== 'field' ? 'font-style: italic' : '')}; `; export const PropertyDetailsCell = styled.td` diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index 102f98d8af..65e6f4bc06 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -32,23 +32,29 @@ export class Field extends React.PureComponent { }; render() { const { className, field, isLast } = this.props; - const { name, expanded, deprecated, required } = field; + const { name, expanded, deprecated, required, kind } = field; const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular; const paramName = withSubSchema ? ( - + {name} {required && required } ) : ( - + {name} {required && required } ); + return ( <> diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index 0daf93a6a1..a8cbccbee3 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -11,6 +11,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat "example": undefined, "expanded": false, "in": undefined, + "kind": "field", "name": "packSize", "required": false, "schema": SchemaModel { @@ -57,6 +58,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat "example": undefined, "expanded": false, "in": undefined, + "kind": "field", "name": "type", "required": true, "schema": SchemaModel { diff --git a/src/services/models/Field.ts b/src/services/models/Field.ts index cec5ab5cb1..b240584479 100644 --- a/src/services/models/Field.ts +++ b/src/services/models/Field.ts @@ -19,14 +19,16 @@ export class FieldModel { example?: string; deprecated: boolean; in?: string; + kind: string; constructor( parser: OpenAPIParser, - infoOrRef: Referenced & { name?: string }, + infoOrRef: Referenced & { name?: string; kind?: string }, pointer: string, options: RedocNormalizedOptions, ) { const info = parser.deref(infoOrRef); + this.kind = infoOrRef.kind || 'field'; this.name = infoOrRef.name || info.name; this.in = info.in; this.required = !!info.required; diff --git a/src/services/models/Schema.ts b/src/services/models/Schema.ts index 074770ec8c..8f50c51b93 100644 --- a/src/services/models/Schema.ts +++ b/src/services/models/Schema.ts @@ -244,9 +244,10 @@ function buildFields( new FieldModel( parser, { - name: '[property name] *', + name: 'property name *', required: false, schema: additionalProps, + kind: 'additionalProperties', }, $ref + '/additionalProperties', options,