classNames

This commit is contained in:
Cameron Koegel 2022-09-09 12:02:19 -04:00
parent 5e1496efa6
commit db846052d8
7 changed files with 9 additions and 8 deletions

View File

@ -27,7 +27,7 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
<> <>
{options.showExtensions && {options.showExtensions &&
Object.keys(exts).map(key => ( Object.keys(exts).map(key => (
<Extension key={key} className="operation-extension"> <Extension key={key} className="extension">
<FieldLabel> {key.substring(2)}: </FieldLabel>{' '} <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
<ExtensionValue> <ExtensionValue>
{typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])} {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}

View File

@ -11,7 +11,7 @@ export class ConstraintsView extends React.PureComponent<ConstraintsViewProps> {
return null; return null;
} }
return ( return (
<span> <span className="field-constraints">
{' '} {' '}
{this.props.constraints.map(constraint => ( {this.props.constraints.map(constraint => (
<ConstraintItem key={constraint}> {constraint} </ConstraintItem> <ConstraintItem key={constraint}> {constraint} </ConstraintItem>

View File

@ -16,7 +16,8 @@ function FieldDetailComponent({ value, label, raw }: FieldDetailProps) {
return ( return (
<div> <div>
<FieldLabel> {label} </FieldLabel> <ExampleValue>{stringifyValue}</ExampleValue> <FieldLabel> {label} </FieldLabel>{' '}
<ExampleValue className="field-example">{stringifyValue}</ExampleValue>
</div> </div>
); );
} }

View File

@ -53,7 +53,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
}, [field, showExamples]); }, [field, showExamples]);
return ( return (
<div> <div className="field-details">
<div> <div>
<TypePrefix>{schema.typePrefix}</TypePrefix> <TypePrefix>{schema.typePrefix}</TypePrefix>
<TypeName>{schema.displayType}</TypeName> <TypeName>{schema.displayType}</TypeName>
@ -88,7 +88,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
{isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />} {isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />}
</div> </div>
{deprecated && ( {deprecated && (
<div> <div className="field-deprecated">
<Badge type="warning"> {l('deprecated')} </Badge> <Badge type="warning"> {l('deprecated')} </Badge>
</div> </div>
)} )}

View File

@ -18,7 +18,7 @@ export function Pattern(props: { schema: SchemaModel }) {
return ( return (
<> <>
<PatternLabel> <PatternLabel className="field-pattern">
{isPatternShown || pattern.length < MAX_PATTERN_LENGTH {isPatternShown || pattern.length < MAX_PATTERN_LENGTH
? pattern ? pattern
: `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`} : `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`}

View File

@ -28,7 +28,7 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
); );
return ( return (
<div> <div className="response">
<StyledResponseTitle <StyledResponseTitle
onClick={() => response.toggle()} onClick={() => response.toggle()}
type={type} type={type}

View File

@ -19,7 +19,7 @@ export class ResponseHeaders extends React.PureComponent<ResponseHeadersProps> {
return ( return (
<PropertiesTable> <PropertiesTable>
<HeadersCaption> Response Headers </HeadersCaption> <HeadersCaption> Response Headers </HeadersCaption>
<tbody> <tbody className="response-headers">
{mapWithLast(headers, (header, isLast) => ( {mapWithLast(headers, (header, isLast) => (
<Field isLast={isLast} key={header.name} field={header} showExamples={true} /> <Field isLast={isLast} key={header.name} field={header} showExamples={true} />
))} ))}