diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts index e3a696ed11..533ccb01bc 100644 --- a/src/common-elements/fields-layout.ts +++ b/src/common-elements/fields-layout.ts @@ -62,7 +62,7 @@ export const PropertyNameCell = styled(PropertyCell)` vertical-align: top; line-height: 20px; white-space: nowrap; - font-size: 0.929em; + font-size: 13px; font-family: ${props => props.theme.typography.code.fontFamily}; &.deprecated { diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index ef1c07e8c1..8147dfd97b 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -5,8 +5,19 @@ import { PropertyNameCell } from './fields-layout'; import { ShelfIcon } from './shelfs'; export const ClickablePropertyNameCell = styled(PropertyNameCell)` - cursor: pointer; - + button { + background-color: transparent; + border: 0; + outline: 0; + font-size: 13px; + font-family: ${props => props.theme.typography.code.fontFamily}; + cursor: pointer; + padding: 0; + color: ${props => props.theme.colors.text.primary}; + &:focus { + font-weight: ${({ theme }) => theme.typography.fontWeightBold}; + } + } ${ShelfIcon} { height: ${({ theme }) => theme.schema.arrow.size}; width: ${({ theme }) => theme.schema.arrow.size}; diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index d1584b23de..53bedc772c 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -37,6 +37,14 @@ export class Field extends React.Component { this.props.field.toggle(); } }; + + handleKeyPress = e => { + if (e.key === 'Enter') { + e.preventDefault(); + this.toggle(); + } + }; + render() { const { className, field, isLast, expandByDefault } = this.props; const { name, deprecated, required, kind } = field; @@ -46,14 +54,19 @@ export class Field extends React.Component { const paramName = withSubSchema ? ( - {name} - + {required && required } ) : (